@extends('admin.layout')

@section('title', 'Admin Dashboard')
@section('page_title', 'Dashboard Ringkasan')
@section('page_subtitle', 'Statistik real-time pengaduan rakyat dan klasifikasi kecerdasan buatan.')

@section('styles')
<style>
    /* Stats Grid */
    .stats-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
        margin-bottom: 30px;
    }

    .stat-card {
        background: var(--bg-surface);
        border: 1px solid var(--border-glow);
        border-radius: var(--radius-md);
        padding: 24px;
        display: flex;
        flex-direction: column;
        position: relative;
        overflow: hidden;
        transition: var(--transition-smooth);
    }

    .stat-card:hover {
        transform: translateY(-3px);
        border-color: rgba(255, 255, 255, 0.12);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    }

    .stat-card::before {
        content: '';
        position: absolute;
        width: 80px;
        height: 80px;
        border-radius: 50%;
        top: -40px;
        right: -40px;
        filter: blur(15px);
        z-index: 1;
        opacity: 0.1;
    }

    .stat-card.total::before { background: var(--color-primary); }
    .stat-card.waiting::before { background: var(--color-warning); }
    .stat-card.process::before { background: var(--color-info); }
    .stat-card.success::before { background: var(--color-success); }

    .stat-label {
        font-size: 12px;
        font-weight: 600;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 8px;
    }

    .stat-val {
        font-family: var(--font-display);
        font-size: 32px;
        font-weight: 700;
        color: #fff;
        line-height: 1;
    }

    .stat-icon {
        position: absolute;
        bottom: 20px;
        right: 20px;
        color: var(--text-muted);
        opacity: 0.15;
        width: 28px;
        height: 28px;
    }

    /* Dashboard Layout Split */
    .dashboard-split {
        display: grid;
        grid-template-columns: 5fr 7fr;
        gap: 24px;
        min-width: 0;
    }

    /* Setiap grid child harus punya min-width: 0 agar overflow bekerja */
    .dashboard-split > * {
        min-width: 0;
        overflow: hidden;
    }

    .chart-container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 240px;
    }

    .custom-legend-container {
        margin-top: 16px;
        padding-top: 16px;
        border-top: 1px solid var(--border-glow);
    }

    .custom-legend-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px 16px;
    }

    .legend-item {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 11px;
        color: var(--text-muted);
        font-weight: 500;
    }

    .legend-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        flex-shrink: 0;
    }

    /* Alerts Panel */
    .alerts-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .alert-item {
        background: var(--bg-surface-elevated);
        border: 1px solid var(--border-glow);
        border-radius: var(--radius-sm);
        padding: 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        transition: var(--transition-smooth);
        text-decoration: none;
    }

    .alert-item:hover {
        border-color: rgba(255, 255, 255, 0.1);
        transform: translateX(4px);
    }

    .alert-left {
        display: flex;
        flex-direction: column;
        gap: 4px;
        overflow: hidden;
        min-width: 0;
        flex: 1 1 0;
        padding-right: 12px;
    }

    .alert-header {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-wrap: wrap;
        min-width: 0;
    }

    .alert-title {
        font-size: 13px;
        font-weight: 600;
        color: #fff;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 140px;
    }

    .alert-desc {
        font-size: 12px;
        color: var(--text-muted);
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        white-space: normal;
    }

    .badge {
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        padding: 3px 8px;
        border-radius: 50px;
    }

    .badge-penting { background: rgba(239, 68, 68, 0.1); color: var(--color-danger); border: 1px solid rgba(239, 68, 68, 0.2); }
    .badge-biasa { background: rgba(255, 255, 255, 0.05); color: var(--text-muted); border: 1px solid var(--border-glow); }
    
    .badge-menunggu { background: rgba(245, 158, 11, 0.1); color: var(--color-warning); border: 1px solid rgba(245, 158, 11, 0.2); }
    .badge-diproses { background: rgba(14, 165, 233, 0.1); color: var(--color-info); border: 1px solid rgba(14, 165, 233, 0.2); }

    .alert-date {
        font-size: 11px;
        color: var(--text-muted);
        white-space: nowrap;
        flex-shrink: 0;
        padding-left: 8px;
    }

    @media (max-width: 1024px) {
        .stats-grid {
            grid-template-columns: repeat(2, 1fr);
        }
        .dashboard-split {
            grid-template-columns: 1fr;
        }
    }
</style>
@endsection

