@extends('layout.app')

@section('title', 'Analytics KPIs — Vue générale')

@push('styles')
<style>
:root {
    --an-bg: #F5F6FA;
    --an-surface: #FFFFFF;
    --an-border: #E8EAF0;
    --an-ink: #1A1D2E;
    --an-muted: #8B90A7;
    --an-green: #16A34A;
    --an-yellow: #CA8A04;
    --an-red: #DC2626;
    --an-blue: #2563EB;
    --an-purple: #7C3AED;
    --an-green-bg: #DCFCE7;
    --an-yellow-bg: #FEF9C3;
    --an-red-bg: #FEE2E2;
    --an-blue-bg: #DBEAFE;
    --an-radius: 14px;
    --an-shadow: 0 1px 4px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.05);
}

.an-wrap { font-family: 'Inter', 'Poppins', system-ui, sans-serif; color: var(--an-ink); }

.an-header {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 14px; margin-bottom: 22px;
}
.an-title { font-size: 1.5rem; font-weight: 800; margin: 0; }
.an-subtitle { color: var(--an-muted); font-size: .9rem; margin-top: 2px; }

.an-filters {
    display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
    background: var(--an-surface); border: 1px solid var(--an-border);
    border-radius: var(--an-radius); padding: 10px 14px; box-shadow: var(--an-shadow);
}
.an-filters select, .an-filters input {
    border: 1px solid var(--an-border); border-radius: 10px; padding: 7px 12px;
    font-size: .85rem; background: #fafbfc; color: var(--an-ink); min-width: 150px;
}
.an-btn-refresh {
    border: none; background: linear-gradient(135deg, var(--an-blue), var(--an-purple));
    color: #fff; border-radius: 10px; padding: 7px 16px; font-size: .85rem; font-weight: 600;
    cursor: pointer; transition: transform .15s, box-shadow .15s;
}
.an-btn-refresh:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(37,99,235,.35); }
.an-btn-refresh:active { transform: translateY(0); }

