@extends('Livewire.layout.App')

@section('content')
<div>
    <!-- Header -->
    <div class="mb-8 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
        <div>
            <h2 class="text-2xl font-black text-slate-900">Selamat Datang, {{ auth()->user()->name }}! 👋</h2>
            <p class="text-slate-500 text-sm mt-1">Panel pengelolaan media dan aset digital Ponpes Al Ikhsan Baron Bogor.</p>
        </div>
        <div class="flex items-center gap-3">
            <a href="{{ route('assets.gallery') }}" class="inline-flex items-center gap-2 rounded-xl bg-blue-600 px-4 py-2.5 text-sm font-bold text-white shadow-lg shadow-blue-600/20 transition hover:bg-blue-700">
                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3" /></svg>
                Lihat Galeri
            </a>
        </div>
    </div>

    <!-- Stats Cards -->
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
        <div class="bg-white p-5 rounded-xl border border-gray-200 shadow-sm hover:shadow-md transition">
            <div class="flex items-center justify-between">
                <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-blue-100 text-blue-600">
                    <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375 0 11-.75 0 .375 0 01.75 0z" /></svg>
                </div>
                <span class="text-[10px] font-bold text-emerald-600 bg-emerald-50 px-2 py-0.5 rounded-full">Aset</span>
            </div>
            <h3 class="text-2xl font-extrabold text-slate-800 mt-3">{{ number_format($assetCount) }}</h3>
            <p class="text-xs text-slate-400 mt-1">Total aset digital</p>
        </div>

        <div class="bg-white p-5 rounded-xl border border-gray-200 shadow-sm hover:shadow-md transition">
            <div class="flex items-center justify-between">
                <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-emerald-100 text-emerald-600">
                    <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44z" /></svg>
                </div>
                <span class="text-[10px] font-bold text-emerald-600 bg-emerald-50 px-2 py-0.5 rounded-full">Kategori</span>
            </div>
            <h3 class="text-2xl font-extrabold text-slate-800 mt-3">{{ number_format($categoryCount) }}</h3>
            <p class="text-xs text-slate-400 mt-1">Kelompok media</p>
        </div>

        <div class="bg-white p-5 rounded-xl border border-gray-200 shadow-sm hover:shadow-md transition">
            <div class="flex items-center justify-between">
                <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-amber-100 text-amber-600">
                    <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9.568 3H5.25A2.25 2.25 0 0 0 3 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 0 0 5.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 0 0 9.568 3z" /><path stroke-linecap="round" stroke-linejoin="round" d="M6 6h.008v.008H6V6z" /></svg>
                </div>
                <span class="text-[10px] font-bold text-amber-600 bg-amber-50 px-2 py-0.5 rounded-full">Tag</span>
            </div>
            <h3 class="text-2xl font-extrabold text-slate-800 mt-3">{{ number_format($tagCount) }}</h3>
            <p class="text-xs text-slate-400 mt-1">Penanda filter</p>
        </div>

        <div class="bg-white p-5 rounded-xl border border-gray-200 shadow-sm hover:shadow-md transition">
            <div class="flex items-center justify-between">
                <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-purple-100 text-purple-600">
                    <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" /></svg>
                </div>
                <span class="text-[10px] font-bold text-purple-600 bg-purple-50 px-2 py-0.5 rounded-full">Role</span>
            </div>
            <h3 class="text-2xl font-extrabold text-slate-800 mt-3 uppercase">{{ auth()->user()->role === 'admin' ? 'Admin' : 'User' }}</h3>
            <p class="text-xs text-slate-400 mt-1">Hak akses Anda</p>
        </div>
    </div>

    <!-- Quick Actions -->
    <div class="mb-8">
        <h3 class="text-sm font-bold text-slate-700 mb-3">Aksi Cepat</h3>
        <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
            <a href="{{ route('assets.gallery') }}" class="flex items-center gap-3 rounded-xl border border-gray-200 bg-white p-4 shadow-sm hover:border-blue-200 hover:bg-blue-50/50 transition group">
                <div class="flex h-9 w-9 items-center justify-center rounded-lg bg-blue-100 text-blue-600 group-hover:bg-blue-600 group-hover:text-white transition">
                    <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3" /></svg>
                </div>
                <div>
                    <p class="text-xs font-bold text-slate-700">Upload Aset</p>
                    <p class="text-[10px] text-slate-400">Tambah file baru</p>
                </div>
            </a>
            <a href="{{ route('collections.index') }}" class="flex items-center gap-3 rounded-xl border border-gray-200 bg-white p-4 shadow-sm hover:border-emerald-200 hover:bg-emerald-50/50 transition group">
                <div class="flex h-9 w-9 items-center justify-center rounded-lg bg-emerald-100 text-emerald-600 group-hover:bg-emerald-600 group-hover:text-white transition">
                    <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 10.5v6m3-3H9m4.06-7.19-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44z" /></svg>
                </div>
                <div>
                    <p class="text-xs font-bold text-slate-700">Buat Koleksi</p>
                    <p class="text-[10px] text-slate-400">Buat folder baru</p>
                </div>
            </a>
            @if(auth()->user()->role === 'admin')
            <a href="{{ route('categories.index') }}" class="flex items-center gap-3 rounded-xl border border-gray-200 bg-white p-4 shadow-sm hover:border-amber-200 hover:bg-amber-50/50 transition group">
                <div class="flex h-9 w-9 items-center justify-center rounded-lg bg-amber-100 text-amber-600 group-hover:bg-amber-600 group-hover:text-white transition">
                    <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44z" /></svg>
                </div>
                <div>
                    <p class="text-xs font-bold text-slate-700">Kelola Kategori</p>
                    <p class="text-[10px] text-slate-400">Atur kategori</p>
                </div>
            </a>
            <a href="{{ route('users.index') }}" class="flex items-center gap-3 rounded-xl border border-gray-200 bg-white p-4 shadow-sm hover:border-purple-200 hover:bg-purple-50/50 transition group">
                <div class="flex h-9 w-9 items-center justify-center rounded-lg bg-purple-100 text-purple-600 group-hover:bg-purple-600 group-hover:text-white transition">
                    <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z" /></svg>
                </div>
                <div>
                    <p class="text-xs font-bold text-slate-700">Kelola User</p>
                    <p class="text-[10px] text-slate-400">Atur pengguna</p>
                </div>
            </a>
            @endif
        </div>
    </div>

    <div class="grid gap-6 md:grid-cols-3 mb-8">
        <!-- Aset Terbaru -->
        <section class="overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-sm">
            <div class="flex items-center justify-between border-b border-gray-100 p-4">
                <div>
                    <h3 class="font-bold text-slate-800 text-sm">Aset Terbaru</h3>
                    <p class="mt-0.5 text-[10px] text-slate-400">File terakhir diunggah</p>
                </div>
                <a href="{{ route('assets.gallery') }}" class="text-[10px] font-bold text-blue-600 hover:text-blue-800 transition">Lihat semua →</a>
            </div>
            <div class="divide-y divide-gray-100">
                @forelse($latestAssets as $asset)
                    <a href="{{ route('assets.show', $asset) }}" class="flex items-center gap-3 p-3 transition hover:bg-slate-50">
                        <div class="flex h-10 w-10 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-slate-100">
                            @if($asset->thumbnail_path)
                                <img src="{{ asset('storage/' . $asset->thumbnail_path) }}" alt="" class="h-full w-full object-cover">
                            @else
                                <span class="text-xs font-black uppercase text-slate-400">{{ substr($asset->file_type, 0, 3) }}</span>
                            @endif
                        </div>
                        <div class="min-w-0 flex-1">
                            <p class="truncate text-xs font-bold text-slate-700">{{ $asset->title }}</p>
                            <p class="mt-0.5 text-[10px] text-slate-400">{{ $asset->category->name ?? 'Tanpa kategori' }} · {{ strtoupper($asset->file_type) }}</p>
                        </div>
                    </a>
                @empty
                    <div class="p-8 text-center">
                        <p class="text-2xl mb-1">📂</p>
                        <p class="text-xs text-slate-400">Belum ada aset.</p>
                    </div>
                @endforelse
            </div>
        </section>

        <!-- Distribusi Kategori -->
        <section class="rounded-2xl border border-gray-200 bg-white p-4 shadow-sm">
            <h3 class="font-bold text-slate-800 text-sm">Distribusi Kategori</h3>
            <p class="mt-0.5 text-[10px] text-slate-400">Jumlah aset per kategori</p>
            <div class="mt-4 space-y-3">
                @forelse($categorySummary as $category)
                    <div>
                        <div class="mb-1 flex justify-between gap-2 text-[10px]">
                            <span class="truncate font-semibold text-slate-600">{{ $category->name }}</span>
                            <span class="font-bold text-blue-600">{{ $category->assets_count }}</span>
                        </div>
                        <div class="h-2 overflow-hidden rounded-full bg-slate-100">
                            <div class="h-full rounded-full bg-gradient-to-r from-blue-500 to-blue-600 transition-all" style="width: {{ $assetCount ? min(100, ($category->assets_count / $assetCount) * 100) : 0 }}%"></div>
                        </div>
                    </div>
                @empty
                    <p class="text-[10px] text-slate-400 text-center py-4">Belum ada kategori.</p>
                @endforelse
            </div>
        </section>

        <!-- Distribusi Jenis File -->
        <section class="rounded-2xl border border-gray-200 bg-white p-4 shadow-sm">
            <h3 class="font-bold text-slate-800 text-sm">Distribusi Jenis File</h3>
            <p class="mt-0.5 text-[10px] text-slate-400">Jumlah aset per tipe file</p>
            <div class="mt-4 space-y-3">
                @forelse($fileTypeSummary as $file)
                    <div>
                        <div class="mb-1 flex justify-between gap-2 text-[10px]">
                            <span class="truncate font-semibold text-slate-600 uppercase">{{ $file->file_type }}</span>
                            <span class="font-bold text-emerald-600">{{ $file->total }}</span>
                        </div>
                        <div class="h-2 overflow-hidden rounded-full bg-slate-100">
                            <div class="h-full rounded-full bg-gradient-to-r from-emerald-500 to-emerald-600 transition-all" style="width: {{ $assetCount ? min(100, ($file->total / $assetCount) * 100) : 0 }}%"></div>
                        </div>
                    </div>
                @empty
                    <p class="text-[10px] text-slate-400 text-center py-4">Belum ada data.</p>
                @endforelse
            </div>
        </section>
    </div>

    <!-- Paling Banyak Diunduh -->
    <section class="overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-sm">
        <div class="flex items-center justify-between border-b border-gray-100 p-5">
            <div>
                <h3 class="font-bold text-slate-800">Paling Banyak Diunduh</h3>
                <p class="mt-1 text-xs text-slate-400">Aset yang paling sering diunduh</p>
            </div>
            <a href="{{ route('assets.gallery') }}" class="text-xs font-bold text-blue-600 hover:text-blue-800 transition">Buka galeri →</a>
        </div>
        <div class="divide-y divide-gray-100">
            @forelse($popularAssets as $index => $asset)
                <a href="{{ route('assets.show', $asset) }}" class="flex items-center gap-3 p-3 transition hover:bg-slate-50">
                    <span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-blue-100 text-[10px] font-bold text-blue-600">{{ $index + 1 }}</span>
                    <div class="min-w-0 flex-1">
                        <p class="truncate text-sm font-semibold text-slate-700">{{ $asset->title }}</p>
                        <p class="text-xs text-slate-400">{{ $asset->category->name ?? 'Tanpa kategori' }}</p>
                    </div>
                    <span class="shrink-0 text-xs font-bold text-blue-600">{{ number_format($asset->download_count) }}x</span>
                </a>
            @empty
                <p class="p-8 text-center text-sm text-slate-400">Belum ada riwayat download.</p>
            @endforelse
        </div>
    </section>
</div>
@endsection