@extends('layouts.app')
@section('title', 'Admin 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>
.a-card{
    background:linear-gradient(135deg,#fff 0%,#fafbff 100%);border:1px solid #E0E7FF;border-radius:16px;
    padding:1.5rem;box-shadow:0 2px 8px rgba(0,0,0,.05);
    transition:all .2s cubic-bezier(.4,0,.2,1);
}
.a-card:hover {
    box-shadow:0 8px 16px rgba(0,0,0,.08);border-color:#D0D9FF;
}
.a-stat{
    background:linear-gradient(135deg,#fff 0%,#fafbff 100%);border:1px solid #E0E7FF;border-radius:16px;
    padding:1.5rem;display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
    box-shadow:0 2px 8px rgba(0,0,0,.05);transition:all .2s cubic-bezier(.4,0,.2,1);
    position:relative;overflow:hidden;
}
.a-stat::before {
    content:'';position:absolute;top:0;right:0;width:150px;height:150px;
    background:radial-gradient(circle,rgba(26,86,219,.08) 0%, transparent 70%);
    border-radius:50%;pointer-events:none;
}
.a-stat:hover{box-shadow:0 8px 24px rgba(26,86,219,.12);border-color:#D0D9FF;transform:translateY(-2px)}
.a-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;z-index:1}
.sec{font-size:1.0625rem;font-weight:700;color:#0F172A;letter-spacing:.3px}
.admin-tag{background:#EDE9FE;color:#7C3AED;padding:3px 10px;border-radius:8px;font-size:.7rem;font-weight:700;text-transform:uppercase}
.ban-tag{background:#FEE2E2;color:#991B1B;padding:3px 9px;border-radius:8px;font-size:.7rem;font-weight:700;text-transform:uppercase}
.trend-wrap{background:#0B1220;border-radius:12px;padding:1rem;position:relative;overflow:hidden;height:260px;border:1px solid #1E3A5F}
.trend-title-admin {
    display:flex;flex-direction:column;gap:.25rem;
}
.stat-label-admin{font-size:.8125rem;font-weight:600;color:#64748B;margin-bottom:.5rem;letter-spacing:.3px;text-transform:uppercase}
.stat-value-admin{font-size:2.25rem;font-weight:800;color:#0F172A;line-height:1;z-index:1}
.stat-sub-admin{font-size:.75rem;margin-top:.5rem;font-weight:600}

/* ===== DARK MODE FOR ADMIN DASHBOARD ===== */
.dark .a-card {
    background: #1e293b !important;
    border-color: #334155 !important;
}

.dark .a-card:hover {
    border-color: #475569 !important;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3) !important;
}

.dark .a-stat {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%) !important;
    border-color: #475569 !important;
}

.dark .a-stat::before {
    background: radial-gradient(circle, rgba(59, 130, 246, 0.08) 0%, transparent 70%) !important;
}

.dark .a-stat:hover {
    border-color: #60a5fa !important;
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.15) !important;
}

.dark .a-icon {
    background: linear-gradient(135deg, #334155, #475569) !important;
}

.dark .sec {
    color: #f1f5f9 !important;
}

.dark .stat-label-admin {
    color: #cbd5e1 !important;
}

.dark .stat-value-admin {
    color: #f1f5f9 !important;
}

.dark .stat-sub-admin {
    color: #94a3b8 !important;
}

.dark .admin-tag {
    background: rgba(124, 58, 237, 0.2) !important;
    color: #c4b5fd !important;
}

.dark .ban-tag {
    background: rgba(220, 38, 38, 0.2) !important;
    color: #fca5a5 !important;
}

.dark .trend-wrap {
    background: #0B1220 !important;
    border-color: #1E3A5F !important;
}

.dark h1 {
    color: #f1f5f9 !important;
}

.dark p {
    color: #cbd5e1 !important;
}

.dark .btn-primary {
    background: #3b82f6 !important;
    color: #ffffff !important;
}

.dark .btn-primary:hover {
    background: #2563eb !important;
}

.dark .btn-secondary {
    background: #475569 !important;
    color: #f1f5f9 !important;
    border-color: #64748b !important;
}

.dark .btn-secondary:hover {
    background: #64748b !important;
}

/* Dark mode for chart elements */
.dark canvas {
    color: #f1f5f9 !important;
}

/* Dark mode for table rows */
.dark [style*="border-bottom:1px solid #F8FAFF"] {
    border-bottom-color: #334155 !important;
}

/* Dark mode text colors for inline styles */
.dark [style*="color:#0F172A"],
.dark [style*="color:#64748B"],
.dark [style*="color:#1E293B"],
.dark [style*="color:#94A3B8"] {
    color: #f1f5f9 !important;
}

.dark [style*="background:#F8FAFF"] {
    background: rgba(51, 65, 85, 0.3) !important;
}

.dark [style*="background:linear-gradient(135deg,#7C3AED"],
.dark [style*="background:linear-gradient(135deg,#1A56DB"] {
    /* Keep gradients but maybe adjust opacity for dark mode */
}

/* Safe/Warning/Danger color badges in dark mode */
.dark [style*="color:#10B981"] {
    color: #86efac !important;
}

.dark [style*="color:#D97706"] {
    color: #fcd34d !important;
}

.dark [style*="color:#DC2626"],
.dark [style*="color:#991B1B"] {
    color: #fca5a5 !important;
}

/* Light mode fallback for admin dashboard */
.light .a-card {
    background: #ffffff !important;
    border-color: #E0E7FF !important;
}

.light .a-card:hover {
    border-color: #D0D9FF !important;
}

.light .a-stat {
    background: linear-gradient(135deg, #ffffff 0%, #fafbff 100%) !important;
    border-color: #E0E7FF !important;
}

.light .a-icon {
    /* Icons will use their inline gradients */
}

.light .sec {
    color: #0F172A !important;
}

.light .stat-label-admin {
    color: #64748B !important;
}

.light .stat-value-admin {
    color: #0F172A !important;
}

.light .stat-sub-admin {
    color: #64748B !important;
}

.light .admin-tag {
    background: #EDE9FE !important;
    color: #7C3AED !important;
}

/* Light mode fallback for admin dashboard */
.light .a-card {
    background: #ffffff !important;
    border-color: #E0E7FF !important;
}

.light .a-card:hover {
    border-color: #D0D9FF !important;
}

.light .a-stat {
    background: linear-gradient(135deg, #ffffff 0%, #fafbff 100%) !important;
    border-color: #E0E7FF !important;
}

.light .a-icon {
    /* Icons will use their inline gradients */
}

.light .sec {
    color: #0F172A !important;
}

.light .stat-label-admin {
    color: #64748B !important;
}

.light .stat-value-admin {
    color: #0F172A !important;
}

.light .stat-sub-admin {
    color: #64748B !important;
}

.light .admin-tag {
    background: #EDE9FE !important;
    color: #7C3AED !important;
}

.light .ban-tag {
    background: #FEE2E2 !important;
    color: #991B1B !important;
}

/* Additional dark mode fixes for inline styled elements */
.dark [style*="color:#1A56DB"],
.dark [style*="color:#1A56db"] {
    color: #60a5fa !important;
}

.dark [style*="color:#1E293B"],
.dark [style*="color:#1e293b"] {
    color: #f1f5f9 !important;
}

.dark [style*="color:#94A3B8"],
.dark [style*="color:#94a3b8"] {
    color: #cbd5e1 !important;
}

.dark a[style*="color:#1A56DB"],
.dark a[style*="color:#1A56db"] {
    color: #93c5fd !important;
}

.dark a[style*="color:#1A56DB"]:hover,
.dark a[style*="color:#1A56db"]:hover {
    color: #60a5fa !important;
}

.dark [style*="background:#F8FAFF"] {
    background: rgba(51, 65, 85, 0.3) !important;
}

.dark [style*="background:#F0FDF4"] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%) !important;
}

.dark [style*="border:1px solid #BBF7D0"] {
    border-color: rgba(16, 185, 129, 0.3) !important;
}

/* Donut chart center text */
.dark [style*="color:#0F172A"] {
    color: #f1f5f9 !important;
}

/* Keep safe/warning/danger colors readable */
.dark [style*="color:#059669"] {
    color: #86efac !important;
}

.dark [style*="color:#92400E"] {
    color: #fcd34d !important;
}

.dark [style*="color:#065F46"] {
    color: #86efac !important;
}
</style>
@endpush

@section('content')
<div>

{{-- Header --}}
<div style="display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:1.5rem;margin-bottom:2.5rem">
    <div>
        <div style="display:flex;align-items:center;gap:10px;margin-bottom:8px">
            <h1 style="font-family:'Syne',sans-serif;font-size:2rem;font-weight:800;color:#0F172A;margin:0;letter-spacing:-.02em">Admin Dashboard</h1>
            <span class="admin-tag" style="height:fit-content">Admin</span>
        </div>
        <p style="color:#64748B;margin:0;display:flex;align-items:center;gap:6px">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="color:#1A56DB;flex-shrink:0"><circle cx="12" cy="12" r="1"/><path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20z"/></svg>
            Selamat datang, <strong style="color:#0F172A">{{ Auth::user()->name }}</strong>! Pantau semua aktivitas platform.
        </p>
    </div>
    <div style="display:flex;gap:.75rem;flex-wrap:wrap">
        <a href="{{ route('admin.users.create') }}" class="btn btn-primary">
            <svg width="15" height="15" 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>
            Tambah User
        </a>
        <a href="{{ route('dashboard') }}" class="btn btn-secondary">
            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg>
            Dashboard User
        </a>
    </div>
</div>

{{-- Stat Cards --}}
<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;margin-bottom:2rem;@media(max-width:1024px){grid-template-columns:repeat(2,1fr)}@media(max-width:640px){grid-template-columns:1fr}">
    <div class="a-stat">
        <div style="z-index:1">
            <div class="stat-label-admin">Total User</div>
            <div class="stat-value-admin">{{ $totalUsers }}</div>
            <div class="stat-sub-admin" style="color:#10B981">
                <svg width="12" height="12" 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>
                +{{ $newUsersMonth }} baru bulan ini
            </div>
        </div>
        <div class="a-icon" style="background:linear-gradient(135deg,#DBEAFE,#BAE6FD)">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#1A56DB" stroke-width="1.8"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
        </div>
    </div>
    <div class="a-stat">
        <div style="z-index:1">
            <div class="stat-label-admin">User Aktif</div>
            <div class="stat-value-admin">{{ $activeUsers }}</div>
            <div class="stat-sub-admin" style="color:#DC2626">
                <span style="width:8px;height:8px;background:currentColor;border-radius:50%;display:inline-block;margin-right:4px"></span>
                {{ $bannedUsers }} dinonaktifkan
            </div>
        </div>
        <div class="a-icon" style="background:linear-gradient(135deg,#D1FAE5,#A7F3D0)">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#10B981" stroke-width="1.8"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
        </div>
    </div>
    <div class="a-stat">
        <div style="z-index:1">
            <div class="stat-label-admin">Total Analisis</div>
            <div class="stat-value-admin">{{ $totalAnalyses }}</div>
            <div class="stat-sub-admin" style="color:#1A56DB">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" style="vertical-align:middle"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
                {{ $analysesMonth }} bulan ini
            </div>
        </div>
        <div class="a-icon" style="background:linear-gradient(135deg,#EDE9FE,#DDD6FE)">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#7C3AED" stroke-width="1.8"><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="a-stat">
        <div style="z-index:1">
            <div class="stat-label-admin">Rata-rata Z-Score</div>
            <div class="stat-value-admin" style="font-size:2rem">{{ number_format($avgZScore,3) }}</div>
            <div class="stat-sub-admin" style="color:{{ $avgZScore>2.9?'#10B981':($avgZScore>1.23?'#D97706':'#DC2626') }}">
                <span style="width:8px;height:8px;background:currentColor;border-radius:50%;display:inline-block;margin-right:4px"></span>
                {{ $avgZScore>2.9?'Zona Aman':($avgZScore>1.23?'Zona Waspada':'Zona Berbahaya') }}
            </div>
        </div>
        <div class="a-icon" style="background:linear-gradient(135deg,#FEE2E2,#FECACA)">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#DC2626" stroke-width="1.8"><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>

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

    {{-- Donut --}}
    <div class="a-card">
        <div class="sec" style="margin-bottom:1rem">Distribusi Kategori</div>
        <div style="position:relative;height:160px;margin-bottom:1rem">
            <canvas id="catChart"></canvas>
            <div style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none">
                <div style="font-size:1.5rem;font-weight:800;color:#1E293B">{{ $totalAnalyses }}</div>
                <div style="font-size:.7rem;color:#94A3B8">total</div>
            </div>
        </div>
        @foreach([['safe','#10B981','Zona Aman'],['grey','#F59E0B','Zona Waspada'],['distress','#EF4444','Zona Berbahaya']] as [$k,$c,$l])
        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:7px">
            <div style="display:flex;align-items:center;gap:7px">
                <span style="width:9px;height:9px;border-radius:2px;background:{{ $c }};display:inline-block"></span>
                <span style="font-size:.8rem;color:#64748B">{{ $l }}</span>
            </div>
            <span style="font-size:.8rem;font-weight:700;color:#1E293B">{{ $categoryStats[$k] ?? 0 }}</span>
        </div>
        @endforeach
    </div>

    {{-- Trend Chart - modern style --}}
    <div class="a-card" style="padding:1.5rem">
        <div style="display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:1.5rem;flex-wrap:wrap;gap:1rem">
            <div class="trend-title-admin">
                <div class="sec">📊 Trend Z-Score Bulanan</div>
                <div style="font-size:.8rem;color:#64748B;margin-top:.25rem">Monitoring rata-rata Z-Score semua analisis per bulan</div>
            </div>
            {{-- Live badge --}}
            <div style="display:flex;align-items:center;gap:6px;background:linear-gradient(135deg,#F0FDF4 0%,#F0FDF4 100%);border:1px solid #BBF7D0;border-radius:20px;padding:6px 14px;flex-shrink:0">
                <span style="width:8px;height:8px;background:#10B981;border-radius:50%;display:inline-block;animation:pulse 2s infinite"></span>
                <span style="font-size:.75rem;font-weight:700;background:linear-gradient(135deg,#10B981 0%,#059669 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text">Live Data</span>
            </div>
        </div>

        {{-- Chart dengan border yang lebih baik --}}
        <div class="trend-wrap">
            <canvas id="trendChart"></canvas>
        </div>

        {{-- Legenda zona yang lebih jelas --}}
        <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid #E0E7FF">
            <div style="display:flex;flex-direction:column;gap:8px">
                <div style="display:flex;align-items:center;gap:8px">
                    <div style="width:4px;height:16px;border-radius:2px;background:#10B981"></div>
                    <span style="font-weight:700;color:#0F172A">Naik / Aman</span>
                </div>
                <span style="font-size:.75rem;color:#64748B;margin-left:12px">Z-Score trending up</span>
            </div>
            <div style="display:flex;flex-direction:column;gap:8px">
                <div style="display:flex;align-items:center;gap:8px">
                    <div style="width:4px;height:16px;border-radius:2px;background:#F59E0B"></div>
                    <span style="font-weight:700;color:#0F172A">Stabil</span>
                </div>
                <span style="font-size:.75rem;color:#64748B;margin-left:12px">Z-Score tidak berubah</span>
            </div>
            <div style="display:flex;flex-direction:column;gap:8px">
                <div style="display:flex;align-items:center;gap:8px">
                    <div style="width:4px;height:16px;border-radius:2px;background:#EF4444"></div>
                    <span style="font-weight:700;color:#0F172A">Turun</span>
                </div>
                <span style="font-size:.75rem;color:#64748B;margin-left:12px">Z-Score trending down</span>
            </div>
        </div>
    </div>
</div>

{{-- Bottom Tables --}}
<div style="display:grid;grid-template-columns:1fr 1fr;gap:1.25rem">

    {{-- User Terbaru --}}
    <div class="a-card">
        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem">
            <span class="sec">User Terbaru</span>
            <a href="{{ route('admin.users.index') }}" style="font-size:.8rem;color:#1A56DB;font-weight:600;text-decoration:none">Lihat Semua →</a>
        </div>
        @forelse($recentUsers as $u)
        <div style="display:flex;align-items:center;justify-content:space-between;padding:.5rem 0;border-bottom:1px solid #F8FAFF">
            <div style="display:flex;align-items:center;gap:9px">
                <div style="width:34px;height:34px;border-radius:9px;background:{{ $u->isAdmin()?'linear-gradient(135deg,#7C3AED,#A855F7)':'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($u->name,0,1)) }}
                </div>
                <div>
                    <div style="font-size:.8125rem;font-weight:600;color:#1E293B;display:flex;align-items:center;gap:5px">
                        {{ Str::limit($u->name,16) }}
                        @if($u->isAdmin())<span class="admin-tag">Admin</span>@endif
                        @if($u->isBanned())<span class="ban-tag">Banned</span>@endif
                    </div>
                    <div style="font-size:.7rem;color:#94A3B8">{{ $u->email }}</div>
                </div>
            </div>
            <div style="text-align:right">
                <div style="font-size:.7rem;color:#94A3B8">{{ $u->created_at->diffForHumans() }}</div>
                <a href="{{ route('admin.users.show',$u->id) }}" style="font-size:.75rem;color:#1A56DB;font-weight:600;text-decoration:none">Detail</a>
            </div>
        </div>
        @empty
        <p style="color:#94A3B8;font-size:.875rem;text-align:center;padding:1rem 0">Belum ada user</p>
        @endforelse
    </div>

    {{-- Analisis Terbaru --}}
    <div class="a-card">
        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem">
            <span class="sec">Analisis Terbaru</span>
            <a href="{{ route('admin.analyses.index') }}" style="font-size:.8rem;color:#1A56DB;font-weight:600;text-decoration:none">Lihat Semua →</a>
        </div>
        @forelse($recentAnalyses as $a)
        @php $bc=match($a->z_category){'safe'=>['#D1FAE5','#065F46','Aman'],'grey'=>['#FEF3C7','#92400E','Waspada'],'distress'=>['#FEE2E2','#991B1B','Berbahaya'],default=>['#F1F5F9','#64748B','-']}; @endphp
        <div style="display:flex;align-items:center;justify-content:space-between;padding:.5rem 0;border-bottom:1px solid #F8FAFF">
            <div>
                <div style="font-size:.8125rem;font-weight:600;color:#1E293B">{{ Str::limit($a->company_name,22) }}</div>
                <div style="font-size:.7rem;color:#94A3B8">{{ $a->user?->name ?? '—' }} · {{ $a->period }}</div>
            </div>
            <div style="display:flex;align-items:center;gap:8px">
                <span style="font-family:monospace;font-weight:700;font-size:.8125rem;color:{{ $a->z_category==='safe'?'#059669':($a->z_category==='grey'?'#D97706':'#DC2626') }}">{{ number_format($a->z_score,3) }}</span>
                <span style="background:{{ $bc[0] }};color:{{ $bc[1] }};padding:2px 8px;border-radius:20px;font-size:.7rem;font-weight:700">{{ $bc[2] }}</span>
            </div>
        </div>
        @empty
        <p style="color:#94A3B8;font-size:.875rem;text-align:center;padding:1rem 0">Belum ada analisis</p>
        @endforelse
    </div>
</div>

</div>

<style>
@keyframes pulse {
    0%,100%{opacity:1} 50%{opacity:.4}
}
@keyframes slideInDown {
    from { opacity:0;transform:translateY(-8px); }
    to { opacity:1;transform:translateY(0); }
}
</style>
@endsection

@push('scripts')
<script>
// ── Detect Dark Mode ────────────────────────────────────────────────
function isDarkMode() {
    return document.documentElement.classList.contains('dark');
}

// ── Donut Chart ────────────────────────────────────────────────────
(function() {
    const darkMode = isDarkMode();
    const borderColor = darkMode ? '#1e293b' : '#fff';
    
    new Chart(document.getElementById('catChart'), {
        type: 'doughnut',
        data: {
            labels: ['Aman','Waspada','Berbahaya'],
            datasets: [{
                data: [{{ $categoryStats['safe'] }},{{ $categoryStats['grey'] }},{{ $categoryStats['distress'] }}],
                backgroundColor: ['#10B981','#F59E0B','#EF4444'],
                borderWidth: 3,
                borderColor: borderColor
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            cutout: '72%',
            plugins: {
                legend: { display: false },
                tooltip: {
                    backgroundColor: darkMode ? '#334155' : '#ffffff',
                    titleColor: darkMode ? '#f1f5f9' : '#1e293b',
                    bodyColor: darkMode ? '#cbd5e1' : '#64748b',
                    borderColor: darkMode ? '#475569' : '#e0e7ff'
                }
            }
        }
    });
})();

// ── Trend Chart - Trading Style ────────────────────────────────────
(function() {
    const darkMode = isDarkMode();
    const rawLabels = {!! json_encode($trendLabels) !!};
    const rawData   = {!! json_encode($trendData) !!};

    // Filter null values untuk menghitung range
    const validData = rawData.filter(v => v !== null);
    if (validData.length === 0) return;

    const dataMin = Math.min(...validData);
    const dataMax = Math.max(...validData);
    const pad     = Math.max((dataMax - dataMin) * 0.2, dataMax * 0.1, 0.5);
    const yMin    = Math.max(0, dataMin - pad);
    const yMax    = dataMax + pad;

    // Threshold untuk warna
    const SAFE_LINE = 2.9;
    const WARN_LINE = 1.23;

    // Buat gradient per segment berdasarkan nilai
    const ctx = document.getElementById('trendChart');

    // Hitung warna berdasarkan naik/turun
    const segmentColors = rawData.map((value, idx) => {
        if (value === null) return 'transparent';
        if (idx === 0) {
            return value > 2.0 ? '#10B981' : '#EF4444';
        }
        for (let i = idx - 1; i >= 0; i--) {
            if (rawData[i] !== null) {
                return value > rawData[i] ? '#10B981' : value < rawData[i] ? '#EF4444' : '#F59E0B';
            }
        }
        return value > 2.0 ? '#10B981' : '#EF4444';
    });

    // Gradient fill berdasarkan segment warna
    function makeGradient(chart, colors) {
        const { ctx: c, chartArea } = chart;
        if (!chartArea) return 'transparent';
        const gradient = c.createLinearGradient(0, chartArea.top, 0, chartArea.bottom);
        const primaryColor = colors.find(c => c !== 'transparent' && c !== '#F59E0B') || '#10B981';
        if (primaryColor === '#EF4444') {
            gradient.addColorStop(0,   'rgba(239, 68, 68, 0.15)');
            gradient.addColorStop(0.5, 'rgba(239, 68, 68, 0.05)');
            gradient.addColorStop(1,   'rgba(239, 68, 68, 0.01)');
        } else {
            gradient.addColorStop(0,   'rgba(16, 185, 129, 0.15)');
            gradient.addColorStop(0.5, 'rgba(16, 185, 129, 0.05)');
            gradient.addColorStop(1,   'rgba(16, 185, 129, 0.01)');
        }
        return gradient;
    }

    const trendChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: rawLabels,
            datasets: [{
                label: 'Z-Score',
                data: rawData,
                borderColor: segmentColors,
                backgroundColor: function(ctx) { return makeGradient(ctx.chart, segmentColors); },
                borderWidth: 3,
                pointRadius: rawData.map(v => v !== null ? 6 : 0),
                pointBackgroundColor: segmentColors,
                pointBorderColor: darkMode ? '#1e293b' : '#0B1220',
                pointBorderWidth: 2,
                pointHoverRadius: 8,
                pointHoverBackgroundColor: segmentColors,
                tension: 0.3,
                fill: true,
                spanGaps: false,
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            interaction: { mode: 'index', intersect: false },
            plugins: {
                legend: { display: false },
                tooltip: {
                    backgroundColor: darkMode ? '#334155' : '#0B1220',
                    titleColor: darkMode ? '#f1f5f9' : '#E0F2FE',
                    bodyColor: darkMode ? '#cbd5e1' : '#CBD5E1',
                    borderColor: darkMode ? '#475569' : '#1E5A8E',
                    border: '1px solid ' + (darkMode ? '#475569' : '#1E5A8E'),
                    padding: 12,
                    cornerRadius: 8,
                    callbacks: {
                        title: items => rawLabels[items[0].dataIndex],
                        label: item => {
                            const v = item.raw;
                            if (v === null) return ' Belum ada data';
                            const zone = v > SAFE_LINE ? 'Zona Aman' : v > WARN_LINE ? 'Zona Waspada' : 'Zona Berbahaya';
                            const trend = v > (rawData[item.dataIndex-1] ?? 2) ? '📈 NAIK' : '📉 TURUN';
                            return [` Z-Score: ${parseFloat(v).toFixed(4)}`, ` ${zone}`, ` ${trend}`];
                        }
                    }
                },
                annotation: {
                    annotations: {
                        ...(SAFE_LINE >= yMin && SAFE_LINE <= yMax ? {
                            safeLine: {
                                type: 'line', yMin: SAFE_LINE, yMax: SAFE_LINE,
                                borderColor: 'rgba(16,185,129,.4)', borderWidth: 1.5,
                                borderDash: [5,4],
                                label: { display: true, content: '2.9', position: 'end', font: { size: 9, color: '#10B981' }, color: '#10B981', backgroundColor: 'transparent', yAdjust: -8 }
                            }
                        } : {}),
                        ...(WARN_LINE >= yMin && WARN_LINE <= yMax ? {
                            warnLine: {
                                type: 'line', yMin: WARN_LINE, yMax: WARN_LINE,
                                borderColor: 'rgba(245,158,11,.4)', borderWidth: 1.5,
                                borderDash: [5,4],
                                label: { display: true, content: '1.23', position: 'end', font: { size: 9, color: '#F59E0B' }, color: '#F59E0B', backgroundColor: 'transparent', yAdjust: -8 }
                            }
                        } : {})
                    }
                }
            },
            scales: {
                x: {
                    grid: { color: darkMode ? 'rgba(71, 85, 105, 0.2)' : 'rgba(30, 58, 95, 0.2)' },
                    ticks: { 
                        color: darkMode ? '#94a3b8' : '#64748B', 
                        font: { size: 10 }, 
                        maxRotation: 45 
                    }
                },
                y: {
                    min: yMin,
                    max: yMax,
                    grid: { color: darkMode ? 'rgba(71, 85, 105, 0.2)' : 'rgba(30, 58, 95, 0.3)' },
                    ticks: {
                        color: darkMode ? '#94a3b8' : '#64748B',
                        font: { size: 10 },
                        callback: v => {
                            if (Math.abs(v) >= 1e6) return (v/1e6).toFixed(1)+'M';
                            if (Math.abs(v) >= 1e3) return (v/1e3).toFixed(1)+'K';
                            return parseFloat(v).toFixed(1);
                        }
                    }
                }
            }
        }
    });
})();
</script>
@endpush