@props([
    'apiEndpoint' => route('admin.dashboard.usage_trend'), 
    'defaultRange' => 30
])

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

<div id="dashboard-container-{{ $uid }}" class="container-fluid p-0 fade-in">
    
    <!-- 1. TOP FILTER BAR -->
    <div class="card border-0 shadow-sm mb-4" style="border-radius: 12px; background: #fff;">
        <div class="card-body p-3 d-flex flex-column flex-md-row align-items-center justify-content-between gap-3">
            <div class="d-flex align-items-center text-muted">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="me-2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
                <span class="fw-semibold" id="date-label-{{ $uid }}">Date Range: Last {{ $defaultRange }} Days</span>
            </div>
            
            <div class="d-flex gap-2">
                <div class="d-flex align-items-center me-3">
                    <label for="range-select-{{ $uid }}" class="me-2 text-muted small fw-bold">Preset:</label>
                    <select id="range-select-{{ $uid }}" class="form-select form-select-sm" style="width: 160px;">
                        <option value="today">Today</option>
                        <option value="yesterday">Yesterday</option>
                        <option value="7" selected>Last 7 Days</option>
                        <option value="14" >Last 14 Days</option>
                        <option value="30">Last 30 Days</option>
                        <option value="90">Last 90 Days</option>
                        <option value="custom">Custom Range</option>
                    </select>
                </div>

                <div id="custom-date-container-{{ $uid }}" class="d-flex align-items-center d-none">
                    <label for="start-date-{{ $uid }}" class="me-2 text-muted small fw-bold">Start:</label>
                    <input type="date" id="start-date-{{ $uid }}" class="form-control form-control-sm me-3" style="width: 140px;">

                    <label for="end-date-{{ $uid }}" class="me-2 text-muted small fw-bold">End:</label>
                    <input type="date" id="end-date-{{ $uid }}" class="form-control form-control-sm me-3" style="width: 140px;">
                </div>
                
                <button id="refresh-btn-{{ $uid }}" class="btn btn-sm btn-primary">Apply</button>
            </div>
        </div>
    </div>

    <!-- 2. MAIN SPLIT SECTION (Metrics + Main Chart) -->
    <div class="card border-0 shadow-sm mb-4" style="border-radius: 16px; overflow: hidden;">
        <div class="card-body p-0">
            <div class="row g-0">
                
                <!-- LEFT: Stats & Gauge (Approx 35-40%) -->
                <div class="col-lg-5 border-end p-4 d-flex flex-column justify-content-center position-relative">
                    
                    <!-- Stickiness Gauge Top Left -->
                    <div class="d-flex align-items-center mb-4">
                        <div id="chart-stickiness-{{ $uid }}" style="min-width: 140px; min-height: 140px;"></div>
                        <div class="ms-3">
                            <h2 class="mb-0 fw-bolder text-dark" id="val-stickiness-{{ $uid }}">--%</h2>
                            <small class="text-muted fw-bold text-uppercase ls-1">Stickiness</small>

                            <div class="mt-2" style="color:#07bc2b; font-size:12px; font-weight: bold;"> 
                                <i data-feather="zap" style="width: 12px; height: 12px;"></i> 
                                <span id="real-time-count-{{ $uid }}">--</span> Active (Last 30 Min)
                            </div>
                        </div>
                    </div>

                    <!-- Big Numbers Bottom -->
                    <div class="text-center mt-3">
                        <p class="text-muted text-uppercase fw-bold fs-7 ls-1 mb-3">Active Users Overview</p>
                        <div class="d-flex justify-content-around align-items-end">
                            <div>
                                <div class="h2 fw-black mb-0 text-dark" id="val-dau-{{ $uid }}">-</div>
                                <small class="text-secondary fw-semibold" style="font-size: 0.75rem;">DAU (Daily Active)</small>

                            </div>
                            <div>
                                <div class="h2 fw-black mb-0 text-dark" id="val-wau-{{ $uid }}">-</div>
                                <small class="text-secondary fw-semibold" style="font-size: 0.75rem;">WAU (Weekly Active)</small>
                            </div>
                            <div>
                                <div class="h2 fw-black mb-0 text-dark" id="val-mau-{{ $uid }}">-</div>
                                <small class="text-secondary fw-semibold" style="font-size: 0.75rem;">MAU (Monthly Active)</small>
                            </div>
                        </div>
                        <div class="mt-4 text-muted small fst-italic" id="last-updated-{{ $uid }}">Updating...</div>
                    </div>
                </div>

                <!-- RIGHT: Main Trend Chart (Approx 60-65%) -->
                <div class="col-lg-7 p-4 ">
                    <h5 class="fw-bold text-dark mb-4">Active Users Trend</h5>
                    <div id="chart-main-trend-{{ $uid }}" style="width: 100%; min-height: 300px;"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- 3. BOTTOM CARDS ROW (3 Columns) -->
    <div class="row g-4">
        
        <!-- Card 1: New Users -->
        <div class="col-md-6">
            <div class="card border-0 shadow-sm h-100" style="border-radius: 16px;">
                <div class="card-body">
                    <h6 class="fw-bold text-dark mb-3">New Users Trend</h6>
                    <div class="d-flex align-items-baseline mb-2">
                        <h3 class="fw-bold text-primary mb-0 me-2" id="val-new-users-{{ $uid }}">-</h3>
                        <span class="badge bg-primary-subtle text-primary rounded-pill">Total New</span>
                    </div>
                    <div id="chart-new-users-{{ $uid }}" style="min-height: 150px;"></div>
                </div>
            </div>
        </div>

        <!-- Card 2: Revenue & Payouts -->
        <div class="col-md-6">
            <div class="card border-0 shadow-sm h-100" style="border-radius: 16px;">
                <div class="card-body">
                    <h6 class="fw-bold text-dark mb-3">Revenue(Offerwall,Offers) & Payouts</h6>
                    <div class="d-flex justify-content-between align-items-end mb-2">
                        <div>
                            <small class="text-success fw-bold d-block">Revenue</small>
                            <h4 class="fw-bold text-success mb-0" id="val-revenue-{{ $uid }}">$0</h4>
                        </div>
                        <div class="text-end">
                            <small class="text-danger fw-bold d-block">Payouts</small>
                            <h4 class="fw-bold text-danger mb-0" id="val-payouts-{{ $uid }}">$0</h4>
                        </div>
                    </div>
                    <div id="chart-finance-{{ $uid }}" style="min-height: 150px;"></div>
                </div>
            </div>
        </div>

        <!-- Card 3: Coins Distributed -->
        <div class="col-md-6">
            <div class="card border-0 shadow-sm h-100" style="border-radius: 16px;">
                <div class="card-body">
                    <h6 class="fw-bold text-dark mb-3">Coins Distributed</h6>
                    <div class="d-flex align-items-baseline mb-2">
                        <h3 class="fw-bold text-warning mb-0 me-2" style="color: #d97706 !important;" id="val-coins-{{ $uid }}">-</h3>
                        <span class="text-muted small">coins</span>
                    </div>
                    <div id="chart-coins-{{ $uid }}" style="min-height: 150px;"></div>
                </div>
            </div>
        </div>

        <div class="col-lg-6">
        <div class="card border-0 shadow-sm h-100" style="border-radius: 16px;">
            <div class="card-body">
                <h6 class="fw-bold text-dark mb-3">Diamonds Revenue (in All Currency)</h6>
                <div class="d-flex align-items-baseline mb-2">
                    <h3 class="fw-bold text-info mb-0 me-2" id="val-diamonds-{{ $uid }}">-</h3>
                    <span class="text-muted small">Amount</span>
                </div>
                <div id="chart-diamonds-{{ $uid }}" style="min-height: 150px;"></div>
            </div>
        </div>
    </div>
    
    <div class="col-6">
        <div class="card border-0 shadow-sm h-100" style="border-radius: 16px;">
            <div class="card-body">
                <h6 class="fw-bold text-dark mb-3">Subscriptions Revenue (in All Currency)</h6>
                <div class="d-flex align-items-baseline mb-2">
                    <h3 class="fw-bold text-success mb-0 me-2" id="val-subscriptions-{{ $uid }}">-</h3>
                    <span class="text-muted small">Amount</span>
                </div>
                <div id="chart-subscriptions-{{ $uid }}" style="min-height: 150px;"></div>
            </div>
        </div>
    </div>

    </div>
