@extends('admin.layouts.app')

@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">
        <div>
            <h1 class="text-2xl font-bold text-slate-800 dark:text-white">Dashboard</h1>
            <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">Welcome back! Here's what's happening with your store.</p>
        </div>
        <div class="mt-4 sm:mt-0 flex items-center space-x-3">
            <select class="px-4 py-2 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
                <option>Last 7 days</option>
                <option>Last 30 days</option>
                <option>This month</option>
                <option>This year</option>
            </select>
            <button class="px-4 py-2 bg-indigo-600 text-white rounded-xl text-sm font-medium hover:bg-indigo-700 transition-colors flex items-center">
                <i data-lucide="download" class="w-4 h-4 mr-2"></i>
                Export
            </button>
        </div>
    </div>

    <!-- Stats Grid - Row 1 -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 lg:gap-6">
        <!-- Total Orders -->
        <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700 p-6 hover:shadow-lg transition-shadow" data-aos="fade-up" data-aos-delay="0">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-medium text-slate-500 dark:text-slate-400">Total Orders</p>
                    <p class="text-3xl font-bold text-slate-800 dark:text-white mt-1">{{ number_format($metrics['orders']['total']) }}</p>
                    <p class="text-sm text-emerald-500 mt-2 flex items-center">
                        <i data-lucide="trending-up" class="w-4 h-4 mr-1"></i>
                        {{ $metrics['orders']['today'] }} today
                    </p>
                </div>
                <div class="p-4 bg-indigo-50 dark:bg-indigo-900/30 rounded-2xl">
                    <i data-lucide="shopping-cart" class="w-8 h-8 text-indigo-600 dark:text-indigo-400"></i>
                </div>
            </div>
        </div>

        <!-- Pending Orders -->
        <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700 p-6 hover:shadow-lg transition-shadow" data-aos="fade-up" data-aos-delay="100">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-medium text-slate-500 dark:text-slate-400">Pending Orders</p>
                    <p class="text-3xl font-bold text-slate-800 dark:text-white mt-1">{{ number_format($metrics['orders']['pending']) }}</p>
                    <p class="text-sm text-amber-500 mt-2 flex items-center">
                        <i data-lucide="clock" class="w-4 h-4 mr-1"></i>
                        Needs attention
                    </p>
                </div>
                <div class="p-4 bg-amber-50 dark:bg-amber-900/30 rounded-2xl">
                    <i data-lucide="clock" class="w-8 h-8 text-amber-600 dark:text-amber-400"></i>
                </div>
            </div>
        </div>

        <!-- Total Revenue -->
        <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700 p-6 hover:shadow-lg transition-shadow" data-aos="fade-up" data-aos-delay="200">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-medium text-slate-500 dark:text-slate-400">Total Revenue</p>
                    <p class="text-3xl font-bold text-slate-800 dark:text-white mt-1">৳{{ number_format($metrics['financial']['total_sales']) }}</p>
                    <p class="text-sm text-emerald-500 mt-2 flex items-center">
                        <i data-lucide="trending-up" class="w-4 h-4 mr-1"></i>
                        ৳{{ number_format($metrics['financial']['today_sales']) }} today
                    </p>
                </div>
                <div class="p-4 bg-emerald-50 dark:bg-emerald-900/30 rounded-2xl">
                    <i data-lucide="banknote" class="w-8 h-8 text-emerald-600 dark:text-emerald-400"></i>
                </div>
            </div>
        </div>

        <!-- Net Profit -->
        <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700 p-6 hover:shadow-lg transition-shadow" data-aos="fade-up" data-aos-delay="300">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-medium text-slate-500 dark:text-slate-400">Net Profit</p>
                    <p class="text-3xl font-bold text-slate-800 dark:text-white mt-1">৳{{ number_format($metrics['financial']['net_profit']) }}</p>
                    <p class="text-sm text-emerald-500 mt-2 flex items-center">
                        <i data-lucide="trending-up" class="w-4 h-4 mr-1"></i>
                        From completed orders
                    </p>
                </div>
                <div class="p-4 bg-purple-50 dark:bg-purple-900/30 rounded-2xl">
                    <i data-lucide="wallet" class="w-8 h-8 text-purple-600 dark:text-purple-400"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- Stats Grid - Row 2 -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 lg:gap-6">
        <!-- Total Products -->
        <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700 p-6 hover:shadow-lg transition-shadow" data-aos="fade-up">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-medium text-slate-500 dark:text-slate-400">Total Products</p>
                    <p class="text-3xl font-bold text-slate-800 dark:text-white mt-1">{{ number_format($metrics['products']['total']) }}</p>
                    <p class="text-sm text-slate-500 mt-2">{{ $metrics['products']['active'] }} active</p>
                </div>
                <div class="p-4 bg-blue-50 dark:bg-blue-900/30 rounded-2xl">
                    <i data-lucide="package" class="w-8 h-8 text-blue-600 dark:text-blue-400"></i>
                </div>
            </div>
        </div>

        <!-- Total Customers -->
        <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700 p-6 hover:shadow-lg transition-shadow" data-aos="fade-up" data-aos-delay="100">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-medium text-slate-500 dark:text-slate-400">Total Customers</p>
                    <p class="text-3xl font-bold text-slate-800 dark:text-white mt-1">{{ number_format($metrics['customers']['total']) }}</p>
                    <p class="text-sm text-emerald-500 mt-2">+{{ $metrics['customers']['today'] }} today</p>
                </div>
                <div class="p-4 bg-pink-50 dark:bg-pink-900/30 rounded-2xl">
                    <i data-lucide="users" class="w-8 h-8 text-pink-600 dark:text-pink-400"></i>
                </div>
            </div>
        </div>

        <!-- Stock Value -->
        <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700 p-6 hover:shadow-lg transition-shadow" data-aos="fade-up" data-aos-delay="200">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-medium text-slate-500 dark:text-slate-400">Stock Value</p>
                    <p class="text-3xl font-bold text-slate-800 dark:text-white mt-1">৳{{ number_format($metrics['stock']['total_value']) }}</p>
                    <p class="text-sm text-slate-500 mt-2">{{ number_format($metrics['stock']['total_pieces']) }} pieces</p>
                </div>
                <div class="p-4 bg-cyan-50 dark:bg-cyan-900/30 rounded-2xl">
                    <i data-lucide="warehouse" class="w-8 h-8 text-cyan-600 dark:text-cyan-400"></i>
                </div>
            </div>
        </div>

        <!-- Incomplete Orders -->
        <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700 p-6 hover:shadow-lg transition-shadow" data-aos="fade-up" data-aos-delay="300">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-medium text-slate-500 dark:text-slate-400">Incomplete Orders</p>
                    <p class="text-3xl font-bold text-slate-800 dark:text-white mt-1">{{ number_format($metrics['incomplete_orders']) }}</p>
                    <p class="text-sm text-red-500 mt-2 flex items-center">
                        <i data-lucide="alert-triangle" class="w-4 h-4 mr-1"></i>
                        Abandoned carts
                    </p>
                </div>
                <div class="p-4 bg-red-50 dark:bg-red-900/30 rounded-2xl">
                    <i data-lucide="shopping-bag" class="w-8 h-8 text-red-600 dark:text-red-400"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- Order Status Cards -->
    <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-4">
        <div class="bg-amber-50 dark:bg-amber-900/20 rounded-xl p-4 border border-amber-200 dark:border-amber-800">
            <div class="flex items-center justify-between">
                <span class="text-amber-700 dark:text-amber-400 font-medium">Pending</span>
                <span class="text-2xl font-bold text-amber-700 dark:text-amber-400">{{ $metrics['orders']['pending'] }}</span>
            </div>
        </div>
        <div class="bg-blue-50 dark:bg-blue-900/20 rounded-xl p-4 border border-blue-200 dark:border-blue-800">
            <div class="flex items-center justify-between">
                <span class="text-blue-700 dark:text-blue-400 font-medium">Processing</span>
                <span class="text-2xl font-bold text-blue-700 dark:text-blue-400">{{ $metrics['orders']['processing'] }}</span>
            </div>
        </div>
        <div class="bg-emerald-50 dark:bg-emerald-900/20 rounded-xl p-4 border border-emerald-200 dark:border-emerald-800">
            <div class="flex items-center justify-between">
                <span class="text-emerald-700 dark:text-emerald-400 font-medium">Completed</span>
                <span class="text-2xl font-bold text-emerald-700 dark:text-emerald-400">{{ $metrics['orders']['completed'] }}</span>
            </div>
        </div>
        <div class="bg-red-50 dark:bg-red-900/20 rounded-xl p-4 border border-red-200 dark:border-red-800">
            <div class="flex items-center justify-between">
                <span class="text-red-700 dark:text-red-400 font-medium">Cancelled</span>
                <span class="text-2xl font-bold text-red-700 dark:text-red-400">{{ $metrics['orders']['cancelled'] }}</span>
            </div>
        </div>
        <div class="bg-purple-50 dark:bg-purple-900/20 rounded-xl p-4 border border-purple-200 dark:border-purple-800">
            <div class="flex items-center justify-between">
                <span class="text-purple-700 dark:text-purple-400 font-medium">Returned</span>
                <span class="text-2xl font-bold text-purple-700 dark:text-purple-400">{{ $metrics['orders']['returned'] }}</span>
            </div>
        </div>
    </div>

    <!-- Charts Row -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- Sales Chart -->
        <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700 p-6" data-aos="fade-up">
            <div class="flex items-center justify-between mb-6">
                <h2 class="text-lg font-semibold text-slate-800 dark:text-white">Sales Overview</h2>
                <div class="flex items-center space-x-2">
                    <span class="flex items-center text-sm text-slate-500">
                        <span class="w-3 h-3 bg-indigo-500 rounded-full mr-1"></span> Sales
                    </span>
                    <span class="flex items-center text-sm text-slate-500">
                        <span class="w-3 h-3 bg-emerald-500 rounded-full mr-1"></span> Profit
                    </span>
                </div>
            </div>
            <div class="h-80">
                <canvas id="salesChart"></canvas>
            </div>
        </div>

        <!-- Order Status Chart -->
        <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700 p-6" data-aos="fade-up" data-aos-delay="100">
            <div class="flex items-center justify-between mb-6">
                <h2 class="text-lg font-semibold text-slate-800 dark:text-white">Order Status Distribution</h2>
            </div>
            <div class="h-80">
                <canvas id="orderStatusChart"></canvas>
            </div>
        </div>
    </div>

    <!-- Bottom Row -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Recent Orders -->
        <div class="lg:col-span-2 bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700" data-aos="fade-up">
            <div class="p-6 border-b border-slate-200 dark:border-slate-700">
                <div class="flex items-center justify-between">
                    <h2 class="text-lg font-semibold text-slate-800 dark:text-white">Recent Orders</h2>
                    <a href="{{ route('admin.orders.index') }}" class="text-sm text-indigo-600 dark:text-indigo-400 hover:underline">View all</a>
                </div>
            </div>
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead>
                        <tr class="text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wider">
                            <th class="px-6 py-4">Order ID</th>
                            <th class="px-6 py-4">Customer</th>
                            <th class="px-6 py-4">Amount</th>
                            <th class="px-6 py-4">Status</th>
                            <th class="px-6 py-4">Action</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-200 dark:divide-slate-700">
                        @forelse($recentOrders as $order)
                        <tr class="hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-colors">
                            <td class="px-6 py-4">
                                <span class="font-medium text-slate-800 dark:text-white">#{{ $order->id }}</span>
                            </td>
                            <td class="px-6 py-4">
                                <div class="flex items-center">
                                    <img src="https://ui-avatars.com/api/?name={{ urlencode($order->shipping_name) }}&background=6366f1&color=fff" class="w-8 h-8 rounded-lg mr-3">
                                    <div>
                                        <p class="font-medium text-slate-800 dark:text-white">{{ $order->shipping_name }}</p>
                                        <p class="text-sm text-slate-500 dark:text-slate-400">{{ $order->shipping_phone }}</p>
                                    </div>
                                </div>
                            </td>
                            <td class="px-6 py-4">
                                <span class="font-semibold text-slate-800 dark:text-white">৳{{ number_format($order->total) }}</span>
                            </td>
                            <td class="px-6 py-4">
                                @php
                                    $statusColors = [
                                        'pending' => 'bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400',
                                        'processing' => 'bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400',
                                        'completed' => 'bg-emerald-100 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-400',
                                        'cancelled' => 'bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400',
                                        'returned' => 'bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-400',
                                    ];
                                @endphp
                                <span class="px-3 py-1 text-xs font-medium {{ $statusColors[$order->status] ?? 'bg-slate-100 text-slate-700' }} rounded-full">
                                    {{ ucfirst($order->status) }}
                                </span>
                            </td>
                            <td class="px-6 py-4">
                                <a href="{{ route('admin.orders.show', $order) }}" class="p-2 hover:bg-slate-100 dark:hover:bg-slate-700 rounded-lg transition-colors inline-block">
                                    <i data-lucide="eye" class="w-4 h-4 text-slate-500 dark:text-slate-400"></i>
                                </a>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="5" class="px-6 py-8 text-center text-slate-500 dark:text-slate-400">
                                No orders found
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Top Products -->
        <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700" data-aos="fade-up" data-aos-delay="100">
            <div class="p-6 border-b border-slate-200 dark:border-slate-700">
                <h2 class="text-lg font-semibold text-slate-800 dark:text-white">Top Selling Products</h2>
            </div>
            <div class="p-6 space-y-4">
                @forelse($topProducts as $product)
                <div class="flex items-center">
                    <div class="w-14 h-14 bg-slate-100 dark:bg-slate-700 rounded-xl flex items-center justify-center mr-4">
                        <i data-lucide="package" class="w-6 h-6 text-slate-400"></i>
                    </div>
                    <div class="flex-1 min-w-0">
                        <p class="font-medium text-slate-800 dark:text-white truncate">{{ $product->product_name }}</p>
                        <p class="text-sm text-slate-500 dark:text-slate-400">{{ $product->total_sold }} sold</p>
                    </div>
                    <span class="font-semibold text-slate-800 dark:text-white">৳{{ number_format($product->total_revenue) }}</span>
                </div>
                @empty
                <p class="text-center text-slate-500 dark:text-slate-400 py-4">No sales data yet</p>
                @endforelse
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const monthlyStats = @json($monthlyStats);
    const orderMetrics = @json($metrics['orders']);
    
    // Sales Chart
    const salesCtx = document.getElementById('salesChart').getContext('2d');
    new Chart(salesCtx, {
        type: 'line',
        data: {
            labels: monthlyStats.map(s => s.month),
            datasets: [{
                label: 'Sales',
                data: monthlyStats.map(s => s.sales),
                borderColor: '#6366f1',
                backgroundColor: 'rgba(99, 102, 241, 0.1)',
                fill: true,
                tension: 0.4
            }, {
                label: 'Profit',
                data: monthlyStats.map(s => s.profit),
                borderColor: '#22c55e',
                backgroundColor: 'rgba(34, 197, 94, 0.1)',
                fill: true,
                tension: 0.4
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: { 
                    display: true,
                    position: 'top'
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    grid: { color: 'rgba(0,0,0,0.05)' }
                },
                x: {
                    grid: { display: false }
                }
            }
        }
    });

    // Order Status Chart
    const statusCtx = document.getElementById('orderStatusChart').getContext('2d');
    new Chart(statusCtx, {
        type: 'doughnut',
        data: {
            labels: ['Completed', 'Processing', 'Pending', 'Cancelled', 'Returned'],
            datasets: [{
                data: [
                    orderMetrics.completed,
                    orderMetrics.processing,
                    orderMetrics.pending,
                    orderMetrics.cancelled,
                    orderMetrics.returned
                ],
                backgroundColor: ['#22c55e', '#3b82f6', '#f59e0b', '#ef4444', '#a855f7'],
                borderWidth: 0
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'bottom',
                    labels: { padding: 20 }
                }
            },
            cutout: '70%'
        }
    });
});
</script>
@endpush