@extends('layouts.app')
@section('title', 'Admin — LOG Version PC')
@section('page-title', 'Admin — LOG Version PC')

@push('styles')
<style>
.lv-top { display:flex; gap:16px; align-items:flex-start; margin-bottom:16px; flex-wrap:wrap; }
.lv-stat { background:#fff; border:1px solid var(--border); border-radius:10px; padding:14px 22px; display:inline-flex; align-items:center; gap:12px; flex-shrink:0; }
.lv-stat-val { font-size:32px; font-weight:800; color:var(--navy); line-height:1; }
.lv-stat-label { font-size:11px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.06em; line-height:1.5; }

.lv-table-wrap { background:#fff; border-radius:12px; border:1px solid var(--border); overflow:hidden; }
.lv-table { width:100%; border-collapse:collapse; }
.lv-table thead th { background:var(--navy); color:#fff; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; padding:10px 16px; text-align:left; }
.lv-table tbody tr { border-bottom:1px solid var(--border); }
.lv-table tbody tr:last-child { border-bottom:none; }
.lv-table tbody tr:hover { background:#F8FAFF; }
.lv-table tbody td { padding:10px 16px; font-size:13px; font-weight:600; color:var(--text); }
.lv-licence { font-family:monospace; font-size:13px; font-weight:700; color:var(--navy); }
.lv-version { display:inline-block; background:#EEF2FF; color:var(--navy); border-radius:20px; padding:2px 10px; font-size:12px; font-weight:800; }
.lv-date { color:var(--text-muted); font-size:13px; }
.lv-empty { padding:60px; text-align:center; color:var(--text-muted); font-size:13px; font-weight:600; }

.lv-toolbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; gap:8px; }
.lv-count { font-size:12px; font-weight:600; color:var(--text-muted); }
.lv-toolbar-actions { display:flex; gap:8px; align-items:center; }
.btn-export { background:var(--navy); color:#fff; border:none; border-radius:20px; padding:7px 16px; font-family:'Nunito',sans-serif; font-size:12px; font-weight:700; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:6px; }
.btn-export:hover { opacity:.88; }
.btn-stats { background:#fff; color:var(--navy); border:1.5px solid var(--border); border-radius:20px; padding:7px 16px; font-family:'Nunito',sans-serif; font-size:12px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
.btn-stats:hover { background:#F4F6FB; }

/* Modale stats */
.lv-modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:9999; }
.lv-modal-overlay.open { display:block; }
.lv-modal { background:#fff; border-radius:16px; padding:28px; width:720px; max-width:90vw; max-height:88vh; overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,.2); position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:10000; }
.lv-modal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.lv-modal-title { font-size:16px; font-weight:800; color:var(--navy); }
.lv-modal-close { background:none; border:none; cursor:pointer; color:var(--text-muted); font-size:20px; line-height:1; padding:2px 6px; border-radius:6px; }
.lv-modal-close:hover { background:#F4F6FB; }

/* Sélecteur période */
.lv-period-tabs { display:flex; gap:6px; margin-bottom:20px; }
.lv-period-tab { background:#F4F6FB; border:1.5px solid transparent; border-radius:20px; padding:6px 16px; font-family:'Nunito',sans-serif; font-size:12px; font-weight:700; color:var(--text-muted); cursor:pointer; }
.lv-period-tab.active { background:var(--navy); color:#fff; }
.lv-period-tab:hover:not(.active) { border-color:var(--border); }

/* Histogramme */
.lv-section-title { font-size:12px; font-weight:800; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em; margin:22px 0 10px; }
.lv-section-title:first-child { margin-top:0; }
.lv-chart { display:flex; align-items:flex-end; gap:3px; height:160px; padding:0 4px; }
.lv-bar-wrap { display:flex; flex-direction:column; align-items:center; flex:1; height:100%; justify-content:flex-end; gap:4px; }
.lv-bar { width:100%; border-radius:4px 4px 0 0; background:var(--navy); min-height:2px; transition:opacity .15s; cursor:default; position:relative; }
.lv-bar:hover { opacity:.75; }
.lv-bar-val { position:absolute; top:-18px; left:50%; transform:translateX(-50%); font-size:9px; font-weight:800; color:var(--navy); white-space:nowrap; opacity:0; transition:opacity .15s; }
.lv-bar:hover .lv-bar-val { opacity:1; }
.lv-bar-h { font-size:9px; font-weight:700; color:var(--text-muted); }
.lv-chart-peak .lv-bar { background:#EF4444; }

.lv-chart-wrap { position:relative; }
.lv-chart-labels { display:flex; justify-content:space-between; margin-top:8px; padding:0 4px; }
.lv-chart-period { font-size:10px; font-weight:700; color:var(--text-muted); }
.lv-legend { display:flex; gap:16px; margin-top:14px; flex-wrap:wrap; }
.lv-legend-item { display:flex; align-items:center; gap:6px; font-size:11px; font-weight:700; color:var(--text-muted); }
.lv-legend-dot { width:10px; height:10px; border-radius:2px; }
.lv-stats-summary { display:flex; gap:12px; margin-bottom:20px; flex-wrap:wrap; }
.lv-stats-card { background:#F4F6FB; border-radius:8px; padding:10px 16px; flex:1; min-width:120px; }
.lv-stats-card-val { font-size:18px; font-weight:800; color:var(--navy); }
.lv-stats-card-label { font-size:10px; font-weight:700; color:var(--text-muted); text-transform:uppercase; }

/* Graphique jour de semaine (barres larges) */
.lv-chart-week { display:flex; align-items:flex-end; gap:8px; height:120px; padding:0 4px; }
.lv-chart-week .lv-bar-wrap { gap:6px; }
.lv-chart-week .lv-bar { border-radius:6px 6px 0 0; }

.lv-chart-loading { opacity:.4; pointer-events:none; }
</style>
@endpush

@section('content')

{{-- Compteur + tableau par version --}}
<div class="lv-top">
    <div class="lv-stat">
        <span class="lv-stat-val">{{ $total }}</span>
        <span class="lv-stat-label">Licence(s)<br>unique(s)</span>
    </div>

    @if($versionCourante)
    <div class="lv-stat" style="border-left:3px solid #22C55E;">
        <span class="lv-stat-val" style="color:#16A34A;">{{ $versionCourante }}</span>
        <span class="lv-stat-label">Version<br>en cours</span>
    </div>
    @endif

    @if($parVersion->isNotEmpty())
    <div class="lv-table-wrap" style="flex:1;min-width:200px;max-width:340px;">
        <table class="lv-table">
            <thead>
                <tr>
                    <th>Version</th>
                    <th style="text-align:right;">Nb licences</th>
                </tr>
            </thead>
            <tbody>
                @foreach($parVersion as $row)
                <tr>
                    <td><span class="lv-version">{{ $row->version }}</span></td>
                    <td style="text-align:right;font-weight:800;color:var(--navy);">{{ $row->total }}</td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
    @endif
</div>

{{-- Toolbar --}}
<div class="lv-toolbar">
    <span class="lv-count">{{ $total }} licence(s) — page {{ $logs->currentPage() }}/{{ $logs->lastPage() }}</span>
    <div class="lv-toolbar-actions">
        <button class="btn-stats" onclick="document.getElementById('modal-stats').classList.add('open')">
            <svg viewBox="0 0 24 24" style="width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>
            Stats
        </button>
        @if($logs->isNotEmpty())
        <a href="{{ route('admin.log-version.export') }}" class="btn-export">
            <svg viewBox="0 0 24 24" style="width:13px;height:13px;stroke:#fff;fill:none;stroke-width:2.5;stroke-linecap:round;"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
            Exporter CSV
        </a>
        @endif
    </div>
</div>

{{-- Tableau principal --}}
<div class="lv-table-wrap">
    @if($logs->isEmpty())
    <div class="lv-empty">Aucun lancement enregistré pour le moment.</div>
    @else
    <table class="lv-table">
        <thead>
            <tr>
                <th>Licence</th>
                <th>Version</th>
                <th>Dernier lancement</th>
            </tr>
        </thead>
        <tbody>
            @foreach($logs as $log)
            <tr>
                <td class="lv-licence">{{ $log->licence }}</td>
                <td><span class="lv-version">{{ $log->version }}</span></td>
                <td class="lv-date">{{ $log->logged_at->setTimezone('Europe/Paris')->format('d/m/Y H:i') }}</td>
            </tr>
            @endforeach
        </tbody>
    </table>
    @endif
</div>

@if($logs->hasPages())
<div style="margin-top:16px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;">
    <span style="font-size:12px;font-weight:600;color:var(--text-muted);">
        {{ $logs->firstItem() }}–{{ $logs->lastItem() }} sur {{ $total }} licences
    </span>
    <div style="display:flex;gap:4px;align-items:center;">
        @if($logs->onFirstPage())
            <span style="padding:5px 12px;border-radius:8px;border:1px solid var(--border);font-size:12px;font-weight:700;color:var(--text-muted);background:#F4F6FB;">← Précédent</span>
        @else
            <a href="{{ $logs->previousPageUrl() }}" style="padding:5px 12px;border-radius:8px;border:1px solid var(--border);font-size:12px;font-weight:700;color:var(--navy);background:#fff;text-decoration:none;">← Précédent</a>
        @endif

        @foreach($logs->getUrlRange(1, $logs->lastPage()) as $page => $url)
            @if($page == $logs->currentPage())
                <span style="padding:5px 10px;border-radius:8px;background:var(--navy);color:#fff;font-size:12px;font-weight:800;">{{ $page }}</span>
            @elseif(abs($page - $logs->currentPage()) <= 2 || $page == 1 || $page == $logs->lastPage())
                <a href="{{ $url }}" style="padding:5px 10px;border-radius:8px;border:1px solid var(--border);font-size:12px;font-weight:700;color:var(--navy);background:#fff;text-decoration:none;">{{ $page }}</a>
            @elseif(abs($page - $logs->currentPage()) == 3)
                <span style="font-size:12px;color:var(--text-muted);">…</span>
            @endif
        @endforeach

        @if($logs->hasMorePages())
            <a href="{{ $logs->nextPageUrl() }}" style="padding:5px 12px;border-radius:8px;border:1px solid var(--border);font-size:12px;font-weight:700;color:var(--navy);background:#fff;text-decoration:none;">Suivant →</a>
        @else
            <span style="padding:5px 12px;border-radius:8px;border:1px solid var(--border);font-size:12px;font-weight:700;color:var(--text-muted);background:#F4F6FB;">Suivant →</span>
        @endif
    </div>
</div>
@endif

@endsection

@push('modals')
{{-- Modale Stats --}}
<div class="lv-modal-overlay" id="modal-stats" onclick="if(event.target===this)this.classList.remove('open')">
    <div class="lv-modal">
        <div class="lv-modal-header">
            <span class="lv-modal-title">Statistiques d'utilisation</span>
            <button class="lv-modal-close" onclick="document.getElementById('modal-stats').classList.remove('open')">✕</button>
        </div>

        {{-- Sélecteur de période --}}
        <div class="lv-period-tabs">
            <button type="button" class="lv-period-tab active" data-period="7" onclick="setLvPeriod('7', this)">7 jours</button>
            <button type="button" class="lv-period-tab" data-period="30" onclick="setLvPeriod('30', this)">30 jours</button>
            <button type="button" class="lv-period-tab" data-period="all" onclick="setLvPeriod('all', this)">Tout</button>
        </div>

        {{-- Cartes résumé --}}
        <div class="lv-stats-summary" id="lv-stats-summary"></div>

        {{-- Histogramme horaire --}}
        <div class="lv-section-title">Répartition par heure</div>
        <div class="lv-chart-wrap">
            <div class="lv-chart" id="lv-chart-heure"></div>
            <div class="lv-chart-labels">
                <span class="lv-chart-period">Nuit</span>
                <span class="lv-chart-period">Matin</span>
                <span class="lv-chart-period">Midi</span>
                <span class="lv-chart-period">Après-midi</span>
                <span class="lv-chart-period">Soir</span>
            </div>
        </div>

        {{-- Répartition par jour de semaine --}}
        <div class="lv-section-title">Répartition par jour de semaine</div>
        <div class="lv-chart lv-chart-week" id="lv-chart-jour"></div>

        <div class="lv-legend">
            <div class="lv-legend-item"><span class="lv-legend-dot" style="background:#EF4444;"></span> Pic d'activité</div>
            <div class="lv-legend-item"><span class="lv-legend-dot" style="background:var(--navy);"></span> Autres</div>
            <div class="lv-legend-item" style="margin-left:auto;">Heure française (Europe/Paris)</div>
        </div>
    </div>
</div>
@endpush

@push('scripts')
<script>
const LV_STATS_URL = "{{ route('admin.log-version.stats-data') }}";
const LV_JOUR_LABELS = ['Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam', 'Dim'];
let lvCurrentPeriod = '7';

function lvRenderHourChart(parHeure) {
    const container = document.getElementById('lv-chart-heure');
    const max = Math.max(...parHeure, 1);
    container.innerHTML = '';
    parHeure.forEach((nb, heure) => {
        const isPeak = nb === max && nb > 0;
        const pct = max > 0 ? Math.round(nb / max * 100) : 0;
        const wrap = document.createElement('div');
        wrap.className = 'lv-bar-wrap';
        wrap.innerHTML = `
            <div class="lv-bar ${isPeak ? 'lv-chart-peak' : ''}" style="height:${pct}%;">
                ${nb > 0 ? `<span class="lv-bar-val">${nb}</span>` : ''}
            </div>
            <span class="lv-bar-h">${String(heure).padStart(2, '0')}</span>
        `;
        container.appendChild(wrap);
    });
}

function lvRenderWeekChart(parJour) {
    // parJour est un objet { "1": n, "2": n, ..., "7": n } — 1=Lundi..7=Dimanche
    const container = document.getElementById('lv-chart-jour');
    const values = LV_JOUR_LABELS.map((_, i) => parJour[i + 1] || 0);
    const max = Math.max(...values, 1);
    container.innerHTML = '';
    values.forEach((nb, i) => {
        const isPeak = nb === max && nb > 0;
        const pct = max > 0 ? Math.round(nb / max * 100) : 0;
        const wrap = document.createElement('div');
        wrap.className = 'lv-bar-wrap';
        wrap.innerHTML = `
            <div class="lv-bar ${isPeak ? 'lv-chart-peak' : ''}" style="height:${pct}%;">
                ${nb > 0 ? `<span class="lv-bar-val">${nb}</span>` : ''}
            </div>
            <span class="lv-bar-h">${LV_JOUR_LABELS[i]}</span>
        `;
        container.appendChild(wrap);
    });
}

function lvRenderSummary(parHeure) {
    const total = parHeure.reduce((a, b) => a + b, 0);
    const max = Math.max(...parHeure);
    const heureTop = parHeure.indexOf(max);
    const matin = parHeure.slice(6, 12).reduce((a, b) => a + b, 0);
    const aprem = parHeure.slice(15, 19).reduce((a, b) => a + b, 0);

    document.getElementById('lv-stats-summary').innerHTML = `
        <div class="lv-stats-card">
            <div class="lv-stats-card-val">${total > 0 ? heureTop + 'h' : '—'}</div>
            <div class="lv-stats-card-label">Heure de pointe</div>
        </div>
        <div class="lv-stats-card">
            <div class="lv-stats-card-val">${max}</div>
            <div class="lv-stats-card-label">Connexions max/h</div>
        </div>
        <div class="lv-stats-card">
            <div class="lv-stats-card-val">${matin}</div>
            <div class="lv-stats-card-label">Matin (6h–11h)</div>
        </div>
        <div class="lv-stats-card">
            <div class="lv-stats-card-val">${aprem}</div>
            <div class="lv-stats-card-label">Après-midi (15h–18h)</div>
        </div>
    `;
}

function lvApplyStats(data) {
    lvRenderSummary(data.parHeure);
    lvRenderHourChart(data.parHeure);
    lvRenderWeekChart(data.parJour);
}

function setLvPeriod(period, btn) {
    lvCurrentPeriod = period;
    document.querySelectorAll('.lv-period-tab').forEach(t => t.classList.remove('active'));
    btn.classList.add('active');

    const heureEl = document.getElementById('lv-chart-heure');
    const jourEl = document.getElementById('lv-chart-jour');
    heureEl.classList.add('lv-chart-loading');
    jourEl.classList.add('lv-chart-loading');

    fetch(LV_STATS_URL + '?period=' + period, {
        headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }
    })
        .then(r => r.json())
        .then(data => {
            lvApplyStats(data);
        })
        .finally(() => {
            heureEl.classList.remove('lv-chart-loading');
            jourEl.classList.remove('lv-chart-loading');
        });
}

// Données initiales (période 7 jours) injectées par le serveur — pas de fetch au premier affichage
document.addEventListener('DOMContentLoaded', function () {
    lvApplyStats({
        parHeure: @json(array_values($parHeure)),
        parJour: @json($parJour),
    });
});
</script>
@endpush