@extends('admin.layouts.app')

@section('title', 'Sauvegardes')

@php
    $typeLabels = ['auto' => 'Automatique', 'manual' => 'Manuel', 'pre-restore' => 'Avant restauration'];
@endphp

@section('content')
    <div class="btn-row" style="justify-content: space-between; align-items: flex-start;">
        <div>
            <h1 class="page-title">Sauvegardes</h1>
            <p class="lead">Revenez à une version antérieure du contenu en un clic. Idéal si une modification a cassé l'affichage.</p>
        </div>
        <form method="POST" action="{{ route('admin.snapshots.store') }}">
            @csrf
            <button class="btn btn-gold" type="submit">+ Créer un point maintenant</button>
        </form>
    </div>

    <div class="form-note">
        Un point de sauvegarde est créé <strong>automatiquement</strong> pendant que vous modifiez le site (au plus un toutes les 10 minutes),
        et juste <strong>avant chaque restauration</strong> — donc revenir en arrière est toujours réversible. Restaurer remplace
        tout le contenu (pages, blocs, footer, menu, réseaux) par celui du point choisi. Les images envoyées ne sont jamais supprimées.
        <br><strong>Seules les {{ $keep }} dernières sauvegardes sont conservées</strong> — les plus anciennes sont supprimées automatiquement.
    </div>

    <style>
        .snap-next-card { display: flex; align-items: center; gap: 22px; }
        .snap-ring-wrap { position: relative; width: 78px; height: 78px; flex-shrink: 0; }
        .snap-ring-wrap .snap-pct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 600; color: var(--ff-ink); font-size: .95rem; }
        .snap-ring { transition: stroke-dashoffset .6s ease; }
    </style>

    <div class="card snap-next-card">
        <div class="snap-ring-wrap" id="snapNext" data-remaining="{{ $secondsUntilNext }}" data-window="{{ $windowSeconds }}">
            <svg viewBox="0 0 80 80" width="78" height="78" aria-hidden="true">
                <circle cx="40" cy="40" r="34" fill="none" stroke="#f0ebe1" stroke-width="6"></circle>
                <circle class="snap-ring" cx="40" cy="40" r="34" fill="none" stroke="var(--ff-gold)" stroke-width="6" stroke-linecap="round" transform="rotate(-90 40 40)"></circle>
            </svg>
            <span class="snap-pct">0%</span>
        </div>
        <div>
            <h2 style="margin: 0 0 4px;">Sauvegarde automatique</h2>
            <p class="hint snap-next-label" style="margin: 0;">…</p>
        </div>
    </div>

    <script>
        (function () {
            var el = document.getElementById('snapNext');
            if (!el) return;
            var ring  = el.querySelector('.snap-ring');
            var pct   = el.querySelector('.snap-pct');
            var label = document.querySelector('.snap-next-label');
            var remaining = parseInt(el.getAttribute('data-remaining'), 10) || 0;
            var windowS   = parseInt(el.getAttribute('data-window'), 10) || 600;
            var C = 2 * Math.PI * 34;
            ring.style.strokeDasharray = C;

            function fmt(s) { var m = Math.floor(s / 60), x = s % 60; return m + ':' + (x < 10 ? '0' : '') + x; }
            function render() {
                var progress = windowS > 0 ? (windowS - remaining) / windowS : 1;
                progress = Math.max(0, Math.min(1, progress));
                ring.style.strokeDashoffset = C * (1 - progress);
                if (remaining <= 0) {
                    pct.textContent = '✓';
                    label.textContent = 'Prête — un point sera créé dès votre prochaine modification.';
                } else {
                    pct.textContent = Math.round(progress * 100) + '%';
                    label.textContent = 'Prochaine sauvegarde automatique possible dans ' + fmt(remaining) + '.';
                }
            }
            render();
            if (remaining > 0) {
                var t = setInterval(function () {
                    remaining -= 1;
                    render();
                    if (remaining <= 0) clearInterval(t);
                }, 1000);
            }
        })();
    </script>

    @if ($snapshots->isEmpty())
        <div class="empty">Aucun point de sauvegarde pour l'instant. Il s'en créera automatiquement dès vos prochaines modifications, ou créez-en un maintenant.</div>
    @else
        <h2 style="margin-bottom: 6px;">Vos sauvegardes <span style="color: var(--ff-muted); font-weight: 400;">· {{ $snapshots->count() }} / {{ $keep }}</span></h2>
        <table class="tbl">
            <thead>
                <tr><th>Quand</th><th>Date exacte</th><th>Type</th><th>Blocs</th><th></th></tr>
            </thead>
            <tbody>
                @foreach ($snapshots as $snapshot)
                    <tr>
                        <td>{{ $snapshot->created_at->locale('fr')->diffForHumans() }}</td>
                        <td><span class="ro">{{ $snapshot->created_at->locale('fr')->isoFormat('D MMM YYYY · HH[h]mm') }}</span></td>
                        <td>
                            @if ($snapshot->type === 'manual')
                                <span class="badge badge-pub">Manuel</span>
                            @else
                                <span class="badge badge-draft">{{ $typeLabels[$snapshot->type] ?? $snapshot->type }}</span>
                            @endif
                        </td>
                        <td>{{ $snapshot->blocks }}</td>
                        <td>
                            <div class="btn-row">
                                <form method="POST" action="{{ route('admin.snapshots.restore', $snapshot) }}"
                                      data-confirm="Êtes-vous sûr de bien vouloir restaurer cette version ? Tout le contenu actuel sera remplacé par celui de ce point. (Un point de sauvegarde est créé juste avant, donc l'action reste réversible.)"
                                      data-confirm-yes="Oui, restaurer">
                                    @csrf
                                    <button class="btn btn-sm" type="submit">↩ Restaurer</button>
                                </form>
                                <form method="POST" action="{{ route('admin.snapshots.destroy', $snapshot) }}"
                                      data-confirm="Êtes-vous sûr de bien vouloir supprimer ce point de sauvegarde ? Cette suppression est définitive."
                                      data-confirm-variant="danger" data-confirm-yes="Oui, supprimer">
                                    @csrf
                                    @method('DELETE')
                                    <button class="btn btn-sm btn-danger" type="submit">Supprimer</button>
                                </form>
                            </div>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    @endif
@endsection