@extends('layouts.app')
@section('title', 'Dashboard - FIN-ANALYSIS PRO')

@push('styles')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation@3.0.1/dist/chartjs-plugin-annotation.min.js"></script>
<style>
.dash-card {
    background:#fff;border:1px solid #E2E8F0;border-radius:14px;
    padding:1.25rem 1.5rem;box-shadow:0 1px 4px rgba(0,0,0,.05);
}
.stat-card {
    background:#fff;border:1px solid #E2E8F0;border-radius:14px;padding:1.25rem;
    display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
    box-shadow:0 1px 4px rgba(0,0,0,.05);transition:box-shadow .15s;
}
.stat-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.08)}
.stat-icon{width:44px;height:44px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.stat-label{font-size:.8125rem;font-weight:500;color:#64748B;margin-bottom:.375rem}
.stat-value{font-size:2rem;font-weight:800;color:#1E293B;line-height:1}
.stat-sub{font-size:.75rem;margin-top:.375rem;font-weight:500}
.section-title{font-size:.9375rem;font-weight:700;color:#1E293B}
.quick-link{display:flex;align-items:center;gap:10px;padding:.625rem .5rem;border-radius:9px;text-decoration:none;transition:background .15s}
.quick-link:hover{background:#F8FAFF}
.quick-link-icon{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.tr-hover:hover td{background:#FAFBFF}
.badge-safe{background:#D1FAE5;color:#065F46}
.badge-grey{background:#FEF3C7;color:#92400E}
.badge-distress{background:#FEE2E2;color:#991B1B}
.bp{display:inline-block;padding:3px 10px;border-radius:20px;font-size:.75rem;font-weight:700}
</style>
@endpush

@section('content')
<div x-data="dashboard()" x-init="init()">

{{-- HEADER --}}
<div style="display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-bottom:2rem">
    <div>
        <h1 style="font-family:'Syne',sans-serif;font-size:1.75rem;font-weight:800;color:#1E293B;margin:0 0 4px">Dashboard</h1>
        <p style="color:#64748B;font-size:.9375rem;margin:0">
            Selamat datang, <strong style="color:#1E293B">{{ Auth::user()->name }}</strong>! Berikut ringkasan analisis Anda.
        </p>
    </div>
    <div style="display:flex;gap:.75rem">
        <a href="{{ route('analysis.step1') }}" class="btn btn-primary">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
            Analisis Baru
        </a>
        <a href="{{ route('dashboard.export') }}" class="btn btn-secondary">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
            Export
        </a>
    </div>
</div>

{{-- STAT CARDS --}}
<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;margin-bottom:1.75rem">
    <div class="stat-card">
        <div>
            <div class="stat-label">Total Analisis</div>
            <div class="stat-value">{{ $totalAnalyses }}</div>
            <div class="stat-sub" style="color:#059669">
                <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" style="vertical-align:middle"><polyline points="18 15 12 9 6 15"/></svg>
                +12% dari bulan lalu
            </div>
        </div>
        <div class="stat-icon" style="background:#DBEAFE">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#1A56DB" stroke-width="2"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z"/></svg>
        </div>
    </div>
    <div class="stat-card">
        <div>
            <div class="stat-label">Rata-rata Z-Score</div>
            <div class="stat-value" style="font-size:1.75rem">{{ number_format($avgZScore,3) }}</div>
            <div class="stat-sub" style="color:{{ $avgZScore>2.9?'#059669':($avgZScore>1.23?'#D97706':'#DC2626') }}">
                <svg width="10" height="10" viewBox="0 0 24 24" fill="currentColor" style="vertical-align:middle"><circle cx="12" cy="12" r="6"/></svg>
                {{ $avgZScore>2.9?'Zona Aman':($avgZScore>1.23?'Zona Waspada':'Zona Berbahaya') }}
            </div>
        </div>
        <div class="stat-icon" style="background:#EDE9FE">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#7C3AED" stroke-width="2"><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/><polyline points="16 7 22 7 22 13"/></svg>
        </div>
    </div>
    <div class="stat-card">
        <div>
            <div class="stat-label">Perusahaan</div>
            <div class="stat-value">{{ $totalCompanies }}</div>
            <div class="stat-sub" style="color:#1A56DB">
                <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="vertical-align:middle"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg>
                {{ $activeCompanies }} aktif
            </div>
        </div>
        <div class="stat-icon" style="background:#D1FAE5">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#059669" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
        </div>
    </div>
    <div class="stat-card">
        <div>
            <div class="stat-label">Laporan PDF</div>
            <div class="stat-value">{{ $totalReports }}</div>
            <div class="stat-sub" style="color:#64748B">
                <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="vertical-align:middle"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/></svg>
                {{ $reportsThisMonth }} bulan ini
            </div>
        </div>
        <div class="stat-icon" style="background:#FEE2E2">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#DC2626" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
        </div>
    </div>
</div>

{{-- CHARTS --}}
<div style="display:grid;grid-template-columns:300px 1fr;gap:1.25rem;margin-bottom:1.75rem">

    {{-- Distribusi Kategori --}}
    <div class="dash-card">
        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem">
            <span class="section-title">Distribusi Kategori</span>
            <select id="catPeriodSelect"
                    style="font-size:.8rem;border:1.5px solid #E2E8F0;border-radius:7px;padding:4px 8px;color:#1E293B;background:#fff;outline:none;cursor:pointer"
                    @change="onCatPeriodChange($event.target.value)">
                <option value="all">Semua Periode</option>
                <option value="this_month">Bulan Ini</option>
                <option value="this_year">Tahun Ini</option>
            </select>
        </div>
        <div style="position:relative;height:180px;margin-bottom:1.25rem">
            <canvas id="categoryChart"></canvas>
            <div style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none">
                <div style="font-size:1.625rem;font-weight:800;color:#1E293B" x-text="catTotal">0</div>
                <div style="font-size:.7rem;color:#94A3B8;font-weight:500">analisis</div>
            </div>
        </div>
        <div style="display:flex;flex-direction:column;gap:9px">
            @foreach([
                ['safe',    '#10B981','Zona Aman',     $categoryStats['safe']     ?? 0, $categoryPercentage['safe']     ?? 0],
                ['grey',    '#F59E0B','Zona Waspada',  $categoryStats['grey']     ?? 0, $categoryPercentage['grey']     ?? 0],
                ['distress','#EF4444','Zona Berbahaya',$categoryStats['distress'] ?? 0, $categoryPercentage['distress'] ?? 0],
            ] as [$key,$color,$label,$count,$pct])
            <div style="display:flex;align-items:center;justify-content:space-between">
                <div style="display:flex;align-items:center;gap:8px">
                    <span style="width:10px;height:10px;border-radius:3px;background:{{ $color }};flex-shrink:0;display:inline-block"></span>
                    <span style="font-size:.8125rem;color:#64748B">{{ $label }}</span>
                </div>
                <span class="cat-stat-{{ $key }}" style="font-size:.8125rem;font-weight:700;color:#1E293B">
                    {{ $count }} <span style="color:#94A3B8;font-weight:400">({{ $pct }}%)</span>
                </span>
            </div>
            @endforeach
        </div>
    </div>

    {{-- Trend Z-Score --}}
    <div class="dash-card">
        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;flex-wrap:wrap;gap:.5rem">
            <span class="section-title">Trend Z-Score Bulanan</span>
            <div style="display:flex;gap:5px">
                @foreach(['6months'=>'6 Bulan','1year'=>'1 Tahun','all'=>'Semua'] as $val=>$lbl)
                <button class="trend-btn" data-period="{{ $val }}"
                        style="padding:5px 13px;border-radius:7px;font-size:.8rem;font-weight:600;cursor:pointer;transition:all .15s;border:1.5px solid {{ $period===$val?'#1A56DB':'#E2E8F0' }};background:{{ $period===$val?'#1A56DB':'#fff' }};color:{{ $period===$val?'#fff':'#64748B' }}"
                        @click="onPeriodChange('{{ $val }}')">
                    {{ $lbl }}
                </button>
                @endforeach
            </div>
        </div>

        {{-- Info hover --}}
        <div x-show="hoverInfo.show" x-cloak
             style="display:flex;gap:1.5rem;background:#F8FAFF;border:1px solid #E2E8F0;border-radius:8px;padding:.5rem 1rem;margin-bottom:.75rem;font-size:.8125rem">
            <span style="font-weight:700;color:#1E293B" x-text="hoverInfo.month"></span>
            <span style="color:#64748B">Z-Score: <strong style="color:#1E293B" x-text="hoverInfo.zscore"></strong></span>
            <span style="color:#64748B">Analisis: <strong style="color:#1E293B" x-text="hoverInfo.count"></strong></span>
        </div>

        <div style="height:210px">
            <canvas id="trendChart"></canvas>
        </div>

        <div style="display:flex;gap:1.5rem;margin-top:.75rem;flex-wrap:wrap">
            @foreach([['#10B981','> 2.9 Aman'],['#F59E0B','1.23–2.9 Waspada'],['#EF4444','< 1.23 Berbahaya']] as [$c,$l])
            <div style="display:flex;align-items:center;gap:5px;font-size:.75rem;color:#94A3B8">
                <span style="width:18px;border-top:2px dashed {{ $c }};display:inline-block"></span>{{ $l }}
            </div>
            @endforeach
        </div>
    </div>
</div>

{{-- TABEL + SIDEBAR --}}
<div style="display:grid;grid-template-columns:1fr 300px;gap:1.25rem">

    {{-- Analisis Terbaru --}}
    <div class="dash-card">
        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem">
            <span class="section-title">Analisis Terbaru</span>
            <a href="{{ route('history.index') }}" style="font-size:.8125rem;color:#1A56DB;font-weight:600;text-decoration:none;display:flex;align-items:center;gap:3px">
                Lihat Semua <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
            </a>
        </div>
        <div style="overflow-x:auto">
            <table style="width:100%;border-collapse:collapse;font-size:.875rem">
                <thead>
                    <tr style="border-bottom:1.5px solid #F1F5F9">
                        <th style="text-align:left;padding:8px 10px;font-size:.75rem;font-weight:600;color:#94A3B8;text-transform:uppercase;letter-spacing:.04em">Perusahaan</th>
                        <th style="text-align:left;padding:8px 10px;font-size:.75rem;font-weight:600;color:#94A3B8;text-transform:uppercase;letter-spacing:.04em">Tanggal</th>
                        <th style="text-align:right;padding:8px 10px;font-size:.75rem;font-weight:600;color:#94A3B8;text-transform:uppercase;letter-spacing:.04em">Z-Score</th>
                        <th style="text-align:center;padding:8px 10px;font-size:.75rem;font-weight:600;color:#94A3B8;text-transform:uppercase;letter-spacing:.04em">Kategori</th>
                        <th style="text-align:center;padding:8px 10px;font-size:.75rem;font-weight:600;color:#94A3B8;text-transform:uppercase;letter-spacing:.04em">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($recentAnalyses as $a)
                    <tr class="tr-hover" style="border-bottom:1px solid #F8FAFF">
                        <td style="padding:11px 10px">
                            <div style="display:flex;align-items:center;gap:8px">
                                <div style="width:30px;height:30px;border-radius:7px;background:linear-gradient(135deg,#1A56DB,#06B6D4);display:flex;align-items:center;justify-content:center;color:white;font-weight:700;font-size:.75rem;flex-shrink:0">
                                    {{ strtoupper(substr($a->company_name,0,1)) }}
                                </div>
                                <div>
                                    <div style="font-weight:600;color:#1E293B">{{ Str::limit($a->company_name,20) }}</div>
                                    <div style="font-size:.75rem;color:#94A3B8">{{ $a->business_field }}</div>
                                </div>
                            </div>
                        </td>
                        <td style="padding:11px 10px;color:#64748B;font-size:.8125rem;white-space:nowrap">
                            {{ $a->created_at->format('d/m/Y') }}
                            <span style="display:block;font-size:.7rem;color:#94A3B8">{{ $a->created_at->format('H:i') }}</span>
                        </td>
                        <td style="padding:11px 10px;text-align:right;font-weight:700;font-family:monospace;color:{{ $a->z_category==='safe'?'#059669':($a->z_category==='grey'?'#D97706':'#DC2626') }}">
                            {{ number_format($a->z_score,3) }}
                        </td>
                        <td style="padding:11px 10px;text-align:center">
                            @php
                                $bc = match($a->z_category){'safe'=>'badge-safe','grey'=>'badge-grey','distress'=>'badge-distress',default=>'badge-grey'};
                                $bl = match($a->z_category){'safe'=>'Aman','grey'=>'Waspada','distress'=>'Berbahaya',default=>'-'};
                            @endphp
                            <span class="bp {{ $bc }}">{{ $bl }}</span>
                        </td>
                        <td style="padding:11px 10px;text-align:center">
                            <div style="display:flex;align-items:center;justify-content:center;gap:10px">
                                <a href="{{ route('history.show',$a->id) }}" style="color:#1A56DB" title="Detail">
                                    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
                                </a>
                                <a href="{{ route('report.preview',$a->id) }}" target="_blank" style="color:#059669" title="Preview PDF">
                                    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
                                </a>
                                <a href="{{ route('report.download',$a->id) }}" style="color:#7C3AED" title="Unduh PDF">
                                    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
                                </a>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="5" style="padding:3rem;text-align:center;color:#94A3B8">
                            <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" style="margin:0 auto 10px;opacity:.3;display:block"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z"/></svg>
                            <div style="font-weight:600;color:#64748B;margin-bottom:4px">Belum ada analisis</div>
                            <a href="{{ route('analysis.step1') }}" style="color:#1A56DB;font-size:.8125rem">Mulai analisis pertama →</a>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    {{-- Sidebar --}}
    <div style="display:flex;flex-direction:column;gap:1.25rem">

        {{-- Perusahaan Teraktif --}}
        <div class="dash-card">
            <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem">
                <span class="section-title">Perusahaan Teraktif</span>
                <a href="{{ route('companies.index') }}" style="font-size:.75rem;color:#1A56DB;font-weight:600;text-decoration:none">Semua</a>
            </div>
            @forelse($topCompanies as $c)
            <div style="display:flex;align-items:center;justify-content:space-between;padding:.5rem .25rem;border-radius:8px;transition:background .15s" onmouseover="this.style.background='#F8FAFF'" onmouseout="this.style.background='transparent'">
                <div style="display:flex;align-items:center;gap:9px">
                    <div style="width:34px;height:34px;border-radius:8px;background:linear-gradient(135deg,#1A56DB,#06B6D4);display:flex;align-items:center;justify-content:center;color:white;font-weight:700;font-size:.875rem;flex-shrink:0">
                        {{ strtoupper(substr($c->company_name,0,1)) }}
                    </div>
                    <div>
                        <div style="font-size:.8125rem;font-weight:600;color:#1E293B">{{ Str::limit($c->company_name,16) }}</div>
                        <div style="font-size:.7rem;color:#94A3B8">{{ $c->total }} analisis</div>
                    </div>
                </div>
                <a href="{{ route('companies.show',urlencode($c->company_name)) }}" style="font-size:.75rem;color:#1A56DB;font-weight:600;text-decoration:none">Detail</a>
            </div>
            @empty
            <p style="font-size:.8125rem;color:#94A3B8;text-align:center;padding:.75rem 0">Belum ada data</p>
            @endforelse
        </div>

        {{-- Aksi Cepat --}}
        <div class="dash-card">
            <div style="margin-bottom:1rem"><span class="section-title">Aksi Cepat</span></div>
            @foreach([
                [route('analysis.step1'),  '#DBEAFE','#1A56DB','Analisis Baru',  'Mulai analisis keuangan baru',   '<line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>'],
                [route('history.index'),   '#EDE9FE','#7C3AED','Lihat Riwayat', 'Semua riwayat analisis',         '<circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>'],
                [route('companies.index'), '#D1FAE5','#059669','Perusahaan',     'Kelola data perusahaan',         '<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/>'],
                [route('profile.edit'),    '#F1F5F9','#64748B','Pengaturan',     'Kelola akun dan preferensi',     '<circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 3.6-7 8-7s8 3 8 7"/>'],
            ] as [$href,$bg,$ic,$title,$sub,$icon])
            <a href="{{ $href }}" class="quick-link">
                <div class="quick-link-icon" style="background:{{ $bg }}">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="{{ $ic }}" stroke-width="2">{!! $icon !!}</svg>
                </div>
                <div>
                    <div style="font-size:.875rem;font-weight:600;color:#1E293B">{{ $title }}</div>
                    <div style="font-size:.75rem;color:#94A3B8">{{ $sub }}</div>
                </div>
            </a>
            @endforeach
        </div>
    </div>
</div>

</div>
@endsection

@push('scripts')
<script>
function dashboard() {
    return {
        currentPeriod: '{{ $period }}',
        catPeriod: 'all',
        catTotal: {{ $totalAnalyses }},
        hoverInfo: { show: false, month: '', zscore: '-', count: '-' },
        trendLabels: {!! json_encode($trendLabels) !!},
        trendData:   {!! json_encode($trendData) !!},
        trendMeta:   {!! json_encode($trendMeta) !!},
        catData:     {!! json_encode($categoryChartData) !!},
        categoryChart: null,
        trendChart: null,

        init() {
            this.$nextTick(() => {
                this.initCategoryChart();
                this.initTrendChart();
            });
        },

        // ── Category Chart ──────────────────────────────────────────
        initCategoryChart() {
            const ctx = document.getElementById('categoryChart');
            if (!ctx) return;
            const self = this;
            this.categoryChart = new Chart(ctx, {
                type: 'doughnut',
                data: {
                    labels: ['Zona Aman', 'Zona Waspada', 'Zona Berbahaya'],
                    datasets: [{ data: self.catData.counts, backgroundColor: ['#10B981','#F59E0B','#EF4444'], borderWidth: 3, borderColor: '#fff', hoverOffset: 6 }]
                },
                options: {
                    responsive: true, maintainAspectRatio: false, cutout: '74%',
                    plugins: {
                        legend: { display: false },
                        tooltip: { callbacks: { label(ctx) { const pct = self.catData.percentages[ctx.dataIndex]; return ` ${ctx.label}: ${ctx.raw} (${pct}%)`; } } }
                    }
                }
            });
        },

        updateCategoryChart(data) {
            if (!this.categoryChart) return;
            this.categoryChart.data.datasets[0].data = data.counts;
            this.categoryChart.update();
            this.catTotal = data.total;
            ['safe','grey','distress'].forEach((key, i) => {
                const el = document.querySelector(`.cat-stat-${key}`);
                if (el) el.innerHTML = `${data.counts[i]} <span style="color:#94A3B8;font-weight:400">(${data.percentages[i]}%)</span>`;
            });
        },

        onCatPeriodChange(val) { this.catPeriod = val; this.fetchChartData(); },

        // ── Trend Chart ─────────────────────────────────────────────
        initTrendChart() {
            const ctx = document.getElementById('trendChart');
            if (!ctx) return;
            const self = this;

            // Hitung min/max dari data yang ada untuk sumbu Y dinamis
            const validData  = self.trendData.filter(v => v !== null);
            const dataMin    = validData.length ? Math.min(...validData) : 0;
            const dataMax    = validData.length ? Math.max(...validData) : 4;
            const yPad       = Math.max((dataMax - dataMin) * 0.15, 0.5);
            const yMin       = Math.max(0, dataMin - yPad);
            const yMax       = dataMax + yPad;

            // Garis referensi zona — hanya tampilkan jika dalam range
            const annotations = {};
            if (2.9 >= yMin && 2.9 <= yMax) {
                annotations.safeLine = { type:'line', yMin:2.9, yMax:2.9, borderColor:'rgba(16,185,129,.5)', borderWidth:1.5, borderDash:[6,4], label:{display:true,content:'Aman 2.9',position:'end',font:{size:10},color:'#10B981',backgroundColor:'transparent'} };
            }
            if (1.23 >= yMin && 1.23 <= yMax) {
                annotations.warnLine = { type:'line', yMin:1.23, yMax:1.23, borderColor:'rgba(245,158,11,.5)', borderWidth:1.5, borderDash:[6,4], label:{display:true,content:'Waspada 1.23',position:'end',font:{size:10},color:'#F59E0B',backgroundColor:'transparent'} };
            }

            this.trendChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: self.trendLabels,
                    datasets: [{
                        label: 'Z-Score',
                        data: self.trendData,
                        borderColor: '#1A56DB',
                        backgroundColor: 'rgba(26,86,219,0.07)',
                        borderWidth: 2.5,
                        pointRadius: self.trendData.map(v => v !== null ? 5 : 0),
                        pointBackgroundColor: self.trendData.map(v =>
                            v === null ? 'transparent' : v > 2.9 ? '#10B981' : v > 1.23 ? '#F59E0B' : '#EF4444'
                        ),
                        pointBorderColor: '#fff',
                        pointBorderWidth: 2,
                        pointHoverRadius: 7,
                        tension: 0.35,
                        fill: true,
                        spanGaps: false,
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    interaction: { mode: 'index', intersect: false },
                    plugins: {
                        legend: { display: false },
                        tooltip: {
                            backgroundColor: '#1E293B', titleColor: '#F1F5F9', bodyColor: '#CBD5E1', padding: 10, cornerRadius: 8,
                            callbacks: {
                                title(items) { return self.trendMeta[items[0].dataIndex]?.label || items[0].label; },
                                label(item) {
                                    const meta = self.trendMeta[item.dataIndex];
                                    const val  = item.raw;
                                    if (val === null) return ' Belum ada data';
                                    const zone = val > 2.9 ? 'Zona Aman' : val > 1.23 ? 'Zona Waspada' : 'Zona Berbahaya';
                                    return [` Z-Score: ${parseFloat(val).toFixed(4)}`, ` ${zone}`, ` ${meta?.count ?? 0} analisis`];
                                }
                            }
                        },
                        annotation: { annotations }
                    },
                    scales: {
                        y: {
                            min: yMin,
                            max: yMax,
                            grid: { color: 'rgba(148,163,184,.1)' },
                            ticks: {
                                font: { size: 11 }, color: '#94A3B8',
                                // Format angka besar dengan K/M/B
                                callback: v => {
                                    if (Math.abs(v) >= 1e9) return (v/1e9).toFixed(1)+'B';
                                    if (Math.abs(v) >= 1e6) return (v/1e6).toFixed(1)+'M';
                                    if (Math.abs(v) >= 1e3) return (v/1e3).toFixed(1)+'K';
                                    return v.toFixed(2);
                                }
                            }
                        },
                        x: { grid: { display: false }, ticks: { font: { size: 11 }, color: '#94A3B8', maxRotation: 45 } }
                    },
                    onHover: (event, elements) => {
                        if (elements.length > 0) {
                            const idx = elements[0].index;
                            const val = self.trendData[idx];
                            self.hoverInfo = {
                                show:   true,
                                month:  self.trendMeta[idx]?.label || self.trendLabels[idx],
                                zscore: val !== null ? parseFloat(val).toFixed(4) : '-',
                                count:  (self.trendMeta[idx]?.count ?? 0) + ' analisis',
                            };
                        } else {
                            self.hoverInfo.show = false;
                        }
                    }
                }
            });
        },

        updateTrendChart(labels, data, meta) {
            if (!this.trendChart) return;
            this.trendLabels = labels;
            this.trendData   = data;
            this.trendMeta   = meta;

            const validData = data.filter(v => v !== null);
            const dataMin   = validData.length ? Math.min(...validData) : 0;
            const dataMax   = validData.length ? Math.max(...validData) : 4;
            const yPad      = Math.max((dataMax - dataMin) * 0.15, 0.5);

            this.trendChart.data.labels = labels;
            this.trendChart.data.datasets[0].data = data;
            this.trendChart.data.datasets[0].pointRadius = data.map(v => v !== null ? 5 : 0);
            this.trendChart.data.datasets[0].pointBackgroundColor = data.map(v =>
                v === null ? 'transparent' : v > 2.9 ? '#10B981' : v > 1.23 ? '#F59E0B' : '#EF4444'
            );
            this.trendChart.options.scales.y.min = Math.max(0, dataMin - yPad);
            this.trendChart.options.scales.y.max = dataMax + yPad;
            this.trendChart.update();
        },

        onPeriodChange(period) {
            this.currentPeriod = period;
            document.querySelectorAll('.trend-btn').forEach(btn => {
                const active = btn.dataset.period === period;
                btn.style.background  = active ? '#1A56DB' : '#fff';
                btn.style.color       = active ? '#fff'    : '#64748B';
                btn.style.borderColor = active ? '#1A56DB' : '#E2E8F0';
            });
            this.fetchChartData();
        },

        fetchChartData() {
            fetch(`{{ route('dashboard.chart') }}?${new URLSearchParams({period:this.currentPeriod,cat_period:this.catPeriod})}`, {
                headers: { 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content }
            })
            .then(r => r.json())
            .then(res => {
                if (res.trend)    this.updateTrendChart(res.trend.labels, res.trend.data, res.trend.meta);
                if (res.category) { this.catData = res.category; this.updateCategoryChart(res.category); }
            })
            .catch(e => console.error('Dashboard error:', e));
        }
    };
}
</script>
@endpush