{{--
    resources/views/reports/_chart_script.blade.php
    Include with: @include('reports._chart_script', ['chartType' => 'earnings'])
    chartType: 'earnings' | 'orders'
--}}
<script>
    document.addEventListener('DOMContentLoaded', function () {

        const CHART_TYPE = '{{ $chartType }}'; // 'earnings' | 'orders' | 'clicks'
        const IS_EARNINGS = CHART_TYPE === 'earnings';
        const IS_CLICKS   = CHART_TYPE === 'clicks';

        // ── IDs (earnings page uses 'earnings*', orders page uses 'orders*') ──
        const prefix = IS_EARNINGS ? 'earnings' : IS_CLICKS ? 'clicks' : 'orders';
        const chartEl = '#' + prefix + 'Chart';
        const summaryEl = prefix + 'Summary';
        const legendA = prefix + 'LegendA';
        const legendBWrap = prefix + 'LegendBWrap';
        const legendB = prefix + 'LegendB';
        const colA = prefix + 'ColA';
        const colB = prefix + 'ColB';
        const colGrowth = prefix + 'ColGrowth';
        const tbodyId = prefix + 'TableBody';

        const rawData = @json($dailyMap ?? []);

        // ── Date helpers ─────────────────────────────────────────────────────
        const TODAY = new Date();
        const ymd = d => { const mo = String(d.getMonth()+1).padStart(2,'0'), da = String(d.getDate()).padStart(2,'0'); return `${d.getFullYear()}-${mo}-${da}`; };
        const addDays = (d, n) => {
            const r = new Date(d);
            r.setDate(r.getDate() + n);
            return r;
        };
        const addMonths = (d, n) => {
            const r = new Date(d);
            r.setMonth(r.getMonth() + n);
            return r;
        };
        const sameDay = (a, b) => ymd(a) === ymd(b);
        const fmtShort = d => d.toLocaleDateString('en-US', {month: 'short', day: 'numeric', year: 'numeric'});
        const fmtChart = d => d.toLocaleDateString('en-US', {month: 'short', day: 'numeric'});
        const fmtRange = (s, e) => fmtShort(s) + ' – ' + fmtShort(e);

        function getPeriodData(start, end) {
            const labels = [], orders = [], revenue = [], clicks = [], uniqueClicks = [];
            let d = new Date(start);
            while (d <= end) {
                const key = ymd(d), e = rawData[key] || {o: 0, r: 0};
                labels.push(fmtChart(d));
                orders.push(e.o);
                revenue.push(e.r);
                clicks.push(e.o);
                uniqueClicks.push(e.r);
                d = addDays(d, 1);
            }
            return {label: fmtRange(start, end), labels, orders, revenue, clicks, uniqueClicks};
        }

        function getComparisonData(start, end, type) {
            if (type === 'none') return null;
            const days = Math.round((end - start) / 86400000);
            let cs, ce;
            if (type === 'prev_period') {
                ce = addDays(start, -1);
                cs = addDays(ce, -days);
            } else if (type === 'prev_month') {
                cs = addMonths(start, -1);
                ce = addMonths(end, -1);
            } else if (type === 'prev_year') {
                cs = addMonths(start, -12);
                ce = addMonths(end, -12);
            }
            return getPeriodData(cs, ce);
        }

        // ── Presets ───────────────────────────────────────────────────────────
        const PRESETS = [
            {key: 'last_7', range: () => [addDays(TODAY, -6), TODAY]},
            {key: 'last_30', range: () => [addDays(TODAY, -29), TODAY]},
            {key: 'last_365', range: () => [addDays(TODAY, -364), TODAY]},
            {
                key: 'this_week', range: () => {
                    const s = new Date(TODAY);
                    s.setDate(s.getDate() - s.getDay());
                    return [s, TODAY];
                }
            },
            {key: 'this_month', range: () => [new Date(TODAY.getFullYear(), TODAY.getMonth(), 1), TODAY]},
            {key: 'this_year', range: () => [new Date(TODAY.getFullYear(), 0, 1), TODAY]},
            {key: 'custom', range: null},
        ];

        // ── Picker state ──────────────────────────────────────────────────────
        const _now = new Date(), _monthStart = new Date(_now.getFullYear(), _now.getMonth(), 1);

        function loadPeriod() {
            try {
                const s = JSON.parse(localStorage.getItem('report_period') || 'null');
                if (!s) return null;
                const def = PRESETS.find(p => p.key === s.preset);
                if (s.preset !== 'custom' && def && def.range) {
                    const [a, b] = def.range();
                    return { preset: s.preset, start: a, end: b, compare: s.compare || 'none' };
                }
                if (s.start && s.end) {
                    return { preset: s.preset, start: new Date(s.start + 'T12:00:00'), end: new Date(s.end + 'T12:00:00'), compare: s.compare || 'none' };
                }
            } catch (_) {}
            return null;
        }

        function savePeriod(preset, start, end) {
            const compare = document.getElementById('compareSelect').value;
            localStorage.setItem('report_period', JSON.stringify({ preset, start: ymd(start), end: ymd(end), compare }));
        }

        const _loaded = loadPeriod();
        let appliedStart = _loaded ? _loaded.start : _monthStart;
        let appliedEnd   = _loaded ? _loaded.end   : _now;
        let appliedPreset = _loaded ? _loaded.preset : 'this_month';
        if (_loaded?.compare) document.getElementById('compareSelect').value = _loaded.compare;
        let pendingStart = new Date(appliedStart), pendingEnd = new Date(appliedEnd), pendingPreset = appliedPreset;
        let clickPhase = 0, hoverDate = null, calViewDate = new Date(appliedEnd.getFullYear(), appliedEnd.getMonth(), 1);

        document.querySelectorAll('.picker-preset').forEach(el => {
            el.addEventListener('click', () => {
                const key = el.dataset.preset;
                pendingPreset = key;
                updatePresetHighlight();
                if (key !== 'custom') {
                    const [s, e] = PRESETS.find(p => p.key === key).range();
                    pendingStart = s;
                    pendingEnd = e;
                    clickPhase = 0;
                    hoverDate = null;
                    calViewDate = new Date(e.getFullYear(), e.getMonth(), 1);
                    renderCalendar();
                } else {
                    clickPhase = 0;
                }
            });
        });

        function updatePresetHighlight() {
            document.querySelectorAll('.picker-preset').forEach(el => {
                const active = el.dataset.preset === pendingPreset;
                el.classList.toggle('active', active);
                const existing = el.querySelector('.check');
                if (existing) existing.remove();
                if (active) {
                    const c = document.createElement('span');
                    c.className = 'check';
                    c.textContent = '✓';
                    el.appendChild(c);
                }
            });
        }

        document.getElementById('calPrev').addEventListener('click', () => {
            calViewDate = addMonths(calViewDate, -1);
            renderCalendar();
        });
        document.getElementById('calNext').addEventListener('click', () => {
            const next = addMonths(calViewDate, 1);
            if (next <= new Date(TODAY.getFullYear(), TODAY.getMonth(), 1)) {
                calViewDate = next;
                renderCalendar();
            }
        });

        const calGrid = document.getElementById('calGrid');
        let calMouseLeaveHandler = null;

        function getEffRange() {
            const effEnd = (clickPhase === 1 && hoverDate)
                ? (hoverDate >= pendingStart ? hoverDate : pendingStart)
                : pendingEnd;
            const effStart = (clickPhase === 1 && hoverDate && hoverDate < pendingStart)
                ? hoverDate
                : pendingStart;
            return {effStart, effEnd};
        }

        function updateRangeClasses() {
            const {effStart, effEnd} = getEffRange();
            calGrid.querySelectorAll('.cal-cell[data-date]').forEach(cell => {
                const d = new Date(cell.dataset.date + 'T12:00:00');
                cell.classList.toggle('range-start', !!(effStart && sameDay(d, effStart)));
                cell.classList.toggle('range-end',   !!(effEnd   && sameDay(d, effEnd)));
                cell.classList.toggle('in-range',    !!(effStart && effEnd && d > effStart && d < effEnd));
            });
        }

        function renderCalendar() {
            const y = calViewDate.getFullYear(), m = calViewDate.getMonth();
            const firstDow = new Date(y, m, 1).getDay(), daysInMonth = new Date(y, m + 1, 0).getDate(),
                prevDays = new Date(y, m, 0).getDate();
            const isCurrentMonth = y === TODAY.getFullYear() && m === TODAY.getMonth();
            document.getElementById('calNext').disabled = isCurrentMonth;
            document.getElementById('calMonthLabel').textContent = calViewDate.toLocaleDateString('en-US', {
                month: 'long',
                year: 'numeric'
            });
            let html = '';
            for (let i = 0; i < firstDow; i++) html += `<div class="cal-cell other-month disabled"><div class="cal-day-num">${prevDays - firstDow + 1 + i}</div></div>`;
            for (let day = 1; day <= daysInMonth; day++) {
                const d = new Date(y, m, day);
                const isFuture = d > TODAY, isToday = sameDay(d, TODAY);
                let cls = 'cal-cell';
                if (isFuture) cls += ' disabled';
                if (isToday) cls += ' is-today';
                html += `<div class="${cls}" data-date="${ymd(d)}"><div class="cal-day-num">${day}</div></div>`;
            }
            const total = firstDow + daysInMonth, trailing = total % 7 === 0 ? 0 : 7 - (total % 7);
            for (let i = 1; i <= trailing; i++) html += `<div class="cal-cell other-month disabled"><div class="cal-day-num">${i}</div></div>`;
            calGrid.innerHTML = html;
            calGrid.querySelectorAll('.cal-cell[data-date]').forEach(cell => {
                cell.addEventListener('click', () => onDayClick(new Date(cell.dataset.date + 'T12:00:00')));
                cell.addEventListener('mouseenter', () => {
                    if (clickPhase === 1) {
                        hoverDate = new Date(cell.dataset.date + 'T12:00:00');
                        updateRangeClasses();
                    }
                });
            });
            if (calMouseLeaveHandler) calGrid.removeEventListener('mouseleave', calMouseLeaveHandler);
            calMouseLeaveHandler = () => {
                if (clickPhase === 1) { hoverDate = null; updateRangeClasses(); }
            };
            calGrid.addEventListener('mouseleave', calMouseLeaveHandler);
            updateRangeClasses();
        }

        function onDayClick(d) {
            if (clickPhase === 0) {
                pendingStart = d;
                pendingEnd = d;
                pendingPreset = 'custom';
                clickPhase = 1;
                hoverDate = null;
                updatePresetHighlight();
            } else {
                if (d >= pendingStart) {
                    pendingEnd = d;
                } else {
                    pendingEnd = pendingStart;
                    pendingStart = d;
                }
                clickPhase = 0;
                hoverDate = null;
            }
            updateRangeClasses();
        }

        const pickerPanel = document.getElementById('pickerPanel');

        function openPicker() {
            pendingStart = new Date(appliedStart);
            pendingEnd = new Date(appliedEnd);
            pendingPreset = appliedPreset;
            clickPhase = 0;
            hoverDate = null;
            calViewDate = new Date(appliedEnd.getFullYear(), appliedEnd.getMonth(), 1);
            updatePresetHighlight();
            renderCalendar();
            pickerPanel.classList.add('open');
        }

        function closePicker() {
            pickerPanel.classList.remove('open');
            hoverDate = null;
            clickPhase = 0;
        }

        document.getElementById('pickerTrigger').addEventListener('click', e => {
            e.stopPropagation();
            pickerPanel.classList.contains('open') ? closePicker() : openPicker();
        });
        pickerPanel.addEventListener('click', e => e.stopPropagation());

        document.addEventListener('click', e => {
            if (!document.getElementById('pickerWrap').contains(e.target)) closePicker();
        });

        document.getElementById('applyBtn').addEventListener('click', () => {
            appliedStart = new Date(pendingStart);
            appliedEnd = new Date(pendingEnd);
            appliedPreset = pendingPreset;
            savePeriod(appliedPreset, appliedStart, appliedEnd);
            document.getElementById('pickerLabel').textContent = fmtRange(appliedStart, appliedEnd);
            closePicker();
            updateCompareOptions();
            update();
            if (typeof window._onPeriodApplied === 'function') window._onPeriodApplied(appliedStart, appliedEnd);
        });
        document.getElementById('cancelBtn').addEventListener('click', closePicker);

        // ── Helpers ───────────────────────────────────────────────────────────
        const sum = arr => arr.reduce((a, b) => a + (b || 0), 0);
        const fmtMoney = v => '$' + v.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2});
        const fmtNum = v => v.toLocaleString('en-US');

        function deltaHtml(curr, prev) {
            if (prev == null || prev === 0) return '—';
            const pct = ((curr - prev) / prev) * 100, sign = pct >= 0 ? '+' : '';
            const cls = pct > 0 ? 'text-green-600' : pct < 0 ? 'text-red-600' : 'text-gray-400';
            const arrow = pct > 0 ? '<svg class="inline w-3 h-3" viewBox="0 0 12 12" fill="currentColor"><path d="m5.35 3.068-3.39 3.39-.92-.918L6 .58l4.96 4.96-.92.919-3.39-3.39v7.93h-1.3V3.07Z"/></svg>' : pct < 0 ? '<svg class="inline w-3 h-3" viewBox="0 0 12 12" fill="currentColor" style="transform:rotate(180deg)"><path d="m5.35 3.068-3.39 3.39-.92-.918L6 .58l4.96 4.96-.92.919-3.39-3.39v7.93h-1.3V3.07Z"/></svg>' : '';
            return `<span class="font-semibold ${cls}">${arrow}${sign}${pct.toFixed(2)}%</span>`;
        }

        // ── Chart ─────────────────────────────────────────────────────────────
        const mainColor = IS_EARNINGS ? '#16A34A' : IS_CLICKS ? '#EA580C' : '#3F32F5';
        let _tooltipLabels = {main: [], comp: []};
        const chart = new ApexCharts(document.querySelector(chartEl), {
            series: [],
            chart: {
                type: 'area',
                height: 240,
                fontFamily: 'inherit',
                toolbar: {show: false},
                zoom: {enabled: false},
                animations: {enabled: true, easing: 'easeinout', speed: 400}
            },
            colors: [mainColor, '#F7CE46'],
            fill: {type: 'gradient', gradient: {shadeIntensity: 1, opacityFrom: 0.12, opacityTo: 0, stops: [0, 100]}},
            stroke: {curve: 'smooth', width: 2},
            dataLabels: {enabled: false}, markers: {size: 0},
            xaxis: {
                categories: [],
                axisBorder: {show: false},
                axisTicks: {show: false},
                tickAmount: 8,
                labels: {
                    style: {colors: '#6B7A8D', fontSize: '11px', fontWeight: 500},
                    rotate: 0,
                    hideOverlappingLabels: true
                },
                crosshairs: {stroke: {color: '#E8EAF0', width: 1}},
                tooltip: {enabled: false}
            },
            yaxis: {
                tickAmount: 3,
                min: 0,
                labels: {
                    style: {colors: '#6B7A8D', fontSize: '11px', fontWeight: 500},
                    formatter: val => IS_EARNINGS ? '$' + Math.round(val).toLocaleString() : Math.round(val).toLocaleString()
                }
            },
            grid: {
                borderColor: '#E8EAF0',
                xaxis: {lines: {show: true}},
                yaxis: {lines: {show: true}},
                padding: {left: 0, right: 8, top: 0, bottom: 0}
            },
            tooltip: {
                custom: function({ series, dataPointIndex }) {
                    const fmtVal = v => {
                        if (v == null) return IS_EARNINGS ? fmtMoney(0) : IS_CLICKS ? '0 clicks' : '0 orders';
                        return IS_EARNINGS ? fmtMoney(v) : IS_CLICKS ? fmtNum(v) + (v === 1 ? ' click' : ' clicks') : v + (v === 1 ? ' order' : ' orders');
                    };
                    const dot = c => `<span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:${c};flex-shrink:0;margin-right:6px"></span>`;
                    const mainLabel = _tooltipLabels.main[dataPointIndex] || '';
                    const compLabel = _tooltipLabels.comp[dataPointIndex] || '';
                    const hasComp = series.length > 1 && compLabel;
                    let html = `<div style="padding:8px 12px;font-size:12px;font-family:inherit;color:#374151;line-height:1.8">`;
                    html += `<div style="display:flex;align-items:center">${dot(mainColor)}<span>${mainLabel} — ${fmtVal(series[0]?.[dataPointIndex] ?? null)}</span></div>`;
                    if (hasComp) html += `<div style="display:flex;align-items:center">${dot('#F7CE46')}<span>${compLabel} — ${fmtVal(series[1]?.[dataPointIndex] ?? null)}</span></div>`;
                    html += `</div>`;
                    return html;
                }
            },
            legend: {show: false},
        });
        chart.render();

        // ── Table ─────────────────────────────────────────────────────────────
        function renderTable(rows, hasComp) {
            document.getElementById(tbodyId).innerHTML = rows.map(row => `
            <tr class="hover:bg-gray-50 transition-colors">
                <td class="py-3 text-[15px] text-gray-800 font-medium">${row.name}</td>
                <td class="py-3 text-right text-[15px] text-gray-900 font-medium tabular-nums">${row.currFmt}</td>
                ${hasComp ? `<td class="py-3 text-right text-[15px] text-gray-500 font-medium tabular-nums">${row.prevFmt}</td>` : ''}
                ${hasComp ? `<td class="py-3 text-right text-[15px] tabular-nums">${deltaHtml(row.curr, row.prev)}</td>` : ''}
            </tr>`).join('');
        }

        function toggleCols(show) {
            [colB, colGrowth].forEach(id => document.getElementById(id).classList.toggle('hidden', !show));
        }

        function updateCompareOptions() {}

        function update() {
            const compareType = document.getElementById('compareSelect').value;
            const main = getPeriodData(appliedStart, appliedEnd);
            const comp = getComparisonData(appliedStart, appliedEnd, compareType);
            const hasComp = !!comp;
            const maxLen = hasComp ? Math.max(main.labels.length, comp.labels.length) : 0;
            const pad = d => [...d, ...Array(maxLen - d.length).fill(null)];

            const mainData = IS_EARNINGS ? main.revenue : IS_CLICKS ? main.clicks : main.orders;
            const series = [{name: main.label, data: mainData}];
            if (hasComp) series.push({name: comp.label, data: pad(IS_EARNINGS ? comp.revenue : IS_CLICKS ? comp.clicks : comp.orders)});

            _tooltipLabels.main = main.labels;
            _tooltipLabels.comp = hasComp ? comp.labels : [];

            chart.updateOptions({xaxis: {categories: main.labels}, series: series}, false, false);

            document.getElementById(legendA).textContent = main.label + ' (selected period)';
            document.getElementById(legendBWrap).classList.toggle('hidden', !hasComp);
            toggleCols(hasComp);

            if (hasComp) {
                document.getElementById(legendB).textContent = comp.label + ' (comparison)';
                document.getElementById(colA).textContent = main.label;
                document.getElementById(colB).textContent = comp.label;
            } else {
                document.getElementById(colA).textContent = 'Selected period';
            }

            const total = sum(mainData), prevTotal = comp ? sum(IS_EARNINGS ? comp.revenue : IS_CLICKS ? comp.clicks : comp.orders) : null;

            if (IS_CLICKS) {
                const totalUnique = sum(main.uniqueClicks);
                const prevUnique = comp ? sum(comp.uniqueClicks) : null;
                document.getElementById(summaryEl).innerHTML =
                    `<strong>${fmtNum(total)} clicks (${fmtNum(totalUnique)} unique).</strong> Recorded over the selected period (${main.label}).`;
                renderTable([
                    {name: 'Total clicks',  curr: total,       prev: prevTotal,  currFmt: fmtNum(total),       prevFmt: prevTotal  != null ? fmtNum(prevTotal)  : '—'},
                    {name: `Unique clicks <span class="relative group inline-block align-middle ml-1"><svg class="w-3.5 h-3.5 text-gray-400 cursor-help inline" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z"/></svg><span class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-64 px-3 py-2 bg-gray-900 text-white text-xs rounded-lg opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none z-10 text-center">Only one click per day per IP address counts as Unique. The rest are Repeat.</span></span>`, curr: totalUnique, prev: prevUnique, currFmt: fmtNum(totalUnique), prevFmt: prevUnique != null ? fmtNum(prevUnique) : '—'},
                ], hasComp);
            } else if (IS_EARNINGS) {
                const totalOrders = sum(main.orders), avg = totalOrders > 0 ? total / totalOrders : 0;
                document.getElementById(summaryEl).innerHTML =
                    `<strong>${fmtMoney(total)} total earnings.</strong> Generated over the selected period (${main.label}).`;
                renderTable([
                    {
                        name: 'Total earnings',
                        curr: total,
                        prev: prevTotal,
                        currFmt: fmtMoney(total),
                        prevFmt: prevTotal != null ? fmtMoney(prevTotal) : '—'
                    },
                    {
                        name: 'Average order value',
                        curr: avg,
                        prev: comp && sum(comp.orders) ? prevTotal / sum(comp.orders) : null,
                        currFmt: fmtMoney(avg),
                        prevFmt: comp && sum(comp.orders) ? fmtMoney(prevTotal / sum(comp.orders)) : '—'
                    },
                    {
                        name: 'Commission (10%)',
                        curr: total * 0.1,
                        prev: prevTotal ? prevTotal * 0.1 : null,
                        currFmt: fmtMoney(total * 0.1),
                        prevFmt: prevTotal ? fmtMoney(prevTotal * 0.1) : '—'
                    },
                ], hasComp);
            } else {
                const totalCommission = sum(main.revenue), prevCommission = comp ? sum(comp.revenue) : null;
                document.getElementById(summaryEl).innerHTML =
                    `<strong>${fmtNum(total)} order${total === 1 ? '' : 's'}, ${fmtMoney(totalCommission)} commission.</strong> Placed over the selected period (${main.label}).`;
                renderTable([
                    {
                        name: 'Orders placed',
                        curr: total,
                        prev: prevTotal,
                        currFmt: fmtNum(total),
                        prevFmt: prevTotal != null ? fmtNum(prevTotal) : '—'
                    },
                    {
                        name: 'Commission earned',
                        curr: totalCommission,
                        prev: prevCommission,
                        currFmt: fmtMoney(totalCommission),
                        prevFmt: prevCommission != null ? fmtMoney(prevCommission) : '—'
                    },
                ], hasComp);
            }
        }

        document.getElementById('pickerLabel').textContent = fmtRange(appliedStart, appliedEnd);
        updatePresetHighlight();
        document.getElementById('compareSelect').addEventListener('change', () => {
            savePeriod(appliedPreset, appliedStart, appliedEnd);
            update();
        });
        updateCompareOptions();
        update();
        if (typeof window._onPeriodApplied === 'function') window._onPeriodApplied(appliedStart, appliedEnd);

    });
</script>