@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>
<style>
.admin-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)}
.a-stat{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}
.a-stat:hover{box-shadow:0 4px 16px rgba(0,0,0,.08)}
.a-icon{width:44px;height:44px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sec{font-size:.9375rem;font-weight:700;color:#1E293B}
.admin-tag{background:#EDE9FE;color:#7C3AED;padding:2px 8px;border-radius:6px;font-size:.7rem;font-weight:700}
.ban-tag{background:#FEE2E2;color:#991B1B;padding:2px 7px;border-radius:6px;font-size:.7rem;font-weight:700}
</style>
@endpush

@section('content')
<div>

{{-- Header --}}
<div style="display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-bottom:2rem">
    <div>
        <div style="display:flex;align-items:center;gap:8px;margin-bottom:4px">
            <h1 style="font-family:'Syne',sans-serif;font-size:1.75rem;font-weight:800;color:#1E293B;margin:0">Admin Dashboard</h1>
            <span style="background:#EDE9FE;color:#7C3AED;padding:3px 10px;border-radius:6px;font-size:.75rem;font-weight:700">ADMIN</span>
        </div>
        <p style="color:#64748B;margin:0">Selamat datang, <strong style="color:#1E293B">{{ 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="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>
            Tambah User
        </a>
        <a href="{{ route('dashboard') }}" class="btn btn-secondary">
            <svg width="14" height="14" 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>

{{-- Stats --}}
<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;margin-bottom:1.75rem">
    <div class="a-stat">
        <div>
            <div style="font-size:.8125rem;font-weight:500;color:#64748B;margin-bottom:.375rem">Total User</div>
            <div style="font-size:2rem;font-weight:800;color:#1E293B;line-height:1">{{ $totalUsers }}</div>
            <div style="font-size:.75rem;margin-top:.375rem;color:#059669;font-weight:500">+{{ $newUsersMonth }} baru bulan ini</div>
        </div>
        <div class="a-icon" style="background:#DBEAFE">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#1A56DB" stroke-width="2"><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>
            <div style="font-size:.8125rem;font-weight:500;color:#64748B;margin-bottom:.375rem">User Aktif</div>
            <div style="font-size:2rem;font-weight:800;color:#1E293B;line-height:1">{{ $activeUsers }}</div>
            <div style="font-size:.75rem;margin-top:.375rem;color:#DC2626;font-weight:500">{{ $bannedUsers }} dinonaktifkan</div>
        </div>
        <div class="a-icon" style="background:#D1FAE5">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#059669" stroke-width="2"><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>
            <div style="font-size:.8125rem;font-weight:500;color:#64748B;margin-bottom:.375rem">Total Analisis</div>
            <div style="font-size:2rem;font-weight:800;color:#1E293B;line-height:1">{{ $totalAnalyses }}</div>
            <div style="font-size:.75rem;margin-top:.375rem;color:#1A56DB;font-weight:500">{{ $analysesMonth }} bulan ini</div>
        </div>
        <div class="a-icon" style="background:#EDE9FE">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#7C3AED" 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="a-stat">
        <div>
            <div style="font-size:.8125rem;font-weight:500;color:#64748B;margin-bottom:.375rem">Rata-rata Z-Score</div>
            <div style="font-size:1.75rem;font-weight:800;color:#1E293B;line-height:1">{{ number_format($avgZScore,3) }}</div>
            <div style="font-size:.75rem;margin-top:.375rem;font-weight:500;color:{{ $avgZScore>2.9?'#059669':($avgZScore>1.23?'#D97706':'#DC2626') }}">
                {{ $avgZScore>2.9?'Zona Aman':($avgZScore>1.23?'Zona Waspada':'Zona Berbahaya') }}
            </div>
        </div>
        <div class="a-icon" style="background:#FEE2E2">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#DC2626" 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>

{{-- Charts --}}
<div style="display:grid;grid-template-columns:280px 1fr;gap:1.25rem;margin-bottom:1.75rem">
    <div class="admin-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>
    <div class="admin-card">
        <div class="sec" style="margin-bottom:1rem">Trend Z-Score Bulanan (Semua User)</div>
        <div style="height:200px"><canvas id="trendChart"></canvas></div>
    </div>
</div>

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

    {{-- User Terbaru --}}
    <div class="admin-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:32px;height:32px;border-radius:8px;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:.8rem;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="admin-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>
@endsection

@push('scripts')
<script>
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:'#fff' }] },
    options: { responsive:true, maintainAspectRatio:false, cutout:'72%', plugins:{ legend:{display:false} } }
});
const td = {!! json_encode($trendData) !!};
const vd = td.filter(v=>v!==null);
new Chart(document.getElementById('trendChart'), {
    type:'line',
    data:{ labels:{!! json_encode($trendLabels) !!}, datasets:[{ data:td, borderColor:'#7C3AED', backgroundColor:'rgba(124,58,237,.07)', borderWidth:2.5, pointRadius:td.map(v=>v!==null?4:0), pointBackgroundColor:td.map(v=>v===null?'transparent':v>2.9?'#10B981':v>1.23?'#F59E0B':'#EF4444'), pointBorderColor:'#fff', pointBorderWidth:2, tension:0.35, fill:true, spanGaps:false }] },
    options:{ responsive:true, maintainAspectRatio:false, plugins:{ legend:{display:false}, tooltip:{ backgroundColor:'#1E293B', titleColor:'#F1F5F9', bodyColor:'#CBD5E1', padding:8, cornerRadius:8 } },
        scales:{ y:{ min: vd.length?Math.max(0,Math.min(...vd)*.85):0, max: vd.length?Math.max(...vd)*1.15:4, grid:{color:'rgba(148,163,184,.1)'}, ticks:{font:{size:10},color:'#94A3B8',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 v.toFixed(1); }} }, x:{ grid:{display:false}, ticks:{font:{size:10},color:'#94A3B8',maxRotation:45} } }
    }
});
</script>
@endpush