@extends('layouts.master')

@section('styles')
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
@endsection

@section('content')
<div class="page-header d-flex align-items-center justify-content-between mb-4">
    <div>
        <h2 class="fw-semibold mb-0">Leaderboards & Contests</h2>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0 mt-1">
                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                <li class="breadcrumb-item active" aria-current="page">Leaderboards</li>
            </ol>
        </nav>
    </div>

    <div class="d-flex align-items-center">
        <select id="lbRange" class="form-select form-select-sm me-2" style="width:auto">
            <option value="24h">Last 24 hours</option>
            <option value="yesterday">Yesterday</option>
            <option value="7">Last 7 days</option>
            <option value="15">Last 15 days</option>
            <option selected value="30">Last 30 days</option>
        </select>
        <button id="lbRefresh" class="btn btn-primary btn-sm">Refresh</button>
    </div>
</div>

{{-- KPI row --}}
<div id="lb-kpi-row" class="row g-3 mb-4">
    @foreach(($initial['kpis'] ?? []) as $k)
        <div class="col-xxl-3 col-xl-4 col-lg-6 col-md-6">
            <x-ui.stat-card
                number="{{ $k['value'] }}"
                title="{{ $k['title'] }}"
                deltaClass="{{ $k['deltaClass'] ?? 'bg-info-transparent' }}"
                iconClass="{{ $k['icon'] ?? 'ri-trophy-line' }}"
                iconColor="{{ $k['iconColor'] ?? 'rgba(59,130,246,1)' }}"
                circleBg="{{ $k['circleBg'] ?? 'linear-gradient(135deg, rgba(237,233,255,0.9), rgba(242,245,255,0.9))' }}"
            />
        </div>
    @endforeach
</div>

{{-- Charts --}}
<div class="row g-3 mb-4">
    <div class="col-md-7">
        <div class="card custom-card">
            <div class="card-body">
                <h6 class="card-title">Prize Pool Trend (Last <span id="lb-label-days">30</span>)</h6>
                <div id="prizePoolChart" style="height:360px;"></div>
            </div>
        </div>
    </div>

    <div class="col-md-5">
        <div class="card custom-card">
            <div class="card-body">
                <h6 class="card-title">Top Winners</h6>
                <ul id="topWinners" class="list-group list-group-flush"></ul>
            </div>
        </div>
    </div>
</div>

{{-- Leaderboard list + Recent payouts --}}
<div class="row g-3">
    <div class="col-lg-6">
        <div class="card custom-card">
            <div class="card-body">
                <h6 class="card-title">Active Leaderboards</h6>
                <div class="table-responsive">
                    <table class="table table-sm table-striped align-middle" id="leaderboardTable">
                        <thead class="table-light">
                            <tr>
                                <th>ID</th>
                                <th>Title</th>
                                <th>Prize Pool</th>
                                <th>Entries</th>
                                <th>Status</th>
                                <th>Ends At</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-6">
        <div class="card custom-card">
            <div class="card-body">
                <h6 class="card-title">Recent Leaderboard Payouts</h6>
                <div class="table-responsive">
                    <table class="table table-sm table-striped align-middle" id="recentLbPayouts">
                        <thead class="table-light">
                            <tr>
                                <th>ID</th>
                                <th>User</th>
                                <th>Leaderboard</th>
                                <th>Amount</th>
                                <th>Rank</th>
                                <th>Time</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
