@extends('frontend.layouts.app')
@section('title', $user->name . ' — Profil — Animexe')
@push('styles')
<style>
/* ═══════════════════════════ PROFILE ═══════════════════════════ */

/* ── Hero banner ──────────────────────────────────────────────── */
.pr-hero{
  position:relative;overflow:hidden;
  background:#05050e;
  padding-bottom:0;
}
.pr-hero-bg{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 50%, rgba(0,245,255,.06), transparent),
    radial-gradient(ellipse 60% 80% at 80% 30%, rgba(255,45,125,.05), transparent);
}
.pr-hero-inner{
  position:relative;z-index:1;
  max-width:960px;margin:0 auto;
  padding:calc(var(--nav-h) + 32px) 24px 0;
}
.pr-top{display:flex;align-items:flex-start;gap:20px;flex-wrap:wrap;margin-bottom:28px}
.pr-top-main{display:flex;align-items:flex-end;gap:20px;flex:1;min-width:0}

/* ── Avatar ───────────────────────────────────────────────────── */
.pr-avatar{
  width:96px;height:96px;border-radius:24px;flex-shrink:0;
  background:linear-gradient(135deg,var(--accent2),var(--accent));
  display:flex;align-items:center;justify-content:center;
  font-size:2.4rem;font-weight:900;color:#fff;overflow:hidden;
  box-shadow:0 0 0 3px rgba(0,245,255,.2),0 16px 48px rgba(0,0,0,.5);
}
.pr-info{flex:1;min-width:0;padding-bottom:4px}
.pr-name{font-size:1.7rem;font-weight:900;color:#fff;line-height:1.1;margin-bottom:4px}
.pr-handle{font-size:.84rem;color:rgba(255,255,255,.35);margin-bottom:10px}
.pr-badges{display:flex;gap:7px;flex-wrap:wrap}
.pbadge{padding:4px 12px;border-radius:20px;font-size:.7rem;font-weight:700;letter-spacing:.05em;display:inline-flex;align-items:center;gap:5px}
.pbadge-admin{background:rgba(255,45,125,.15);border:1px solid rgba(255,45,125,.35);color:var(--accent)}
.pbadge-premium{background:rgba(255,208,0,.12);border:1px solid rgba(255,208,0,.3);color:#ffd700}
.pbadge-member{background:rgba(0,245,255,.07);border:1px solid rgba(0,245,255,.2);color:var(--accent2)}

/* ── Stat pills ───────────────────────────────────────────────── */
.pr-stats{
  display:flex;gap:6px;flex-wrap:wrap;
  padding:20px 0 0;
  border-top:1px solid rgba(255,255,255,.06);
  margin-top:8px;
}
.pr-stat{
  display:flex;flex-direction:column;align-items:center;
  padding:10px 20px;border-radius:12px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);
  min-width:80px;flex:1;
}
.pr-stat .v{font-size:1.25rem;font-weight:800;color:#fff;line-height:1}
.pr-stat .l{font-size:.62rem;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.35);margin-top:4px;font-weight:600}

/* ── Tab nav ──────────────────────────────────────────────────── */
.pr-tabs{
  display:flex;gap:2px;
  border-top:1px solid rgba(255,255,255,.06);
  margin-top:20px;
  overflow-x:auto;scrollbar-width:none;
}
.pr-tabs::-webkit-scrollbar{display:none}
.pr-tab{
  padding:12px 18px;background:none;border:none;
  border-bottom:2px solid transparent;
  color:rgba(255,255,255,.35);font-size:.82rem;font-weight:600;
  cursor:pointer;font-family:inherit;transition:all .15s;
  white-space:nowrap;flex-shrink:0;display:flex;align-items:center;gap:6px;
  margin-bottom:-1px;
}
.pr-tab:hover{color:rgba(255,255,255,.65)}
.pr-tab.on{color:var(--accent2);border-bottom-color:var(--accent2)}

/* ── Body ─────────────────────────────────────────────────────── */
.pr-body{max-width:960px;margin:0 auto;padding:32px 24px 64px}
.pr-pane{display:none}
.pr-pane.on{display:block}

/* ── Section header ───────────────────────────────────────────── */
.pr-sec-h{
  font-size:.68rem;text-transform:uppercase;letter-spacing:.12em;
  color:rgba(255,255,255,.3);font-weight:700;
  margin-bottom:16px;display:flex;align-items:center;gap:8px;
}
.pr-sec-h::before{content:'';width:3px;height:14px;background:linear-gradient(180deg,var(--accent2),var(--accent));border-radius:2px}

/* ── Continue watching cards ──────────────────────────────────── */
.cw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
.cw-card{
  border-radius:10px;overflow:hidden;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);
  text-decoration:none;display:block;
  transition:transform .15s,border-color .15s;
}
.cw-card:hover{transform:translateY(-3px);border-color:rgba(0,245,255,.25)}
.cw-thumb{position:relative;aspect-ratio:2/3;overflow:hidden}
.cw-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.cw-card:hover .cw-thumb img{transform:scale(1.05)}
.cw-thumb-ph{width:100%;height:100%;background:rgba(255,255,255,.04);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.2);font-size:2rem}
.cw-grad{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.85) 0%,transparent 55%)}
.cw-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:38px;height:38px;border-radius:50%;background:rgba(255,45,125,.85);display:flex;align-items:center;justify-content:center}
.cw-play i{color:#fff;font-size:.95rem}
.cw-progress{position:absolute;bottom:28px;left:10px;right:10px}
.cw-prog-bar{height:3px;background:rgba(255,255,255,.2);border-radius:2px;overflow:hidden}
.cw-prog-fill{height:100%;background:var(--accent);border-radius:2px}
.cw-ep{position:absolute;bottom:8px;left:10px;font-size:.62rem;color:rgba(255,255,255,.6);font-weight:600}
.cw-info{padding:8px 10px}
.cw-info-title{font-size:.76rem;font-weight:600;color:rgba(255,255,255,.8);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── Achievement grid ─────────────────────────────────────────── */
.ach-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.ach-card{
  display:flex;align-items:center;gap:14px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);
  border-radius:12px;padding:14px 16px;
  transition:border-color .15s;
}
.ach-card.earned{background:rgba(255,255,255,.05)}
.ach-card:not(.earned){opacity:.35}
.ach-icon-wrap{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;flex-shrink:0}
.ach-body .ach-title{font-size:.85rem;font-weight:700;color:#fff;margin-bottom:2px}
.ach-body .ach-desc{font-size:.72rem;color:rgba(255,255,255,.35);line-height:1.4}
.ach-body .ach-date{font-size:.66rem;margin-top:4px;font-weight:600}

/* ── Watchlist tabs ───────────────────────────────────────────── */
.wl-filter{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:20px}
.wl-filter-btn{
  padding:6px 14px;border-radius:20px;border:1px solid rgba(255,255,255,.1);
  background:none;color:rgba(255,255,255,.45);font-size:.78rem;font-weight:600;
  cursor:pointer;font-family:inherit;transition:all .15s;
}
.wl-filter-btn:hover{border-color:rgba(255,255,255,.25);color:rgba(255,255,255,.7)}
.wl-filter-btn.on{background:rgba(0,245,255,.1);border-color:rgba(0,245,255,.3);color:var(--accent2)}
.wl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}
.wl-card{
  border-radius:9px;overflow:hidden;text-decoration:none;display:block;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);
  transition:transform .15s,border-color .15s;
}
.wl-card:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.18)}
.wl-card img{width:100%;aspect-ratio:2/3;object-fit:cover;display:block}
.wl-card-ph{aspect-ratio:2/3;background:rgba(255,255,255,.04);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.2)}
.wl-card-title{padding:7px 8px;font-size:.72rem;font-weight:600;color:rgba(255,255,255,.7);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── Heatmap ──────────────────────────────────────────────────── */
.heatmap-wrap{
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);
  border-radius:14px;padding:20px 24px;
}
.heatmap-scroll{overflow-x:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.1) transparent;padding-bottom:6px}
.heatmap-grid{display:flex;gap:3px;min-width:max-content}
.hm-col{display:flex;flex-direction:column;gap:3px}
.hm-cell{width:13px;height:13px;border-radius:3px}
.heatmap-legend{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:.7rem;color:rgba(255,255,255,.3)}
.heatmap-legend-cells{display:flex;gap:3px;align-items:center}
.heatmap-stats{display:flex;gap:20px;margin-top:12px;font-size:.78rem;color:rgba(255,255,255,.4)}

