@extends('frontend.layouts.app')
@section('title', 'Bildirimler — Animexe')

@push('styles')
<style>
.notif-wrap{max-width:700px;margin:0 auto;padding:80px 20px 60px}
.notif-hero{margin-bottom:28px}
.notif-hero h1{font-size:1.5rem;font-weight:800;color:var(--text);display:flex;align-items:center;gap:10px}
.notif-hero p{color:var(--text3);font-size:.88rem;margin-top:4px}

.notif-card{
  background:var(--surface);border:1px solid var(--border);border-radius:12px;
  padding:16px 18px;margin-bottom:10px;display:flex;align-items:flex-start;gap:14px;
  transition:border-color .15s,background .15s;
}
.notif-card:hover{border-color:rgba(0,245,255,.25);background:rgba(0,245,255,.02)}
.notif-card.unread{border-left:3px solid var(--accent2);background:rgba(0,245,255,.03)}
.notif-icon{
  width:40px;height:40px;border-radius:50%;background:rgba(0,245,255,.1);border:1px solid rgba(0,245,255,.2);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1.1rem;color:var(--accent2);
}
.notif-body{flex:1;min-width:0}
.notif-title{font-size:.88rem;font-weight:600;color:var(--text);margin-bottom:3px}
.notif-sub{font-size:.78rem;color:var(--text2);line-height:1.5}
.notif-time{font-size:.68rem;color:var(--text3);margin-top:5px}
.notif-empty{text-align:center;padding:60px 20px;color:var(--text3)}
.notif-empty i{font-size:2.5rem;display:block;margin-bottom:12px;opacity:.3}
</style>
@endpush

@section('content')
<div class="notif-wrap">
  <div class="notif-hero">
    <h1><i class="bi bi-bell-fill" style="color:var(--accent2)"></i> Bildirimler</h1>
    <p>Takip ettiğin animelerin yeni bölüm bildirimleri burada görünür.</p>
  </div>

  @if($notifications->isEmpty())
  <div class="notif-empty">
    <i class="bi bi-bell-slash"></i>
    <div>Henüz bildiriminiz yok.</div>
    <div style="font-size:.8rem;margin-top:6px">Anime sayfalarından animeleri takip edin, yeni bölüm eklenince bilgilendirilirsiniz.</div>
  </div>
  @else
  @foreach($notifications as $n)
  @php
    $d = $n->data;
    $isEp    = $n->type === 'episode';
    $isAdmin = $n->type === 'admin';
    $url = $isEp && isset($d['anime_slug'])
      ? route('watch', [$d['anime_slug'], $d['season_number'] ?? 1, $d['episode_number'] ?? 1])
      : ($isAdmin && !empty($d['url']) ? $d['url'] : '#');
  @endphp
  <a href="{{ $url }}" style="text-decoration:none;display:block">
    <div class="notif-card {{ !$n->is_read ? 'unread' : '' }}">
      <div class="notif-icon" style="{{ $isAdmin ? 'background:rgba(255,45,125,.1);border-color:rgba(255,45,125,.25);color:var(--accent)' : '' }}">
        <i class="bi {{ $isAdmin ? ($d['icon'] ?? 'bi-megaphone-fill') : ($isEp ? 'bi-play-circle-fill' : 'bi-bell-fill') }}"></i>
      </div>
      <div class="notif-body">
        @if($isEp)
        <div class="notif-title">{{ $d['anime_title'] ?? 'Anime' }} — Yeni Bölüm!</div>
        <div class="notif-sub">
          Sezon {{ $d['season_number'] ?? 1 }}, {{ $d['episode_number'] ?? 1 }}. Bölüm eklendi
          @if(!empty($d['episode_title'])) — <em>{{ $d['episode_title'] }}</em>@endif
        </div>
        @else
        <div class="notif-title">{{ $d['title'] ?? 'Bildirim' }}</div>
        @if(!empty($d['body']))<div class="notif-sub">{{ $d['body'] }}</div>@endif
        @endif
        <div class="notif-time">{{ $n->created_at ? \Carbon\Carbon::parse($n->created_at)->diffForHumans() : '' }}</div>
      </div>
      @if(!$n->is_read)
      <div style="width:8px;height:8px;border-radius:50%;background:var(--accent2);flex-shrink:0;margin-top:4px"></div>
      @endif
    </div>
  </a>
  @endforeach

  <div class="mt-4">{{ $notifications->links() }}</div>
  @endif
</div>
@endsection
