@extends('layout')
@section('title','Tableau de bord')
@section('content')
@php($canWrite = auth()->user()?->hasPermission('write'))
<div class="row" style="justify-content:space-between;align-items:center">
    <h1 style="margin:0">Tableau de bord</h1>
    <div class="row">
        <button type="button" class="btn" onclick="document.getElementById('export-dialog').showModal()">⬇️ Exporter…</button>
    </div>
</div>

<div class="card" style="margin:16px 0 0;padding:16px">
    <form method="get" action="{{ route('dashboard') }}" id="dashboard-filters" data-autosubmit data-results="#results">
        <div class="row" style="align-items:flex-end;gap:12px">
            <div style="min-width:140px"><label style="margin-top:0">Du</label><input type="date" name="from" value="{{ $filters->from?->toDateString() }}"></div>
            <div style="min-width:140px"><label style="margin-top:0">Au</label><input type="date" name="to" value="{{ $filters->to?->toDateString() }}"></div>
            <div style="min-width:170px;flex:1"><label style="margin-top:0">Campagne</label>
                <select name="campaign"><option value="">Toutes</option>
                    @foreach($filterOptions['campaigns'] as $option)<option value="{{ $option->id }}" @selected($filters->campaignId === $option->id)>{{ $option->name }}</option>@endforeach
                </select></div>
            <div style="min-width:130px;flex:1"><label style="margin-top:0">Entité</label>
                <select name="entity"><option value="">Toutes</option>
                    @foreach($filterOptions['entities'] as $option)<option value="{{ $option->id }}" @selected($filters->entityId === $option->id)>{{ $option->name }}</option>@endforeach
                </select></div>
            <div style="min-width:130px;flex:1"><label style="margin-top:0">Projet</label>
                <select name="project"><option value="">Tous</option>
                    @foreach($filterOptions['projects'] as $option)<option value="{{ $option->id }}" @selected($filters->projectId === $option->id)>{{ $option->name }}</option>@endforeach
                </select></div>
            <div style="min-width:130px;flex:1"><label style="margin-top:0">Département</label>
                <select name="department"><option value="">Tous</option>
                    @foreach($filterOptions['departments'] as $option)<option value="{{ $option->id }}" @selected($filters->departmentId === $option->id)>{{ $option->name }}</option>@endforeach
                </select></div>
        </div>
        <div class="row" style="align-items:flex-end;gap:12px;margin-top:10px">
            <div style="min-width:170px;flex:1"><label style="margin-top:0">Résultat</label>
                <select name="result"><option value="">Tous</option>
                    @foreach(\App\Services\DashboardFilters::RESULT_LABELS as $key => $label)<option value="{{ $key }}" @selected($filters->result === $key)>{{ $label }}</option>@endforeach
                </select></div>
            <div style="min-width:150px;flex:1"><label style="margin-top:0">Niveau de risque</label>
                <select name="risk"><option value="">Tous</option>
                    @foreach(\App\Services\EmployeeRisk::LEVELS as $key => $level)<option value="{{ $key }}" @selected($filters->riskLevel === $key)>{{ $level['label'] }}</option>@endforeach
                </select></div>
            <div style="min-width:150px;flex:1"><label style="margin-top:0">Employé</label>
                <input type="text" name="q" value="{{ $filters->q }}" placeholder="Nom ou email"></div>
            <div style="min-width:150px;flex:1"><label style="margin-top:0">Type de piège</label>
                <select name="trap"><option value="">Tous</option>
                    @foreach(\App\Services\DashboardFilters::TRAP_LABELS as $key => $label)<option value="{{ $key }}" @selected($filters->trapType === $key)>{{ $label }}</option>@endforeach
                </select></div>
            <div style="min-width:150px;flex:1"><label style="margin-top:0">Statut de campagne</label>
                <select name="status"><option value="">Tous</option>
                    @foreach(\App\Services\DashboardFilters::STATUS_LABELS as $key => $label)<option value="{{ $key }}" @selected($filters->status === $key)>{{ $label }}</option>@endforeach
                </select></div>
            <button class="btn">Appliquer</button>
            @if($filters->isActive())<a class="btn secondary" href="{{ route('dashboard') }}">Réinitialiser</a>@endif
        </div>
        <div class="row" style="margin-top:10px;gap:6px">
            <span class="muted" style="font-size:12px">Périodes rapides :</span>
            @foreach($presets as $label => $range)
                <a class="pill draft" style="text-decoration:none" href="{{ route('dashboard', array_merge($filters->toQuery(), $range)) }}">{{ $label }}</a>
            @endforeach
        </div>
    </form>
    @if($filters->isActive())
        <p class="muted" style="margin:10px 0 0;font-size:13px">Filtres actifs — {{ $filters->summary() }}. La période porte sur la date d'envoi des mails.</p>
    @endif