.an-kpi-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px; margin-bottom: 22px;
}
.an-kpi-card {
    background: var(--an-surface); border: 1px solid var(--an-border);
    border-radius: var(--an-radius); padding: 16px 18px; box-shadow: var(--an-shadow);
    position: relative; overflow: hidden; transition: transform .15s;
}
.an-kpi-card:hover { transform: translateY(-3px); }
.an-kpi-card::before {
    content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%;
    background: var(--accent, var(--an-blue));
}
.an-kpi-label { font-size: .76rem; color: var(--an-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.an-kpi-value { font-size: 1.7rem; font-weight: 800; margin-top: 4px; line-height: 1.1; }
.an-kpi-sub { font-size: .76rem; color: var(--an-muted); margin-top: 4px; }

.an-grid-2 { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; margin-bottom: 18px; }
.an-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 18px; }
@media (max-width: 992px) { .an-grid-2, .an-grid-3 { grid-template-columns: 1fr; } }

.an-panel {
    background: var(--an-surface); border: 1px solid var(--an-border);
    border-radius: var(--an-radius); padding: 18px 20px; box-shadow: var(--an-shadow);
}
.an-panel h6 { font-size: .95rem; font-weight: 700; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.an-panel-chart { position: relative; height: 260px; }

.an-alert { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-bottom: 1px dashed var(--an-border); font-size: .85rem; }
.an-alert:last-child { border-bottom: none; }
.an-alert i { margin-top: 2px; }
.an-alert.danger i { color: var(--an-red); }
.an-alert.warning i { color: var(--an-yellow); }

.an-table-wrap { overflow-x: auto; }
.an-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.an-table th { text-align: left; color: var(--an-muted); font-weight: 600; font-size: .72rem; text-transform: uppercase;
    padding: 10px 12px; border-bottom: 2px solid var(--an-border); white-space: nowrap; }
.an-table td { padding: 11px 12px; border-bottom: 1px solid var(--an-border); white-space: nowrap; }
.an-table tbody tr { cursor: pointer; transition: background .12s; }
.an-table tbody tr:hover { background: #F8F9FC; }

.an-rank { font-weight: 800; width: 28px; display: inline-block; text-align: center; }
.an-avatar {
    width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--an-blue), var(--an-purple));
    color: #fff; font-weight: 700; font-size: .8rem; display: inline-flex; align-items: center; justify-content: center;
    margin-right: 8px; vertical-align: middle;
}
.an-name { font-weight: 600; }
.an-score-bar { width: 70px; height: 6px; background: var(--an-border); border-radius: 4px; overflow: hidden; display: inline-block; vertical-align: middle; margin-right: 6px; }
.an-score-bar > span { display: block; height: 100%; border-radius: 4px; }
.an-badge { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: .72rem; font-weight: 700; }
.an-badge.green { background: var(--an-green-bg); color: var(--an-green); }
.an-badge.yellow { background: var(--an-yellow-bg); color: var(--an-yellow); }
.an-badge.red { background: var(--an-red-bg); color: var(--an-red); }
.an-badge.gray { background: #F1F2F6; color: var(--an-muted); }

.an-skeleton { background: linear-gradient(90deg, #eef0f5 25%, #f6f7fa 37%, #eef0f5 63%); background-size: 400% 100%;
    animation: an-shimmer 1.4s ease infinite; border-radius: 8px; }
@keyframes an-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.an-skeleton.h-kpi { height: 70px; }
.an-skeleton.h-row { height: 40px; margin-bottom: 6px; }

.an-empty { text-align: center; color: var(--an-muted); padding: 30px 0; font-size: .85rem; }
</style>
@endpush

@section('content')
<div class="an-wrap">

    <div class="an-header">
        <div>
            <h1 class="an-title">📊 Analytics KPIs</h1>
            <div class="an-subtitle">Vue générale de l'activité de tous les délégués</div>
        </div>

        <div class="an-filters">
            <select id="fCycle"><option value="">Cycle en cours</option></select>
            <select id="fCity"><option value="">Toutes les villes</option>
                @foreach($cities as $c)
                    <option value="{{ $c->id }}">{{ $c->name }}</option>
                @endforeach
            </select>
            <input type="text" id="fSearch" placeholder="Rechercher un délégué...">
            <button class="an-btn-refresh" id="btnRefresh"><i class="fa-solid fa-rotate"></i> Actualiser</button>
        </div>
    </div>

    <div class="an-kpi-grid" id="kpiGrid">
        @for($i=0;$i<8;$i++)<div class="an-skeleton h-kpi"></div>@endfor
    </div>

    <div class="an-grid-2">
        <div class="an-panel">
            <h6><i class="fa-solid fa-chart-line text-primary"></i> Tendance des visites (6 derniers cycles)</h6>
            <div class="an-panel-chart"><canvas id="chartTrend"></canvas></div>
        </div>
        <div class="an-panel">
            <h6><i class="fa-solid fa-circle-exclamation text-danger"></i> Alertes opérationnelles</h6>
            <div id="alertsList"><div class="an-empty">Chargement...</div></div>
        </div>
    </div>

    <div class="an-grid-3">
        <div class="an-panel">
            <h6><i class="fa-solid fa-chart-pie text-success"></i> Visites par statut</h6>
            <div class="an-panel-chart" style="height:220px"><canvas id="chartStatus"></canvas></div>
        </div>
        <div class="an-panel">
            <h6><i class="fa-solid fa-route text-warning"></i> Déplacements par statut</h6>
            <div class="an-panel-chart" style="height:220px"><canvas id="chartDeplacements"></canvas></div>
        </div>
        <div class="an-panel">
            <h6><i class="fa-solid fa-sack-dollar text-info"></i> Frais par catégorie (DH)</h6>
            <div class="an-panel-chart" style="height:220px"><canvas id="chartExpenses"></canvas></div>
        </div>
    </div>

    <div class="an-panel">
        <h6><i class="fa-solid fa-trophy text-warning"></i> Classement des délégués</h6>
        <div class="an-table-wrap">
            <table class="an-table" id="leaderTable">
                <thead>
                    <tr>
                        <th>#</th><th>Délégué</th><th>Ville</th><th>Score</th><th>Visites</th>
                        <th>Couverture</th><th>Km</th><th>Frais (DH)</th><th>Absences (j)</th>
                        <th>Heures trav.</th><th>Objectifs</th><th>Gains (DH)</th>
                    </tr>
                </thead>
                <tbody id="leaderBody">
                    <tr><td colspan="12"><div class="an-skeleton h-row"></div></td></tr>
                    <tr><td colspan="12"><div class="an-skeleton h-row"></div></td></tr>
                    <tr><td colspan="12"><div class="an-skeleton h-row"></div></td></tr>
                </tbody>
            </table>
        </div>
    </div>

</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
(function () {
    const OVERVIEW_URL = "{{ route('admin.analytics.api.overview') }}";
    const baseShowUrl = "{{ url('/admin/analytics') }}";

    let charts = {};
    const fmt = (n) => Number(n ?? 0).toLocaleString('fr-FR');

    function scoreColor(score) {
        if (score >= 70) return 'var(--an-green)';
        if (score >= 45) return 'var(--an-yellow)';
        return 'var(--an-red)';
    }
    function scoreBadgeClass(score) {
        if (score >= 70) return 'green';
        if (score >= 45) return 'yellow';
        return 'red';
    }
    function initials(name) {
        return (name || '?').split(' ').map(p => p[0]).slice(0, 2).join('').toUpperCase();
    }

    function destroyChart(key) { if (charts[key]) { charts[key].destroy(); delete charts[key]; } }

    function renderKpis(k) {
        const cards = [
            ['fa-user-tie', 'var(--an-blue)', 'Délégués actifs', `${k.active_delegues}/${k.total_delegues}`, ''],
            ['fa-stethoscope', 'var(--an-green)', 'Visites totales', fmt(k.total_visits), `${k.valid_visits_rate}% validées`],
            ['fa-chart-simple', 'var(--an-purple)', 'Moy. visites / délégué', fmt(k.avg_visits_per_delegue), ''],
            ['fa-route', 'var(--an-yellow)', 'Km parcourus', fmt(k.total_km), `${k.total_deplacements} déplacements`],
            ['fa-sack-dollar', 'var(--an-red)', 'Frais déclarés', fmt(k.total_expenses_amount) + ' DH', `${k.expenses_approval_rate}% approuvés`],
            ['fa-business-time', '#0EA5E9', 'Jours d\'absence', fmt(k.total_absence_days), ''],
            ['fa-bullseye', '#9333EA', 'Taux objectifs', k.objectives_achievement_rate + '%', ''],
            ['fa-coins', '#16A34A', 'Gains estimés', fmt(k.total_gains_estime) + ' DH', 'primes visites validées'],
        ];
        document.getElementById('kpiGrid').innerHTML = cards.map(([icon, color, label, value, sub]) => `
            <div class="an-kpi-card" style="--accent:${color}">
                <div class="an-kpi-label"><i class="fa-solid ${icon}" style="color:${color}"></i> ${label}</div>
                <div class="an-kpi-value">${value}</div>
                ${sub ? `<div class="an-kpi-sub">${sub}</div>` : ''}
            </div>
        `).join('');
    }

    function renderAlerts(alerts) {
        const el = document.getElementById('alertsList');
        if (!alerts || !alerts.length) {
            el.innerHTML = '<div class="an-empty">✅ Aucune alerte — tout va bien</div>';
            return;
        }
        el.innerHTML = alerts.map(a => `
            <div class="an-alert ${a.type}">
                <i class="fa-solid ${a.type === 'danger' ? 'fa-circle-exclamation' : 'fa-triangle-exclamation'}"></i>
                <span>${a.message}</span>
            </div>
        `).join('');
    }

    function renderLeaderboard(rows) {
        const medals = ['🥇', '🥈', '🥉'];
        const body = document.getElementById('leaderBody');
        if (!rows.length) {
            body.innerHTML = '<tr><td colspan="12"><div class="an-empty">Aucun délégué trouvé</div></td></tr>';
            return;
        }
        body.innerHTML = rows.map(r => `
            <tr onclick="window.location.href='${baseShowUrl}/${r.user_id}'">
                <td><span class="an-rank">${medals[r.rank - 1] || r.rank}</span></td>
                <td><span class="an-avatar">${initials(r.name)}</span><span class="an-name">${r.name}</span><br>
                    <small style="color:var(--an-muted)">${r.code ?? ''}</small></td>
                <td>${r.city || '-'}</td>
                <td>
                    <span class="an-score-bar"><span style="width:${r.score}%;background:${scoreColor(r.score)}"></span></span>
                    <span class="an-badge ${scoreBadgeClass(r.score)}">${r.score}</span>
                </td>
                <td>${fmt(r.visits)} <small style="color:var(--an-muted)">(${r.valid_visits} val.)</small></td>
                <td>${r.coverage_rate}%</td>
                <td>${fmt(r.km)}</td>
                <td>${fmt(r.expenses_amount)}</td>
                <td>${r.absence_days}</td>
                <td>${r.worked_hours}h</td>
                <td>${r.objectives_rate}%</td>
                <td>${fmt(r.gains_estime)}</td>
            </tr>
        `).join('');
    }

    function renderTrend(trend) {
        destroyChart('trend');
        const ctx = document.getElementById('chartTrend');
        charts.trend = new Chart(ctx, {
            type: 'line',
            data: {
                labels: trend.map(t => t.cycle),
                datasets: [
                    { label: 'Visites totales', data: trend.map(t => t.visits), borderColor: '#2563EB', backgroundColor: 'rgba(37,99,235,.08)', tension: .35, fill: true },
                    { label: 'Visites validées', data: trend.map(t => t.valid_visits), borderColor: '#16A34A', backgroundColor: 'rgba(22,163,74,.08)', tension: .35, fill: true },
                ],
            },
            options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { position: 'bottom' } } },
        });
    }

    function renderStatus(byStatus) {
        destroyChart('status');
        const labels = Object.keys(byStatus);
        const colors = { valide: '#16A34A', invalide: '#DC2626', double: '#CA8A04', non_realisee: '#8B90A7' };
        charts.status = new Chart(document.getElementById('chartStatus'), {
            type: 'doughnut',
            data: { labels, datasets: [{ data: Object.values(byStatus), backgroundColor: labels.map(l => colors[l] || '#999') }] },
            options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { position: 'bottom', labels: { boxWidth: 10 } } } },
        });
    }

    function renderDeplacements(byStatus) {
        destroyChart('deplacements');
        const labels = Object.keys(byStatus);
        charts.deplacements = new Chart(document.getElementById('chartDeplacements'), {
            type: 'bar',
            data: { labels, datasets: [{ label: 'Déplacements', data: Object.values(byStatus), backgroundColor: '#2563EB' }] },
            options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } } },
        });
    }

    function renderExpenses(byCategory) {
        destroyChart('expenses');
        const labels = Object.keys(byCategory);
        charts.expenses = new Chart(document.getElementById('chartExpenses'), {
            type: 'bar',
            data: { labels, datasets: [{ label: 'Montant (DH)', data: Object.values(byCategory), backgroundColor: '#7C3AED' }] },
            options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } }, indexAxis: 'y' },
        });
    }

    function populateCycles(cycles, current) {
        const sel = document.getElementById('fCycle');
        const keep = sel.value;
        sel.innerHTML = `<option value="all">Tous les cycles</option>` + cycles.map(c =>
            `<option value="${c.id}">${c.name}${current && current.id === c.id ? ' (en cours)' : ''}</option>`
        ).join('');
        sel.value = keep || (current ? current.id : 'all');
    }

    function load() {
        const params = new URLSearchParams();
        if (document.getElementById('fCycle').value) params.set('cycle_id', document.getElementById('fCycle').value);
        if (document.getElementById('fCity').value) params.set('city_id', document.getElementById('fCity').value);
        if (document.getElementById('fSearch').value) params.set('search', document.getElementById('fSearch').value);

        fetch(OVERVIEW_URL + '?' + params.toString())
            .then(r => r.json())
            .then(data => {
                if (document.getElementById('fCycle').options.length <= 1) {
                    populateCycles(data.cycles, data.current_cycle);
                }
                renderKpis(data.global_kpis);
                renderAlerts(data.alerts);
                renderLeaderboard(data.leaderboard);
                renderTrend(data.charts.trend);
                renderStatus(data.charts.visits_by_status);
                renderDeplacements(data.charts.deplacements_by_status);
                renderExpenses(data.charts.expenses_by_category);
            })
            .catch(err => console.error('Analytics overview error', err));
    }

    document.getElementById('btnRefresh').addEventListener('click', load);
    document.getElementById('fCity').addEventListener('change', load);
    document.getElementById('fCycle').addEventListener('change', load);
    let searchTimer;
    document.getElementById('fSearch').addEventListener('input', () => {
        clearTimeout(searchTimer);
        searchTimer = setTimeout(load, 400);
    });

    load();
})();
</script>
@endpush