@include('layouts.components.scripts')
@include('layouts.components.common-script')
<script src="{{ asset('build/assets/libs/apexcharts/apexcharts.min.js') }}"></script>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const rangeEl = document.getElementById('lbRange');
    const refreshBtn = document.getElementById('lbRefresh');
    const labelDays = document.getElementById('lb-label-days');

    // chart instance holders
    let prizePoolChart = null;

    // helpers
    const el = id => document.getElementById(id);
    const exists = sel => !!document.querySelector(sel);
    const safeLabels = (l) => { if(!l) return []; if(Array.isArray(l)) return l; if(typeof l==='object') return Object.keys(l); return [String(l)]; };
    const toNumberSeries = (rows, key) => {
        if(!rows) return [];
        if(Array.isArray(rows) && rows.every(x=>typeof x==='number')) return rows.slice();
        if(Array.isArray(rows) && rows.length && typeof rows[0] === 'object'){
            const k = key || (rows[0].hasOwnProperty('amount') ? 'amount' : (rows[0].hasOwnProperty('total') ? 'total' : null));
            if(k) return rows.map(r => Number(r[k] ?? 0));
            return rows.map(r => {
                const v = Object.values(r).find(x=>typeof x==='number' || !isNaN(Number(x)));
                return v !== undefined ? Number(v) : 0;
            });
        }
        if(typeof rows === 'object') return Object.values(rows).map(v => Number(v ?? 0));
        return [];
    };

    // render KPI html (keeps your stat-card visuals)
    function renderKPIs(kpis){
        const container = el('lb-kpi-row');
        if(!container) return;
        container.innerHTML = '';
        if(!Array.isArray(kpis) || kpis.length === 0){
            container.insertAdjacentHTML('beforeend', `<div class="col-12"><div class="alert alert-info py-2 mb-0">No KPI data</div></div>`);
            return;
        }
        kpis.forEach(k => {
            const html = `
            <div class="col-xxl-3 col-xl-4 col-lg-6 col-md-6">
                <div class="card custom-card overflow-hidden h-100">
                    <div class="m-3 bg-light rounded-1 border">
                        <div class="card-body pb-4 mb-2 d-flex align-items-center justify-content-between">
                            <div>
                                <p class="mb-1 text-muted fw-medium">${k.title}</p>
                                <h4 class="mb-0 fw-medium">${k.value}</h4>
                            </div>
                            <div class="text-end">
                                <div class="text-muted fs-12">Last ${rangeEl.value === '24h' ? '24 hours' : (rangeEl.value === 'yesterday' ? 'Yesterday' : rangeEl.value + ' days')}</div>
                                <div class="mt-1"><i class="${k.icon ?? 'ri-trophy-line'} fs-4" style="color:${k.iconColor ?? 'rgba(59,130,246,1)'}"></i></div>
                            </div>
                        </div>
                        <div class="apexchart-mini" style="height:36px"></div>
                    </div>
                </div>
            </div>`;
            container.insertAdjacentHTML('beforeend', html);
        });
    }

    // prize pool chart
    function renderPrizePool(labels, series){
        if(!exists('#prizePoolChart')) return;
        const opts = {
            chart:{ type:'area', height:360, toolbar:{show:false} },
            series: [{ name:'Prize Pool', data: series }],
            xaxis: { categories: labels },
            colors: ['#f59e0b'],
            stroke: { curve: 'smooth' }
        };
        if(prizePoolChart){
            try { prizePoolChart.updateOptions(opts); prizePoolChart.updateSeries([{ name:'Prize Pool', data: series }]); }
            catch(e){ prizePoolChart.destroy(); prizePoolChart = new ApexCharts(document.querySelector('#prizePoolChart'), opts); prizePoolChart.render(); }
        } else {
            prizePoolChart = new ApexCharts(document.querySelector('#prizePoolChart'), opts);
            prizePoolChart.render();
        }
    }

    function renderTopWinners(rows){
        const list = el('topWinners'); if(!list) return; list.innerHTML = '';
        (rows || []).forEach(r => {
            const name = r.user_name ?? r.user ?? ('User ' + (r.user_id ?? ''));
            const amt = r.amount ?? r.prize ?? 0;
            list.insertAdjacentHTML('beforeend', `<li class="list-group-item d-flex justify-content-between align-items-center">${name}<span class="fw-bold">${amt}</span></li>`);
        });
    }

    function renderLeaderboards(rows){
        const tbody = document.querySelector('#leaderboardTable tbody'); if(!tbody) return; tbody.innerHTML = '';
        (rows || []).forEach(r => {
            const tr = document.createElement('tr');
            tr.innerHTML = `<td>${r.id ?? ''}</td><td>${r.title ?? r.name ?? '-'}</td><td>${r.prize_pool ?? r.prize ?? 0}</td><td>50</td>
            <td>${(r.is_active==1) ? 'Active' : 'Ended' ?? '-'}</td>
            <td>${r.end_time ?? ''}</td>`;
            tbody.appendChild(tr);
        });
    }

    function renderRecentPayouts(rows){
        const tbody = document.querySelector('#recentLbPayouts tbody'); if(!tbody) return; tbody.innerHTML = '';
        (rows || []).forEach(r => {
            const tr = document.createElement('tr');
            tr.innerHTML = `<td>${r.id ?? ''}</td><td>${r.user_id ?? r.user ?? ''}</td><td>${r.leaderboard_title ?? r.lb_title ?? '-'}</td><td>${r.amount ?? 0}</td><td>${r.rank ?? '-'}</td><td>${r.paid_at ?? r.created_at ?? ''}</td>`;
            tbody.appendChild(tr);
        });
    }

    function mapRangeValue(selected){
        if(selected === '24h') return { range: 1, mode: '24h' };
        if(selected === 'yesterday') return { range: 1, mode: 'yesterday' };
        return { range: Number(selected), mode: 'days' };
    }

    // main fetcher
    function fetchLeaderboardData(){
        const sel = rangeEl ? rangeEl.value : '30';
        const mapped = mapRangeValue(sel);
        labelDays.innerText = (sel === '24h' ? '24h' : (sel === 'yesterday' ? 'Yesterday' : sel));
        axios.get("{{ route('admin.dashboard.leaderboard.data') }}", { params: { range: mapped.range, mode: mapped.mode } })
            .then(res => {
                const payload = res.data || {};
                console.log('Leaderboard payload:', payload);

                // KPIs (payload.kpis preferred; else payload.meta mapping)
                let kpis = [];
                if(Array.isArray(payload.kpis)) kpis = payload.kpis;
                else if(payload.meta){
                    kpis = [
                        { key:'active', title: 'Active Leaderboards', value: payload.meta.activeLeaderboards ?? 0, icon:'ri-trophy-line' },
                        { key:'prize', title: 'Total Prize Pool', value: payload.meta.totalPrizePool ?? 0, icon:'ri-wallet-line' },
                        { key:'entries', title: 'Total Entries', value: payload.meta.totalEntries ?? 0, icon:'ri-user-add-line' },
                        { key:'payouts', title: 'Payouts (period)', value: payload.meta.payouts ?? 0, icon:'ri-money-dollar-box-line' },
                    ];
                }
                renderKPIs(kpis);

                // charts & lists
                const labels = safeLabels(payload.charts?.labels || payload.labels || []);
                const prizeSeries = Array.isArray(payload.charts?.prize_trend?.series) ? payload.charts.prize_trend.series : toNumberSeries(payload.charts?.prize_trend?.data || payload.charts?.prize_trend || []);
                renderPrizePool(labels, prizeSeries);

                renderTopWinners(payload.top_winners || payload.topWinners || payload.top_winners || []);
                renderLeaderboards(payload.leaderboards || payload.active_leaderboards || payload.leaderboard_list || []);
                renderRecentPayouts(payload.recent?.payouts || payload.recent_payouts || payload.recentPayouts || []);
            })
            .catch(err => console.error('Failed to load leaderboard data', err));
    }

    // initialize dropdown options
    (function initRange(){
        if(!rangeEl) return;
        const cur = rangeEl.value;
        rangeEl.innerHTML = '';
        const opts = [
            {v:'24h', t:'Last 24 hours'},
            {v:'yesterday', t:'Yesterday'},
            {v:'7', t:'Last 7 days'},
            {v:'15', t:'Last 15 days'},
            {v:'30', t:'Last 30 days'}
        ];
        opts.forEach(o => { const op = document.createElement('option'); op.value=o.v; op.text=o.t; rangeEl.appendChild(op); });
        rangeEl.value = Array.from(rangeEl.options).some(op => op.value === cur) ? cur : '30';
    })();

    if(refreshBtn) refreshBtn.addEventListener('click', fetchLeaderboardData);
    if(rangeEl) rangeEl.addEventListener('change', fetchLeaderboardData);

    // initial
    fetchLeaderboardData();
});
</script>
@endsection