</div>

<style>
    .gauge{position:relative;height:200px}
    .gauge-v{position:absolute;top:58%;left:0;right:0;text-align:center;font-size:26px;font-weight:700;transform:translateY(-50%)}
</style>
<script src="{{ asset('vendor/chartjs/chart.umd.min.js') }}"></script>

<div id="results">
<div class="grid" style="margin:16px 0 20px">
    <div class="stat"><div class="n">{{ $stats['campaigns'] }}</div><div class="l">Campagnes</div></div>
    <div class="stat"><div class="n">{{ $stats['employees'] }}</div><div class="l">Employés</div></div>
    <div class="stat"><div class="n">{{ $stats['sent'] }}</div><div class="l">Mails envoyés</div></div>
    <div class="stat"><div class="n" style="color:#0d9488">{{ $stats['open_rate'] }}%</div><div class="l">Taux d'ouverture</div></div>
    <div class="stat"><div class="n" style="color:#2563eb">{{ $stats['click_rate'] }}%</div><div class="l">Taux de clic</div></div>
    <div class="stat"><div class="n" style="color:#4f46e5">{{ $stats['submit_rate'] }}%</div><div class="l">Taux de soumission</div></div>
    <div class="stat"><div class="n">{{ $stats['clicked'] }}</div><div class="l">Clics piégés</div></div>
    <div class="stat"><div class="n" style="color:#c026d3">{{ $stats['repeat_offenders'] }}</div><div class="l">Récidivistes</div></div>
    <div class="stat"><div class="n" style="color:#16a34a">{{ $stats['reported'] }}</div><div class="l">Signalements ({{ $stats['report_rate'] }}%)</div></div>
    <div class="stat"><div class="n" style="color:#06b6d4">{{ $stats['read_only'] }}</div><div class="l">Lu sans agir ({{ $stats['read_only_rate'] }}%)</div></div>
    <div class="stat"><div class="n" style="color:#64748b">{{ $stats['no_reaction'] }}</div><div class="l">Sans réaction ({{ $stats['no_reaction_rate'] }}%)</div></div>
    <div class="stat"><div class="n">{{ $stats['total_opens'] }}</div><div class="l">Ouvertures totales</div></div>
</div>

@if($openRecommendations > 0)
<div class="card">
    <div class="row" style="justify-content:space-between">
        <h2 style="margin:0">Recommandations à traiter ({{ $openRecommendations }})</h2>
        <a class="btn secondary" href="{{ route('recommendations.index') }}">Tout voir</a>
    </div>
    <table style="margin-top:10px">
        @foreach($recommendations as $reco)
            <tr>
                <td style="width:90px"><span class="pill" style="{{ $reco->priority === 'high' ? 'background:#4f46e5;color:#fff' : ($reco->priority === 'medium' ? 'background:#dbeafe;color:#1e40af' : 'background:#f1f5f9;color:#475569') }}">{{ \App\Models\Recommendation::PRIORITIES[$reco->priority] ?? $reco->priority }}</span></td>
                <td><strong>{{ $reco->title }}</strong><div class="muted" style="font-size:13px">{{ $reco->action }}</div></td>
            </tr>
        @endforeach
    </table>
</div>
@endif

<div class="card">
    <h2>Activité — ouvertures & clics ({{ $filters->from || $filters->to ? 'période filtrée' : '30 derniers jours' }})</h2>
    <div style="height:280px"><canvas id="cActivity"></canvas></div>
</div>

<div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px">
    <div class="card"><h2>Taux d'ouverture</h2><div class="gauge"><canvas id="gOpen"></canvas><span class="gauge-v" style="color:#0d9488">{{ $stats['open_rate'] }}%</span></div></div>
    <div class="card"><h2>Taux de clic</h2><div class="gauge"><canvas id="gClick"></canvas><span class="gauge-v" style="color:#2563eb">{{ $stats['click_rate'] }}%</span></div></div>
    <div class="card"><h2>Taux de soumission</h2><div class="gauge"><canvas id="gSubmit"></canvas><span class="gauge-v" style="color:#4f46e5">{{ $stats['submit_rate'] }}%</span></div></div>
</div>

