@extends('layout.app')

@section('title', 'Analyse — ' . $delegue->name)

@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-back { color: var(--an-muted); font-size: .85rem; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px; }
.an-back:hover { color: var(--an-blue); }

.an-profile {
    display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
    background: linear-gradient(135deg, #1A1D2E, #2C3DAF); color: #fff; border-radius: var(--an-radius);
    padding: 22px 26px; margin-bottom: 20px; box-shadow: var(--an-shadow);
}
.an-profile-id { display: flex; align-items: center; gap: 16px; }
.an-avatar-lg {
    width: 58px; height: 58px; border-radius: 50%; background: rgba(255,255,255,.15);
    display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.3rem;
    border: 2px solid rgba(255,255,255,.35);
}
.an-profile h2 { margin: 0; font-size: 1.3rem; font-weight: 800; }
.an-profile .meta { font-size: .82rem; opacity: .85; margin-top: 3px; }
.an-rank-pill { background: rgba(255,255,255,.15); border-radius: 20px; padding: 6px 14px; font-size: .8rem; font-weight: 600; }

.an-score-ring-wrap { display: flex; align-items: center; gap: 14px; }
.an-score-ring { width: 84px; height: 84px; position: relative; }
.an-score-ring canvas { width: 84px !important; height: 84px !important; }
.an-score-ring .val { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; font-weight: 800; }

.an-filters { display: flex; gap: 10px; align-items: center; margin-bottom: 18px; }
.an-filters select { border: 1px solid var(--an-border); border-radius: 10px; padding: 7px 12px; font-size: .85rem; background: #fff; min-width: 220px; }

.an-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 20px; }
.an-kpi-card { background: var(--an-surface); border: 1px solid var(--an-border); border-radius: var(--an-radius);
    padding: 14px 16px; box-shadow: var(--an-shadow); position: relative; overflow: hidden; }
.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: .72rem; color: var(--an-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.an-kpi-value { font-size: 1.5rem; font-weight: 800; margin-top: 4px; }
.an-kpi-sub { font-size: .72rem; color: var(--an-muted); margin-top: 3px; }

.an-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; border-bottom: 1px solid var(--an-border); padding-bottom: 0; }
.an-tab { padding: 9px 16px; font-size: .85rem; font-weight: 600; color: var(--an-muted); cursor: pointer; border-radius: 10px 10px 0 0; border-bottom: 2px solid transparent; }
.an-tab.active { color: var(--an-blue); border-bottom-color: var(--an-blue); background: #F0F4FF; }
.an-tab-panel { display: none; }
.an-tab-panel.active { display: block; }

.an-grid-2 { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; margin-bottom: 16px; }
.an-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 16px; }
@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: .9rem; font-weight: 700; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.an-panel-chart { position: relative; height: 240px; }

.an-progress { height: 8px; background: var(--an-border); border-radius: 6px; overflow: hidden; }
.an-progress > span { display: block; height: 100%; border-radius: 6px; }

.an-table { width: 100%; border-collapse: collapse; font-size: .83rem; }
.an-table th { text-align: left; color: var(--an-muted); font-weight: 600; font-size: .7rem; text-transform: uppercase; padding: 8px 10px; border-bottom: 2px solid var(--an-border); }
.an-table td { padding: 9px 10px; border-bottom: 1px solid var(--an-border); }

.an-mini-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.an-mini-stat { background: #FAFBFD; border: 1px solid var(--an-border); border-radius: 10px; padding: 12px 14px; }
.an-mini-stat .l { font-size: .68rem; color: var(--an-muted); text-transform: uppercase; font-weight: 600; }
.an-mini-stat .v { font-size: 1.15rem; font-weight: 800; margin-top: 3px; }

.an-heat { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.an-heat-cell { aspect-ratio: 1; border-radius: 3px; background: var(--an-border); }

.an-empty { text-align: center; color: var(--an-muted); padding: 30px 0; font-size: .85rem; }
.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; height: 70px; }
@keyframes an-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
</style>
@endpush

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

    <a href="{{ route('admin.analytics.index') }}" class="an-back"><i class="fa-solid fa-arrow-left"></i> Retour aux Analytics</a>

    <div class="an-profile">
        <div class="an-profile-id">
            <div class="an-avatar-lg">{{ strtoupper(substr($delegue->name,0,2)) }}</div>
            <div>
                <h2>{{ $delegue->name }}</h2>
                <div class="meta">{{ $delegue->code }} · {{ ucfirst($delegue->role) }} · {{ $delegue->cities->pluck('name')->implode(', ') ?: 'Aucune ville assignée' }}</div>
            </div>
        </div>
        <div class="an-score-ring-wrap">
            <span class="an-rank-pill" id="rankPill">Classement —</span>
            <div class="an-score-ring">
                <canvas id="scoreRing"></canvas>
                <div class="val" id="scoreVal">--</div>
            </div>
        </div>
    </div>

    <div class="an-filters">
        <select id="fCycle"><option value="">Cycle en cours</option></select>
    </div>

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

    <div class="an-tabs">
        <div class="an-tab active" data-tab="visites">📍 Visites</div>
        <div class="an-tab" data-tab="deplacements">🚗 Déplacements</div>
        <div class="an-tab" data-tab="finances">💰 Finances</div>
        <div class="an-tab" data-tab="presence">🕒 Présence</div>
        <div class="an-tab" data-tab="objectifs">🎯 Objectifs</div>
    </div>

    <div class="an-tab-panel active" id="panel-visites">
        <div class="an-grid-2">
            <div class="an-panel">
                <h6><i class="fa-solid fa-calendar-week text-primary"></i> Répartition par jour de la semaine</h6>
                <div class="an-panel-chart"><canvas id="chartWeekday"></canvas></div>
            </div>
            <div class="an-panel">
                <h6><i class="fa-solid fa-chart-area text-purple"></i> Comparaison équipe</h6>
                <div class="an-panel-chart"><canvas id="chartRadar"></canvas></div>
            </div>
        </div>
        <div class="an-grid-2">
            <div class="an-panel">
                <h6><i class="fa-solid fa-list-check text-success"></i> Couverture par type d'établissement</h6>
                <div class="an-table-wrap"><table class="an-table" id="byTypeTable">
                    <thead><tr><th>Type</th><th>Listings</th><th>Visités</th><th>Visites</th><th>Couverture</th></tr></thead>
                    <tbody><tr><td colspan="5"><div class="an-skeleton" style="height:30px"></div></td></tr></tbody>
                </table></div>
            </div>
            <div class="an-panel">
                <h6><i class="fa-solid fa-triangle-exclamation text-warning"></i> Qualité des visites</h6>
                <div class="an-mini-grid" id="qualityGrid"></div>
            </div>
        </div>
    </div>

    <div class="an-tab-panel" id="panel-deplacements">
        <div class="an-grid-2">
            <div class="an-panel">
                <h6><i class="fa-solid fa-route text-primary"></i> Statistiques déplacements</h6>
                <div class="an-mini-grid" id="deplacementGrid"></div>
            </div>
            <div class="an-panel">
                <h6><i class="fa-solid fa-location-dot text-danger"></i> Géolocalisation</h6>
                <div class="an-mini-grid" id="locationGrid"></div>
            </div>
        </div>
    </div>

    <div class="an-tab-panel" id="panel-finances">
        <div class="an-grid-2">
            <div class="an-panel">
                <h6><i class="fa-solid fa-receipt text-info"></i> Notes de frais</h6>
                <div class="an-mini-grid" id="expenseGrid"></div>
            </div>
            <div class="an-panel">
                <h6><i class="fa-solid fa-wallet text-success"></i> Budget cycle</h6>
                <div id="budgetPanel" class="an-mini-grid"></div>
            </div>
        </div>
        <div class="an-panel">
            <h6><i class="fa-solid fa-bullhorn text-purple"></i> Demandes d'action promotionnelle</h6>
            <div class="an-mini-grid" id="actionGrid"></div>
        </div>
    </div>

    <div class="an-tab-panel" id="panel-presence">
        <div class="an-grid-2">
            <div class="an-panel">
                <h6><i class="fa-solid fa-business-time text-warning"></i> Permissions & absences</h6>
                <div class="an-mini-grid" id="permissionGrid"></div>
            </div>
            <div class="an-panel">
                <h6><i class="fa-solid fa-clock text-primary"></i> Sessions de travail</h6>
                <div class="an-mini-grid" id="sessionGrid"></div>
            </div>
        </div>
        <div class="an-panel">
            <h6><i class="fa-solid fa-calendar-check text-success"></i> Rendez-vous</h6>
            <div class="an-mini-grid" id="appointmentGrid"></div>
        </div>
    </div>

    <div class="an-tab-panel" id="panel-objectifs">
        <div class="an-panel">
            <h6><i class="fa-solid fa-bullseye text-danger"></i> Objectifs par catégorie</h6>
            <div class="an-table-wrap"><table class="an-table" id="objectivesTable">
                <thead><tr><th>Catégorie</th><th>Cible</th><th>Atteint</th><th>Taux</th></tr></thead>
                <tbody><tr><td colspan="4"><div class="an-empty">Chargement...</div></td></tr></tbody>
            </table></div>
        </div>
    </div>

</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
(function () {
    const userId = {{ $delegue->id }};
    const API_URL = "{{ url('/admin/analytics/'.$delegue->id.'/api') }}";
    let charts = {};
    const fmt = (n) => Number(n ?? 0).toLocaleString('fr-FR');
    const destroy = (k) => { if (charts[k]) { charts[k].destroy(); delete charts[k]; } };
    const scoreColor = (s) => s >= 70 ? '#16A34A' : (s >= 45 ? '#CA8A04' : '#DC2626');

    // ── Onglets ──────────────────────────────────────────
    document.querySelectorAll('.an-tab').forEach(tab => {
        tab.addEventListener('click', () => {
            document.querySelectorAll('.an-tab').forEach(t => t.classList.remove('active'));
            document.querySelectorAll('.an-tab-panel').forEach(p => p.classList.remove('active'));
            tab.classList.add('active');
            document.getElementById('panel-' + tab.dataset.tab).classList.add('active');
        });
    });

    function miniStat(label, value) {
        return `<div class="an-mini-stat"><div class="l">${label}</div><div class="v">${value}</div></div>`;
    }

    function renderScore(score, rank) {
        document.getElementById('scoreVal').textContent = score;
        document.getElementById('rankPill').textContent = rank.position
            ? `🏆 Rang ${rank.position} / ${rank.total} (top ${100 - (rank.percentile ?? 0)}%)`
            : 'Classement indisponible';
        destroy('ring');
        charts.ring = new Chart(document.getElementById('scoreRing'), {
            type: 'doughnut',
            data: { datasets: [{ data: [score, 100 - score], backgroundColor: [scoreColor(score), 'rgba(255,255,255,.18)'], borderWidth: 0 }] },
            options: { cutout: '74%', plugins: { legend: { display: false }, tooltip: { enabled: false } }, responsive: false },
        });
    }

    function renderKpis(kpi, repeat) {
        const cards = [
            ['fa-store', 'var(--an-blue)', 'Couverture terrain', kpi.coverage_rate + '%', `${kpi.done}/${kpi.total_listings} établissements`],
            ['fa-stethoscope', 'var(--an-green)', 'Visites cycle', fmt(kpi.total_visits), `équipe: ${kpi.team_avg_visits} en moy.`],
            ['fa-gauge-high', kpi.daily_status === 'ok' ? 'var(--an-green)' : (kpi.daily_status === 'warning' ? 'var(--an-yellow)' : 'var(--an-red)'),
                'Rythme / jour', `${kpi.avg_per_day}/${kpi.target_per_day}`, 'réel / cible'],
            ['fa-forward', 'var(--an-purple)', 'Projection fin cycle', fmt(kpi.projected_total), 'visites estimées'],
            ['fa-calendar-day', '#0EA5E9', 'Jours actifs', `${kpi.active_days}`, `${kpi.inactive_days} jour(s) inactif(s)`],
            ['fa-repeat', '#9333EA', 'Visites répétées', fmt(repeat.total_repeat_visits), `sur ${repeat.repeat_listings} établissement(s)`],
        ];
        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 renderWeekday(byWeekday) {
        destroy('weekday');
        charts.weekday = new Chart(document.getElementById('chartWeekday'), {
            type: 'bar',
            data: { labels: byWeekday.map(d => d.label), datasets: [{ label: 'Visites', data: byWeekday.map(d => d.count), backgroundColor: '#2563EB', borderRadius: 6 }] },
            options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } } },
        });
    }

    function renderRadar(score) {
        destroy('radar');
        charts.radar = new Chart(document.getElementById('chartRadar'), {
            type: 'radar',
            data: {
                labels: score.breakdown.map(b => b.label),
                datasets: [{ label: 'Score', data: score.breakdown.map(b => b.value), backgroundColor: 'rgba(124,58,237,.18)', borderColor: '#7C3AED', pointBackgroundColor: '#7C3AED' }],
            },
            options: { responsive: true, maintainAspectRatio: false, scales: { r: { min: 0, max: 100, ticks: { display: false } } }, plugins: { legend: { display: false } } },
        });
    }

    function renderByType(byType) {
        document.getElementById('byTypeTable').querySelector('tbody').innerHTML = byType.length ? byType.map(t => `
            <tr><td>${t.type}</td><td>${t.total}</td><td>${t.done}</td><td>${t.visits}</td>
                <td><div class="an-progress" style="width:80px"><span style="width:${t.rate}%;background:#2563EB"></span></div> ${t.rate}%</td></tr>
        `).join('') : '<tr><td colspan="5" class="an-empty">Aucune donnée</td></tr>';
    }

    function renderQuality(q) {
        document.getElementById('qualityGrid').innerHTML = [
            miniStat('Rupture de stock', `${q.rupture_stock_count} (${q.rupture_stock_rate}%)`),
            miniStat('Objections', q.objection_count),
            miniStat('Marché direct', q.marche_direct_count),
            miniStat('Visites importantes', q.important_count),
            miniStat('Visites éloignées', q.is_far_count),
            miniStat('Avec ticket', q.has_ticket_count),
            miniStat('Accompagnées', q.accompanied_count),
            miniStat('Doublons', q.double_count),
            miniStat('Durée moy. (min)', q.avg_elapsed_time_min),
        ].join('');
    }

    function renderDeplacements(d) {
        document.getElementById('deplacementGrid').innerHTML = [
            miniStat('Total déplacements', d.total),
            miniStat('Distance totale', d.total_km + ' km'),
            miniStat('Distance moyenne', d.avg_km + ' km'),
            miniStat('Taux réalisation', d.realisation_rate + '%'),
        ].join('');
    }

    function renderLocation(l) {
        document.getElementById('locationGrid').innerHTML = [
            miniStat('Points GPS enregistrés', l.total_points),
            miniStat('Jours suivis', l.tracked_days),
            miniStat('Dernière position', l.last_seen ? new Date(l.last_seen).toLocaleString('fr-FR') : '—'),
        ].join('');
    }

    function renderExpenses(e) {
        document.getElementById('expenseGrid').innerHTML = [
            miniStat('Total déclaré', fmt(e.total_amount) + ' DH'),
            miniStat('Approuvé', fmt(e.approved_amount) + ' DH'),
            miniStat('En attente', fmt(e.pending_amount) + ' DH'),
            miniStat('Rejeté', fmt(e.rejected_amount) + ' DH'),
            miniStat('Taux approbation', e.approval_rate + '%'),
            miniStat('Montant moyen', fmt(e.avg_amount) + ' DH'),
        ].join('');
    }

    function renderBudget(b) {
        document.getElementById('budgetPanel').innerHTML = b ? [
            miniStat('Budget total', fmt(b.total_budget) + ' DH'),
            miniStat('Utilisé', fmt(b.used_budget) + ' DH'),
            miniStat('Restant', fmt(b.remaining_budget) + ' DH'),
            miniStat('Taux d\'utilisation', b.usage_rate + '%'),
        ].join('') : '<div class="an-empty">Aucun budget défini pour ce cycle</div>';
    }

    function renderActions(a) {
        document.getElementById('actionGrid').innerHTML = [
            miniStat('Total demandes', a.total),
            miniStat('Reçues', a.received),
            miniStat('En attente', a.pending),
            miniStat('Budget demandé', fmt(a.total_budget_requested) + ' DH'),
        ].join('');
    }

    function renderPermissions(p) {
        document.getElementById('permissionGrid').innerHTML = [
            miniStat('Demandes totales', p.total_requests),
            miniStat('Jours d\'absence', p.total_days),
            miniStat('Acceptées', p.accepted),
            miniStat('En cours', p.pending),
            miniStat('Refusées', p.refused),
            miniStat('Taux acceptation', p.acceptance_rate + '%'),
        ].join('');
    }

    function renderSessions(s) {
        document.getElementById('sessionGrid').innerHTML = [
            miniStat('Sessions totales', s.total_sessions),
            miniStat('Heures travaillées', s.total_hours + 'h'),
            miniStat('Moy. heures / jour', s.avg_hours_per_day + 'h'),
            miniStat('Jours avec session', s.days_with_session),
            miniStat('Heure moy. de début', s.avg_start_time),
        ].join('');
    }

    function renderAppointments(a) {
        document.getElementById('appointmentGrid').innerHTML = [
            miniStat('Total RDV', a.total),
            miniStat('Réalisés', a.realise),
            miniStat('Planifiés', a.planifie),
            miniStat('Annulés', a.annule),
            miniStat('Taux complétion', a.completion_rate + '%'),
        ].join('');
    }

    function renderObjectives(o) {
        const tbody = document.querySelector('#objectivesTable tbody');
        tbody.innerHTML = o.by_category.length ? o.by_category.map(c => `
            <tr><td>${c.category}</td><td>${c.target}</td><td>${c.achieved}</td>
                <td><div class="an-progress" style="width:90px"><span style="width:${c.rate}%;background:#16A34A"></span></div> ${c.rate}%</td></tr>
        `).join('') : '<tr><td colspan="4" class="an-empty">Aucun objectif défini pour ce cycle</td></tr>';
    }

    function populateCycles(cycles, current) {
        const sel = document.getElementById('fCycle');
        if (sel.options.length > 1) return;
        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 = current ? current.id : 'all';
    }

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

        fetch(API_URL + '?' + params.toString())
            .then(r => r.json())
            .then(d => {
                populateCycles(d.cycles, d.current_cycle);
                renderScore(d.score.score, d.rank);
                renderKpis(d.kpi, d.repeat);
                renderWeekday(d.by_weekday);
                renderRadar(d.score);
                renderByType(d.by_type);
                renderQuality(d.visit_quality);
                renderDeplacements(d.deplacements);
                renderLocation(d.location);
                renderExpenses(d.expenses);
                renderBudget(d.budget);
                renderActions(d.action_requests);
                renderPermissions(d.permissions);
                renderSessions(d.work_sessions);
                renderAppointments(d.appointments);
                renderObjectives(d.objectives);
            })
            .catch(err => console.error('Analytics delegue error', err));
    }

    document.getElementById('fCycle').addEventListener('change', load);
    load();
})();
</script>
@endpush