@extends('layouts.super') {{-- You can rename to layouts.super later --}}

@section('content')
<div class="max-w-7xl mx-auto px-10 py-4 space-y-6">

    <!-- 🏷️ Header -->
    <div>
        <h1 class="text-3xl font-bold text-gray-800 mb-1">
            Super Admin Dashboard -
            <span class="text-indigo-600">{{ $district->name ?? 'My District' }}</span>
        </h1>
        <p class="text-gray-500">
            Overview of users, Dewans, revenue, and activity across your entire district.
        </p>
    </div>
    <div class="flex justify-between">
        <div class="bg-white p-5 rounded-lg shadow">
            <h2 class="text-xl font-bold text-gray-800 mb-3">Users</h2>
            <!-- 📊 Key Metrics Overview -->
            <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
                <div class="bg-indigo-100 p-3 rounded-lg shadow text-center">
                    <p class="text-indigo-500 text-md font-semibold uppercase mb-1"><small>Total Users</small></p>
                    <p class="text-2xl font-bold text-indigo-600">{{ $metrics['totalUsers'] ?? 0 }}</p>
                </div>

                <div class="bg-purple-100 p-3 rounded-lg shadow text-center">
                    <p class="text-purple-500 text-md font-semibold uppercase mb-1"><small>Total Admins</small></p>
                    <p class="text-2xl font-bold text-purple-600">{{ $metrics['totalAdmins'] ?? 0 }}</p>
                </div>

                <div class="bg-green-100 p-3 rounded-lg shadow text-center">
                    <p class="text-green-500 text-md font-semibold uppercase mb-1"><small>Active Users (30d)</small></p>
                    <p class="text-2xl font-bold text-green-600">{{ $metrics['activeUsers'] ?? 0 }}</p>
                </div>
            </div>
        </div>
        <div class="bg-white p-5 rounded-lg shadow">
            <h2 class="text-xl font-bold text-gray-800 mb-3">Dewans</h2>
            <!-- 🏟️ Dewan + Booking Stats -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div class="bg-blue-100 p-3 rounded-lg shadow text-center">
                    <p class="text-blue-500 text-md font-semibold uppercase mb-1 no-whitespace"><small>Active Dewans</small></p>
                    <p class="text-2xl font-bold text-blue-600">{{ $metrics['activeDewans'] ?? 0 }}</p>
                </div>
                <div class="bg-indigo-100 p-3 rounded-lg shadow text-center">
                    <p class="text-indigo-500 text-md font-semibold uppercase mb-1"><small>Total Dewans</small></p>
                    <p class="text-2xl font-bold text-indigo-500">{{ $metrics['totalDewans'] ?? 0 }}</p>
                </div>
            </div>
        </div>
        <div class="bg-white p-5 rounded-lg shadow">
            <h2 class="text-xl font-bold text-gray-800 mb-3">Bookings & Reservations</h2>
            <!-- 🏟️ Dewan + Booking Stats -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div class="bg-yellow-100 p-3 rounded-lg shadow text-center">
                    <p class="text-orange-500 text-md font-semibold uppercase mb-1"><small>Total Reservations</small></p>
                    <p class="text-2xl font-bold text-orange-600">{{ $metrics['totalReservations'] ?? 0 }}</p>
                </div>
                <div class="bg-green-100 p-3 rounded-lg shadow text-center">
                    <p class="text-emerald-700 text-md font-semibold uppercase mb-1"><small>Total Bookings</small></p>
                    <p class="text-2xl font-bold text-emerald-600">{{ $metrics['totalBookings'] ?? 0 }}</p>
                </div>
            </div>
        </div>
    </div>
    <div class="bg-white p-6 rounded-lg shadow">
        <h2 class="text-xl font-bold text-gray-800 mb-3">Revenue Summary</h2>
        <!-- 💰 Revenue Summary -->
        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
            <div class="bg-blue-100 p-4 rounded-lg shadow text-center">
                <p class="text-teal-700 text-sm font-semibold uppercase mb-1">Total Revenue</p>
                <p class="text-2xl font-bold text-teal-600">
                    RM{{ number_format($metrics['totalRevenue'] ?? 0, 2) }}
                </p>
            </div>
        
            <div class="bg-violet-100 p-4 rounded-lg shadow text-center">
                <p class="text-violet-600 text-sm font-semibold uppercase mb-1">Facility Revenue</p>
                <p class="text-2xl font-bold text-violet-600">
                    RM{{ number_format($metrics['facilityRevenue'] ?? 0, 2) }}
                </p>
            </div>

            <div class="bg-orange-100 p-4 rounded-lg shadow text-center">
                <p class="text-yellow-700 text-sm font-semibold uppercase mb-1">Reservation Revenue</p>
                <p class="text-2xl font-bold text-yellow-600">
                    RM{{ number_format($metrics['reservationRevenue'] ?? 0, 2) }}
                </p>
            </div>
        </div>
    </div>
    <!-- 📈 Super Admin Analytics Chart -->
    <div class="bg-white p-6 rounded-lg shadow mt-8">
        <div class="flex justify-between items-center mb-4 flex-wrap gap-3">
            <h2 class="text-xl font-semibold text-gray-700 flex items-center">Booking & Revenue Analytics</h2>
            <div class="flex flex-wrap items-center gap-2">
                <!-- Chart Type -->
                <select id="chartType" class="border border-gray-300 rounded-md px-2 py-1 text-sm">
                    <option value="line" selected>Line</option>
                    <option value="bar">Bar</option>
                    <option value="pie">Pie</option>
                    <option value="area">Area</option>
                </select>

                <!-- Metric (Bookings or Revenue) -->
                <select id="metricFilter" class="border border-gray-300 rounded-md px-2 py-1 text-sm">
                    <option value="bookings" selected>Bookings</option>
                    <option value="revenue">Revenue (RM)</option>
                </select>

                <!-- Category (Overall / Facility / Dewan) -->
                <select id="categoryFilter" class="border border-gray-300 rounded-md px-2 py-1 text-sm">
                    <option value="overall" selected>Overall</option>
                    <option value="facility">Facility</option>
                    <option value="dewan">Dewan</option>
                </select>

                <!-- Time Range -->
                <select id="chartFilter" class="border border-gray-300 rounded-md px-2 py-1 text-sm">
                    <option value="monthly" selected>Monthly</option>
                    <option value="weekly">Weekly</option>
                    <option value="daily">Daily</option>
                </select>

                <!-- Export Buttons -->
                <button id="exportCSV" class="bg-indigo-500 text-white px-3 py-1 rounded-md text-sm hover:bg-indigo-600">
                    Export CSV
                </button>
                <button id="exportPNG" class="bg-gray-100 text-gray-800 px-3 py-1 rounded-md text-sm hover:bg-gray-200">
                    Download PNG
                </button>
            </div>
        </div>

        <div class="relative" style="height: 350px; min-height: 300px;">
            <canvas id="superChart"
                    data-url="{{ route('super.dashboard.chart', ['type' => 'TIMETYPE_PLACEHOLDER']) }}">
            </canvas>
        </div>
    </div>

    <!-- 🔝 Top 10 Dewans by Revenue -->
    <div class="bg-white p-6 rounded-lg shadow mt-8">
        <h2 class="text-xl font-semibold text-gray-700 mb-4">Top 10 Dewans by Revenue</h2>
        <div class="relative" style="height: 350px; min-height: 300px;">
            <canvas id="topDewanChart" data-url="{{ route('super.dashboard.topdewan') }}"></canvas>
        </div>
    </div>

    <!-- 🏆 Performance Summary -->
    <div class="bg-indigo-50 border-l-4 border-indigo-600 p-4 rounded-md shadow mt-4 mb-6">
        <h3 class="text-lg font-semibold text-indigo-800">Performance Summary</h3>
        <p class="text-gray-700 mt-2 text-sm leading-relaxed">
            In the past 30 days, your district has processed
            <strong>{{ $metrics['totalBookings'] ?? 0 }}</strong> facility bookings and
            <strong>{{ $metrics['totalReservations'] ?? 0 }}</strong> Dewan reservations,
            generating a combined revenue of
            <strong>RM{{ number_format($metrics['totalRevenue'] ?? 0, 2) }}</strong>.
            The top performer is
            <strong>{{ $metrics['topDewan']->name ?? 'N/A' }}</strong>
            with total earnings of
            <strong>RM{{ number_format($metrics['topDewan']->revenue ?? 0, 2) }}</strong>.
        </p>
    </div>