<div style="display:grid;grid-template-columns:1fr 1fr;gap:20px">
    <div class="card"><h2>Entonnoir global</h2><div style="height:260px"><canvas id="cFunnel"></canvas></div></div>
    <div class="card"><h2>Performance par campagne</h2><div style="height:260px"><canvas id="cCampaigns"></canvas></div></div>
</div>

<div style="display:grid;grid-template-columns:1fr 1fr;gap:20px">
    <div class="card"><h2>Taux de clic par département</h2>
        @if($byDepartment['rows']->isEmpty())<p class="muted">Pas encore de données.</p>@else<div style="height:260px"><canvas id="cDept"></canvas></div>@endif
    </div>
    <div class="card"><h2>Clics par type de piège</h2>
        @if($byTrapType['counts']->isEmpty())<p class="muted">Pas encore de clics.</p>@else<div style="height:260px"><canvas id="cTrap"></canvas></div>@endif
    </div>
</div>

<div style="display:grid;grid-template-columns:1fr 1fr;gap:20px">
    <div class="card"><h2>Taux de clic par entité</h2>
        @if($byEntity['rows']->isEmpty())<p class="muted">Pas encore de données.</p>@else<div style="height:260px"><canvas id="cEntity"></canvas></div>@endif
    </div>
    <div class="card"><h2>Taux de clic par projet</h2>
        @if($byProject['rows']->isEmpty())<p class="muted">Pas encore de données.</p>@else<div style="height:260px"><canvas id="cProject"></canvas></div>@endif
    </div>
</div>

<div class="card">
    <h2>Clics par pays <span class="muted" style="font-weight:400;font-size:13px">— géolocalisation par IP (approx. ; nécessite des IP publiques)</span></h2>
    @if($byCountry['counts']->isEmpty())
        <p class="muted">Aucune géolocalisation encore (IP privées/internes en local, ou géoloc désactivée).</p>
    @else
        <div style="height:260px"><canvas id="cCountry"></canvas></div>
    @endif
</div>

<div style="display:grid;grid-template-columns:1fr 1fr;gap:20px">
    <div class="card"><h2>Clics par heure de la journée</h2><div style="height:240px"><canvas id="cHour"></canvas></div></div>
    <div class="card"><h2>Clics par jour de la semaine</h2><div style="height:240px"><canvas id="cWeekday"></canvas></div></div>
</div>

<div class="card">
    <h2>Campagnes</h2>
    <table>
        <tr><th>Campagne</th><th>Statut</th><th>Envoyés</th><th>Ouverts</th><th>Cliqués</th><th>Soumis</th><th>Taux de clic</th><th></th></tr>
        @forelse($campaigns as $c)
            <tr>
                <td><strong>{{ $c->name }}</strong></td>
                <td><span class="pill {{ $c->status }}">{{ $c->status }}</span></td>
                <td>{{ $c->sent_count }}</td><td>{{ $c->opened_count }}</td><td>{{ $c->clicked_count }}</td><td>{{ $c->submitted_count }}</td>
                <td>{{ $c->sent_count ? round($c->clicked_count / $c->sent_count * 100) : 0 }}%</td>
                <td><a class="btn secondary" href="{{ route('campaigns.show',$c) }}">Rapport</a></td>
            </tr>
        @empty
            <tr><td colspan="8" class="muted">Aucune campagne. <a href="{{ route('campaigns.create') }}">Créez-en une</a>.</td></tr>
        @endforelse
    </table>
</div>

<div class="card">
    <h2>Récidivistes (top cliqueurs)</h2>
    <table>
        <tr><th>Employé</th><th>Email</th><th>Département</th><th>Total clics</th></tr>
        @forelse($topClickers as $e)
            <tr><td>{{ $e->name }}</td><td>{{ $e->email }}</td><td>{{ $e->departments()->pluck('name')->implode(', ') }}</td><td><strong>{{ $e->clicks }}</strong></td></tr>
        @empty
            <tr><td colspan="4" class="muted">Personne n'a encore cliqué.</td></tr>
        @endforelse
    </table>
</div>

