{{-- resources/views/components/dashboard/active-users-card.blade.php --}}
@props([
    // The API route to fetch data from. Defaults to a common name.
    'apiEndpoint' => route('admin.dashboard.usage_trend'),
    // The title displayed above the main chart.
    'chartTitle' => 'Active Users Trend (Daily)',
    // How often to auto-refresh in milliseconds (default 30s). Set to 0 to disable.
    'refreshRate' => 30000,
])

@php
    // Generate a unique, random ID for this specific component instance.
    // This is crucial to prevent JS conflicts if multiple charts exist on one page.
    $uid = 'au_' . \Illuminate\Support\Str::random(10);
@endphp

<div class="card border-0 shadow-sm" style="border-radius: 16px; background: #fff; transition: transform 0.2s ease-in-out;">
    <div class="card-body p-4">
        {{-- Top Section: Flex container for Gauge and Big Numbers --}}
        <div class="d-flex flex-wrap align-items-center justify-content-between gap-4">

            <div class="d-flex align-items-center position-relative" style="min-width: 200px;">
                 <div id="gauge_{{ $uid }}" style="width: 160px; height: 160px; flex-shrink: 0;"></div>
                <div class="position-absolute" style="left: 170px; top: 50%; transform: translateY(-50%); white-space: nowrap;">
                    <div id="stick_percent_{{ $uid }}" style="font-size: 28px; font-weight: 800; color: #111827; line-height: 1.1;">--%</div>
                    <div style="color: #6b7280; font-size: 14px; font-weight: 600;">Stickiness</div>
                </div>
            </div>

            <div class="text-center flex-fill" style="min-width: 300px;">
                <div style="font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; color: #9ca3af; font-weight: 700; margin-bottom: 12px;">
                    Active Users Overview
                </div>

                <div class="d-flex justify-content-center align-items-end gap-4 gap-md-5 flex-wrap">
                    <div class="text-center">
                        <div id="dau_val_{{ $uid }}" style="font-size: 36px; font-weight: 900; color: #0f172a; line-height:1;">-</div>
                        <div style="font-size: 12px; color: #6b7280; font-weight: 600; margin-top: 4px;">DAU</div>
                    </div>
                    <div class="text-center ps-4 border-start">
                        <div id="wau_val_{{ $uid }}" style="font-size: 36px; font-weight: 900; color: #0f172a; line-height:1;">-</div>
                        <div style="font-size: 12px; color: #6b7280; font-weight: 600; margin-top: 4px;">WAU</div>
                    </div>
                    <div class="text-center ps-4 border-start">
                        <div id="mau_val_{{ $uid }}" style="font-size: 36px; font-weight: 900; color: #0f172a; line-height:1;">-</div>
                        <div style="font-size: 12px; color: #6b7280; font-weight: 600; margin-top: 4px;">MAU</div>
                    </div>
                </div>

                <div id="last_updated_{{ $uid }}" style="margin-top: 16px; color: #9ca3af; font-size: 12px; font-style: italic;">
                    Loading data...
                </div>
            </div>
             <div class="d-none d-xl-block" style="width: 50px;"></div>
        </div>

        {{-- Bottom Section: Main Trend Chart --}}
        <div class="mt-5">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h5 style="font-size: 16px; color: #374151; font-weight: 700; margin: 0;">
                    {{ $chartTitle }}
                </h5>
                </div>
            <div id="trend_chart_{{ $uid }}" style="height: 220px; width: 100%;"></div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        // We use an IIFE (Immediately Invoked Function Expression) to create a local scope.
        // This ensures variables like 'gaugeChart' don't conflict with other components on the page.
        (function () {
            // --- Configuration passed from Blade ---
            const UID = "{{ $uid }}";
            const API_ENDPOINT = "{{ $apiEndpoint }}";
            const REFRESH_RATE = {{ $refreshRate }};

            // --- DOM Elements references based on unique ID ---
            const els = {
                dau: document.getElementById(`dau_val_${UID}`),
                wau: document.getElementById(`wau_val_${UID}`),
                mau: document.getElementById(`mau_val_${UID}`),
                stickPercent: document.getElementById(`stick_percent_${UID}`),
                lastUpdated: document.getElementById(`last_updated_${UID}`),
                gaugeContainer: document.getElementById(`gauge_${UID}`),
                trendContainer: document.getElementById(`trend_chart_${UID}`),
            };

            // --- Chart Instances (scoped specifically to this closure) ---
            let gaugeChartInstance = null;
            let trendChartInstance = null;

            // Helper: Number formatting
            const fmt = (n) => new Intl.NumberFormat('en-US').format(Number(n || 0));

            // --- RENDER: Stickiness Gauge ---
            function renderGauge(percent) {
                const val = Math.round((Number(percent) || 0) * 100) / 100;
                if (els.stickPercent) els.stickPercent.innerText = val + '%';

                const options = {
                    chart: {
                        type: 'radialBar',
                        height: 160,
                        width: 160,
                        sparkline: { enabled: true }, // Cleaner look without padding
                        animations: { enabled: true, speed: 800 }
                    },
                    series: [val],
                    colors: ['#6366f1'], // Indigo primary color
                    plotOptions: {
                        radialBar: {
                            hollow: { size: '70%' },
                            track: { background: '#f3f4f6', strokeWidth: '100%' },
                            dataLabels: { show: false } // We use custom DOM element for labels instead
                        }
                    },
                    fill: {
                        type: 'gradient',
                        gradient: {
                             shade: 'dark', type: 'horizontal',
                             gradientToColors: ['#06b6d4'], // Cyan end color
                             stops: [0, 100]
                        }
                    },
                    stroke: { lineCap: 'round' }
                };

                if (gaugeChartInstance) {
                    gaugeChartInstance.updateOptions(options);
                } else {
                    gaugeChartInstance = new ApexCharts(els.gaugeContainer, options);
                    gaugeChartInstance.render();
                }
            }

            // --- RENDER: Main Trend Area Chart ---
            function renderTrendChart(labels, dauData) {
                const options = {
                    chart: {
                        type: 'area', height: 220,
                        toolbar: { show: false }, zoom: { enabled: false },
                        fontFamily: 'inherit',
                        animations: { enabled: true, easing: 'easeinout', speed: 800 }
                    },
                    series: [{ name: 'Daily Active Users', data: dauData || [] }],
                    colors: ['#6366f1'],
                    fill: {
                        type: 'gradient',
                        gradient: {
                            shadeIntensity: 1, opacityFrom: 0.6, opacityTo: 0.05,
                            stops: [0, 90, 100]
                        }
                    },
                    stroke: { curve: 'smooth', width: 3 },
                    dataLabels: { enabled: false },
                    markers: { size: 0, hover: { size: 5 } }, // Clean markers only on hover
                    grid: {
                        show: true, borderColor: '#f1f5f9', strokeDashArray: 4,
                        padding: { top: 0, right: 0, bottom: 0, left: 10 }
                    },
                    xaxis: {
                        categories: labels,
                        tooltip: { enabled: false },
                        axisBorder: { show: false }, axisTicks: { show: false },
                        labels: {
                            style: { colors: '#9ca3af', fontSize: '11px', fontWeight: 500 },
                            // Only show a few labels to keep it clean
                            formatter: function(val, timestamp, index) {
                                // Simple logic to hide overlapping labels, adjust based on data density
                                return index % Math.ceil(labels.length / 6) === 0 ? val : '';
                            }
                        }
                    },
                    yaxis: {
                        show: true,
                        labels: {
                            style: { colors: '#9ca3af', fontSize: '11px', fontWeight: 500 },
                            formatter: (val) => val >= 1000 ? (val / 1000).toFixed(1) + 'k' : val
                        }
                    },
                    tooltip: {
                        theme: 'dark', x: { show: true }, y: { title: { formatter: () => 'DAU: ' } },
                        marker: { show: true },
                    },
                    dropShadow: { enabled: false } // Removed heavy drop shadow for cleaner look
                };

                if (trendChartInstance) {
                    trendChartInstance.updateOptions(options);
                    trendChartInstance.updateSeries([{ data: dauData || [] }]);
                } else {
                    trendChartInstance = new ApexCharts(els.trendContainer, options);
                    trendChartInstance.render();
                }
            }

            // --- FETCH: Get Data from API ---
            function fetchData() {
                if (typeof axios === 'undefined') {
                    console.error('Axios not loaded'); els.lastUpdated.innerText = 'Error loading dependencies.'; return;
                }

                axios.get(API_ENDPOINT, { params: { range: 30 } }) // Defaulting to 30 days range
                    .then(res => {
                        const data = res.data || {};
                        const series = data.series || {};
                        const meta = data.meta || {};
                        const labels = data.labels || [];

                        // 1. Update Big Numbers
                        const getLatest = (arr) => (arr && arr.length > 0) ? arr[arr.length - 1] : 0;
                        const dauLatest = getLatest(series.dau);
                        const wauLatest = getLatest(series.wau);
                        const mauLatest = getLatest(series.mau);

                        if(els.dau) els.dau.innerText = fmt(dauLatest);
                        if(els.wau) els.wau.innerText = fmt(wauLatest);
                        if(els.mau) els.mau.innerText = fmt(mauLatest);

                        // 2. Update Stickiness Gauge
                        let stickiness = meta.stickiness_latest
                            ? Number(meta.stickiness_latest)
                            : (mauLatest > 0 ? (dauLatest / mauLatest * 100) : 0);
                        renderGauge(stickiness);

                        // 3. Update Trend Chart
                        // We only map DAU for the main trend chart to keep it clean,
                        // but you could add WAU as a second series here if desired.
                        renderTrendChart(labels, series.dau || []);

                        // 4. Update Meta info
                        if (els.lastUpdated && meta.computed_at) {
                           // Optional: use a library like dayjs for prettier "time ago" format
                           els.lastUpdated.innerText = 'Last updated: ' + meta.computed_at;
                        }
                    })
                    .catch(err => {
                        console.error(`Error fetching data for component ${UID}:`, err);
                        if (els.lastUpdated) els.lastUpdated.innerText = 'Failed to load data.';
                        if (els.dau) els.dau.innerText = '-';
                    });
            }

            // --- INIT ---
            fetchData(); // Initial fetch

            // Auto-refresh if rate is greater than 0
            if (REFRESH_RATE > 0) {
                setInterval(fetchData, REFRESH_RATE);
            }

        })(); // End IIFE
    });
</script>