@extends('layouts.app')

@php
    $dashboardCurrency = currency_code(default_currency());
@endphp

@section('title', 'Admin Dashboard')

@section('content')
<div class="container-fluid px-4">
    {{-- Page Header --}}
    <div class="d-flex flex-wrap align-items-center justify-content-between mb-4">
        <div>
            <h1 class="h3 mb-1 fw-700">Dashboard</h1>
            <p class="text-muted small mb-0">Overview of your marketplace performance and key metrics</p>
        </div>
        <div>
            <span class="badge bg-light text-muted px-3 py-2">
                <i class="fas fa-sync-alt me-1"></i>
                {{ now()->format('M d, Y H:i') }}
            </span>
        </div>
    </div>

    {{-- Time Range Filter --}}
    <div class="card border-0 shadow-sm mb-4">
        <div class="card-body py-3">
            <div class="d-flex flex-wrap align-items-center gap-2">
                <span class="text-muted small fw-600 me-2 text-uppercase">Range:</span>
                @foreach(['day' => 'Today', 'week' => 'This Week', 'month' => 'This Month', 'year' => 'This Year', 'all' => 'All Time'] as $key => $label)
                    <a href="{{ route('admin.dashboard', ['range' => $key]) }}"
                       class="btn btn-sm {{ $timeRange === $key ? 'btn-primary' : 'btn-outline-secondary' }}">
                        {{ $label }}
                    </a>
                @endforeach
            </div>
        </div>
    </div>

    {{-- Key Metrics --}}
    @include('admin.partials.dashboard-metrics', ['metrics' => $metrics, 'comparison' => $comparison])

    {{-- Pending Actions Alert --}}
    @if(($pendingActions['total'] ?? 0) > 0)
        @include('admin.partials.dashboard-pending-actions', ['pendingActions' => $pendingActions])
    @endif

    {{-- Charts Section --}}
    <div class="row g-4 mb-4">
        <div class="col-xl-8 col-lg-7">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white border-0 py-3 d-flex flex-wrap align-items-center justify-content-between">
                    <div>
                        <h6 class="mb-0 fw-700"><i class="fas fa-chart-area text-primary me-2"></i>Performance Overview</h6>
                        <small class="text-muted">Revenue, orders, and user growth trends</small>
                    </div>
                    <div class="btn-group btn-group-sm" role="group">
                        <button type="button" class="btn btn-outline-secondary active" data-metric="revenue">
                            <i class="fas fa-chart-line"></i>
                        </button>
                        <button type="button" class="btn btn-outline-secondary" data-metric="orders">
                            <i class="fas fa-shopping-bag"></i>
                        </button>
                        <button type="button" class="btn btn-outline-secondary" data-metric="users">
                            <i class="fas fa-users"></i>
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    <div class="performance-chart-wrapper">
                        <canvas id="performanceChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-4 col-lg-5">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white border-0 py-3 d-flex justify-content-between align-items-center">
                    <h6 class="mb-0 fw-700"><i class="fas fa-chart-pie text-primary me-2"></i>Order Fulfilment</h6>
                    <span class="badge bg-light text-dark">{{ number_format((int) collect($orderStatusSummary)->sum()) }}</span>
                </div>
                <div class="card-body py-3">
                    <div class="order-status-chart-wrapper">
                        <canvas id="orderStatusChart"></canvas>
                    </div>
                    <div class="row g-2 mt-2">
                        @php
                            $orderStatusPresentation = [
                                'pending_payment' => ['label' => __('Pending Payment'), 'color' => 'warning'],
                                'processing' => ['label' => __('Processing'), 'color' => 'info'],
                                'shipped' => ['label' => __('Shipped'), 'color' => 'primary'],
                                'completed' => ['label' => __('Completed'), 'color' => 'success'],
                                'cancelled' => ['label' => __('Cancelled'), 'color' => 'danger'],
                                'refunded' => ['label' => __('Refunded'), 'color' => 'secondary'],
                            ];
                        @endphp

                        @foreach($orderStatusSummary as $status => $count)
                            @php
                                $presentation = $orderStatusPresentation[$status] ?? [
                                    'label' => ucfirst(str_replace('_', ' ', $status)),
                                    'color' => 'secondary',
                                ];
                            @endphp

                            @if((int) $count > 0)
                                <div class="col-6">
                                    <div class="status-summary-item d-flex align-items-center justify-content-between small">
                                        <span class="text-muted">
                                            <span class="badge rounded-pill bg-{{ $presentation['color'] }} me-1"
                                                  style="width:8px;height:8px;padding:0;">&nbsp;</span>
                                            {{ $presentation['label'] }}
                                        </span>
                                        <span class="fw-600">{{ number_format((int) $count) }}</span>
                                    </div>
                                </div>
                            @endif
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Top Performers --}}
    <div class="row g-4 mb-4">
        <div class="col-xl-4 col-lg-6">
            @include('admin.partials.dashboard-top-list', [
                'title' => 'Top Sellers',
                'icon' => 'fa-trophy',
                'color' => 'warning',
                'items' => $topSellers,
                'primaryField' => 'seller_name',
                'secondaryField' => 'total_orders',
                'valueField' => 'total_revenue',
                'currency' => $dashboardCurrency,
                'extraField' => 'total_items_sold',
                'extraLabel' => 'items',
                'emptyMessage' => 'No seller data available yet'
            ])
        </div>
        <div class="col-xl-4 col-lg-6">
            @include('admin.partials.dashboard-top-list', [
                'title' => 'Top Products',
                'icon' => 'fa-crown',
                'color' => 'primary',
                'items' => $topProducts,
                'primaryField' => 'product_title',
                'secondaryField' => 'total_orders',
                'valueField' => 'total_revenue',
                'currency' => $dashboardCurrency,
                'extraField' => 'total_quantity_sold',
                'extraLabel' => 'sold',
                'imageField' => 'image',
                'emptyMessage' => 'No product data available yet'
            ])
        </div>
        <div class="col-xl-4 col-lg-6">
            @include('admin.partials.dashboard-top-list', [
                'title' => 'Top Categories',
                'icon' => 'fa-tags',
                'color' => 'success',
                'items' => $topCategories,
                'primaryField' => 'category_name',
                'secondaryField' => 'product_count',
                'secondaryLabel' => 'total products',
                'badgeField' => 'active_products',
                'badgeLabel' => 'active',
                'emptyMessage' => 'No category data available yet'
            ])
        </div>
    </div>

    {{-- Recent Activity --}}
    <div class="row g-4 mb-4">
        <div class="col-xl-4 col-lg-6">
            @include('admin.partials.dashboard-recent-list', [
                'title' => 'Recent Orders',
                'icon' => 'fa-clock',
                'color' => 'info',
                'items' => $recentOrders,
                'route' => 'admin.orders.show',
                'routeParam' => 'id',
                'routeList' => 'admin.orders.index',
                'primaryField' => 'order_number',
                'primaryPrefix' => '#',
                'secondaryField' => 'buyer_name',
                'valueField' => 'total',
                'currency' => $dashboardCurrency,
                'currencyField' => 'price_currency',
                'badgeField' => 'status',
                'emptyMessage' => 'No recent orders'
            ])
        </div>
        <div class="col-xl-4 col-lg-6">
            @include('admin.partials.dashboard-recent-list', [
                'title' => 'Recent Users',
                'icon' => 'fa-user-plus',
                'color' => 'success',
                'items' => $recentUsers,
                'route' => 'admin.users.show',
                'routeParam' => 'id',
                'routeList' => 'admin.users.index',
                'primaryField' => 'username',
                'secondaryField' => 'email',
                'badgeField' => 'role',
                'metaField' => 'joined',
                'avatarField' => 'avatar',
                'emptyMessage' => 'No recent users'
            ])
        </div>
        <div class="col-xl-4 col-lg-6">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-white border-0 py-3">
                    <h6 class="mb-0 fw-700"><i class="fas fa-bolt text-warning me-2"></i>Quick Actions</h6>
                </div>
                <div class="card-body">
                    <div class="row g-2">
                        @foreach([
                            ['route' => 'admin.orders.index', 'icon' => 'fa-shopping-bag', 'label' => 'Orders', 'color' => 'primary'],
                            ['route' => 'admin.products.index', 'icon' => 'fa-cube', 'label' => 'Products', 'color' => 'primary'],
                            ['route' => 'admin.users.index', 'icon' => 'fa-users', 'label' => 'Users', 'color' => 'primary'],
                            ['route' => 'admin.wallet.index', 'icon' => 'fa-wallet', 'label' => 'Wallet', 'color' => 'primary'],
                            ['route' => 'admin.payments.bank-transfers', 'icon' => 'fa-university', 'label' => 'Bank Transfers', 'color' => 'warning'],
                            ['route' => 'admin.refunds.index', 'icon' => 'fa-undo', 'label' => 'Refunds', 'color' => 'danger'],
                            ['route' => 'admin.payouts.index', 'icon' => 'fa-money-bill-wave', 'label' => 'Payouts', 'color' => 'success'],
                            ['route' => 'admin.support.index', 'icon' => 'fa-headset', 'label' => 'Support', 'color' => 'info'],
                            ['route' => 'admin.blog-posts.index', 'icon' => 'fa-newspaper', 'label' => 'Blog', 'color' => 'secondary'],
                            ['route' => 'admin.settings.edit', 'icon' => 'fa-cog', 'label' => 'Settings', 'color' => 'dark'],
                            ['route' => 'admin.reports.index', 'icon' => 'fa-chart-bar', 'label' => 'Reports', 'color' => 'secondary'],
                            ['route' => 'admin.audit-logs.index', 'icon' => 'fa-history', 'label' => 'Audit Log', 'color' => 'secondary'],
                        ] as $action)
                            <div class="col-6">
                                <a href="{{ route($action['route']) }}" class="btn btn-outline-{{ $action['color'] }} w-100 text-start py-2">
                                    <i class="fas {{ $action['icon'] }} me-2"></i> {{ $action['label'] }}
                                </a>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Sales Overview --}}
    @if(!empty($salesOverview['by_payment_method']) || !empty($salesOverview['by_product_type']))
        <div class="row g-4 mb-4">
            <div class="col-12">
                <div class="card border-0 shadow-sm">
                    <div class="card-header bg-white border-0 py-3">
                        <h6 class="mb-0 fw-700"><i class="fas fa-chart-pie text-primary me-2"></i>Sales Overview</h6>
                    </div>
                    <div class="card-body">
                        <div class="row g-4">
                            @if(!empty($salesOverview['by_payment_method']))
                                <div class="col-md-6">
                                    <h6 class="text-muted small text-uppercase fw-600 mb-3">By Payment Method</h6>
                                    @php $total = array_sum($salesOverview['by_payment_method']); @endphp
                                    @foreach($salesOverview['by_payment_method'] as $method => $amount)
                                        <div class="d-flex justify-content-between align-items-center border-bottom py-2">
                                            <span>{{ ucfirst(str_replace('_', ' ', $method)) }}</span>
                                            <span class="fw-600">{{ money($amount, $dashboardCurrency) }}
                                                <small class="text-muted">({{ $total > 0 ? round(($amount / $total) * 100, 1) : 0 }}%)</small>
                                            </span>
                                        </div>
                                    @endforeach
                                </div>
                            @endif
                            @if(!empty($salesOverview['by_product_type']))
                                <div class="col-md-6">
                                    <h6 class="text-muted small text-uppercase fw-600 mb-3">By Product Type</h6>
                                    @php $total = array_sum($salesOverview['by_product_type']); @endphp
                                    @foreach($salesOverview['by_product_type'] as $type => $amount)
                                        <div class="d-flex justify-content-between align-items-center border-bottom py-2">
                                            <span>{{ ucfirst($type) }}</span>
                                            <span class="fw-600">{{ money($amount, $dashboardCurrency) }}
                                                <small class="text-muted">({{ $total > 0 ? round(($amount / $total) * 100, 1) : 0 }}%)</small>
                                            </span>
                                        </div>
                                    @endforeach
                                </div>
                            @endif
                        </div>
                        <div class="row mt-3 pt-3 border-top">
                            <div class="col-md-4">
                                <span class="text-muted small">Net Revenue</span>
                                <h5 class="fw-700 text-success mb-0">{{ money($salesOverview['net_revenue'] ?? 0, $dashboardCurrency) }}</h5>
                            </div>
                            <div class="col-md-4">
                                <span class="text-muted small">Refunds</span>
                                <h5 class="fw-700 text-danger mb-0">{{ money($salesOverview['refunds'] ?? 0, $dashboardCurrency) }}</h5>
                            </div>
                            <div class="col-md-4">
                                <span class="text-muted small">Period Revenue</span>
                                <h5 class="fw-700 text-primary mb-0">{{ money(($salesOverview['net_revenue'] ?? 0) + ($salesOverview['refunds'] ?? 0), $dashboardCurrency) }}</h5>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif

    {{-- Geographic Data --}}
    @if(!empty($geoData['countries']) || !empty($geoData['states']))
        <div class="row g-4">
            @if(!empty($geoData['countries']))
                <div class="col-md-6">
                    <div class="card border-0 shadow-sm">
                        <div class="card-header bg-white border-0 py-3">
                            <h6 class="mb-0 fw-700"><i class="fas fa-globe-africa text-info me-2"></i>Top Countries</h6>
                        </div>
                        <div class="card-body p-0">
                            @foreach($geoData['countries'] as $country)
                                <div class="d-flex justify-content-between align-items-center border-bottom px-3 py-2">
                                    <span>{{ $country['country'] ?? 'Unknown' }}</span>
                                    <span class="badge bg-light text-dark">{{ $country['total_orders'] ?? 0 }} orders</span>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            @endif
            @if(!empty($geoData['states']))
                <div class="col-md-6">
                    <div class="card border-0 shadow-sm">
                        <div class="card-header bg-white border-0 py-3">
                            <h6 class="mb-0 fw-700"><i class="fas fa-map-marker-alt text-danger me-2"></i>Top States</h6>
                        </div>
                        <div class="card-body p-0">
                            @foreach($geoData['states'] as $state)
                                <div class="d-flex justify-content-between align-items-center border-bottom px-3 py-2">
                                    <span>{{ $state['state'] ?? 'Unknown' }}</span>
                                    <span class="badge bg-light text-dark">{{ $state['total_orders'] ?? 0 }} orders</span>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            @endif
        </div>
    @endif