@section('content')

    <!-- 📊 STATS CARDS -->
    <div class="stats-grid">
        <div class="stat-card total">
            <span class="stat-label">Total Aduan Masuk</span>
            <span class="stat-val">{{ $stats['total'] }}</span>
            <svg class="stat-icon" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" /></svg>
        </div>
        <div class="stat-card waiting">
            <span class="stat-label">Aduan Menunggu</span>
            <span class="stat-val">{{ $stats['menunggu'] }}</span>
            <svg class="stat-icon" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
        </div>
        <div class="stat-card process">
            <span class="stat-label">Sedang Diproses</span>
            <span class="stat-val">{{ $stats['diproses'] }}</span>
            <svg class="stat-icon" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" /></svg>
        </div>
        <div class="stat-card success">
            <span class="stat-label">Aduan Selesai</span>
            <span class="stat-val">{{ $stats['selesai'] }}</span>
            <svg class="stat-icon" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
        </div>
    </div>

    <!-- 🔄 SPLIT LAYOUT -->
    <div class="dashboard-split">
        
        <!-- Left: Pie Chart Kategori -->
        <div class="glass-card" style="display: flex; flex-direction: column;">
            <h3 style="font-family: var(--font-display); font-size: 16px; font-weight: 700; margin-bottom: 20px; color: #fff;">Sebaran Kategori ML</h3>
            <div class="chart-container">
                <canvas id="categoryChart"></canvas>
            </div>
            <div class="custom-legend-container">
                <div class="custom-legend-grid">
                    <div class="legend-item"><span class="legend-dot" style="background:#6366f1;"></span> Pelayanan Administrasi</div>
                    <div class="legend-item"><span class="legend-dot" style="background:#ec4899;"></span> Infrastruktur & Fasilitas</div>
                    <div class="legend-item"><span class="legend-dot" style="background:#10b981;"></span> Kebersihan & Lingkungan</div>
                    <div class="legend-item"><span class="legend-dot" style="background:#f59e0b;"></span> Layanan Publik & Utilitas</div>
                    <div class="legend-item"><span class="legend-dot" style="background:#0ea5e9;"></span> Keamanan & Ketertiban</div>
                    <div class="legend-item"><span class="legend-dot" style="background:#a1a1aa;"></span> Sosial & Kesejahteraan</div>
                    <div class="legend-item" style="grid-column: 1 / -1;"><span class="legend-dot" style="background:#ef4444;"></span> Tidak Diketahui / Lainnya</div>
                </div>
            </div>
        </div>

        <!-- Right: Recent Alerts -->
        <div class="glass-card">
            <h3 style="font-family: var(--font-display); font-size: 16px; font-weight: 700; margin-bottom: 20px; color: #fff;">Daftar Aduan Mendesak / Baru</h3>
            <div class="alerts-list">
                @forelse($recentAlerts as $alert)
                    <a href="{{ route('admin.aduan.edit', $alert->id) }}" class="alert-item">
                        <div class="alert-left">
                            <div class="alert-header">
                                <span class="alert-title">{{ $alert->nama_pelapor }}</span>
                                <span class="badge badge-{{ $alert->prioritas }}">{{ $alert->prioritas }}</span>
                                <span class="badge badge-{{ $alert->status }}">{{ $alert->status }}</span>
                            </div>
                            <span class="alert-desc">{{ $alert->isi_aduan }}</span>
                        </div>
                        <span class="alert-date">{{ $alert->created_at->diffForHumans() }}</span>
                    </a>
                @empty
                    <div style="text-align: center; padding: 40px; color: var(--text-muted); font-size: 13px;">
                        Tidak ada aduan mendesak saat ini.
                    </div>
                @endforelse
            </div>
        </div>

    </div>

@endsection

@section('scripts')
<script>
    // Konfigurasi Chart Kategori
    const ctx = document.getElementById('categoryChart').getContext('2d');
    
    // Gradient colors
    const colors = [
        'rgba(99, 102, 241, 0.75)',  // Indigo
        'rgba(236, 72, 153, 0.75)',  // Pink
        'rgba(16, 185, 129, 0.75)',  // Emerald
        'rgba(245, 158, 11, 0.75)',  // Amber
        'rgba(14, 165, 233, 0.75)',  // Sky
        'rgba(161, 161, 170, 0.75)',  // Gray
        'rgba(239, 68, 68, 0.75)'    // Red (Tidak Diketahui)
    ];

    const borderColors = [
        '#6366f1',
        '#ec4899',
        '#10b981',
        '#f59e0b',
        '#0ea5e9',
        '#a1a1aa',
        '#ef4444'
    ];

    new Chart(ctx, {
        type: 'doughnut',
        data: {
            labels: {!! json_encode($chartLabels) !!},
            datasets: [{
                data: {!! json_encode($chartData) !!},
                backgroundColor: colors,
                borderColor: borderColors,
                borderWidth: 1.5,
                hoverOffset: 12
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    display: false
                },
                tooltip: {
                    backgroundColor: '#121214',
                    titleFont: { family: 'Outfit', size: 12, weight: 'bold' },
                    bodyFont: { family: 'Inter', size: 12 },
                    borderColor: 'rgba(255,255,255,0.08)',
                    borderWidth: 1,
                    padding: 10
                }
            },
            cutout: '65%'
        }
    });
</script>
@endsection
