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

@section('content')
<x-admin.page-header
    title="Dashboard"
    subtitle="Ringkasan operasional katalog, user, review, notifikasi, dan audit admin."
>
    <x-slot:actions>
        <a href="{{ route('laptops.create') }}" class="btn-primary">
            <i class="fa-solid fa-plus"></i>
            Tambah Laptop
        </a>
    </x-slot:actions>
</x-admin.page-header>

<div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
    <div class="stat-card">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm font-semibold text-slate-500 dark:text-slate-400">Laptop aktif</p>
                <p class="mt-2 text-3xl font-black text-slate-950 dark:text-white">{{ number_format($stats['total_laptops']) }}</p>
            </div>
            <span class="flex h-11 w-11 items-center justify-center rounded-2xl bg-brand-100 text-brand-600 dark:bg-blue-950 dark:text-blue-300">
                <i class="fa-solid fa-laptop"></i>
            </span>
        </div>
        <p class="mt-3 text-xs text-slate-500 dark:text-slate-400">{{ number_format($stats['archived_laptops']) }} laptop di arsip</p>
    </div>

    <div class="stat-card">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm font-semibold text-slate-500 dark:text-slate-400">User reguler</p>
                <p class="mt-2 text-3xl font-black text-slate-950 dark:text-white">{{ number_format($stats['total_users']) }}</p>
            </div>
            <span class="flex h-11 w-11 items-center justify-center rounded-2xl bg-emerald-100 text-emerald-600 dark:bg-emerald-950 dark:text-emerald-300">
                <i class="fa-solid fa-users"></i>
            </span>
        </div>
        <p class="mt-3 text-xs text-slate-500 dark:text-slate-400">{{ number_format($stats['blocked_users']) }} akun diblokir</p>
    </div>

    <div class="stat-card">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm font-semibold text-slate-500 dark:text-slate-400">Review</p>
                <p class="mt-2 text-3xl font-black text-slate-950 dark:text-white">{{ number_format($stats['total_reviews']) }}</p>
            </div>
            <span class="flex h-11 w-11 items-center justify-center rounded-2xl bg-amber-100 text-amber-600 dark:bg-amber-950 dark:text-amber-300">
                <i class="fa-solid fa-star"></i>
            </span>
        </div>
        <p class="mt-3 text-xs text-slate-500 dark:text-slate-400">Rating rata-rata {{ number_format($stats['avg_rating'], 2) }}</p>
    </div>

    <div class="stat-card">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm font-semibold text-slate-500 dark:text-slate-400">Notifikasi</p>
                <p class="mt-2 text-3xl font-black text-slate-950 dark:text-white">{{ number_format($stats['total_notifications']) }}</p>
            </div>
            <span class="flex h-11 w-11 items-center justify-center rounded-2xl bg-violet-100 text-violet-600 dark:bg-violet-950 dark:text-violet-300">
                <i class="fa-solid fa-bell"></i>
            </span>
        </div>
        <p class="mt-3 text-xs text-slate-500 dark:text-slate-400">{{ number_format($stats['notification_reads']) }} read tracking tercatat</p>
    </div>
</div>