</div>

<style>
    .fw-black { font-weight: 900; }
    .ls-1 { letter-spacing: 1px; }
    .bg-light-subtle { background-color: #f9fafb !important; }
    .text-primary { color: #6366f1 !important; } /* Indigo */
    .bg-primary-subtle { background-color: #e0e7ff !important; color: #4338ca !important; }
</style>

<script>

     const COIN_CONVERSION = "{{ env('COIN_CONV') }}";
            const CURRENCY_SIGN =  "{{ env('REAL_CURRENCY') }}";
document.addEventListener('DOMContentLoaded', function () {
    (function() {
        const UID = "{{ $uid }}";
        const API = "{{ $apiEndpoint }}";
       const REAL_TIME_API = "{{ route('admin.dashboard.realtime_user') }}"; // Define this route     
        // Refs
        const refs = {
            rangeSelect: document.getElementById(`range-select-${UID}`),
            customContainer: document.getElementById(`custom-date-container-${UID}`), // NEW
            startDate: document.getElementById(`start-date-${UID}`), // NEW
            endDate: document.getElementById(`end-date-${UID}`), // NEW
            refreshBtn: document.getElementById(`refresh-btn-${UID}`),
            dateLabel: document.getElementById(`date-label-${UID}`),
            diamondsTotal: document.getElementById(`val-diamonds-${UID}`),
            subscriptionsTotal: document.getElementById(`val-subscriptions-${UID}`),
            realTimeCount: document.getElementById(`real-time-count-${UID}`), // NEW REF
            // Text Vals
            dau: document.getElementById(`val-dau-${UID}`),
            wau: document.getElementById(`val-wau-${UID}`),
            mau: document.getElementById(`val-mau-${UID}`),
            stickiness: document.getElementById(`val-stickiness-${UID}`),
            updated: document.getElementById(`last-updated-${UID}`),
            newUsersTotal: document.getElementById(`val-new-users-${UID}`),
            revTotal: document.getElementById(`val-revenue-${UID}`),
            payTotal: document.getElementById(`val-payouts-${UID}`),
            coinsTotal: document.getElementById(`val-coins-${UID}`),
        };
       
        refs.rangeSelect.addEventListener('change', function() {
            if (this.value === 'custom') {
                  refs.customContainer.classList.remove('d-none'); // Show date inputs
            } else {
                refs.customContainer.classList.add('d-none'); // Hide date inputs
            }
        });
        // Chart Instances
        let charts = {
            stickiness: null,
            mainTrend: null,
            newUsers: null,
            finance: null,
            coins: null,
            diamonds: null,
            subscriptions: null,
        };

        // --- Formatters ---
        const fmtNum = (n) => new Intl.NumberFormat('en-US').format(n);
        const fmtCurrency = (n) => new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(n);
        const sum = arr => arr.reduce((a, b) => a + b, 0);
        // --- CHART CONFIGS --- //

        // 1. Stickiness (Radial)
        const initStickiness = (val) => {
            const opts = {
                series: [val],
                chart: { type: 'radialBar', height: 160, sparkline: { enabled: true } },
                plotOptions: {
                    radialBar: {
                        hollow: { size: '65%' },
                        track: { background: '#f3f4f6', strokeWidth: '100%' },
                        dataLabels: { show: false } 
                    }
                },
                colors: ['#6366f1'],
                stroke: { lineCap: 'round' }
            };
            if(charts.stickiness) { charts.stickiness.updateOptions(opts); }
            else { charts.stickiness = new ApexCharts(document.getElementById(`chart-stickiness-${UID}`), opts); charts.stickiness.render(); }
        };

        // 2. Main Trend (Area - DAU)
        const initMainTrend = (labels, dauData) => {
            const opts = {
                series: [{ name: 'DAU', data: dauData }],
                chart: { 
                    type: 'area', height: 320, 
                    toolbar: { show: false }, 
                    fontFamily: 'inherit',
                    zoom: { enabled: false }
                },
                colors: ['#6366f1'],
                fill: { type: 'gradient', gradient: { shadeIntensity: 1, opacityFrom: 0.4, opacityTo: 0.05, stops: [0, 100] } },
                dataLabels: { enabled: false },
                stroke: { curve: 'smooth', width: 3 },
                xaxis: { 
                    categories: labels, 
                    axisBorder: { show: false }, axisTicks: { show: false },
                    labels: { style: { colors: '#9ca3af', fontSize: '11px' }, rotate: -45, trim: true }
                },
                grid: { borderColor: '#f3f4f6', strokeDashArray: 4 },
                tooltip: { theme: 'light' }
            };
            if(charts.mainTrend) { charts.mainTrend.updateOptions(opts); }
            else { charts.mainTrend = new ApexCharts(document.getElementById(`chart-main-trend-${UID}`), opts); charts.mainTrend.render(); }
        };

        // 3. New Users (Bar/Area)
        const initNewUsers = (labels, data) => {
            const opts = {
                series: [{ name: 'New Users', data: data }],
                chart: { type: 'bar', height: 160, toolbar: { show: false }, sparkline: { enabled: false } },
                colors: ['#818cf8'],
                plotOptions: { bar: { borderRadius: 4, columnWidth: '50%' } },
                dataLabels: { 
                    enabled: true, 
                    formatter: function(val) { return fmtNum(val); },
                    offsetY: -20, // Move label above the bar
                    style: { fontSize: '10px', colors: ['#333'] }
                },
                dataLabels: { enabled: false },
                xaxis: { categories: labels, labels: { show: true, rotate: -45, style: { fontSize: '10px', colors: ['#9ca3af'] } }, 
            axisBorder: { show: false }, axisTicks: { show: false }},
               yaxis: { show: true, labels: { formatter: (val) => val >= 1000 ? (val / 1000).toFixed(1) + 'k' : val } }, // Show Y-axis scale
        grid: { show: true, borderColor: '#f1f5f9', strokeDashArray: 4 }, // Show subtle grid lines
        tooltip: { theme: 'light' }
            };
            if(charts.newUsers) { charts.newUsers.updateOptions(opts); }
            else { charts.newUsers = new ApexCharts(document.getElementById(`chart-new-users-${UID}`), opts); charts.newUsers.render(); }
        };

        // 4. Finance (Multi Line)
        const initFinance = (labels, revData, payData) => {
           
            const opts = {
        series: [
            { name: 'Revenue', data: revData },
            // For charting, the data arrays should be the same unit.
            // If payData is in coins, the charting library needs to use the raw coin number,
            // or the converted number. We will use the raw number and format the Y-axis.
            { name: 'Payouts', data: payData } 
        ],
        chart: { 
            type: 'line', 
            height: 160, 
            toolbar: { show: false }, 
            sparkline: { enabled: false } // Set to false to show X and Y axes
        },
        colors: ['#10b981', '#ef4444'], // Green, Red
        stroke: { curve: 'smooth', width: 2 },
        tooltip: { theme: 'light' },

        // --- AXIS CONFIGURATION (NOW INSIDE OPTS) ---
        xaxis: { 
            categories: labels, 
            labels: { show: true, rotate: -45, style: { fontSize: '10px', colors: ['#9ca3af'] } } 
        },
        yaxis: { 
                show: true,
                labels: { 
                    formatter: function(val) {
                        if (val >= 1000) {
                            return CURRENCY_SIGN + (val / 1000).toFixed(1) + 'k';
                        }
                        return CURRENCY_SIGN + val.toFixed(2);
                    }
                } 
                },
        
        grid: { 
            show: true, 
            borderColor: '#f1f5f9', 
            strokeDashArray: 4 
        },
        // --- END AXIS CONFIGURATION ---

        // --- Custom Tooltip to show correct unit for each series ---
            tooltip: {
                theme: 'light',
                y: {
                    formatter: function (value, { seriesIndex, dataPointIndex, w }) {
                        if (seriesIndex === 0) { // Revenue (Index 0)
                            return CURRENCY_SIGN + value.toFixed(2);
                        } else if (seriesIndex === 1) { 
                            return CURRENCY_SIGN + value; 
                        }
                        return value;
                    }
                }
            }
        }
            if(charts.finance) { charts.finance.updateOptions(opts); }
            else { charts.finance = new ApexCharts(document.getElementById(`chart-finance-${UID}`), opts); charts.finance.render(); }
        };

        // 5. Coins (Area)
    const initCoins = (labels, data) => {
    const opts = {
        series: [{ name: 'Coins Distributed', data: data }],
        
        // --- CHART CONFIGURATION FIX ---
        chart: { 
            type: 'area', 
            height: 160, 
            toolbar: { show: false }, 
            sparkline: { enabled: false } // <--- MUST BE FALSE TO SHOW AXES/GRID
        },
        // --- END CHART CONFIGURATION FIX ---
        
        colors: ['#d97706'], // Gold/Amber
        fill: { type: 'gradient', gradient: { opacityFrom: 0.5, opacityTo: 0.1 } },
        stroke: { curve: 'smooth', width: 2 },
        tooltip: { theme: 'light' },
        
        // --- AXIS CONFIGURATION ---
        // X-Axis (Dates)
        xaxis: { 
            categories: labels, 
            labels: { show: true, rotate: -45, style: { fontSize: '10px', colors: ['#9ca3af'] } } 
        },
        
        // Y-Axis (Scale numbers on the left)
        yaxis: { 
            show: true,
            // Format large coin numbers (e.g., 10k, 100k)
            labels: { 
                formatter: (val) => val >= 1000 ? (val / 1000).toFixed(1) + 'k' : val.toFixed(0),
                style: { fontSize: '10px', colors: ['#9ca3af'] }
            } 
        },
        
        // Grid Lines
        grid: { show: true, borderColor: '#f1f5f9', strokeDashArray: 4 },
        // --- END AXIS CONFIGURATION ---
    };
    
    if(charts.coins) { charts.coins.updateOptions(opts); }
    else { charts.coins = new ApexCharts(document.getElementById(`chart-coins-${UID}`), opts); charts.coins.render(); }
};

        const initDiamonds = (labels, data) => {
            const opts = {
                series: [{ name: 'Diamonds Sold', data: data }],
                chart: { 
                    type: 'line', 
                    height: 160, 
                    toolbar: { show: false }, 
                    sparkline: { enabled: false } 
                },
                colors: ['#06b6d4'],
                dataLabels: { enabled: false },
                xaxis: { 
                    categories: labels, 
                    labels: { show: true, rotate: -45, style: { fontSize: '10px', colors: ['#9ca3af'] } } 
                },
                
                // Y-Axis (Scale numbers on the left)
                yaxis: { 
                    show: true,
                    // Optional: Format large numbers (e.g., 1k)
                    labels: { formatter: (val) => val >= 1000 ? (val / 1000).toFixed(1) + 'k' : val } 
                },
                
                // Grid Lines
                grid: { show: true, borderColor: '#f1f5f9', strokeDashArray: 4 },
                
                stroke: { curve: 'straight', width: 2 },
                tooltip: { theme: 'light' }
            };
            
            if(charts.diamonds) { charts.diamonds.updateOptions(opts); }
            else { charts.diamonds = new ApexCharts(document.getElementById(`chart-diamonds-${UID}`), opts); charts.diamonds.render(); }
        };

    const initSubscriptions = (labels, data) => {
        const opts = {
            series: [{ name: 'New Subs', data: data }],
            chart: { type: 'bar', height: 160, toolbar: { show: false }, sparkline: { enabled: false } }, // Turn sparkline off to show axes
            colors: ['#10b981'],
            plotOptions: { bar: { columnWidth: '60%' } },
            dataLabels: { 
                enabled: true,
                formatter: function(val) { return fmtNum(val); },
                offsetY: -20,
                style: { fontSize: '10px', colors: ['#333'] }
            },
            xaxis: { categories: labels, labels: { show: true, rotate: -45, style: { fontSize: '10px', colors: ['#9ca3af'] } } },
            yaxis: { show: true },
            grid: { show: true, borderColor: '#f1f5f9', strokeDashArray: 4 },
            tooltip: { theme: 'light' }
        };
        if(charts.subscriptions) { charts.subscriptions.updateOptions(opts); }
        else { charts.subscriptions = new ApexCharts(document.getElementById(`chart-subscriptions-${UID}`), opts); charts.subscriptions.render(); }
    };

       
        // --- FETCH DATA ---
        const loadData = () => {
            const range = refs.rangeSelect.value;
            let params = {};

            // Determine which parameters to send to the API
            if (range === 'custom') {
                params = {
                    start: refs.startDate.value, 
                    end: refs.endDate.value, 
                };
                // Basic validation: ensure both dates are present
                if (!params.start || !params.end) {
                    alert('Please select both a start and end date.');
                    refs.refreshBtn.innerText = 'Apply';
                    return; 
                }
            } else {
                params = { range: range };
            }
            refs.refreshBtn.innerHTML = '<span class="spinner-border spinner-border-sm"></span>';
            
            axios.get(API,{ params: params })
                .then(res => {
                    const d = res.data;
                    const labels = d.labels;
                    const s = d.series;
                    const m = d.meta;

                    // 1. Update Text Metrics
                    refs.dau.innerText = fmtNum(m.dau);
                    refs.wau.innerText = fmtNum(m.wau);
                    refs.mau.innerText = fmtNum(m.mau);
                    refs.stickiness.innerText = m.stickiness_latest + '%';
                    if (range === 'custom') {
                        refs.dateLabel.innerText = `Date Range: ${params.start} to ${params.end}`;
                    } else {
                        refs.dateLabel.innerText = `Date Range: Last ${range} Days`;
                    }
                    // const sum = arr => arr.reduce((a, b) => a + b, 0);
                    
                    if(refs.updated) refs.updated.innerText = 'Last updated: ' + (m.computed_at || 'Just now');
                    if(refs.diamondsTotal) refs.diamondsTotal.innerText = fmtNum(sum(s.diamond_sold || []));
            if(refs.subscriptionsTotal) refs.subscriptionsTotal.innerText = fmtNum(sum(s.subscriptions || []));
            
            refs.newUsersTotal.innerText = fmtNum(sum(s.new_users || []));
            refs.revTotal.innerText = fmtCurrency(sum(s.offerwall || []));
            refs.payTotal.innerText = fmtCurrency(sum(s.payouts || []));
            refs.coinsTotal.innerText = fmtNum(sum(s.coins || []));

            // 2. Render Charts (Also using defensive check for data series)
            initStickiness(m.stickiness_latest);
            initMainTrend(labels, s.dau || []);
            initNewUsers(labels, s.new_users || []);
            initFinance(labels, s.offerwall || [], s.payouts || []);
            initCoins(labels, s.coins || []);
            initDiamonds(labels, s.diamond_sold || []);
            initSubscriptions(labels, s.subscriptions || []);
                })
                .catch(err => console.error(err))
                .finally(() => {
                    refs.refreshBtn.innerText = 'Apply';
                });
        };

        // Listeners
        refs.refreshBtn.addEventListener('click', loadData);
        
        // Init
        loadData();


        const fetchRealTimeCount = () => {
            if (!refs.realTimeCount) {
                console.error("Real-time count element not found.");
                return;
            }

            axios.get(REAL_TIME_API)
                .then(response => {
                    const count = response.data.real_time_active;
                    refs.realTimeCount.innerText = count.toLocaleString('en-US');
                })
                .catch(error => {
                    console.error("Error fetching real-time data:", error);
                    refs.realTimeCount.innerText = 'N/A';
                });
        };

         fetchRealTimeCount(); 
        setInterval(fetchRealTimeCount, 60000);

    })();

   
});
</script>