{% import 'v3/partials/_macros.html' as ui %}
{# No inline script: static/v3/js/pages/backup-restore.js runs this page. Its
   buttons name an action (data-action) for one delegated listener. The page
   registry (static/v3/js/core/registry.js) starts it when this root appears
   and stops it when the partial is swapped away. #}
<div class="space-y-6" id="backup-restore-root" data-page="backup-restore">

    <!-- Security warning -->
    <div class="bg-red-50 border border-red-200 rounded-lg p-4">
        <div class="flex">
            <div class="flex-shrink-0">
                <i class="fas fa-exclamation-triangle text-red-600"></i>
            </div>
            <div class="ml-3">
                <h3 class="text-sm font-medium text-red-800">Backup files contain secrets in plaintext</h3>
                <div class="mt-1 text-sm text-red-700">
                    Your API keys (weather, Spotify, YouTube, GitHub, etc.) and any saved WiFi passwords
                    are stored inside the backup ZIP as plain text. Treat the file like a password —
                    store it somewhere private and delete it when you no longer need it.
                </div>
            </div>
        </div>
    </div>

    <!-- Export card -->
    <div class="bg-white rounded-lg shadow p-6">
        <div class="border-b border-gray-200 pb-4 mb-6">
            <div class="flex items-center justify-between">
                <div>
                    <h2 class="text-lg font-semibold text-gray-900">Export backup</h2>
                    <p class="mt-1 text-sm text-gray-600">
                        Download a single ZIP with all of your settings so you can restore it later.
                    </p>
                </div>
                <button type="button" data-action="export" id="export-backup-btn"
                        class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700">
                    <i class="fas fa-download mr-2"></i>
                    Download backup
                </button>
            </div>
        </div>
        <div id="export-preview" class="text-sm text-gray-600">
            <div class="animate-pulse">Loading summary…</div>
        </div>
    </div>

    <!-- Restore card -->
    <div class="bg-white rounded-lg shadow p-6">
        <div class="border-b border-gray-200 pb-4 mb-6">
            <h2 class="text-lg font-semibold text-gray-900">Restore from backup</h2>
            <p class="mt-1 text-sm text-gray-600">
                Upload a backup ZIP exported from this or another LEDMatrix install.
                You'll see a summary before anything is written to disk.
            </p>
        </div>

        <div class="space-y-4">
            <div>
                <label for="restore-file-input" class="block text-sm font-medium text-gray-700 mb-2">Backup file</label>
                <input type="file" id="restore-file-input" accept=".zip"
                       class="block w-full text-sm text-gray-700 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-medium file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100">
            </div>

            <div>
                <button type="button" data-action="inspect" id="validate-restore-btn"
                        class="inline-flex items-center px-3 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                    <i class="fas fa-check-circle mr-2"></i>
                    Inspect file
                </button>
            </div>

            <div id="restore-preview" class="hidden bg-gray-50 border border-gray-200 rounded-md p-4">
                <h3 class="text-sm font-medium text-gray-900 mb-2">Backup contents</h3>
                <dl id="restore-preview-body" class="text-sm text-gray-700 space-y-1"></dl>

                <h3 class="text-sm font-medium text-gray-900 mt-4 mb-2">Choose what to restore</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-2 text-sm text-gray-700">
                    <label class="flex items-center gap-2"><input type="checkbox" id="opt-config" checked> <span>Main configuration</span>{{ ui.help_tip('Restore config.json — display settings, schedules, location, and plugin configuration.', 'Main configuration') }}</label>
                    <label class="flex items-center gap-2"><input type="checkbox" id="opt-secrets" checked> <span>API keys (secrets)</span>{{ ui.help_tip('Restore config_secrets.json — your weather, sports, and other service API keys.\nLeave off if you prefer to re-enter keys by hand.', 'API keys') }}</label>
                    <label class="flex items-center gap-2"><input type="checkbox" id="opt-wifi" checked> <span>WiFi configuration</span>{{ ui.help_tip('Restore saved WiFi network names and credentials.', 'WiFi configuration') }}</label>
                    <label class="flex items-center gap-2"><input type="checkbox" id="opt-fonts" checked> <span>User-uploaded fonts</span>{{ ui.help_tip('Restore any custom fonts you uploaded via the Fonts tab.', 'User-uploaded fonts') }}</label>
                    <label class="flex items-center gap-2"><input type="checkbox" id="opt-plugin-uploads" checked> <span>Plugin image uploads</span>{{ ui.help_tip('Restore images and files that plugins let you upload (logos, backgrounds, etc.).', 'Plugin image uploads') }}</label>
                    <label class="flex items-center gap-2"><input type="checkbox" id="opt-reinstall" checked> <span>Reinstall missing plugins</span>{{ ui.help_tip('After restoring, re-download any plugins that were installed in the backup but are missing now.', 'Reinstall missing plugins') }}</label>
                </div>

                <div class="mt-4 flex gap-2">
                    <button type="button" data-action="restore" id="run-restore-btn"
                            class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-green-600 hover:bg-green-700">
                        <i class="fas fa-upload mr-2"></i>
                        Restore now
                    </button>
                    <button type="button" data-action="cancel"
                            class="inline-flex items-center px-3 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                        Cancel
                    </button>
                </div>
            </div>

            <div id="restore-result" class="hidden"></div>
        </div>
    </div>

    <!-- History card -->
    <div class="bg-white rounded-lg shadow p-6">
        <div class="border-b border-gray-200 pb-4 mb-6">
            <div class="flex items-center justify-between">
                <div>
                    <h2 class="text-lg font-semibold text-gray-900">Backup history</h2>
                    <p class="mt-1 text-sm text-gray-600">Previously exported backups stored on this device.</p>
                </div>
                <button type="button" data-action="refresh"
                        class="inline-flex items-center px-3 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                    <i class="fas fa-sync-alt mr-2"></i>
                    Refresh
                </button>
            </div>
        </div>
        <div id="backup-history" class="text-sm text-gray-600">Loading…</div>
    </div>

</div>