@extends('layouts.app')

@section('title', 'Dashboard - SIPHLN')

@section('content')
<div class="space-y-6">

    <!-- Header Banner -->
    <div class="bg-teal-800 text-white p-5 rounded-lg shadow flex flex-col md:flex-row justify-between items-start md:items-center">
        <div>
            <h1 class="text-2xl font-bold">DASHBOARD PHLN</h1>
            <p class="text-teal-200 text-sm">Directorate General of Disease Prevention - Ministry of Health RI</p>
        </div>
        
        @if($isSuperAdmin)
        <form method="GET" action="{{ route('dashboard') }}" class="mt-4 md:mt-0 flex flex-wrap items-end gap-3">
            <div>
                <label for="year" class="block text-xs font-semibold uppercase tracking-wide text-teal-200 mb-1">Fiscal Year</label>
                <select name="year" id="year" onchange="this.form.submit()"
                    class="bg-white text-gray-800 rounded-md text-sm border border-gray-300 focus:ring-2 focus:ring-teal-400 focus:outline-none px-3 py-2 min-w-[120px]">
                    @foreach($availableYears->sortDesc() as $y)
                        <option value="{{ $y }}" {{ $activeYear === $y ? 'selected' : '' }}>{{ $y }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label for="unit_id" class="block text-xs font-semibold uppercase tracking-wide text-teal-200 mb-1">Organization Unit</label>
                <select name="unit_id" id="unit_id" onchange="this.form.submit()"
                    class="bg-white text-gray-800 rounded-md text-sm border border-gray-300 focus:ring-2 focus:ring-teal-400 focus:outline-none px-3 py-2 min-w-[220px]">
                    <option value="">-- All Units ({{ $organizationUnits->count() }}) --</option>
                    @foreach($organizationUnits as $unit)
                        <option value="{{ $unit->id }}" {{ $selectedUnitId == $unit->id ? 'selected' : '' }}>
                            {{ $unit->acronym ? $unit->acronym . ' - ' . $unit->organization_unit : $unit->organization_unit }}
                        </option>
                    @endforeach
                </select>
            </div>
            @if($selectedUnitId || $activeYear != date('Y'))
                <a href="{{ route('dashboard') }}" class="text-xs bg-white/20 hover:bg-white/30 text-white font-medium px-3 py-2 rounded-md transition whitespace-nowrap">
                    Reset
                </a>
            @endif
        </form>
        @else
        <div class="mt-4 md:mt-0 flex items-center gap-2 bg-teal-700/60 border border-teal-700 rounded-lg px-4 py-2.5">
            <svg class="w-4 h-4 text-teal-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg>
            <span class="text-sm font-medium text-teal-50">{{ $unitLabel }}</span>
        </div>
        @endif
    </div>

    @unless($hasBudgetData)
        <div class="flex items-start gap-3 bg-amber-50 border border-amber-200 text-amber-900 text-sm px-4 py-3 rounded-lg">
            <svg class="w-5 h-5 shrink-0 mt-0.5 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
            <p>
                <span class="font-semibold">Budget {{ $activeYear }} not available yet.</span>
                There is no <code class="font-mono text-xs">budget_{{ $activeYear }}</code> column in activities yet,
                so only the activity count for {{ $activeYear }} is shown.
            </p>
        </div>
    @endunless

    <!-- KPI Cards -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div class="{{ $hasBudgetData ? 'bg-emerald-500' : 'bg-emerald-500/40' }} text-white p-5 rounded-lg shadow">
            <p class="text-xs font-semibold uppercase opacity-80">Total Activity Budget</p>
            <p class="text-2xl font-bold mt-1">
                @if($hasBudgetData)
                    Rp {{ number_format($totalActivityBudget, 0, ',', '.') }}
                @else
                    &mdash;
                @endif
            </p>
        </div>
        <div class="bg-amber-500 text-white p-5 rounded-lg shadow">
            <p class="text-xs font-semibold uppercase opacity-80">Total Activities</p>
            <p class="text-2xl font-bold mt-1">{{ $totalActivities }}</p>
        </div>
        <div class="bg-sky-500 text-white p-5 rounded-lg shadow">
            <p class="text-xs font-semibold uppercase opacity-80">Organization Unit</p>
            <p class="text-2xl font-bold mt-1 truncate">{{ $unitLabel }}</p>
        </div>
    </div>

    <!-- Charts -->
    @if($hasBudgetData)
    <div class="grid grid-cols-1 md:grid-cols-12 gap-6">
        <div class="md:col-span-7 bg-white p-5 rounded-xl shadow-sm border border-gray-200/80">
            <div class="flex items-start justify-between gap-3 mb-4">
                <div>
                    <h3 class="text-base font-bold text-gray-800">Total Budget per Program</h3>
                    <p class="text-xs text-gray-400 mt-0.5">Grouped by program code</p>
                </div>
                <span id="programTotalBadge" class="shrink-0 text-xs font-semibold text-teal-700 bg-teal-50 ring-1 ring-teal-100 px-2.5 py-1 rounded-full"></span>
            </div>
            <div class="relative h-72">
                <canvas id="barChart" class="w-full h-full"></canvas>
            </div>
        </div>
        <div class="md:col-span-5 bg-white p-5 rounded-xl shadow-sm border border-gray-200/80">
            <h3 class="text-base font-bold text-gray-800">Budget Percentage by Activity Type</h3>
            <p class="text-xs text-gray-400 mt-0.5 mb-4">Share of total budget</p>
            <div class="relative h-[19rem]">
                <canvas id="donutChart" class="w-full h-full"></canvas>
            </div>
        </div>
    </div>

    <!-- Total Budget per Organization Unit -->
    <div class="bg-white p-5 rounded-xl shadow-sm border border-gray-200/80">
        <div class="flex flex-wrap items-start justify-between gap-3 mb-4">
            <div>
                <h3 class="text-base font-bold text-gray-800">Total Budget per Organization Unit</h3>
                <p class="text-xs text-gray-400 mt-0.5">Ranked from highest to lowest budget</p>
            </div>
            <span id="unitTotalBadge" class="shrink-0 text-xs font-semibold text-teal-700 bg-teal-50 ring-1 ring-teal-100 px-2.5 py-1 rounded-full"></span>
        </div>
        <div id="unitBarWrap" class="relative">
            <canvas id="unitBarChart" class="w-full"></canvas>
        </div>
    </div>
    @endif

</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    if (!window.Chart) return;

    const programLabels  = @js($programChartData->pluck('program_code'));
    const programData    = @js($programChartData->pluck('total'));
    const activityLabels = @js($activityChartData->pluck('activity_type'));
    const activityData   = @js($activityChartData->pluck('total'));
    const unitLabels     = @js($unitBudgetData->map(fn($u) => $u->acronym ?: $u->organization_unit));
    const unitData       = @js($unitBudgetData->pluck('total'));

    /* ---------- Design tokens ---------- */
    Chart.defaults.font.family = "ui-sans-serif, system-ui, 'Segoe UI', sans-serif";
    Chart.defaults.font.size = 11;
    Chart.defaults.color = '#64748b';
    Chart.defaults.animation.duration = 900;
    Chart.defaults.animation.easing = 'easeOutQuart';

    const css = document.createElement('style');
    css.textContent = [
        '.chart-tip{position:absolute;left:0;top:0;z-index:30;pointer-events:none;opacity:0;',
        'transition:opacity .15s ease,transform .15s ease;transform:translate(-50%,-118%);',
        'background:rgba(15,23,42,.95);color:#fff;border-radius:.6rem;padding:.5rem .7rem;',
        'font-size:11px;line-height:1.4;box-shadow:0 12px 28px -8px rgba(2,6,23,.55);white-space:nowrap}',
        '.chart-tip b{display:block;font-size:11.5px;font-weight:700;color:#5eead4;margin-bottom:.15rem}',
        '.chart-tip .row{display:flex;align-items:center;gap:.45rem}',
        '.chart-tip .dot{width:.5rem;height:.5rem;border-radius:9999px;flex:none}',
        '.chart-tip .muted{color:#94a3b8}',
        '.chart-tip em{font-style:normal;color:#fbbf24;font-weight:700}'
    ].join('');
    document.head.appendChild(css);

    /* ---------- Helpers ---------- */
    const fmtRp = v => 'Rp ' + Number(v || 0).toLocaleString('id-ID');
    const fmtShort = v => {
        v = Number(v || 0);
        if (v >= 1e12) return (v / 1e12).toFixed(1).replace('.', ',') + ' T';
        if (v >= 1e9)  return (v / 1e9).toFixed(1).replace('.', ',') + ' M';
        if (v >= 1e6)  return (v / 1e6).toFixed(1).replace('.', ',') + ' jt';
        return v.toLocaleString('id-ID');
    };
    const sum = arr => arr.reduce((a, b) => a + (Number(b) || 0), 0);

    const gradient = (chart, from, to, horizontal) => {
        const { ctx, chartArea } = chart;
        if (!chartArea) return from;
        const g = horizontal
            ? ctx.createLinearGradient(chartArea.left, 0, chartArea.right, 0)
            : ctx.createLinearGradient(0, chartArea.bottom, 0, chartArea.top);
        g.addColorStop(0, from);
        g.addColorStop(1, to);
        return g;
    };

    const PALETTE = ['#009688', '#f59e0b', '#3b82f6', '#ef4444', '#22c55e', '#8b5cf6',
                     '#f97316', '#14b8a6', '#e11d48', '#64748b', '#0ea5e9', '#d97706',
                     '#a855f7', '#84cc16', '#6366f1', '#eab308'];

    const attachTip = chart => {
        const tip = document.createElement('div');
        tip.className = 'chart-tip';
        chart.canvas.parentNode.appendChild(tip);
        chart.$tip = tip;
    };

    const externalTip = ctx => {
        const { chart, tooltip } = ctx;
        const tip = chart.$tip;
        if (!tip) return;
        if (!tooltip.opacity) { tip.style.opacity = '0'; return; }

        const dp = tooltip.dataPoints[0];
        const meta = chart.getDatasetMeta(dp.datasetIndex);
        const color = meta.data[dp.dataIndex] ? meta.data[dp.dataIndex].options.backgroundColor : '#009688';
        const isPie = chart.config.type === 'doughnut';
        const raw = isPie
            ? chart.data.datasets[0].data[dp.dataIndex]
            : (chart.options.indexAxis === 'y' ? dp.parsed.x : dp.parsed.y);
        const total = sum(isPie ? chart.data.datasets[0].data : chart.data.datasets[dp.datasetIndex].data);
        const pct = total ? ((Number(raw) / total) * 100).toFixed(1) : '0.0';

        tip.innerHTML =
            '<b>' + dp.label + '</b>' +
            '<div class="row"><span class="dot" style="background:' + (typeof color === 'string' ? color : '#009688') + '"></span>' +
            '<span>' + fmtRp(raw) + '</span></div>' +
            '<div class="row muted"><span class="muted">Share</span><em>' + pct + '%</em></div>';

        tip.style.left = tooltip.caretX + 'px';
        tip.style.top = tooltip.caretY + 'px';
        tip.style.opacity = '1';
    };

    /* ---------- Plugins ---------- */
    const centerText = {
        id: 'centerText',
        afterDatasetsDraw(chart) {
            const { ctx, chartArea } = chart;
            if (!chartArea) return;
            const total = sum(chart.data.datasets[0].data);
            const cx = (chartArea.left + chartArea.right) / 2;
            const cy = (chartArea.top + chartArea.bottom) / 2;

            ctx.save();
            ctx.textAlign = 'center';
            ctx.fillStyle = '#94a3b8';
            ctx.font = '600 10px ' + Chart.defaults.font.family;
            ctx.fillText('TOTAL BUDGET', cx, cy - 16);

            ctx.fillStyle = '#0f172a';
            ctx.font = '700 17px ' + Chart.defaults.font.family;
            ctx.fillText(fmtShort(total), cx, cy + 4);

            ctx.fillStyle = '#009688';
            ctx.font = '600 10px ' + Chart.defaults.font.family;
            ctx.fillText(fmtRp(total), cx, cy + 20);
            ctx.restore();
        }
    };

    const valueLabel = {
        id: 'valueLabel',
        afterDatasetsDraw(chart) {
            const { ctx, chartArea } = chart;
            if (!chartArea) return;
            ctx.save();
            ctx.font = '700 10px ' + Chart.defaults.font.family;
            ctx.fillStyle = '#0f766e';
            ctx.textBaseline = 'middle';
            chart.getDatasetMeta(0).data.forEach((bar, i) => {
                const v = unitData[i];
                if (v === undefined || v === null) return;
                const text = fmtShort(v);
                const w = ctx.measureText(text).width;
                if (bar.x + w + 12 <= chartArea.right) {
                    ctx.textAlign = 'left';
                    ctx.fillText(text, bar.x + 7, bar.y);
                } else {
                    ctx.textAlign = 'right';
                    ctx.fillStyle = '#ffffff';
                    ctx.fillText(text, bar.x - 7, bar.y);
                }
            });
            ctx.restore();
        }
    };

    /* ---------- 1. Program (vertical bar) ---------- */
    const barCtx = document.getElementById('barChart');
    const donutCtx = document.getElementById('donutChart');
    const unitCtx = document.getElementById('unitBarChart');
    if (!barCtx || !donutCtx || !unitCtx) return;

    const programChart = new Chart(barCtx, {
        type: 'bar',
        data: {
            labels: programLabels.length ? programLabels : ['No Data'],
            datasets: [{
                label: 'Budget (Rp)',
                data: programData.length ? programData : [0],
                backgroundColor: c => gradient(c.chart, 'rgba(13,148,136,0.25)', 'rgba(0,121,107,1)'),
                hoverBackgroundColor: c => gradient(c.chart, 'rgba(13,148,136,0.45)', 'rgba(15,118,110,1)'),
                borderRadius: { topLeft: 8, topRight: 8, bottomLeft: 2, bottomRight: 2 },
                borderSkipped: false,
                maxBarThickness: 46
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            interaction: { mode: 'index', intersect: false },
            layout: { padding: { top: 6 } },
            plugins: {
                legend: { display: false },
                tooltip: { enabled: false, external: externalTip }
            },
            scales: {
                x: {
                    grid: { display: false },
                    border: { display: false },
                    ticks: { color: '#94a3b8', maxRotation: 40, minRotation: 0, autoSkip: false, font: { size: 10, weight: '600' } }
                },
                y: {
                    beginAtZero: true,
                    grid: { color: 'rgba(148,163,184,0.18)', drawTicks: false },
                    border: { display: false },
                    ticks: { color: '#94a3b8', padding: 8, callback: v => fmtShort(v) }
                }
            }
        }
    });
    attachTip(programChart);
    const programTotal = sum(programData);
    const pBadge = document.getElementById('programTotalBadge');
    if (pBadge) pBadge.textContent = programTotal ? fmtRp(programTotal) : 'No Data';

    /* ---------- 2. Activity type (doughnut) ---------- */
    const donutChart = new Chart(donutCtx, {
        type: 'doughnut',
        data: {
            labels: activityLabels.length ? activityLabels : ['No Data'],
            datasets: [{
                data: activityData.length ? activityData : [1],
                backgroundColor: PALETTE,
                hoverBackgroundColor: PALETTE,
                hoverOffset: 10,
                borderColor: '#ffffff',
                borderWidth: 2,
                hoverBorderColor: '#ffffff'
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            cutout: '68%',
            radius: '92%',
            layout: { padding: 4 },
            plugins: {
                legend: {
                    position: 'bottom',
                    labels: {
                        usePointStyle: true,
                        pointStyle: 'circle',
                        boxWidth: 8,
                        boxHeight: 8,
                        padding: 12,
                        color: '#64748b',
                        font: { size: 10, weight: '600' }
                    }
                },
                tooltip: { enabled: false, external: externalTip }
            },
            animation: { animateRotate: true, animateScale: true, duration: 1100 }
        },
        plugins: [centerText]
    });
    attachTip(donutChart);

    /* ---------- 3. Organization unit (horizontal bar) ---------- */
    const unitWrap = document.getElementById('unitBarWrap');
    const unitCount = unitData.length;
    const unitHeight = unitCount ? Math.max(320, unitCount * 38 + 60) : 320;
    if (unitWrap) unitWrap.style.height = unitHeight + 'px';

    const unitChart = new Chart(unitCtx, {
        type: 'bar',
        data: {
            labels: unitLabels.length ? unitLabels : ['No Data'],
            datasets: [{
                label: 'Budget (Rp)',
                data: unitData.length ? unitData : [0],
                backgroundColor: c => gradient(c.chart, 'rgba(13,148,136,0.20)', 'rgba(0,150,136,0.95)', true),
                hoverBackgroundColor: c => gradient(c.chart, 'rgba(13,148,136,0.40)', 'rgba(15,118,110,1)', true),
                borderRadius: { topLeft: 2, bottomLeft: 2, topRight: 8, bottomRight: 8 },
                borderSkipped: false,
                maxBarThickness: 26
            }]
        },
        options: {
            indexAxis: 'y',
            responsive: true,
            maintainAspectRatio: false,
            interaction: { mode: 'nearest', axis: 'y', intersect: false },
            layout: { padding: { right: 62, top: 4 } },
            plugins: {
                legend: { display: false },
                tooltip: { enabled: false, external: externalTip }
            },
            scales: {
                x: {
                    beginAtZero: true,
                    grid: { color: 'rgba(148,163,184,0.18)', drawTicks: false },
                    border: { display: false },
                    ticks: { color: '#94a3b8', padding: 6, callback: v => fmtShort(v) }
                },
                y: {
                    grid: { display: false },
                    border: { display: false },
                    ticks: { color: '#475569', font: { size: 11, weight: '600' } }
                }
            },
            animation: { duration: 1000, easing: 'easeOutQuart' }
        },
        plugins: [valueLabel]
    });
    attachTip(unitChart);

    const unitTotal = sum(unitData);
    const uBadge = document.getElementById('unitTotalBadge');
    if (uBadge) uBadge.textContent = unitCount ? unitCount + ' units - ' + fmtRp(unitTotal) : 'No Data';

    const ro = new ResizeObserver(() => { programChart.resize(); donutChart.resize(); unitChart.resize(); });
    [programChart, donutChart, unitChart].forEach(c => ro.observe(c.canvas));
});
</script>
@endpush