</div>
@endsection

@push('styles')
<style>
    .fw-600 { font-weight: 600; }
    .fw-700 { font-weight: 700; }
    .hover-shadow { transition: all 0.3s ease; }
    .hover-shadow:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 40px rgba(0,0,0,0.08) !important;
    }
    .hover-bg-light:hover { background: #f8f9fa; }
    .transition { transition: all 0.2s ease; }
    .btn-group .btn.active {
        background: var(--bs-primary);
        color: #fff;
        border-color: var(--bs-primary);
    }
    .btn-group .btn.active:hover {
        background: var(--bs-primary);
        color: #fff;
    }
    .performance-chart-wrapper {
        position: relative;
        width: 100%;
        height: 285px;
    }
    .order-status-chart-wrapper {
        position: relative;
        width: 100%;
        height: 155px;
        max-height: 155px;
    }
    .status-summary-item {
        min-height: 34px;
        padding: 0.35rem 0.5rem;
        border-radius: 0.5rem;
        background-color: #f8f9fa;
    }
    @media (max-width: 991.98px) {
        .performance-chart-wrapper {
            height: 240px;
        }
        .order-status-chart-wrapper {
            height: 145px;
            max-height: 145px;
        }
    }
</style>
@endpush

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const chartData = @json($chartData);
    const dashboardCurrency = @json($dashboardCurrency);
    const currencyFormatter = new Intl.NumberFormat(undefined, {
        style: 'currency',
        currency: dashboardCurrency,
        minimumFractionDigits: 2,
        maximumFractionDigits: 2
    });

    // Performance Chart
    const ctx = document.getElementById('performanceChart').getContext('2d');
    const performanceChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: chartData.labels || [],
            datasets: [
                {
                    label: 'Revenue (' + dashboardCurrency + ')',
                    data: chartData.sales || [],
                    borderColor: '#00a99d',
                    backgroundColor: 'rgba(0,169,157,0.1)',
                    fill: true,
                    tension: 0.4,
                    borderWidth: 3,
                    pointRadius: 4,
                    pointBackgroundColor: '#00a99d',
                    yAxisID: 'y'
                },
                {
                    label: 'Orders',
                    data: chartData.orders || [],
                    borderColor: '#0dcaf0',
                    backgroundColor: 'rgba(13,202,240,0.1)',
                    fill: true,
                    tension: 0.4,
                    borderWidth: 2,
                    pointRadius: 3,
                    pointBackgroundColor: '#0dcaf0',
                    yAxisID: 'y1'
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            interaction: { intersect: false, mode: 'index' },
            plugins: {
                legend: {
                    position: 'top',
                    labels: { usePointStyle: true, padding: 20, font: { size: 12, weight: '500' } }
                },
                tooltip: {
                    backgroundColor: 'rgba(255,255,255,0.95)',
                    titleColor: '#1a202c',
                    bodyColor: '#4a5568',
                    borderColor: '#e2e8f0',
                    borderWidth: 1,
                    padding: 12,
                    callbacks: {
                        label: function(context) {
                            let label = context.dataset.label || '';
                            let value = context.parsed.y;
                            if (context.dataset.label.includes('Revenue')) {
                                return label + ': ' + currencyFormatter.format(value);
                            }
                            return label + ': ' + value.toLocaleString();
                        }
                    }
                }
            },
            scales: {
                y: { beginAtZero: true, grid: { color: 'rgba(0,0,0,0.05)' }, ticks: { callback: v => currencyFormatter.format(v) } },
                y1: { beginAtZero: true, position: 'right', grid: { display: false }, ticks: { callback: v => v.toLocaleString() } },
                x: { grid: { display: false } }
            }
        }
    });

    // Chart toggle
    document.querySelectorAll('[data-metric]').forEach(btn => {
        btn.addEventListener('click', function() {
            document.querySelectorAll('[data-metric]').forEach(b => b.classList.remove('active'));
            this.classList.add('active');

            const metric = this.dataset.metric;
            let datasets = [];

            if (metric === 'revenue') {
                datasets = [
                    { label: 'Revenue (' + dashboardCurrency + ')', data: chartData.sales || [], borderColor: '#00a99d',
                      backgroundColor: 'rgba(0,169,157,0.1)', fill: true, tension: 0.4, borderWidth: 3,
                      pointRadius: 4, pointBackgroundColor: '#00a99d', yAxisID: 'y' },
                    { label: 'Orders', data: chartData.orders || [], borderColor: '#0dcaf0',
                      backgroundColor: 'rgba(13,202,240,0.1)', fill: true, tension: 0.4, borderWidth: 2,
                      pointRadius: 3, pointBackgroundColor: '#0dcaf0', yAxisID: 'y1' }
                ];
            } else if (metric === 'orders') {
                datasets = [
                    { label: 'Orders', data: chartData.orders || [], borderColor: '#0dcaf0',
                      backgroundColor: 'rgba(13,202,240,0.15)', fill: true, tension: 0.4, borderWidth: 3,
                      pointRadius: 4, pointBackgroundColor: '#0dcaf0', yAxisID: 'y' }
                ];
            } else if (metric === 'users') {
                datasets = [
                    { label: 'New Users', data: chartData.users || [], borderColor: '#198754',
                      backgroundColor: 'rgba(25,135,84,0.15)', fill: true, tension: 0.4, borderWidth: 3,
                      pointRadius: 4, pointBackgroundColor: '#198754', yAxisID: 'y' }
                ];
            }

            performanceChart.data.datasets = datasets;
            performanceChart.update();
        });
    });

    // Order Status Chart
    const statusData = @json($orderStatusSummary);
    const statusMap = {
        pending_payment: { label: @json(__('Pending Payment')), color: '#ffc107' },
        processing: { label: @json(__('Processing')), color: '#0dcaf0' },
        shipped: { label: @json(__('Shipped')), color: '#0d6efd' },
        completed: { label: @json(__('Completed')), color: '#198754' },
        cancelled: { label: @json(__('Cancelled')), color: '#dc3545' },
        refunded: { label: @json(__('Refunded')), color: '#6c757d' }
    };

    const labels = [];
    const data = [];
    const colors = [];

    Object.entries(statusData).forEach(([key, value]) => {
        if (value > 0 && statusMap[key]) {
            labels.push(statusMap[key].label);
            data.push(value);
            colors.push(statusMap[key].color);
        }
    });

    if (data.length > 0) {
        new Chart(document.getElementById('orderStatusChart'), {
            type: 'doughnut',
            data: { labels: labels, datasets: [{ data: data, backgroundColor: colors, borderWidth: 2 }] },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                cutout: '65%',
                plugins: {
                    legend: { position: 'bottom', labels: { usePointStyle: true, padding: 10, font: { size: 10 } } },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                const total = context.dataset.data.reduce((a, b) => a + b, 0);
                                return context.label + ': ' + context.parsed + ' (' + ((context.parsed / total) * 100).toFixed(1) + '%)';
                            }
                        }
                    }
                }
            }
        });
    } else {
        document.getElementById('orderStatusChart').parentElement.innerHTML =
            '<div class="text-center text-muted py-4"><i class="fas fa-inbox fa-2x mb-2 d-block"></i>No order data available</div>';
    }
});
</script>
@endpush