<div class="mt-6 grid gap-4 lg:grid-cols-4">
    <a href="{{ url('/api/health') }}" class="stat-card">
        <p class="text-sm font-semibold text-slate-500 dark:text-slate-400">API health</p>
        <div class="mt-3 flex items-center justify-between">
            <p class="text-xl font-black {{ $health['api'] === 'online' ? 'text-emerald-600' : 'text-amber-600' }}">{{ strtoupper($health['api']) }}</p>
            <i class="fa-solid fa-heart-pulse text-brand-500"></i>
        </div>
        <p class="mt-2 text-xs text-slate-500 dark:text-slate-400">Klik untuk JSON health endpoint.</p>
    </a>
    <div class="stat-card">
        <p class="text-sm font-semibold text-slate-500 dark:text-slate-400">Database</p>
        <p class="mt-3 text-xl font-black {{ $health['database'] === 'ok' ? 'text-emerald-600' : 'text-red-600' }}">{{ strtoupper($health['database']) }}</p>
        <p class="mt-2 text-xs text-slate-500 dark:text-slate-400">Dipakai API mobile dan admin.</p>
    </div>
    <div class="stat-card">
        <p class="text-sm font-semibold text-slate-500 dark:text-slate-400">Storage gambar</p>
        <p class="mt-3 text-xl font-black {{ $health['missing_image_files'] === 0 ? 'text-emerald-600' : 'text-amber-600' }}">{{ number_format($health['missing_image_files']) }} missing</p>
        <p class="mt-2 text-xs text-slate-500 dark:text-slate-400">File gambar yang tidak bisa di-resolve.</p>
    </div>
    <div class="stat-card">
        <p class="text-sm font-semibold text-slate-500 dark:text-slate-400">Export tools</p>
        <p class="mt-3 text-xl font-black {{ $health['export'] === 'ready' ? 'text-emerald-600' : 'text-amber-600' }}">{{ strtoupper($health['export']) }}</p>
        <p class="mt-2 text-xs text-slate-500 dark:text-slate-400">PDF/Excel untuk laporan katalog.</p>
    </div>
</div>

<div class="mt-6 grid gap-6 xl:grid-cols-2">
    <x-admin.card title="Laptop per kategori" description="Distribusi katalog aktif berdasarkan kategori.">
        <div class="h-72">
            <canvas id="kategoriChart"></canvas>
        </div>
    </x-admin.card>

    <x-admin.card title="Distribusi rating" description="Jumlah review dari rating 1 sampai 5.">
        <div class="h-72">
            <canvas id="ratingChart"></canvas>
        </div>
    </x-admin.card>
</div>

