@extends('admin.layout')
@section('title', 'Dashboard')
@section('page-title', 'Dashboard')

@section('content')
@php $pendingComments = $stats['pending_comments']; @endphp

{{-- ── Stat cards ─────────────────────────────────────────────────── --}}
<div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
  @php
  $cards = [
    ['label'=>'Published Posts', 'value'=> number_format($stats['published']),   'color'=>'text-blue-400',   'bg'=>'bg-blue-500/10'],
    ['label'=>'Total Views',     'value'=> number_format($stats['total_views']),  'color'=>'text-green-400',  'bg'=>'bg-green-500/10'],
    ['label'=>'Comments',        'value'=> number_format($stats['comments']),     'color'=>'text-purple-400', 'bg'=>'bg-purple-500/10'],
    ['label'=>'Pending',         'value'=> number_format($stats['pending_comments']), 'color'=>'text-yellow-400', 'bg'=>'bg-yellow-500/10'],
  ];
  @endphp
  @foreach($cards as $card)
  <div class="bg-gray-900 rounded-2xl border border-white/10 p-5">
    <p class="text-xs text-gray-500 uppercase tracking-wider">{{ $card['label'] }}</p>
    <p class="text-3xl font-bold {{ $card['color'] }} mt-1">{{ $card['value'] }}</p>
  </div>
  @endforeach
</div>

{{-- ── Analytics grid ─────────────────────────────────────────────── --}}
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">

  {{-- Views chart --}}
  <div class="lg:col-span-2 bg-gray-900 rounded-2xl border border-white/10 p-5">
    <h2 class="text-sm font-semibold text-white mb-4">Views — Last 30 Days</h2>
    <canvas id="viewsChart" height="120"></canvas>
  </div>

  {{-- Time-range views table --}}
  <div class="bg-gray-900 rounded-2xl border border-white/10 p-5">
    <h2 class="text-sm font-semibold text-white mb-4">Page Views by Range</h2>
    <div class="space-y-2">
      @php
      $labels = [
        '5min'=>'Last 5 min','15min'=>'Last 15 min','30min'=>'Last 30 min',
        '1hr'=>'Last 1 hr','6hr'=>'Last 6 hr','12hr'=>'Last 12 hr',
        '24hr'=>'Last 24 hr','7days'=>'Last 7 days','30days'=>'Last 30 days',
        '1year'=>'Last 1 year','2years'=>'Last 2 years','all'=>'All time',
      ];
      @endphp
      @foreach($labels as $key => $label)
      <div class="flex items-center justify-between py-1.5 border-b border-white/5 last:border-0">
        <span class="text-xs text-gray-400">{{ $label }}</span>
        <span class="text-sm font-semibold text-white">{{ number_format($views[$key] ?? 0) }}</span>
      </div>
      @endforeach
    </div>
  </div>
</div>

{{-- ── Bottom grid ─────────────────────────────────────────────────── --}}
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">

  {{-- Top posts --}}
  <div class="bg-gray-900 rounded-2xl border border-white/10 p-5">
    <h2 class="text-sm font-semibold text-white mb-4">Top Posts by Views</h2>
    <div class="space-y-3">
      @foreach($topPosts as $i => $post)
      <div class="flex items-start gap-3">
        <span class="text-lg font-bold text-white/20 w-6 shrink-0 text-right">{{ $i+1 }}</span>
        <div class="flex-1 min-w-0">
          <a href="{{ route('admin.posts.edit', $post) }}"
             class="text-sm text-white hover:text-blue-400 transition-colors line-clamp-1 font-medium">
            {{ $post->title }}
          </a>
          <div class="flex items-center gap-3 mt-0.5">
            <span class="text-xs text-gray-500">{{ number_format($post->views_count) }} views</span>
            @if($post->category)
              <span class="text-xs text-gray-600">{{ $post->category->name }}</span>
            @endif
          </div>
        </div>
      </div>
      @endforeach
    </div>
  </div>

  {{-- Recent posts --}}
  <div class="bg-gray-900 rounded-2xl border border-white/10 p-5">
    <div class="flex items-center justify-between mb-4">
      <h2 class="text-sm font-semibold text-white">Recent Posts</h2>
      <a href="{{ route('admin.posts.index') }}" class="text-xs text-blue-400 hover:underline">View all →</a>
    </div>
    <div class="space-y-3">
      @foreach($recentPosts as $post)
      <div class="flex items-start gap-3 py-2 border-b border-white/5 last:border-0">
        <div class="flex-1 min-w-0">
          <a href="{{ route('admin.posts.edit', $post) }}"
             class="text-sm text-white hover:text-blue-400 transition-colors line-clamp-1">
            {{ $post->title }}
          </a>
          <div class="flex items-center gap-2 mt-0.5">
            <span class="text-xs text-gray-500">{{ $post->author?->name ?? 'Unknown' }}</span>
            <span class="text-gray-600">·</span>
            <span class="text-xs text-gray-500">{{ $post->published_at?->diffForHumans() }}</span>
          </div>
        </div>
        <a href="{{ route('admin.posts.edit', $post) }}"
           class="text-xs text-gray-600 hover:text-white px-2 py-1 rounded border border-white/10 hover:border-white/30 transition-colors shrink-0">
          Edit
        </a>
      </div>
      @endforeach
    </div>
  </div>
</div>
@endsection

@push('scripts')
<script>
const labels = @json(array_keys($chart));
const data   = @json(array_values($chart));

new Chart(document.getElementById('viewsChart'), {
  type: 'line',
  data: {
    labels,
    datasets: [{
      data,
      borderColor: '#3b82f6',
      backgroundColor: 'rgba(59,130,246,0.08)',
      borderWidth: 2,
      fill: true,
      tension: 0.4,
      pointRadius: 0,
    }]
  },
  options: {
    responsive: true,
    plugins: { legend: { display: false } },
    scales: {
      x: { ticks: { color: '#6b7280', maxTicksLimit: 8, font: { size: 11 } }, grid: { color: 'rgba(255,255,255,0.05)' } },
      y: { ticks: { color: '#6b7280', font: { size: 11 } }, grid: { color: 'rgba(255,255,255,0.05)' }, beginAtZero: true }
    }
  }
});
</script>
@endpush