</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {

    /* =====================================
       📌 DOM REFERENCES
    ===================================== */
    const canvas = document.getElementById('superChart');
    const ctx = canvas.getContext('2d');
    const baseUrlTemplate = canvas.dataset.url;

    // Filters
    const chartType = document.getElementById('chartType');
    const chartFilter = document.getElementById('chartFilter');
    const categoryFilter = document.getElementById('categoryFilter');
    const metricFilter = document.getElementById('metricFilter');
    const exportCSV = document.getElementById('exportCSV');
    const exportPNG = document.getElementById('exportPNG');

    // Top Dewan chart elements
    const topCanvas = document.getElementById('topDewanChart');
    const topCtx = topCanvas?.getContext('2d');
    const topUrl = topCanvas?.dataset.url;

    // Chart instances
    let chart = null;
    let topChart = null;

    /* =====================================
       🎨 COLOR PALETTE
    ===================================== */
    const COLORS = {
        bookings: '#3B82F6',   // blue
        revenue: '#F59E0B',    // amber
        topDewans: '#10B981'   // emerald
    };

    /* =====================================
       📊 MAIN CHART LOADER
    ===================================== */
    async function loadChartData(timeType = 'monthly', category = 'overall', metric = 'bookings', type = 'line') {
        try {
            const fetchUrl = baseUrlTemplate.replace('TIMETYPE_PLACEHOLDER', timeType);
            const res = await fetch(`${fetchUrl}?metric=${metric}&category=${category}`);
            if (!res.ok) throw new Error(`Fetch failed (${res.status})`);

            const data = await res.json();
            const labels = data.labels || [];
            const datasetValues = data[category] || data.overall || data.values || [];

            if (chart) chart.destroy();

            // Handle empty data gracefully
            if (!labels.length || datasetValues.every(v => v === 0)) {
                drawEmptyMessage(ctx, "No data available for this selection");
                return;
            }

            const chartKind = type === 'area' ? 'line' : type;
            const color = COLORS[metric];

            chart = new Chart(ctx, {
                type: chartKind,
                data: {
                    labels,
                    datasets: [{
                        label: metric === 'bookings' ? 'Bookings' : 'Revenue (RM)',
                        data: datasetValues,
                        borderColor: color,
                        backgroundColor: type === 'area' ? `${color}33` : color,
                        fill: type === 'area',
                        tension: 0.4,
                        borderWidth: 2,
                        pointRadius: 5,
                        pointHoverRadius: 7
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: { display: true },
                        tooltip: {
                            callbacks: {
                                label: ctx => metric === 'revenue'
                                    ? `RM ${parseFloat(ctx.raw).toLocaleString('en-MY', { minimumFractionDigits: 2 })}`
                                    : `${ctx.raw} bookings`
                            }
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            title: {
                                display: true,
                                text: metric === 'bookings' ? 'Total Bookings' : 'Revenue (RM)'
                            }
                        },
                        x: {
                            title: {
                                display: true,
                                text: `${capitalize(timeType)} Trend`
                            }
                        }
                    }
                }
            });

            // Export buttons
            setupExports(labels, datasetValues, timeType);

        } catch (error) {
            console.error('⚠️ Error loading chart:', error);
            drawEmptyMessage(ctx, "Error loading chart data");
        }
    }

    /* =====================================
       💰 TOP 10 DEWANS BY REVENUE
    ===================================== */
    async function loadTopDewans() {
        if (!topUrl || !topCtx) return; // skip if not on page

        try {
            const res = await fetch(topUrl);
            if (!res.ok) throw new Error(`Top Dewan fetch failed (${res.status})`);

            const data = await res.json();
            const labels = data.labels?.length ? data.labels : ['No Data'];
            const values = data.values?.length ? data.values : [0];

            if (topChart) topChart.destroy();

            topChart = new Chart(topCtx, {
                type: 'bar',
                data: {
                    labels,
                    datasets: [{
                        label: 'Revenue (RM)',
                        data: values,
                        backgroundColor: COLORS.topDewans,
                        borderColor: '#059669',
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    indexAxis: 'y',
                    plugins: {
                        legend: { display: false },
                        tooltip: {
                            callbacks: {
                                label: ctx => `RM ${parseFloat(ctx.raw).toLocaleString('en-MY', {
                                    minimumFractionDigits: 2,
                                    maximumFractionDigits: 2
                                })}`
                            }
                        }
                    },
                    scales: {
                        x: {
                            beginAtZero: true,
                            title: { display: true, text: 'Revenue (RM)' }
                        },
                        y: {
                            title: { display: true, text: 'Dewan Name' }
                        }
                    }
                }
            });
        } catch (error) {
            console.error('⚠️ Top Dewans chart failed:', error);
            drawEmptyMessage(topCtx, "Unable to load Dewan revenue data");
        }
    }

    /* =====================================
       📦 EXPORT FUNCTIONS
    ===================================== */
    function setupExports(labels, values, timeType) {
        exportCSV.onclick = () => {
            let csv = 'Label,Value\n';
            labels.forEach((label, i) => csv += `${label},${values[i] ?? 0}\n`);
            const blob = new Blob([csv], { type: 'text/csv' });
            const link = document.createElement('a');
            link.href = URL.createObjectURL(blob);
            link.download = `super-dashboard-${timeType}.csv`;
            link.click();
        };

        exportPNG.onclick = () => {
            const url = chart.toBase64Image();
            const link = document.createElement('a');
            link.href = url;
            link.download = `super-dashboard-${timeType}.png`;
            link.click();
        };
    }

    /* =====================================
       🧭 UTILITY HELPERS
    ===================================== */
    function drawEmptyMessage(ctx, text) {
        ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
        ctx.font = "16px sans-serif";
        ctx.fillStyle = "#999";
        ctx.textAlign = "center";
        ctx.fillText(text, ctx.canvas.width / 2, ctx.canvas.height / 2);
    }

    function capitalize(str) {
        return str.charAt(0).toUpperCase() + str.slice(1);
    }

    /* =====================================
       ⚙️ INITIALIZATION + EVENT HANDLERS
    ===================================== */
    loadChartData('monthly', 'overall', 'bookings', 'line');
    loadTopDewans();

    [chartType, chartFilter, categoryFilter, metricFilter].forEach(select => {
        select.addEventListener('change', () => {
            loadChartData(chartFilter.value, categoryFilter.value, metricFilter.value, chartType.value);
        });
    });
});
</script>

@endsection