@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: false }">
        <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"
                    x-show="!loading"
                    @click="$dispatch('open-confirm', { message: 'Lancer une sauvegarde ?', formId: 'backup-form' })"
                    class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
                Lancer la sauvegarde
            </button>
            <button type="button" disabled
                    x-show="loading"
                    class="px-4 py-2 bg-blue-400 text-white rounded cursor-not-allowed flex items-center gap-2">
                    @include('partials.spinner') Sauvegarde en cours…
            </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>

        @if(count($backups) === 0)
        <p class="text-sm text-gray-400">Aucune sauvegarde trouvée.</p>
        @else
        <table class="w-full text-sm">
            <thead><tr class="bg-gray-50"><th class="px-3 py-2 text-left">Fichier</th><th class="px-3 py-2 text-left">Taille</th><th class="px-3 py-2 text-left">Date</th><th class="px-3 py-2 text-right">Actions</th></tr></thead>
            <tbody>
                @foreach ($backups as $b)
                <tr class="border-t">
                    <td class="px-3 py-2">{{ $b['name'] }}</td>
                    <td class="px-3 py-2">{{ number_format($b['size'] / 1024, 1) }} KB</td>
                    <td class="px-3 py-2">{{ date('d/m/Y H:i', $b['date']) }}</td>
                    <td class="px-3 py-2 text-right">
                        <a href="{{ route('admin.systeme.telecharger', ['file' => $b['path']]) }}" class="text-blue-600 hover:underline mr-2">Télécharger</a>
                        <form method="POST" action="{{ route('admin.systeme.restaurer') }}" class="inline" id="restore-{{ Str::slug($b['name']) }}">
                            @csrf
                            <input type="hidden" name="file" value="{{ $b['path'] }}">
                            <button type="button" @click="$dispatch('open-confirm', { message: '⚠️ Cette action remplacera TOUTES les données. Confirmer ?', formId: 'restore-{{ Str::slug($b['name']) }}' })" class="text-red-600 hover:underline">Restaurer</button>
                        </form>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
        @endif
    </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>
    document.addEventListener('confirmed', async (e) => {
        if (e.detail.formId !== 'backup-form') return;
        e.preventDefault();

        const el = document.getElementById('backup-card');
        if (!el) return;

        const data = Alpine.$data(el);
        data.loading = true;

        try {
            const resp = await fetch('{{ route('admin.systeme.sauvegarder') }}', {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                },
            });

            if (!resp.ok) {
                const text = await resp.text();
                throw new Error(text.substring(0, 200));
            }

            const blob = await resp.blob();
            const disposition = resp.headers.get('Content-Disposition') || '';
            const match = disposition.match(/filename="?(.+?)"?$/);
            const filename = match ? match[1] : 'usersmanager_' + new Date().toISOString().slice(0, 16).replace('T', '_').replace(':', '') + '.sql';

            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = filename;
            document.body.appendChild(a);
            a.click();
            a.remove();
            URL.revokeObjectURL(url);
        } catch (err) {
            alert('Erreur : ' + err.message);
        } finally {
            data.loading = false;
        }
    });
</script>
@endpush

@endsection