<div class="card">
    <h2>Sans réaction <span class="muted" style="font-weight:400;font-size:13px">— mail envoyé, aucune action détectée (ni clic, ni saisie, ni signalement). N'implique pas forcément une lecture.</span></h2>
    <table>
        <tr><th>Employé</th><th>Email</th><th>Département</th><th>Campagne</th><th>Envoyé le</th><th></th></tr>
        @forelse($noReactionList as $r)
            <tr>
                <td>{{ $r->employee?->name }}</td>
                <td>{{ $r->employee?->email }}</td>
                <td>{{ $r->employee?->departments()->pluck('name')->implode(', ') }}</td>
                <td>{{ $r->campaign?->name }}</td>
                <td>{{ $r->sent_at?->format('d/m/Y H:i') }}</td>
                <td style="text-align:right"><a class="btn secondary" href="{{ route('campaigns.recipient', [$r->campaign_id, $r]) }}">Détails</a></td>
            </tr>
        @empty
            <tr><td colspan="6" class="muted">Tout le monde a réagi (ou rien n'a encore été envoyé).</td></tr>
        @endforelse
    </table>
</div>

<div class="card">
    <h2>Lu sans agir <span class="muted" style="font-weight:400;font-size:13px">— ouverture confirmée par le pixel, mais ni clic ni saisie (nécessite le tracking d'ouverture / URL publique)</span></h2>
    <table>
        <tr><th>Employé</th><th>Email</th><th>Département</th><th>Campagne</th><th>1re ouverture</th><th></th></tr>
        @forelse($readOnlyList as $r)
            <tr>
                <td>{{ $r->employee?->name }}</td>
                <td>{{ $r->employee?->email }}</td>
                <td>{{ $r->employee?->departments()->pluck('name')->implode(', ') }}</td>
                <td>{{ $r->campaign?->name }}</td>
                <td>{{ $r->opened_at?->format('d/m/Y H:i') }}</td>
                <td style="text-align:right"><a class="btn secondary" href="{{ route('campaigns.recipient', [$r->campaign_id, $r]) }}">Détails</a></td>
            </tr>
        @empty
            <tr><td colspan="6" class="muted">Personne n'a lu le mail sans agir (ou aucune ouverture détectée).</td></tr>
        @endforelse
    </table>
</div>

<dialog id="export-dialog" style="border:0;border-radius:12px;padding:0;max-width:520px;width:calc(100% - 32px)">
    <form method="get" action="{{ route('dashboard.export') }}" onsubmit="setTimeout(() => this.closest('dialog').close(), 400)" style="padding:22px">
        <h2 style="font-size:18px">Exporter le tableau de bord</h2>
        @foreach($filters->toQuery() as $key => $value)<input type="hidden" name="{{ $key }}" value="{{ $value }}">@endforeach
        <p class="muted" style="margin-top:0">{{ $filters->summary() }}</p>

        <label>Type de rapport</label>
        @foreach(['normal' => 'Complet — nominatif : détail par destinataire, top cliqueurs. À réserver aux personnes habilitées.', 'rgpd' => 'RGPD — anonymisé : chiffres agrégés uniquement (k-anonymité), partageable avec la direction ou le CSE.'] as $value => $hint)
            <label style="display:flex;gap:10px;align-items:flex-start;font-weight:400;margin:6px 0;cursor:pointer">
                <input type="radio" name="kind" value="{{ $value }}" style="width:auto;margin-top:4px" @checked($loop->first)>
                <span><strong>{{ \App\Services\ReportBuilder::KINDS[$value] }}</strong><br><span class="muted">{{ $hint }}</span></span>
            </label>
        @endforeach

        <label style="margin-top:16px">Format du fichier</label>
        @foreach(\App\Services\ReportExporter::FORMATS as $value => $label)
            <label style="display:flex;gap:10px;align-items:center;font-weight:400;margin:6px 0;cursor:pointer">
                <input type="radio" name="format" value="{{ $value }}" style="width:auto" @checked($value === 'pdf')> {{ $label }}
            </label>
        @endforeach

        <div class="row" style="justify-content:flex-end;margin-top:20px">
            <button type="button" class="btn secondary" onclick="this.closest('dialog').close()">Annuler</button>
            <button class="btn">Télécharger</button>
        </div>
    </form>
</dialog>

<script>
(function(){
const D = {
    ts: @json($timeseries),
    fn: @json($funnel),
    pc: @json($perCampaign),
    dept: @json(['labels'=>$byDepartment['labels'],'rates'=>$byDepartment['rates']]),
    entity: @json(['labels'=>$byEntity['labels'],'rates'=>$byEntity['rates']]),
    project: @json(['labels'=>$byProject['labels'],'rates'=>$byProject['rates']]),
    trap: @json($byTrapType),
    country: @json($byCountry),
    hour: @json($byHour),
    wd: @json($byWeekday),
};
const BLUE='#2563eb', TEAL='#0d9488', INDIGO='#4f46e5', GREEN='#16a34a', SLATE='#94a3b8', VIOLET='#7c3aed';
const noAsp = { maintainAspectRatio:false };
const legB = { plugins:{ legend:{ position:'bottom' } } };
const y0 = { scales:{ y:{ beginAtZero:true, ticks:{ precision:0 } } } };

new Chart(cActivity, { type:'line',
    data:{ labels:D.ts.labels, datasets:[
        { label:'Ouvertures', data:D.ts.opens, borderColor:TEAL, backgroundColor:'rgba(13,148,136,.1)', tension:.35, fill:true },
        { label:'Clics', data:D.ts.clicks, borderColor:BLUE, backgroundColor:'rgba(37,99,235,.1)', tension:.35, fill:true },
    ]}, options:{ ...noAsp, ...legB, ...y0 } });

function gauge(id, val, color){
    new Chart(id, { type:'doughnut',
        data:{ datasets:[{ data:[val, 100-val], backgroundColor:[color, '#eef2f7'], borderWidth:0 }] },
        options:{ ...noAsp, cutout:'72%', rotation:-90, circumference:180, plugins:{ legend:{display:false}, tooltip:{enabled:false} } } });
}
gauge(gOpen, {{ $stats['open_rate'] }}, TEAL);
gauge(gClick, {{ $stats['click_rate'] }}, BLUE);
gauge(gSubmit, {{ $stats['submit_rate'] }}, INDIGO);

new Chart(cFunnel, { type:'doughnut',
    data:{ labels:['Envoyés','Ouverts','Cliqués','Soumis'], datasets:[{ data:[D.fn.sent,D.fn.opened,D.fn.clicked,D.fn.submitted], backgroundColor:[SLATE,TEAL,BLUE,INDIGO] }] },
    options:{ ...noAsp, ...legB } });

new Chart(cCampaigns, { type:'bar',
    data:{ labels:D.pc.labels, datasets:[
        { label:'Envoyés', data:D.pc.sent, backgroundColor:SLATE },
        { label:'Ouverts', data:D.pc.opened, backgroundColor:TEAL },
        { label:'Cliqués', data:D.pc.clicked, backgroundColor:BLUE },
        { label:'Soumis', data:D.pc.submitted, backgroundColor:INDIGO },
    ]}, options:{ ...noAsp, ...legB, ...y0 } });

if (document.getElementById('cDept')) new Chart(cDept, { type:'bar',
    data:{ labels:D.dept.labels, datasets:[{ label:'Taux de clic (%)', data:D.dept.rates, backgroundColor:BLUE }] },
    options:{ indexAxis:'y', ...noAsp, plugins:{legend:{display:false}}, scales:{ x:{ beginAtZero:true, max:100, ticks:{ callback:v=>v+'%' } } } } });

const rateChart = (id, group, color) => new Chart(id, { type:'bar',
    data:{ labels:group.labels, datasets:[{ label:'Taux de clic (%)', data:group.rates, backgroundColor:color }] },
    options:{ indexAxis:'y', ...noAsp, plugins:{legend:{display:false}}, scales:{ x:{ beginAtZero:true, max:100, ticks:{ callback:v=>v+'%' } } } } });
if (document.getElementById('cEntity')) rateChart(cEntity, D.entity, INDIGO);
if (document.getElementById('cProject')) rateChart(cProject, D.project, VIOLET);

if (document.getElementById('cTrap')) new Chart(cTrap, { type:'doughnut',
    data:{ labels:D.trap.labels, datasets:[{ data:D.trap.counts, backgroundColor:[BLUE,TEAL,INDIGO,VIOLET,SLATE] }] },
    options:{ ...noAsp, ...legB } });

if (document.getElementById('cCountry')) new Chart(cCountry, { type:'bar',
    data:{ labels:D.country.labels, datasets:[{ label:'Clics', data:D.country.counts, backgroundColor:VIOLET }] },
    options:{ indexAxis:'y', ...noAsp, plugins:{legend:{display:false}}, ...y0 } });

new Chart(cHour, { type:'bar',
    data:{ labels:D.hour.labels, datasets:[{ label:'Clics', data:D.hour.counts, backgroundColor:BLUE }] },
    options:{ ...noAsp, plugins:{legend:{display:false}}, ...y0 } });

new Chart(cWeekday, { type:'bar',
    data:{ labels:D.wd.labels, datasets:[{ label:'Clics', data:D.wd.counts, backgroundColor:VIOLET }] },
    options:{ ...noAsp, plugins:{legend:{display:false}}, ...y0 } });
})();
</script>
</div>
@endsection