@extends('layouts.admin')

@section('title', 'Dashboard')

@section('content')
<div class="space-y-6">
    
    <!-- Page Header -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
            <h2 class="text-2xl font-bold text-gray-800">Dashboard</h2>
            <p class="text-gray-500 mt-1">Selamat datang, <strong class="text-gray-700">{{ auth()->user()->nama }}</strong>! Berikut ringkasan toko Anda.</p>
        </div>
        <div class="flex items-center gap-2">
            <span class="px-3 py-1.5 bg-green-100 text-green-700 text-sm font-medium rounded-full flex items-center gap-1.5">
                <span class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></span>
                Online
            </span>
            <span class="text-sm text-gray-500">
                {{ now()->translatedFormat('l, d F Y') }}
            </span>
        </div>
    </div>

    {{-- 📊 Stats Cards --}}
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        
        <!-- Total Users -->
        <div class="group bg-white rounded-2xl border border-gray-200 shadow-sm hover:shadow-lg transition-all duration-300 p-5">
            <div class="flex items-start justify-between">
                <div>
                    <p class="text-sm font-medium text-gray-500">Total User</p>
                    <p class="text-3xl font-bold text-gray-800 mt-2">{{ $totalUser ?? 0 }}</p>
                    <p class="text-xs text-green-600 mt-2 flex items-center gap-1">
                        <i class="bi bi-arrow-up"></i>
                        <span>+12% dari bulan lalu</span>
                    </p>
                </div>
                <div class="p-3 bg-blue-100 rounded-xl group-hover:scale-110 transition-transform">
                    <i class="bi bi-people text-blue-600 text-xl"></i>
                </div>
            </div>
            <a href="{{ route('users.index') }}" class="mt-4 inline-flex items-center gap-1 text-sm text-blue-600 hover:text-blue-700 font-medium">
                Lihat semua user <i class="bi bi-arrow-right"></i>
            </a>
        </div>

        <!-- Total Products -->
        <div class="group bg-white rounded-2xl border border-gray-200 shadow-sm hover:shadow-lg transition-all duration-300 p-5">
            <div class="flex items-start justify-between">
                <div>
                    <p class="text-sm font-medium text-gray-500">Total Produk</p>
                    <p class="text-3xl font-bold text-gray-800 mt-2">{{ $totalProduk ?? 0 }}</p>
                    <p class="text-xs text-gray-500 mt-2">
                        <span class="text-emerald-600 font-medium">{{ $produkAktif ?? 0 }} aktif</span> • 
                        <span class="text-amber-600 font-medium">{{ $produkStokMenipis ?? 0 }} menipis</span>
                    </p>
                </div>
                <div class="p-3 bg-emerald-100 rounded-xl group-hover:scale-110 transition-transform">
                    <i class="bi bi-box-seam text-emerald-600 text-xl"></i>
                </div>
            </div>
            <a href="{{ route('produks.index') }}" class="mt-4 inline-flex items-center gap-1 text-sm text-emerald-600 hover:text-emerald-700 font-medium">
                Kelola produk <i class="bi bi-arrow-right"></i>
            </a>
        </div>

        <!-- Total Orders -->
        <div class="group bg-white rounded-2xl border border-gray-200 shadow-sm hover:shadow-lg transition-all duration-300 p-5">
            <div class="flex items-start justify-between">
                <div>
                    <p class="text-sm font-medium text-gray-500">Total Pesanan</p>
                    <p class="text-3xl font-bold text-gray-800 mt-2">{{ $totalPesanan ?? 0 }}</p>
                    <p class="text-xs text-gray-500 mt-2">
                        <span class="text-blue-600 font-medium">{{ $pesananBaru ?? 0 }} baru</span> • 
                        <span class="text-purple-600 font-medium">{{ $pesananProses ?? 0 }} diproses</span>
                    </p>
                </div>
                <div class="p-3 bg-purple-100 rounded-xl group-hover:scale-110 transition-transform">
                    <i class="bi bi-cart-check text-purple-600 text-xl"></i>
                </div>
            </div>
            <a href="{{ route('pesanans.index') }}" class="mt-4 inline-flex items-center gap-1 text-sm text-purple-600 hover:text-purple-700 font-medium">
                Lihat pesanan <i class="bi bi-arrow-right"></i>
            </a>
        </div>

        <!-- Total Revenue (Optional - Add if available) -->
        <div class="group bg-white rounded-2xl border border-gray-200 shadow-sm hover:shadow-lg transition-all duration-300 p-5">
            <div class="flex items-start justify-between">
                <div>
                    <p class="text-sm font-medium text-gray-500">Pendapatan</p>
                    <p class="text-3xl font-bold text-gray-800 mt-2">
                        Rp {{ number_format($totalPendapatan ?? 0, 0, ',', '.') }}
                    </p>
                    <p class="text-xs text-green-600 mt-2 flex items-center gap-1">
                        <i class="bi bi-arrow-up"></i>
                        <span>+8.5% dari bulan lalu</span>
                    </p>
                </div>
                <div class="p-3 bg-amber-100 rounded-xl group-hover:scale-110 transition-transform">
                    <i class="bi bi-currency-dollar text-amber-600 text-xl"></i>
                </div>
            </div>
            <a href="#" class="mt-4 inline-flex items-center gap-1 text-sm text-amber-600 hover:text-amber-700 font-medium">
                Lihat laporan <i class="bi bi-arrow-right"></i>
            </a>
        </div>
    </div>

    {{-- 📈 Main Content Grid --}}
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        
        <!-- Left Column: Recent Orders & Stock Alerts -->
        <div class="lg:col-span-2 space-y-6">
            
            {{-- 🛒 Recent Orders --}}
            <div class="bg-white rounded-2xl border border-gray-200 shadow-sm overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-100 flex items-center justify-between bg-gradient-to-r from-blue-50 to-indigo-50">
                    <h3 class="font-semibold text-gray-800 flex items-center gap-2">
                        <i class="bi bi-clock-history text-blue-500"></i>
                        Pesanan Terbaru
                    </h3>
                    <a href="{{ route('pesanans.index') }}" class="text-sm text-blue-600 hover:text-blue-700 font-medium">
                        Lihat semua
                    </a>
                </div>
                <div class="p-4">
                    @php
                        // Sample data - replace with actual query from controller
                        $recentOrders = $recentPesanan ?? collect([]);
                    @endphp
                    
                    @if($recentOrders->isEmpty())
                        <div class="flex flex-col items-center justify-center py-8 text-center">
                            <div class="w-14 h-14 rounded-full bg-gray-100 flex items-center justify-center mb-3">
                                <i class="bi bi-inbox text-2xl text-gray-400"></i>
                            </div>
                            <p class="text-gray-500 text-sm">Belum ada pesanan baru</p>
                        </div>
                    @else
                        <div class="overflow-x-auto">
                            <table class="w-full">
                                <thead>
                                    <tr class="text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        <th class="pb-3 pl-2">ID</th>
                                        <th class="pb-3">Customer</th>
                                        <th class="pb-3">Total</th>
                                        <th class="pb-3">Status</th>
                                        <th class="pb-3 pr-2">Aksi</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-gray-100">
                                    @foreach($recentOrders->take(5) as $order)
                                        <tr class="hover:bg-gray-50 transition-colors">
                                            <td class="py-3 pl-2">
                                                <span class="font-mono text-sm text-gray-600">#{{ $order->id ?? '001' }}</span>
                                            </td>
                                            <td class="py-3">
                                                <div class="flex items-center gap-2">
                                                    <div class="w-8 h-8 rounded-full bg-gradient-to-br from-blue-400 to-indigo-500 flex items-center justify-center text-white text-xs font-semibold">
                                                        {{ substr($order->user_nama ?? 'A', 0, 1) }}
                                                    </div>
                                                    <span class="text-sm text-gray-700">{{ $order->user_nama ?? 'Customer' }}</span>
                                                </div>
                                            </td>
                                            <td class="py-3">
                                                <span class="font-semibold text-gray-800">
                                                    Rp {{ number_format($order->total ?? 0, 0, ',', '.') }}
                                                </span>
                                            </td>
                                            <td class="py-3">
                                                @php
                                                    $status = $order->status ?? 'pending';
                                                    $statusStyles = [
                                                        'pending' => 'bg-amber-100 text-amber-700',
                                                        'proses' => 'bg-blue-100 text-blue-700',
                                                        'dikirim' => 'bg-purple-100 text-purple-700',
                                                        'selesai' => 'bg-green-100 text-green-700',
                                                        'batal' => 'bg-red-100 text-red-700',
                                                    ];
                                                @endphp
                                                <span class="px-2.5 py-1 text-xs font-medium rounded-full {{ $statusStyles[$status] ?? 'bg-gray-100 text-gray-700' }}">
                                                    {{ ucfirst($status) }}
                                                </span>
                                            </td>
                                            <td class="py-3 pr-2">
                                                <a href="{{ route('pesanans.show', $order->id ?? 1) }}" 
                                                   class="inline-flex items-center justify-center w-8 h-8 text-gray-500 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-colors">
                                                    <i class="bi bi-eye"></i>
                                                </a>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @endif
                </div>
            </div>

            {{-- ⚠️ Low Stock Alerts --}}
            <div class="bg-white rounded-2xl border border-gray-200 shadow-sm overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-100 flex items-center justify-between bg-gradient-to-r from-amber-50 to-orange-50">
                    <h3 class="font-semibold text-gray-800 flex items-center gap-2">
                        <i class="bi bi-exclamation-triangle text-amber-500"></i>
                        Stok Menipis
                    </h3>
                    <span class="px-2.5 py-1 bg-red-100 text-red-700 text-xs font-bold rounded-full">
                        {{ $produkStokHabis ?? 0 }} habis • {{ $produkStokMenipis ?? 0 }} menipis
                    </span>
                </div>
                <div class="p-4">
                    @php
                        $lowStockProducts = $produkLowStock ?? collect([]);
                    @endphp
                    
                    @if($lowStockProducts->isEmpty())
                        <div class="flex items-center gap-3 p-4 bg-green-50 rounded-xl border border-green-100">
                            <i class="bi bi-check-circle-fill text-green-500 text-xl"></i>
                            <p class="text-green-700 text-sm">Semua stok produk aman! 🎉</p>
                        </div>
                    @else
                        <div class="space-y-3">
                            @foreach($lowStockProducts->take(4) as $produk)
                                @php
                                    $totalStok = $produk->varians?->sum('stok') ?? 0;
                                    $isHabis = $totalStok == 0;
                                    $isMenipis = $totalStok > 0 && $totalStok < 5;
                                @endphp
                                <div class="flex items-center gap-3 p-3 rounded-xl {{ $isHabis ? 'bg-red-50 border border-red-100' : 'bg-amber-50 border border-amber-100' }}">
                                    <!-- Product Thumbnail -->
                                    <div class="w-12 h-12 rounded-lg bg-gray-100 flex items-center justify-center flex-shrink-0 overflow-hidden">
                                        @if($produk->foto)
                                            <img src="{{ asset('storage/' . $produk->foto) }}" alt="{{ $produk->nama }}" class="w-full h-full object-cover">
                                        @else
                                            <i class="bi bi-image text-gray-400"></i>
                                        @endif
                                    </div>
                                    
                                    <!-- Product Info -->
                                    <div class="flex-1 min-w-0">
                                        <p class="font-medium text-gray-800 text-sm truncate">{{ $produk->nama }}</p>
                                        <p class="text-xs text-gray-500">{{ $produk->kategori->nama ?? 'Umum' }}</p>
                                    </div>
                                    
                                    <!-- Stock Badge & Action -->
                                    <div class="text-right">
                                        @if($isHabis)
                                            <span class="inline-flex items-center px-2.5 py-1 bg-red-500 text-white text-xs font-semibold rounded-full animate-pulse">
                                                Habis
                                            </span>
                                        @else
                                            <span class="inline-flex items-center px-2.5 py-1 bg-amber-500 text-white text-xs font-semibold rounded-full">
                                                {{ $totalStok }} tersisa
                                            </span>
                                        @endif
                                        <a href="{{ route('produks.edit', $produk->id) }}" 
                                           class="block mt-1.5 text-xs text-blue-600 hover:text-blue-700 font-medium">
                                            Restock →
                                        </a>
                                    </div>
                                </div>
                            @endforeach
                            
                            @if(($produkStokHabis ?? 0) + ($produkStokMenipis ?? 0) > 4)
                                <a href="{{ route('produks.index') }}?filter=low_stock" 
                                   class="block text-center py-2 text-sm text-blue-600 hover:text-blue-700 font-medium border-t border-gray-100 mt-2">
                                    Lihat semua produk stok menipis ({{ ($produkStokHabis ?? 0) + ($produkStokMenipis ?? 0) - 4 }} lagi)
                                </a>
                            @endif
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <!-- Right Column: Quick Stats & Categories -->
        <div class="space-y-6">
            
            {{-- 📊 Category Distribution --}}
            <div class="bg-white rounded-2xl border border-gray-200 shadow-sm overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-100 bg-gradient-to-r from-emerald-50 to-teal-50">
                    <h3 class="font-semibold text-gray-800 flex items-center gap-2">
                        <i class="bi bi-pie-chart text-emerald-500"></i>
                        Produk per Kategori
                    </h3>
                </div>
                <div class="p-5">
                    @php
                        $kategoriStats = $statsKategori ?? collect([]);
                        $colors = ['bg-blue-500', 'bg-emerald-500', 'bg-purple-500', 'bg-amber-500', 'bg-pink-500', 'bg-cyan-500'];
                    @endphp
                    
                    @if($kategoriStats->isEmpty())
                        <p class="text-gray-500 text-sm text-center py-4">Data kategori belum tersedia</p>
                    @else
                        <div class="space-y-4">
                            @foreach($kategoriStats->take(5) as $index => $stat)
                                @php
                                    $percentage = $totalProduk > 0 ? ($stat->count / $totalProduk * 100) : 0;
                                    $color = $colors[$index % count($colors)];
                                @endphp
                                <div>
                                    <div class="flex items-center justify-between text-sm mb-1.5">
                                        <span class="font-medium text-gray-700">{{ $stat->nama ?? 'Lainnya' }}</span>
                                        <span class="text-gray-500">{{ $stat->count ?? 0 }} ({{ number_format($percentage, 0) }}%)</span>
                                    </div>
                                    <div class="h-2 bg-gray-100 rounded-full overflow-hidden">
                                        <div class="h-full {{ $color }} rounded-full transition-all duration-500" style="width: {{ min($percentage, 100) }}%"></div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @endif
                </div>
            </div>

            {{-- ⚡ Quick Actions --}}
            <div class="bg-white rounded-2xl border border-gray-200 shadow-sm overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-100 bg-gradient-to-r from-indigo-50 to-purple-50">
                    <h3 class="font-semibold text-gray-800 flex items-center gap-2">
                        <i class="bi bi-lightning text-indigo-500"></i>
                        Aksi Cepat
                    </h3>
                </div>
                <div class="p-4 grid grid-cols-2 gap-3">
                    <a href="{{ route('produks.create') }}" 
                       class="flex flex-col items-center justify-center p-4 rounded-xl border-2 border-dashed border-gray-200 hover:border-emerald-400 hover:bg-emerald-50 transition-all group">
                        <div class="w-10 h-10 rounded-full bg-emerald-100 flex items-center justify-center mb-2 group-hover:scale-110 transition-transform">
                            <i class="bi bi-plus-lg text-emerald-600"></i>
                        </div>
                        <span class="text-xs font-medium text-gray-700 text-center">Tambah Produk</span>
                    </a>
                    
                    <a href="{{ route('kategoris.create') }}" 
                       class="flex flex-col items-center justify-center p-4 rounded-xl border-2 border-dashed border-gray-200 hover:border-blue-400 hover:bg-blue-50 transition-all group">
                        <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mb-2 group-hover:scale-110 transition-transform">
                            <i class="bi bi-folder-plus text-blue-600"></i>
                        </div>
                        <span class="text-xs font-medium text-gray-700 text-center">Kategori Baru</span>
                    </a>
                    
                    <a href="{{ route('users.create') }}" 
                       class="flex flex-col items-center justify-center p-4 rounded-xl border-2 border-dashed border-gray-200 hover:border-purple-400 hover:bg-purple-50 transition-all group">
                        <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center mb-2 group-hover:scale-110 transition-transform">
                            <i class="bi bi-person-plus text-purple-600"></i>
                        </div>
                        <span class="text-xs font-medium text-gray-700 text-center">Tambah User</span>
                    </a>
                    
                    <a href="#" 
                       class="flex flex-col items-center justify-center p-4 rounded-xl border-2 border-dashed border-gray-200 hover:border-amber-400 hover:bg-amber-50 transition-all group">
                        <div class="w-10 h-10 rounded-full bg-amber-100 flex items-center justify-center mb-2 group-hover:scale-110 transition-transform">
                            <i class="bi bi-file-earmark-bar-graph text-amber-600"></i>
                        </div>
                        <span class="text-xs font-medium text-gray-700 text-center">Laporan</span>
                    </a>
                </div>
            </div>

            {{-- 📅 Recent Activity (Optional) --}}
            <div class="bg-white rounded-2xl border border-gray-200 shadow-sm overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-100 bg-gradient-to-r from-pink-50 to-rose-50">
                    <h3 class="font-semibold text-gray-800 flex items-center gap-2">
                        <i class="bi bi-activity text-pink-500"></i>
                        Aktivitas Terbaru
                    </h3>
                </div>
                <div class="p-4 space-y-4">
                    @php
                        $activities = $recentActivities ?? collect([
                            ['icon' => 'bi-cart-check', 'text' => 'Pesanan #1234 telah dibayar', 'time' => '5 menit lalu', 'color' => 'blue'],
                            ['icon' => 'bi-box-seam', 'text' => 'Produk "Kaos Premium" ditambahkan', 'time' => '1 jam lalu', 'color' => 'emerald'],
                            ['icon' => 'bi-person', 'text' => 'User baru "Budi" terdaftar', 'time' => '3 jam lalu', 'color' => 'purple'],
                            ['icon' => 'bi-exclamation-triangle', 'text' => 'Stok "Celana Jeans" menipis', 'time' => '5 jam lalu', 'color' => 'amber'],
                        ]);
                    @endphp
                    
                    @foreach($activities as $activity)
                        <div class="flex items-start gap-3">
                            <div class="w-8 h-8 rounded-full bg-{{ $activity['color'] }}-100 flex items-center justify-center flex-shrink-0">
                                <i class="bi {{ $activity['icon'] }} text-{{ $activity['color'] }}-600 text-sm"></i>
                            </div>
                            <div class="flex-1 min-w-0">
                                <p class="text-sm text-gray-700">{{ $activity['text'] }}</p>
                                <p class="text-xs text-gray-400 mt-0.5">{{ $activity['time'] }}</p>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</div>

{{-- 🎨 Custom Styles for Animations --}}
<style>
    @keyframes pulse-ring {
        0% { transform: scale(0.8); opacity: 1; }
        100% { transform: scale(1.3); opacity: 0; }
    }
    .animate-pulse-ring {
        animation: pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }
</style>
@endsection