@props([
    'endpoint' => route('admin.dashboard.usage_trend'), // Default API route
    'range' => 30,                                      // Default date range
    'title' => 'Active Users Trend',                    // Card Title
    'autoRefresh' => 60000                              // 20 seconds
])

@php
    $uid = 'dau_' . \Illuminate\Support\Str::random(8);
@endphp

<div class="card mb-4" style="border-radius:14px; box-shadow:0 10px 30px rgba(11,22,39,0.04);">
    <div class="card-body p-4">
        <div class="d-flex flex-wrap align-items-center justify-content-between">

            <div class="d-flex align-items-center" style="min-width:220px;">
                <div id="{{ $uid }}_stick_gauge" style="width:160px; height:160px;"></div>
                <div style="margin-left:18px;">
                    <div id="{{ $uid }}_stick_percent" style="font-size:28px; font-weight:800; color:#111827; line-height:1;">0%</div>
                    <div style="color:#6b7280; margin-top:6px; font-weight:600;">Stickiness</div>
                </div>
            </div>

            <div class="text-center flex-fill" style="min-width:360px;">
                <div style="font-size:14px; color:#6b7280; font-weight:600; margin-bottom:6px;">Active Users</div>

                <div class="d-flex justify-content-center align-items-end gap-5" style="flex-wrap:wrap;">
                    <div style="min-width:110px;">
                        <div id="{{ $uid }}_dau" style="font-size:42px; font-weight:900; color:#0f172a;">0</div>
                        <div style="font-size:12px; color:#6b7280; margin-top:6px;">DAU</div>
                    </div>

                    <div style="min-width:110px;">
                        <div id="{{ $uid }}_wau" style="font-size:42px; font-weight:900; color:#0f172a;">0</div>
                        <div style="font-size:12px; color:#6b7280; margin-top:6px;">WAU</div>
                    </div>

                    <div style="min-width:110px;">
                        <div id="{{ $uid }}_mau" style="font-size:42px; font-weight:900; color:#0f172a;">0</div>
                        <div style="font-size:12px; color:#6b7280; margin-top:6px;">MAU</div>
                    </div>
                </div>

                <div id="{{ $uid }}_last_updated" style="margin-top:12px; color:#9ca3af; font-size:13px;"></div>
            </div>

            <div style="width:120px; min-width:120px;"></div>
        </div>

        {{-- BOTTOM: Active users trend --}}
        <div class="mt-4">
            <div style="font-size:15px; color:#374151; font-weight:700; margin-bottom:10px;">{{ $title }}</div>
            <div id="{{ $uid }}_usage_chart" style="height:210px; width:100%;"></div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        // Scope variables to this closure so multiple components don't conflict
        (function() {
            const UID = "{{ $uid }}";
            const API_URL = "{{ $endpoint }}";
            const DEFAULT_RANGE = {{ $range }};
            const REFRESH_RATE = {{ $autoRefresh }};

            // DOM refs using Dynamic IDs
            const dauEl = document.getElementById(UID + '_dau');
            const wauEl = document.getElementById(UID + '_wau');
            const mauEl = document.getElementById(UID + '_mau');
            const lastUpdatedEl = document.getElementById(UID + '_last_updated');
            const stickPercentEl = document.getElementById(UID + '_stick_percent');

            const gaugeContainer = document.getElementById(UID + '_stick_gauge');
            const usageChartContainer = document.getElementById(UID + '_usage_chart');

            let gaugeChart = null;
            let usageChart = null;

            function fmt(n) {
                const num = Number(n || 0);
                return num.toLocaleString();
            }

            function renderGauge(percent) {
                const v = Math.round((Number(percent) || 0) * 100) / 100;
                if(stickPercentEl) stickPercentEl.innerText = v + '%';

                const opts = {
                    chart: { type: 'radialBar', height: 160, sparkline: { enabled: true } },
                    series: [v],
                    colors: ['#6366f1'],
                    plotOptions: {
                        radialBar: {
                            startAngle: -120, endAngle: 120,
                            hollow: { size: '72%' },
                            track: { background: '#f3f4f6' },
                            dataLabels: { name: { show: false }, value: { show: false } }
                        }
                    },
                    fill: {
                        type: 'gradient',
                        gradient: {
                            shade: 'light', gradientToColors: ['#10b981'],
                            opacityFrom: 0.85, opacityTo: 0.35
                        }
                    },
                    stroke: { lineCap: 'round' }
                };

                if (gaugeChart) {
                    gaugeChart.updateOptions(opts);
                    gaugeChart.updateSeries([v]);
                } else {
                    gaugeChart = new ApexCharts(gaugeContainer, opts);
                    gaugeChart.render();
                }
            }

            function renderUsage(labels, dauSeries) {
                const opts = {
                    chart: {
                        type: 'area', height: 210,
                        toolbar: { show: false }, zoom: { enabled: false },
                        animations: { enabled: true, easing: 'easeinout', speed: 600 }
                    },
                    series: [{ name: 'DAU', data: dauSeries || [] }],
                    stroke: { curve: 'smooth', width: 4 },
                    fill: {
                        type: 'gradient',
                        gradient: {
                            shade: 'light', gradientToColors: ['#6366f1'],
                            shadeIntensity: 1, opacityFrom: 0.55, opacityTo: 0.04,
                            stops: [0, 80, 100]
                        }
                    },
                    colors: ['#6366f1'],
                    xaxis: {
                        categories: labels,
                        labels: { style: { colors: '#6b7280', fontSize: '12px' } },
                        axisTicks: { show: false }, axisBorder: { show: false }
                    },
                    yaxis: {
                        labels: {
                            formatter: function(val) { return val >= 1000 ? (Math.round(val/100)/10 + 'k') : Math.round(val); },
                            style: { colors: '#6b7280' }
                        },
                        tickAmount: 4
                    },
                    dropShadow: { enabled: true, top: 6, left: 0, blur: 8, color: '#7c3aed', opacity: 0.06 },
                    grid: { borderColor: 'rgba(15,23,42,0.04)' }
                };

                if (usageChart) {
                    usageChart.updateOptions(opts);
                    usageChart.updateSeries([{ data: dauSeries || [] }]);
                } else {
                    usageChart = new ApexCharts(usageChartContainer, opts);
                    usageChart.render();
                }
            }

            function fetchData() {
                // Assumes axios is loaded globally
                if(typeof axios === 'undefined') {
                    console.error('Axios is missing');
                    return;
                }

                axios.get(API_URL, { params: { range: DEFAULT_RANGE } })
                    .then(res => {
                        const data = res.data || {};
                        const labels = data.labels || [];
                        const series = data.series || {};
                        const meta = data.meta || {};
                        
                        // Latest Values
                        const dau = series.dau || [];
                        const wau = series.wau || [];
                        const mau = series.mau || [];
                        
                        const last = labels.length ? labels.length - 1 : -1;
                        const dauVal = (last >= 0 && dau[last] !== undefined) ? dau[last] : (meta.dau ?? 0);
                        const wauVal = (last >= 0 && wau[last] !== undefined) ? wau[last] : (meta.wau ?? 0);
                        const mauVal = (last >= 0 && mau[last] !== undefined) ? mau[last] : (meta.mau ?? 0);

                        if(dauEl) dauEl.innerText = fmt(dauVal);
                        if(wauEl) wauEl.innerText = fmt(wauVal);
                        if(mauEl) mauEl.innerText = fmt(mauVal);

                        // Stickiness
                        let stick = (meta.stickiness_latest !== undefined) 
                            ? Number(meta.stickiness_latest) 
                            : (mauVal ? (dauVal / mauVal * 100) : 0);
                        renderGauge(stick);

                        // Timestamp
                        if(lastUpdatedEl) {
                            lastUpdatedEl.innerText = meta.computed_at 
                                ? ('Last updated: ' + meta.computed_at) 
                                : 'Last updated: -';
                        }

                        renderUsage(labels, dau);
                    })
                    .catch(err => console.error('Card fetch error ['+UID+']', err));
            }

            // Initialize
            fetchData();
            const timer = setInterval(fetchData, REFRESH_RATE);
        })(); 
    });
</script>