@extends('layouts.app')

@section('title', 'Système')
@section('header', 'Système — Sauvegarde & Restauration')

@section('content')
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
    <div id="backup-card" class="bg-white rounded shadow p-6"
         x-data="{ loading: {{ $enCours ? 'true' : 'false' }}, partFile: @js($enCours) }">
        <h3 class="font-semibold text-lg mb-4">Sauvegarde</h3>
        <p class="text-sm text-gray-600 mb-4">Génère un dump SQL complet de la base <code>usersmanager</code>.</p>
        <form method="POST" action="{{ route('admin.systeme.sauvegarder') }}">
            @csrf
            <button type="button"
                    :disabled="loading"
                    @click="!loading && $dispatch('open-confirm', { message: 'Lancer une sauvegarde ?', formId: 'backup-form' })"
                    :class="loading ? 'bg-blue-400 cursor-not-allowed' : 'bg-blue-600 hover:bg-blue-700'"
                    class="px-4 py-2 text-white rounded flex items-center gap-2">
                <template x-if="loading">
                    @include('partials.spinner')
                </template>
                <span x-text="loading ? 'Sauvegarde en cours…' : 'Lancer la sauvegarde'"></span>
            </button>
        </form>
    </div>

    <div class="bg-white rounded shadow p-6" x-data="{ loading: false, hasFile: false }"
         @form-submitting.window="if ($event.detail.formId === 'restore-upload-form') loading = true">
        <h3 class="font-semibold text-lg mb-4">Restauration</h3>
        <p class="text-sm text-gray-600 mb-4">Sélectionne un fichier de sauvegarde à restaurer.</p>

        <form id="restore-upload-form" method="POST" action="{{ route('admin.systeme.restaurer.fichier') }}" enctype="multipart/form-data" class="mb-4 p-3 bg-gray-50 rounded border border-dashed border-gray-300">
            @csrf
            <label class="block text-sm font-medium text-gray-700 mb-1">Uploader un fichier .sql</label>
            <div class="flex gap-2">
                <input type="file" name="backup_file" accept=".sql" required
                       @change="hasFile = $event.target.files.length > 0"
                       class="block w-full text-sm text-gray-600 file:mr-2 file:py-1.5 file:px-3 file:rounded file:border-0 file:text-sm file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100">
                <template x-if="!loading">
                    <button type="button"
                            :disabled="!hasFile"
                            @click="hasFile && $dispatch('open-confirm', { message: '⚠️ Restaurer ce fichier écrasera TOUTES les données actuelles. Confirmer ?', formId: 'restore-upload-form' })"
                            :class="hasFile ? 'bg-orange-600 hover:bg-orange-700' : 'bg-orange-300 cursor-not-allowed'"
                            class="px-4 py-2 text-white rounded text-sm whitespace-nowrap">
                        Restaurer
                    </button>
                </template>
                <template x-if="loading">
                    <button type="button" disabled
                            class="px-4 py-2 bg-orange-300 text-white rounded text-sm whitespace-nowrap cursor-not-allowed flex items-center gap-2">
                            @include('partials.spinner') Restauration en cours…
                    </button>
                </template>
            </div>
        </form>
    </div>

    <div class="bg-white rounded shadow p-6 lg:col-span-2">
        <h3 class="font-semibold text-lg mb-4">Informations système</h3>
        <dl class="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
            <div><dt class="text-gray-500">Laravel</dt><dd>{{ app()->version() }}</dd></div>
            <div><dt class="text-gray-500">PHP</dt><dd>{{ PHP_VERSION }}</dd></div>
            <div><dt class="text-gray-500">Environnement</dt><dd>{{ app()->environment() }}</dd></div>
            <div><dt class="text-gray-500">Debug</dt><dd>{{ config('app.debug') ? 'Oui' : 'Non' }}</dd></div>
        </dl>
    </div>
</div>

<form id="backup-form" method="POST" action="{{ route('admin.systeme.sauvegarder') }}" class="hidden">
    @csrf
</form>

@push('scripts')
<script>
    const BACKUP_PART = @js($enCours);
    const BACKUP_STATUT_URL = @js(route('admin.systeme.sauvegarder.statut'));
    const BACKUP_DOWNLOAD_URL = @js(route('admin.systeme.telecharger'));
    const BACKUP_INDEX_URL = @js(route('admin.systeme.index'));

    function setBackupLoading(v) {
        const card = document.getElementById('backup-card');
        if (card && window.Alpine) Alpine.$data(card).loading = v;
    }

    window.addEventListener('confirmed', (e) => {
        if (e.detail.formId !== 'backup-form') return;
        setBackupLoading(true);
        document.getElementById('backup-form').submit();
    });

    function sonderSauvegarde() {
        if (!BACKUP_PART) return;

        fetch(BACKUP_STATUT_URL + '?file=' + encodeURIComponent(BACKUP_PART), { headers: { 'Accept': 'application/json' } })
            .then((r) => {
                if (!r.ok) throw new Error('HTTP ' + r.status);
                return r.json();
            })
            .then((d) => {
                if (d.statut === 'termine') {
                    setBackupLoading(false);
                    window.location.href = BACKUP_DOWNLOAD_URL + '?file=' + encodeURIComponent(d.fichier);
                } else if (d.statut === 'echec') {
                    setBackupLoading(false);
                    window.location.href = BACKUP_INDEX_URL + '?sauvegarde=echec';
                } else {
                    setTimeout(sonderSauvegarde, 3000);
                }
            })
            .catch(() => setTimeout(sonderSauvegarde, 5000));
    }

    sonderSauvegarde();
</script>
@endpush

@endsection