/* ── Notes ────────────────────────────────────────────────────── */
.note-card{
  background:rgba(255,255,255,.03);border:1px solid rgba(255,215,0,.12);
  border-radius:12px;padding:16px 18px;margin-bottom:10px;
}
.note-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.note-anime{font-size:.8rem;font-weight:700;color:var(--accent2);text-decoration:none}
.note-anime:hover{text-decoration:underline}
.note-ep{font-size:.72rem;color:rgba(255,255,255,.3)}
.note-ts{font-size:.72rem;color:#ffd700;display:inline-flex;align-items:center;gap:4px}
.note-date{font-size:.68rem;color:rgba(255,255,255,.25);margin-left:auto}
.note-text{font-size:.87rem;color:rgba(255,255,255,.65);line-height:1.6}

/* ── Comments ─────────────────────────────────────────────────── */
.cm-card{
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);
  border-radius:12px;padding:14px 16px;margin-bottom:10px;
}
.cm-top{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.cm-ava{width:30px;height:30px;border-radius:10px;background:linear-gradient(135deg,var(--accent2),var(--accent));display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:800;color:#fff;flex-shrink:0}
.cm-name{font-size:.84rem;font-weight:700;color:rgba(255,255,255,.8)}
.cm-time{font-size:.72rem;color:rgba(255,255,255,.25);margin-left:auto}
.cm-text{font-size:.88rem;color:rgba(255,255,255,.6);line-height:1.6}
.cm-gif{max-width:200px;border-radius:8px;margin-top:8px}

.pr-empty{text-align:center;padding:56px 20px;color:rgba(255,255,255,.2);font-size:.9rem}
.pr-empty i{font-size:2.5rem;display:block;margin-bottom:12px;opacity:.25}

/* ── Responsive ───────────────────────────────────────────────── */
@media(max-width:600px){
  .pr-hero-inner{padding:calc(var(--nav-h) + 16px) 16px 0}
  .pr-body{padding:24px 16px 48px}
  .pr-avatar{width:72px;height:72px;border-radius:18px;font-size:1.8rem}
  .pr-name{font-size:1.3rem}
  .pr-stat{padding:8px 12px;min-width:60px}
  .pr-stat .v{font-size:1rem}
  .ach-grid{grid-template-columns:1fr}
  .cw-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
  .pr-top{flex-direction:column;gap:14px}
  .pr-top-main{align-items:flex-start}
  .pr-edit-btn{align-self:stretch;justify-content:center}
}

/* ═══════════════════════════════════════════════════
   PROFILE PAGE PREMIUM ENHANCEMENTS
   ═══════════════════════════════════════════════════ */

/* Avatar animated rainbow border */
@keyframes avatar-border-spin{
  0%{background-position:0% 50%}
  100%{background-position:200% 50%}
}
.pr-avatar{
  position:relative;
}
.pr-avatar::before{
  content:'';position:absolute;inset:-2px;border-radius:26px;z-index:-1;
  background:linear-gradient(135deg,var(--accent2),var(--accent),var(--accent3),var(--accent2));
  background-size:300% 300%;
  animation:avatar-border-spin 3s linear infinite;
}

/* Username gradient */
.pr-name{
  background:linear-gradient(135deg,#fff 0%,rgba(255,255,255,.85) 60%,rgba(240,244,255,.6) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

/* Stats strip enhanced */
.pr-stats{
  background:rgba(255,255,255,.02);
  border-radius:14px;
  padding:14px;
  border:1px solid rgba(255,255,255,.05);
  gap:8px;
}
.pr-stat{
  border-radius:10px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
  transition:all .2s;
}
.pr-stat:hover{
  background:rgba(0,245,255,.06);
  border-color:rgba(0,245,255,.2);
  transform:translateY(-2px);
}
.pr-stat .v{
  background:linear-gradient(135deg,var(--accent2),var(--accent));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  font-size:1.35rem;
}

/* Tab enhanced */
.pr-tab.on{
  color:var(--accent2);
  text-shadow:0 0 12px rgba(0,245,255,.3);
}

/* Entrance animations */
@keyframes pr-fade-up{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:none}
}
.pr-avatar{animation:pr-fade-up .5s cubic-bezier(.22,1,.36,1) .1s both}
.pr-info{animation:pr-fade-up .5s cubic-bezier(.22,1,.36,1) .2s both}
.pr-stats{animation:pr-fade-up .5s cubic-bezier(.22,1,.36,1) .3s both}
.pr-tabs{animation:pr-fade-up .4s cubic-bezier(.22,1,.36,1) .4s both}

/* Achievement cards enhanced */
.ach-card.earned{
  border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(135deg,rgba(255,255,255,.05),rgba(0,245,255,.02));
  transition:all .2s;
}
.ach-card.earned:hover{
  border-color:rgba(0,245,255,.2);
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(0,0,0,.4),0 0 20px rgba(0,245,255,.05);
}

/* Watchlist cards enhanced */
.wl-card:hover{
  transform:translateY(-3px);
  border-color:rgba(0,245,255,.2);
  box-shadow:0 8px 24px rgba(0,0,0,.4);
}

/* Heatmap wrap */
.heatmap-wrap{
  background:linear-gradient(135deg,rgba(255,255,255,.03),rgba(0,245,255,.01));
  border:1px solid rgba(0,245,255,.07);
}

/* Profile edit button */
.pr-edit-btn{
  transition:all .18s;
}
.pr-edit-btn:hover{
  background:rgba(0,245,255,.12);
  border-color:rgba(0,245,255,.4);
  color:var(--accent2);
  box-shadow:0 0 20px rgba(0,245,255,.15);
}

/* Body panes reveal */
.pr-body{animation:pr-fade-up .5s cubic-bezier(.22,1,.36,1) .2s both}

/* Profile color accent on section headers */
.pr-sec-h::before{
  box-shadow:0 0 10px rgba(0,245,255,.5);
}

/* ── Swipe history ───────────────────────────────────── */
.swipe-filter {
  padding: 5px 13px; border-radius: 999px; font-size: .68rem;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  color: var(--text3); cursor: pointer; font-family: var(--font);
  transition: all .15s; display: inline-flex; align-items: center; gap: 5px;
}
.swipe-filter:hover { border-color: rgba(0,245,255,.25); color: var(--text2); }
.swipe-filter.on { background: rgba(0,245,255,.1); border-color: var(--accent2); color: var(--accent2); }
.swipe-f-count {
  font-size: .6rem; background: rgba(255,255,255,.08); border-radius: 999px;
  padding: 1px 6px; color: var(--text3);
}
.swipe-filter.on .swipe-f-count { background: rgba(0,245,255,.15); color: var(--accent2); }

.swipe-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 10px;
}
.swipe-item {
  text-decoration: none; border-radius: 12px; overflow: hidden;
  background: var(--surface2); display: flex; flex-direction: column;
  transition: transform .18s, box-shadow .18s;
}
.swipe-item:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.swipe-poster {
  position: relative; aspect-ratio: 2/3; overflow: hidden;
}
.swipe-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.swipe-poster-ph {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: var(--text3); font-size: 1.5rem;
}
.swipe-dir-badge {
  position: absolute; top: 6px; right: 6px;
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .6rem; font-weight: 700;
}
.badge-like { background: rgba(0,245,255,.18); color: var(--accent2); border: 1px solid rgba(0,245,255,.3); }
.badge-skip { background: rgba(255,45,125,.15); color: #ff2d7d;      border: 1px solid rgba(255,45,125,.3); }
.swipe-info { padding: 7px 8px 9px; }
.swipe-title {
  font-size: .68rem; font-weight: 600; color: var(--text);
  line-height: 1.3; margin-bottom: 4px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.swipe-meta { display: flex; gap: 6px; font-size: .6rem; color: var(--text3); flex-wrap: wrap; }
.swipe-item.skip .swipe-poster { opacity: .65; }
.swipe-item.skip .swipe-poster img { filter: grayscale(25%); }
</style>
@endpush

@section('content')

@php $pColor = $user->profile_color ?? '#00f5ff'; @endphp

{{-- Hero --}}
<div class="pr-hero" style="--pr-color:{{ $pColor }}">

  {{-- Banner --}}
  @if($user->banner_image)
  <div style="position:absolute;inset:0;overflow:hidden">
    <img src="{{ \App\Support\MediaUrl::fromStoragePath($user->banner_image) }}" alt=""
         style="width:100%;height:100%;object-fit:cover;opacity:.35;filter:blur(1px)">
    <div style="position:absolute;inset:0;background:linear-gradient(to bottom,rgba(5,5,14,.3) 0%,rgba(5,5,14,.85) 100%)"></div>
  </div>
  @else
  <div class="pr-hero-bg" style="background:radial-gradient(ellipse 80% 60% at 20% 50%,{{ $pColor }}18,transparent),radial-gradient(ellipse 60% 80% at 80% 30%,{{ $pColor }}10,transparent)"></div>
  @endif

  <div class="pr-hero-inner">

    {{-- Top row: avatar + info + edit button --}}
    <div class="pr-top">
      <div class="pr-top-main">
        {{-- Avatar --}}
        <div class="pr-avatar" style="background:linear-gradient(135deg,{{ $pColor }},{{ $pColor }}88);box-shadow:0 0 0 3px {{ $pColor }}33,0 16px 48px rgba(0,0,0,.5)">
          @if($user->avatar)
            <img src="{{ \App\Support\MediaUrl::fromStoragePath($user->avatar) }}" alt="{{ $user->name }}"
                 style="width:100%;height:100%;object-fit:cover;border-radius:22px">
          @else
            {{ mb_strtoupper(mb_substr($user->name,0,1)) }}
          @endif
        </div>
        <div class="pr-info">
          <div class="pr-name">{{ $user->name }}</div>
          @if($user->username)
          <div class="pr-handle">@php echo '@' . e($user->username); @endphp</div>
          @endif
          @if($user->bio)
          <div style="font-size:.83rem;color:rgba(255,255,255,.55);margin-bottom:10px;max-width:500px;line-height:1.5">{{ $user->bio }}</div>
          @endif

          {{-- Sosyal linkler --}}
          @if($user->twitter || $user->instagram || $user->discord || $user->website)
          <div style="display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px;align-items:center">
            @if($user->twitter)
            <a href="https://x.com/{{ $user->twitter }}" target="_blank" rel="noopener"
               style="color:rgba(255,255,255,.5);font-size:.82rem;text-decoration:none;display:flex;align-items:center;gap:4px;transition:color .2s"
               onmouseover="this.style.color='{{ $pColor }}'" onmouseout="this.style.color='rgba(255,255,255,.5)'">
              <i class="bi bi-twitter-x"></i> {{ $user->twitter }}
            </a>
            @endif
            @if($user->instagram)
            <a href="https://instagram.com/{{ $user->instagram }}" target="_blank" rel="noopener"
               style="color:rgba(255,255,255,.5);font-size:.82rem;text-decoration:none;display:flex;align-items:center;gap:4px;transition:color .2s"
               onmouseover="this.style.color='{{ $pColor }}'" onmouseout="this.style.color='rgba(255,255,255,.5)'">
              <i class="bi bi-instagram"></i> {{ $user->instagram }}
            </a>
            @endif
            @if($user->discord)
            <span style="color:rgba(255,255,255,.5);font-size:.82rem;display:flex;align-items:center;gap:4px">
              <i class="bi bi-discord"></i> {{ $user->discord }}
            </span>
            @endif
            @if($user->website)
            <a href="{{ $user->website }}" target="_blank" rel="noopener"
               style="color:rgba(255,255,255,.5);font-size:.82rem;text-decoration:none;display:flex;align-items:center;gap:4px;transition:color .2s"
               onmouseover="this.style.color='{{ $pColor }}'" onmouseout="this.style.color='rgba(255,255,255,.5)'">
              <i class="bi bi-globe2"></i> {{ parse_url($user->website, PHP_URL_HOST) }}
            </a>
            @endif
          </div>
          @endif

          <div class="pr-badges">
            @if($user->role==='admin')
            <span class="pbadge pbadge-admin"><i class="bi bi-shield-fill"></i> Admin</span>
            @elseif($user->role==='moderator')
            <span class="pbadge pbadge-admin"><i class="bi bi-shield-half"></i> Moderatör</span>
            @endif
            @if($user->isPremium())
            <span class="pbadge pbadge-premium"><i class="bi bi-star-fill"></i> Premium</span>
            @else
            <span class="pbadge pbadge-member"><i class="bi bi-person-check"></i> Üye</span>
            @endif
            <span class="pbadge" style="background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.35)"><i class="bi bi-calendar3"></i> {{ $user->created_at->format('Y') }}'den beri</span>
          </div>
        </div>
      </div>

      {{-- Ayarlar butonu — ayrı satırda, üstte sabit --}}
      <a href="{{ route('profile.settings') }}" class="pr-edit-btn"
         style="flex-shrink:0;padding:8px 16px;border-radius:10px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.6);font-size:.82rem;text-decoration:none;display:flex;align-items:center;gap:7px;transition:all .2s;white-space:nowrap;align-self:flex-start;margin-top:4px"
         onmouseover="this.style.background='rgba(255,255,255,.12)';this.style.color='#fff'"
         onmouseout="this.style.background='rgba(255,255,255,.07)';this.style.color='rgba(255,255,255,.6)'">
        <i class="bi bi-pencil-square"></i> Profili Düzenle
      </a>
    </div>

    {{-- Stats --}}
    <div class="pr-stats">
      <div class="pr-stat">
        <span class="v">{{ $watchStats['episodes'] }}</span>
        <span class="l">Bölüm</span>
      </div>
      <div class="pr-stat">
        <span class="v">{{ $watchStats['hours'] }}</span>
        <span class="l">Saat</span>
      </div>
      <div class="pr-stat">
        <span class="v">{{ $watchStats['watchlist'] }}</span>
        <span class="l">Listede</span>
      </div>
      <div class="pr-stat">
        <span class="v">{{ $commentCount }}</span>
        <span class="l">Yorum</span>
      </div>
      @if($allAchievements->count())
      <div class="pr-stat">
        <span class="v">{{ $achievements->count() }}</span>
        <span class="l">Başarım</span>
      </div>
      @endif
    </div>

    {{-- Tab nav --}}
    <div class="pr-tabs" id="pr-tabs">
      @if($continueItems->count())
      <button class="pr-tab on" data-pane="continue"><i class="bi bi-play-circle"></i> Devam Et</button>
      @endif
      <button class="pr-tab {{ !$continueItems->count() ? 'on' : '' }}" data-pane="watchlist"><i class="bi bi-bookmark"></i> Listem</button>
      <button class="pr-tab" data-pane="activity"><i class="bi bi-graph-up"></i> Aktivite</button>
      @if($allAchievements->count())
      <button class="pr-tab" data-pane="achievements"><i class="bi bi-trophy"></i> Başarımlar</button>
      @endif
      <button class="pr-tab" data-pane="notes"><i class="bi bi-journal-text"></i> Notlar @if($episodeNotes->count())<span style="font-size:.68rem;background:rgba(0,245,255,.15);color:var(--accent2);border-radius:10px;padding:1px 6px;margin-left:2px">{{ $episodeNotes->count() }}</span>@endif</button>
      <button class="pr-tab" data-pane="comments"><i class="bi bi-chat-dots"></i> Yorumlar</button>
      <button class="pr-tab" data-pane="swipes"><i class="bi bi-hand-index-thumb"></i> Keşfet @if($swipeHistory->count())<span style="font-size:.65rem;background:rgba(0,245,255,.12);color:var(--accent2);border-radius:10px;padding:1px 6px;margin-left:2px">{{ $swipeHistory->count() }}</span>@endif</button>
    </div>
  </div>
</div>

{{-- Body --}}
<div class="pr-body">

  {{-- DEVAM ET --}}
  @if($continueItems->count())
  <div class="pr-pane on" id="pane-continue">
    <div class="pr-sec-h"><span>Kaldığın Yerden Devam Et</span></div>
    <div class="cw-grid">
      @foreach($continueItems as $cw)
      @php $anime = $cw->anime; @endphp
      @if(!$anime) @continue @endif
      <a href="{{ route('watch',[$anime->slug,$cw->season_number,$cw->episode_number]) }}" class="cw-card">
        <div class="cw-thumb">
          @if($anime->cover_image)
          <img src="{{ \App\Support\MediaUrl::fromStoragePath($anime->cover_image) }}" alt="">
          @else
          <div class="cw-thumb-ph"><i class="bi bi-image"></i></div>
          @endif
          <div class="cw-grad"></div>
          <div class="cw-play"><i class="bi bi-play-fill"></i></div>
          <div class="cw-progress">
            <div class="cw-prog-bar"><div class="cw-prog-fill" style="width:{{ $cw->percent_complete }}%"></div></div>
          </div>
          <div class="cw-ep">S{{ str_pad($cw->season_number,2,'0',STR_PAD_LEFT) }}E{{ str_pad($cw->episode_number,2,'0',STR_PAD_LEFT) }} · {{ $cw->percent_complete }}%</div>
        </div>
        <div class="cw-info"><div class="cw-info-title">{{ $anime->title }}</div></div>
      </a>
      @endforeach
    </div>
  </div>
  @endif

  {{-- İZLEME LİSTESİ --}}
  <div class="pr-pane {{ !$continueItems->count() ? 'on' : '' }}" id="pane-watchlist">
    <div class="pr-sec-h" style="display:flex;align-items:center;justify-content:space-between">
      <span>İzleme Listesi</span>
      @if(auth()->user()->hasPerk('watchlist_export'))
      <div style="display:flex;gap:6px">
        <a href="{{ route('watchlist.export', ['format'=>'csv']) }}" style="font-size:.72rem;color:rgba(0,245,255,.7);text-decoration:none;display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border:1px solid rgba(0,245,255,.2);border-radius:6px">
          <i class="bi bi-download"></i> CSV
        </a>
        <a href="{{ route('watchlist.export', ['format'=>'json']) }}" style="font-size:.72rem;color:rgba(0,245,255,.7);text-decoration:none;display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border:1px solid rgba(0,245,255,.2);border-radius:6px">
          <i class="bi bi-download"></i> JSON
        </a>
      </div>
      @endif
    </div>
    @if($watchlistItems->count())
    {{-- Filter buttons --}}
    <div class="wl-filter">
      <button class="wl-filter-btn on" data-wl="all">Tümü</button>
      @foreach(\App\Models\Watchlist::STATUSES as $status => $label)
      @if(isset($watchlistItems[$status]) && $watchlistItems[$status]->count())
      <button class="wl-filter-btn" data-wl="{{ $status }}">{{ $label }} <span style="opacity:.5">({{ $watchlistItems[$status]->count() }})</span></button>
      @endif
      @endforeach
    </div>
    @foreach(\App\Models\Watchlist::STATUSES as $status => $label)
    @if(isset($watchlistItems[$status]) && $watchlistItems[$status]->count())
    <div class="wl-section wl-grid" data-wl="{{ $status }}" style="margin-bottom:24px">
      @foreach($watchlistItems[$status] as $wl)
      @if(!$wl->anime) @continue @endif
      <a href="{{ $wl->anime->detailUrl }}" class="wl-card">
        @if($wl->anime->cover_image)
        <img src="{{ \App\Support\MediaUrl::fromStoragePath($wl->anime->cover_image) }}" alt="" loading="lazy">
        @else
        <div class="wl-card-ph"><i class="bi bi-image"></i></div>
        @endif
        <div class="wl-card-title">{{ $wl->anime->title }}</div>
      </a>
      @endforeach
    </div>
    @endif
    @endforeach
    @else
    <div class="pr-empty"><i class="bi bi-bookmark"></i>Liste henüz boş.</div>
    @endif
  </div>

  {{-- AKTİVİTE / HEATMAP --}}
  <div class="pr-pane" id="pane-activity">
    <div class="pr-sec-h"><span>İzleme Aktivitesi — Son 1 Yıl</span></div>
    @php
      $today    = now()->startOfDay();
      $start    = $today->copy()->subDays(364);
      $gridStart= $start->copy()->startOfWeek(\Carbon\Carbon::MONDAY);
      $weeks    = [];
      $cur      = $gridStart->copy();
      while ($cur->lte($today)) {
        $week = [];
        for ($d = 0; $d < 7; $d++) {
          $key  = $cur->format('Y-m-d');
          $week[] = ['date'=>$key,'count'=>$heatmapRaw[$key]??0,'past'=>$cur->lte($today)&&$cur->gte($start)];
          $cur->addDay();
        }
        $weeks[] = $week;
      }
      $maxCount   = !empty($heatmapRaw) ? max($heatmapRaw) : 1;
      $totalDays  = collect($heatmapRaw)->filter()->count();
      $totalEpYear= array_sum($heatmapRaw);
    @endphp
    <div class="heatmap-wrap">
      <div class="heatmap-scroll">
        <div class="heatmap-grid">
          @foreach($weeks as $week)
          <div class="hm-col">
            @foreach($week as $cell)
            @php
              $alpha = 0;
              $bg    = 'rgba(255,255,255,.05)';
              if ($cell['past'] && $cell['count'] > 0) {
                $intensity = min(1, $cell['count'] / max($maxCount,1));
                $alpha = 0.18 + $intensity * 0.82;
                $bg = "rgba(0,245,255,{$alpha})";
              } elseif (!$cell['past']) {
                $bg = 'transparent';
              }
            @endphp
            <div class="hm-cell" title="{{ $cell['past'] ? $cell['date'].': '.($cell['count']?$cell['count'].' bölüm':'boş') : '' }}"
                 style="background:{{ $bg }}"></div>
            @endforeach
          </div>
          @endforeach
        </div>
      </div>
      <div class="heatmap-legend">
        <span>Az</span>
        <div class="heatmap-legend-cells">
          <div style="width:13px;height:13px;border-radius:3px;background:rgba(255,255,255,.05)"></div>
          <div style="width:13px;height:13px;border-radius:3px;background:rgba(0,245,255,.2)"></div>
          <div style="width:13px;height:13px;border-radius:3px;background:rgba(0,245,255,.45)"></div>
          <div style="width:13px;height:13px;border-radius:3px;background:rgba(0,245,255,.7)"></div>
          <div style="width:13px;height:13px;border-radius:3px;background:rgba(0,245,255,1)"></div>
        </div>
        <span>Çok</span>
      </div>
      <div class="heatmap-stats">
        <span><i class="bi bi-calendar3 me-1"></i>{{ $totalDays }} aktif gün</span>
        <span><i class="bi bi-play-circle me-1"></i>{{ $totalEpYear }} bölüm izlendi</span>
      </div>
    </div>
  </div>

  {{-- BAŞARIMLAR --}}
  @if($allAchievements->count())
  <div class="pr-pane" id="pane-achievements">
    @php $earnedIds = $achievements->pluck('achievement_id')->toArray(); @endphp
    <div class="pr-sec-h"><span>Başarımlar <span style="opacity:.4;font-weight:400">{{ $achievements->count() }}/{{ $allAchievements->count() }}</span></span></div>
    <div class="ach-grid">
      @foreach($allAchievements->sortByDesc(fn($a)=>in_array($a->id,$earnedIds)) as $ach)
      @php $earned = in_array($ach->id, $earnedIds); @endphp
      <div class="ach-card {{ $earned ? 'earned' : '' }}" style="{{ $earned ? 'border-color:'.substr($ach->color,0,7).'33' : '' }}">
        <div class="ach-icon-wrap" style="background:{{ $earned ? substr($ach->color,0,7).'1a' : 'rgba(255,255,255,.04)' }}">
          <i class="bi {{ $ach->icon }}" style="color:{{ $earned ? $ach->color : 'rgba(255,255,255,.2)' }}"></i>
        </div>
        <div class="ach-body">
          <div class="ach-title">{{ $ach->title }}</div>
          <div class="ach-desc">{{ $ach->description }}</div>
          @if($earned)
          @php $ea = $achievements->firstWhere('achievement_id',$ach->id); @endphp
          <div class="ach-date" style="color:{{ $ach->color }}">{{ $ea?->earned_at?->format('d.m.Y') }}</div>
          @endif
        </div>
      </div>
      @endforeach
    </div>
  </div>
  @endif

  {{-- NOTLAR --}}
  <div class="pr-pane" id="pane-notes">
    <div class="pr-sec-h"><span>Bölüm Notlarım</span></div>
    @forelse($episodeNotes as $note)
    <div class="note-card">
      <div class="note-meta">
        @if($note->anime)<a href="{{ $note->anime->detailUrl }}" class="note-anime">{{ $note->anime->title }}</a>@endif
        @if($note->episode)<span class="note-ep">{{ $note->episode->episode_number }}. Bölüm</span>@endif
        @if($note->timestamp_at)<span class="note-ts"><i class="bi bi-clock"></i> {{ $note->timestamp_label }}</span>@endif
        <span class="note-date">{{ $note->created_at->format('d.m.Y') }}</span>
      </div>
      <div class="note-text">{{ $note->content }}</div>
    </div>
    @empty
    <div class="pr-empty"><i class="bi bi-journal-text"></i>Henüz not almadın.<br><small style="font-size:.78rem;opacity:.6">İzlerken bölüm içindeki not ikonuna tıklayarak not alabilirsin.</small></div>
    @endforelse
  </div>

  {{-- YORUMLAR --}}
  {{-- ── Keşfet Geçmişi ──────────────────────────────────────── --}}
  <div class="pr-pane" id="pane-swipes">
    <div class="pr-sec-h" style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px">
      <span>Keşfet Geçmişi</span>
      @if($swipeHistory->count())
      <div style="display:flex;gap:14px;font-size:.68rem;color:var(--text3)">
        <span style="color:var(--accent2)">
          <i class="bi bi-heart-fill" style="margin-right:3px"></i>
          {{ $swipeHistory->where('direction','like')->count() }} beğeni
        </span>
        <span>
          <i class="bi bi-x-lg" style="margin-right:3px;color:#ff2d7d"></i>
          {{ $swipeHistory->where('direction','skip')->count() }} geç
        </span>
        <a href="{{ route('discover') }}" style="color:var(--accent2);text-decoration:none">
          <i class="bi bi-arrow-right" style="margin-right:3px"></i>Devam et
        </a>
      </div>
      @endif
    </div>

    @if($swipeHistory->isEmpty())
    <div class="pr-empty">
      <i class="bi bi-hand-index-thumb"></i>
      Henüz hiç anime keşfetmedin. <a href="{{ route('discover') }}" style="color:var(--accent2);text-decoration:none">Hemen başla →</a>
    </div>
    @else

    {{-- Filter buttons --}}
    <div style="display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap">
      <button class="swipe-filter on" data-f="all">Tümü <span class="swipe-f-count">{{ $swipeHistory->count() }}</span></button>
      <button class="swipe-filter" data-f="like"><i class="bi bi-heart-fill" style="color:var(--accent2);font-size:.75rem"></i> Beğendiklerim <span class="swipe-f-count">{{ $swipeHistory->where('direction','like')->count() }}</span></button>
      <button class="swipe-filter" data-f="skip"><i class="bi bi-x-lg" style="color:#ff2d7d;font-size:.75rem"></i> Geçtiklerim <span class="swipe-f-count">{{ $swipeHistory->where('direction','skip')->count() }}</span></button>
    </div>

    <div class="swipe-grid" id="swipeGrid">
      @foreach($swipeHistory as $sw)
      @php $a = $sw->anime; @endphp
      <a href="{{ $a->detailUrl }}" class="swipe-item {{ $sw->direction }}" data-dir="{{ $sw->direction }}" title="{{ $a->title }}">
        <div class="swipe-poster">
          @if($a->coverUrl)
          <img src="{{ $a->coverUrl }}" alt="{{ $a->title }}" loading="lazy">
          @else
          <div class="swipe-poster-ph"><i class="bi bi-film"></i></div>
          @endif
          <div class="swipe-dir-badge {{ $sw->direction === 'like' ? 'badge-like' : 'badge-skip' }}">
            @if($sw->direction === 'like')
            <i class="bi bi-heart-fill"></i>
            @else
            <i class="bi bi-x-lg"></i>
            @endif
          </div>
        </div>
        <div class="swipe-info">
          <div class="swipe-title">{{ $a->title }}</div>
          <div class="swipe-meta">
            @if($a->release_year)<span>{{ $a->release_year }}</span>@endif
            @if($a->rating)<span style="color:#fbbf24"><i class="bi bi-star-fill" style="font-size:.55rem"></i> {{ number_format($a->rating,1) }}</span>@endif
          </div>
        </div>
      </a>
      @endforeach
    </div>
    @endif
  </div>

  <div class="pr-pane" id="pane-comments">
    <div class="pr-sec-h"><span>Son Yorumlar</span></div>
    @if($recentComments->isEmpty())
    <div class="pr-empty"><i class="bi bi-chat-dots"></i>Henüz yorum yok.</div>
    @else
    @foreach($recentComments as $c)
    <div class="cm-card">
      <div class="cm-top">
        <div class="cm-ava">{{ mb_strtoupper(mb_substr($user->name,0,1)) }}</div>
        <span class="cm-name">{{ $user->name }}</span>
        <span class="cm-time">{{ $c->created_at->diffForHumans() }}</span>
      </div>
      @if($c->content)<div class="cm-text">{{ $c->content }}</div>@endif
      @if($c->gif_url)<img src="{{ $c->gif_url }}" alt="" class="cm-gif">@endif
    </div>
    @endforeach
    @endif
  </div>

</div>

@endsection
@push('scripts')
<script>
// Tab switching
document.querySelectorAll('.pr-tab').forEach(btn => {
  btn.addEventListener('click', () => {
    document.querySelectorAll('.pr-tab').forEach(t => t.classList.remove('on'));
    document.querySelectorAll('.pr-pane').forEach(p => p.classList.remove('on'));
    btn.classList.add('on');
    document.getElementById('pane-' + btn.dataset.pane)?.classList.add('on');
  });
});

// Watchlist filter
document.querySelectorAll('.wl-filter-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    document.querySelectorAll('.wl-filter-btn').forEach(b => b.classList.remove('on'));
    btn.classList.add('on');
    const target = btn.dataset.wl;
    document.querySelectorAll('.wl-section').forEach(sec => {
      sec.style.display = (target === 'all' || sec.dataset.wl === target) ? 'grid' : 'none';
    });
  });
});

// Swipe history filter
document.querySelectorAll('.swipe-filter').forEach(btn => {
  btn.addEventListener('click', () => {
    document.querySelectorAll('.swipe-filter').forEach(b => b.classList.remove('on'));
    btn.classList.add('on');
    const f = btn.dataset.f;
    document.querySelectorAll('#swipeGrid .swipe-item').forEach(item => {
      item.style.display = (f === 'all' || item.dataset.dir === f) ? '' : 'none';
    });
  });
});
</script>
@endpush