<div class="mt-6 grid gap-6 xl:grid-cols-[minmax(0,1fr)_24rem]">
    <div class="space-y-6">
        <x-admin.card title="Laptop perlu dilengkapi" description="Prioritas data agar katalog terlihat rapi di React.">
            <div class="overflow-x-auto">
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>Laptop</th>
                            <th>Kategori</th>
                            <th>Masalah utama</th>
                            <th class="text-right">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($incompleteLaptops as $laptop)
                            <tr>
                                <td>
                                    <p class="font-bold text-slate-950 dark:text-white">{{ $laptop->name }}</p>
                                    <p class="text-xs text-slate-500 dark:text-slate-400">{{ $laptop->processor }}</p>
                                </td>
                                <td><span class="badge-blue">{{ ucfirst($laptop->kategori ?? 'Umum') }}</span></td>
                                <td>
                                    <div class="flex flex-wrap gap-1">
                                        @unless($laptop->image_url)
                                            <span class="badge-yellow">Gambar kosong</span>
                                        @endunless
                                        @if(blank($laptop->deskripsi))
                                            <span class="badge-red">Deskripsi kosong</span>
                                        @endif
                                        @if((float) $laptop->rating_avg <= 0)
                                            <span class="badge-slate">Belum ada rating</span>
                                        @endif
                                    </div>
                                </td>
                                <td class="text-right">
                                    <a href="{{ route('laptops.edit', $laptop) }}" class="btn-secondary px-3 py-2">
                                        <i class="fa-solid fa-pen"></i>
                                        Edit
                                    </a>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="4">
                                    <x-admin.empty-state icon="fa-circle-check" title="Data katalog lengkap" description="Tidak ada laptop prioritas saat ini." />
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </x-admin.card>

        <x-admin.card title="Review terbaru" description="Pantau masukan user yang baru masuk.">
            <div class="overflow-x-auto">
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>User</th>
                            <th>Laptop</th>
                            <th>Rating</th>
                            <th>Komentar</th>
                            <th>Tanggal</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($recentReviews as $review)
                            <tr>
                                <td class="font-semibold text-slate-800 dark:text-slate-100">{{ optional($review->user)->name ?? 'User terhapus' }}</td>
                                <td>{{ optional($review->laptop)->name ?? 'Laptop terarsip' }}</td>
                                <td>
                                    <span class="inline-flex items-center gap-1 font-semibold">
                                        <i class="fa-solid fa-star text-amber-500"></i>
                                        {{ $review->rating }}
                                    </span>
                                </td>
                                <td class="max-w-xs truncate text-slate-600 dark:text-slate-300">{{ $review->komentar ?: '-' }}</td>
                                <td class="text-slate-500 dark:text-slate-400">{{ $review->created_at->diffForHumans() }}</td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5">
                                    <x-admin.empty-state icon="fa-comment-slash" title="Belum ada review" />
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </x-admin.card>
    </div>

    <div class="space-y-6">
        <x-admin.card title="Top laptop" description="Berdasarkan rating rata-rata tertinggi.">
            <div class="space-y-3">
                @forelse($topLaptops as $index => $laptop)
                    <a href="{{ route('laptops.edit', $laptop) }}" class="flex items-center gap-3 rounded-2xl border border-slate-100 p-3 transition hover:border-brand-200 hover:bg-brand-50 dark:border-slate-800 dark:hover:border-slate-700 dark:hover:bg-slate-800">
                        <span class="flex h-8 w-8 shrink-0 items-center justify-center rounded-xl bg-slate-900 text-sm font-black text-white dark:bg-white dark:text-slate-900">{{ $index + 1 }}</span>
                        <span class="min-w-0 flex-1">
                            <span class="block truncate font-bold text-slate-950 dark:text-white">{{ $laptop->name }}</span>
                            <span class="text-xs text-slate-500 dark:text-slate-400">{{ ucfirst($laptop->kategori ?? 'Umum') }}</span>
                        </span>
                        <span class="inline-flex items-center gap-1 text-sm font-bold text-amber-600">
                            <i class="fa-solid fa-star"></i>
                            {{ number_format((float) $laptop->rating_avg, 1) }}
                        </span>
                    </a>
                @empty
                    <x-admin.empty-state icon="fa-laptop" title="Belum ada laptop" />
                @endforelse
            </div>
        </x-admin.card>

        <x-admin.card title="Aktivitas admin" description="Audit log terbaru untuk tindakan penting.">
            <div class="space-y-4">
                @forelse($activities as $activity)
                    <div class="border-l-2 border-slate-200 pl-3 dark:border-slate-700">
                        <p class="text-sm font-bold text-slate-950 dark:text-white">{{ $activity->description }}</p>
                        <p class="mt-1 text-xs text-slate-500 dark:text-slate-400">
                            {{ optional($activity->actor)->name ?? 'System' }} · {{ $activity->created_at->diffForHumans() }}
                        </p>
                        <span class="mt-2 inline-flex rounded-full bg-slate-100 px-2 py-1 text-[11px] font-semibold text-slate-500 dark:bg-slate-800 dark:text-slate-300">{{ $activity->action }}</span>
                    </div>
                @empty
                    <x-admin.empty-state icon="fa-clock-rotate-left" title="Belum ada aktivitas" />
                @endforelse
            </div>
        </x-admin.card>
    </div>
</div>
@endsection

@push('scripts')
<script>
    const kategoriData = @json($perKategori);
    const ratingData = @json($ratingDistribution);
    const chartColors = ['#2563eb', '#10b981', '#f59e0b', '#ef4444', '#7c3aed', '#0f766e'];

    new Chart(document.getElementById('kategoriChart'), {
        type: 'doughnut',
        data: {
            labels: Object.keys(kategoriData).map((label) => label.charAt(0).toUpperCase() + label.slice(1)),
            datasets: [{ data: Object.values(kategoriData), backgroundColor: chartColors, borderWidth: 0 }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: { legend: { position: 'bottom' } },
            cutout: '64%'
        }
    });

    new Chart(document.getElementById('ratingChart'), {
        type: 'bar',
        data: {
            labels: ['1', '2', '3', '4', '5'],
            datasets: [{
                label: 'Review',
                data: [1, 2, 3, 4, 5].map((rating) => ratingData[rating] || 0),
                backgroundColor: '#2563eb',
                borderRadius: 8
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: { y: { beginAtZero: true, ticks: { precision: 0 } } },
            plugins: { legend: { display: false } }
        }
    });
</script>
@endpush