import React, { useEffect, useState } from 'react';
import { Layout } from '../components/Layout';
import { useNavigate } from 'react-router-dom';
import * as api from '../api';
import type { Collection } from '../types';
import { Upload, Moon, Sun, Info, Archive } from 'lucide-react';
import { ConfirmModal } from '../components/ConfirmModal';
import { importLegacyFiles } from '../utils/importUtils';
import { useTheme } from '../context/ThemeContext';
import { useAuth } from '../context/AuthContext';

export const Settings: React.FC = () => {
    const [collections, setCollections] = useState<Collection[]>([]);
    const navigate = useNavigate();
    const { theme, toggleTheme } = useTheme();
    const { authEnabled, user } = useAuth();

    const [legacyDbImportConfirmation, setLegacyDbImportConfirmation] = useState<{
        isOpen: boolean;
        file: File | null;
        info: null | {
            drawings: number;
            collections: number;
            legacyLatestMigration: string | null;
            currentLatestMigration: string | null;
        };
    }>({ isOpen: false, file: null, info: null });
    const [importError, setImportError] = useState<{ isOpen: boolean; message: string }>({ isOpen: false, message: '' });
    const [importSuccess, setImportSuccess] = useState<{ isOpen: boolean; message: React.ReactNode }>({ isOpen: false, message: '' });
    const [legacyDbImportLoading, setLegacyDbImportLoading] = useState(false);
    const [authToggleLoading, setAuthToggleLoading] = useState(false);
    const [authToggleError, setAuthToggleError] = useState<string | null>(null);
    const [authToggleConfirm, setAuthToggleConfirm] = useState<{ isOpen: boolean; nextEnabled: boolean | null }>({
        isOpen: false,
        nextEnabled: null,
    });
    const [authDisableFinalConfirmOpen, setAuthDisableFinalConfirmOpen] = useState(false);

    const [backupExportExt, setBackupExportExt] = useState<'excalidash' | 'excalidash.zip'>('excalidash');
    const [backupImportConfirmation, setBackupImportConfirmation] = useState<{
        isOpen: boolean;
        file: File | null;
        info: null | {
            formatVersion: number;
            exportedAt: string;
            excalidashBackendVersion: string | null;
            collections: number;
            drawings: number;
        };
    }>({ isOpen: false, file: null, info: null });
    const [backupImportLoading, setBackupImportLoading] = useState(false);
    const [backupImportSuccess, setBackupImportSuccess] = useState(false);
    const [backupImportError, setBackupImportError] = useState<{ isOpen: boolean; message: string }>({ isOpen: false, message: '' });

    const appVersion = import.meta.env.VITE_APP_VERSION || 'Unknown version';
    const buildLabel = import.meta.env.VITE_APP_BUILD_LABEL;

    useEffect(() => {
        const fetchCollections = async () => {
            try {
                const data = await api.getCollections();
                setCollections(data);
            } catch (err) {
                console.error('Failed to fetch collections:', err);
            }
        };
        fetchCollections();
    }, []);

    const setAuthEnabled = async (enabled: boolean) => {
        setAuthToggleLoading(true);
        setAuthToggleError(null);
        try {
            const response = await api.api.post<{ authEnabled: boolean; bootstrapRequired?: boolean }>(
                '/auth/auth-enabled',
                { enabled },
            );

            if (response.data.authEnabled) {
                // Auth enabled -> bootstrap registration only when required.
                window.location.href = response.data.bootstrapRequired ? '/register' : '/login';
                return;
            }

            // Auth disabled -> reload to drop auth gating.
            window.location.reload();
        } catch (err: unknown) {
            let message = 'Failed to update authentication setting';
            if (api.isAxiosError(err)) {
                message =
                    err.response?.data?.message ||
                    err.response?.data?.error ||
                    message;
            }
            setAuthToggleError(message);
        } finally {
            setAuthToggleLoading(false);
        }
    };

    const confirmToggleAuthEnabled = () => {
        if (authEnabled === null) return;
        if (authToggleLoading) return;
        setAuthToggleConfirm({ isOpen: true, nextEnabled: !authEnabled });
    };

    const exportBackup = async () => {
        try {
            const extQuery = backupExportExt === 'excalidash.zip' ? '?ext=zip' : '';
            const response = await api.api.get(`/export/excalidash${extQuery}`, { responseType: 'blob' });
            const blob = new Blob([response.data], { type: 'application/zip' });
            const url = window.URL.createObjectURL(blob);
            const link = document.createElement('a');
            link.href = url;
            const date = new Date().toISOString().split('T')[0];
            link.download = backupExportExt === 'excalidash.zip'
                ? `excalidash-backup-${date}.excalidash.zip`
                : `excalidash-backup-${date}.excalidash`;
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            window.URL.revokeObjectURL(url);
        } catch (err: unknown) {
            console.error('Backup export failed:', err);
            setBackupImportError({ isOpen: true, message: 'Failed to export backup. Please try again.' });
        }
    };

    const verifyBackupFile = async (file: File) => {
        setBackupImportLoading(true);
        try {
            const formData = new FormData();
            formData.append('archive', file);
            const response = await api.api.post<{
                valid: boolean;
                formatVersion: number;
                exportedAt: string;
                excalidashBackendVersion: string | null;
                collections: number;
                drawings: number;
            }>('/import/excalidash/verify', formData, {
                headers: { 'Content-Type': 'multipart/form-data' },
            });

            setBackupImportConfirmation({
                isOpen: true,
                file,
                info: {
                    formatVersion: response.data.formatVersion,
                    exportedAt: response.data.exportedAt,
                    excalidashBackendVersion: response.data.excalidashBackendVersion ?? null,
                    collections: response.data.collections,
                    drawings: response.data.drawings,
                },
            });
        } catch (err: unknown) {
            console.error('Backup verify failed:', err);
            let message = 'Failed to verify backup file.';
            if (api.isAxiosError(err)) {
                message = err.response?.data?.message || err.response?.data?.error || message;
            }
            setBackupImportError({ isOpen: true, message });
        } finally {
            setBackupImportLoading(false);
        }
    };

    const verifyLegacyDbFile = async (file: File) => {
        setLegacyDbImportLoading(true);
        try {
            const formData = new FormData();
            formData.append('db', file);
            const response = await api.api.post<{
                valid: boolean;
                drawings: number;
                collections: number;
                latestMigration: string | null;
                currentLatestMigration: string | null;
            }>('/import/sqlite/legacy/verify', formData, {
                headers: { 'Content-Type': 'multipart/form-data' },
            });

            setLegacyDbImportConfirmation({
                isOpen: true,
                file,
                info: {
                    drawings: response.data.drawings,
                    collections: response.data.collections,
                    legacyLatestMigration: response.data.latestMigration ?? null,
                    currentLatestMigration: response.data.currentLatestMigration ?? null,
                },
            });
        } catch (err: unknown) {
            console.error('Legacy DB verify failed:', err);
            let message = 'Failed to verify legacy database file.';
            if (api.isAxiosError(err)) {
                message = err.response?.data?.message || err.response?.data?.error || message;
            }
            setImportError({ isOpen: true, message });
        } finally {
            setLegacyDbImportLoading(false);
        }
    };

    const handleCreateCollection = async (name: string) => {
        await api.createCollection(name);
        const newCollections = await api.getCollections();
        setCollections(newCollections);
    };

    const handleEditCollection = async (id: string, name: string) => {
        setCollections(prev => prev.map(c => c.id === id ? { ...c, name } : c));
        await api.updateCollection(id, name);
    };

    const handleDeleteCollection = async (id: string) => {
        setCollections(prev => prev.filter(c => c.id !== id));
        await api.deleteCollection(id);
    };

    const handleSelectCollection = (id: string | null | undefined) => {
        if (id === undefined) navigate('/');
        else if (id === null) navigate('/collections?id=unorganized');
        else navigate(`/collections?id=${id}`);
    };



    return (
        <Layout
            collections={collections}
            selectedCollectionId="SETTINGS"
            onSelectCollection={handleSelectCollection}
            onCreateCollection={handleCreateCollection}
            onEditCollection={handleEditCollection}
            onDeleteCollection={handleDeleteCollection}
        >
            <h1 className="text-3xl sm:text-5xl mb-6 sm:mb-8 text-slate-900 dark:text-white pl-1" style={{ fontFamily: 'Excalifont' }}>
                Settings
            </h1>

            {authToggleError && (
                <div className="mb-6 p-4 bg-red-50 dark:bg-red-900/20 border-2 border-red-200 dark:border-red-800 rounded-xl">
                    <p className="text-red-800 dark:text-red-200 font-medium">{authToggleError}</p>
                </div>
            )}

            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6">
                <div className="flex flex-col items-center justify-center gap-3 sm:gap-4 p-6 sm:p-8 bg-white dark:bg-neutral-900 border-2 border-black dark:border-neutral-700 rounded-2xl shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] dark:shadow-[4px_4px_0px_0px_rgba(255,255,255,0.2)]">
                    <div className="w-14 h-14 sm:w-16 sm:h-16 bg-indigo-50 dark:bg-neutral-800 rounded-2xl flex items-center justify-center border-2 border-indigo-100 dark:border-neutral-700">
                        <Archive size={32} className="text-indigo-600 dark:text-indigo-400" />
                    </div>
                    <div className="text-center">
                        <h3 className="text-lg sm:text-xl font-bold text-slate-900 dark:text-white mb-1">Export Backup</h3>
                        <p className="text-sm text-slate-500 dark:text-neutral-400 font-medium">
                            Exports an `.excalidash` archive (zip) organized by collections
                        </p>
                    </div>
                    <div className="w-full flex flex-col items-stretch gap-2 pt-2">
                        <button
                            onClick={exportBackup}
                            className="w-full px-4 py-2 text-sm font-bold rounded-xl border-2 border-black dark:border-neutral-700 bg-indigo-600 text-white shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] hover:-translate-y-0.5 transition-all"
                        >
                            Export
                        </button>
                        <select
                            value={backupExportExt}
                            onChange={(e) => setBackupExportExt(e.target.value as any)}
                            className="w-full px-3 py-2 text-sm font-bold rounded-xl border-2 border-slate-200 dark:border-neutral-700 bg-white dark:bg-neutral-800 text-slate-900 dark:text-white"
                            title="Download name"
                        >
                            <option value="excalidash">.excalidash</option>
                            <option value="excalidash.zip">.excalidash.zip</option>
                        </select>
                    </div>
                </div>

                <div className="relative">
                    <input
                        type="file"
                        accept=".excalidash,.zip"
                        className="hidden"
                        id="settings-import-backup"
                        onChange={async (e) => {
                            const file = (e.target.files || [])[0];
                            if (!file) return;
                            await verifyBackupFile(file);
                            e.target.value = '';
                        }}
                    />
                    <button
                        onClick={() => document.getElementById('settings-import-backup')?.click()}
                        disabled={backupImportLoading}
                        className="w-full h-full flex flex-col items-center justify-center gap-3 sm:gap-4 p-6 sm:p-8 bg-white dark:bg-neutral-900 border-2 border-black dark:border-neutral-700 rounded-2xl shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] dark:shadow-[4px_4px_0px_0px_rgba(255,255,255,0.2)] hover:shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] dark:hover:shadow-[6px_6px_0px_0px_rgba(255,255,255,0.2)] hover:-translate-y-1 transition-all duration-200 group disabled:opacity-50 disabled:cursor-not-allowed"
                    >
                        <div className="w-14 h-14 sm:w-16 sm:h-16 bg-blue-50 dark:bg-neutral-800 rounded-2xl flex items-center justify-center border-2 border-blue-100 dark:border-neutral-700">
                            <Upload size={32} className="text-blue-600 dark:text-blue-400" />
                        </div>
                        <div className="text-center">
                            <h3 className="text-lg sm:text-xl font-bold text-slate-900 dark:text-white mb-1">
                                {backupImportLoading ? 'Verifying…' : 'Import Backup'}
                            </h3>
                            <p className="text-sm text-slate-500 dark:text-neutral-400 font-medium">
                                Merge-import a `.excalidash` backup into your account
                            </p>
                        </div>
                    </button>
                </div>

                <button
                    onClick={confirmToggleAuthEnabled}
                    disabled={authEnabled === null || authToggleLoading || (authEnabled === true && user?.role !== 'ADMIN')}
                    className="flex flex-col items-center justify-center gap-3 sm:gap-4 p-6 sm:p-8 bg-white dark:bg-neutral-900 border-2 border-black dark:border-neutral-700 rounded-2xl shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] dark:shadow-[4px_4px_0px_0px_rgba(255,255,255,0.2)] hover:shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] dark:hover:shadow-[6px_6px_0px_0px_rgba(255,255,255,0.2)] hover:-translate-y-1 transition-all duration-200 group disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] disabled:hover:translate-y-0"
                >
                    <div className="w-14 h-14 sm:w-16 sm:h-16 bg-slate-50 dark:bg-neutral-800 rounded-2xl flex items-center justify-center border-2 border-slate-200 dark:border-neutral-700 group-hover:border-slate-300 dark:group-hover:border-neutral-600 transition-colors">
                        <Info size={32} className="text-slate-700 dark:text-neutral-300" />
                    </div>
                    <div className="text-center">
                        <h3 className="text-lg sm:text-xl font-bold text-slate-900 dark:text-white mb-1">
                            {authEnabled ? 'Authentication: On' : 'Authentication: Off'}
                        </h3>
                        <p className="text-sm text-slate-500 dark:text-neutral-400 font-medium">
                            {authEnabled
                                ? user?.role === 'ADMIN'
                                    ? (authToggleLoading ? 'Disabling…' : 'Disable multi-user login')
                                    : 'Only admins can disable'
                                : authToggleLoading
                                    ? 'Enabling…'
                                    : 'Enable multi-user login'}
                        </p>
                    </div>
                </button>

                <button
                    onClick={toggleTheme}
                    className="flex flex-col items-center justify-center gap-3 sm:gap-4 p-6 sm:p-8 bg-white dark:bg-neutral-900 border-2 border-black dark:border-neutral-700 rounded-2xl shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] dark:shadow-[4px_4px_0px_0px_rgba(255,255,255,0.2)] hover:shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] dark:hover:shadow-[6px_6px_0px_0px_rgba(255,255,255,0.2)] hover:-translate-y-1 transition-all duration-200 group"
                >
                    <div className="w-14 h-14 sm:w-16 sm:h-16 bg-amber-50 dark:bg-neutral-800 rounded-2xl flex items-center justify-center border-2 border-amber-100 dark:border-neutral-700 group-hover:border-amber-200 dark:group-hover:border-neutral-600 transition-colors">
                        {theme === 'light' ? (
                            <Moon size={32} className="text-amber-600 dark:text-amber-400" />
                        ) : (
                            <Sun size={32} className="text-amber-600 dark:text-amber-400" />
                        )}
                    </div>
                    <div className="text-center">
                        <h3 className="text-lg sm:text-xl font-bold text-slate-900 dark:text-white mb-1">
                            {theme === 'light' ? 'Dark Mode' : 'Light Mode'}
                        </h3>
                        <p className="text-sm text-slate-500 dark:text-neutral-400 font-medium">
                            Switch to {theme === 'light' ? 'dark' : 'light'} theme
                        </p>
                    </div>
                </button>

                <div className="flex flex-col items-center justify-center gap-3 sm:gap-4 p-6 sm:p-8 bg-white dark:bg-neutral-900 border-2 border-black dark:border-neutral-700 rounded-2xl shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] dark:shadow-[4px_4px_0px_0px_rgba(255,255,255,0.2)]">
                    <div className="w-14 h-14 sm:w-16 sm:h-16 bg-gray-50 dark:bg-neutral-800 rounded-2xl flex items-center justify-center border-2 border-gray-100 dark:border-neutral-700">
                        <Info size={32} className="text-gray-600 dark:text-gray-400" />
                    </div>
                    <div className="text-center">
                        <h3 className="text-lg sm:text-xl font-bold text-slate-900 dark:text-white mb-1">Version Info</h3>
                        <div className="text-sm text-slate-500 dark:text-neutral-400 font-medium flex flex-col items-center gap-1">
                            <span className="text-base text-slate-900 dark:text-white">
                                {appVersion}
                            </span>
                            {buildLabel && (
                                <span className="text-xs uppercase tracking-wide text-red-500 dark:text-red-400">
                                    {buildLabel}
                                </span>
                            )}
                        </div>
                    </div>
                </div>
            </div>

            <details className="mt-8 bg-white/30 dark:bg-neutral-900/30 border border-slate-200/70 dark:border-neutral-800/70 rounded-2xl p-4 sm:p-6">
                <summary className="cursor-pointer select-none font-bold text-slate-800 dark:text-neutral-200">
                    Advanced / Legacy
                </summary>
                <div className="mt-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6">
                    <div className="relative">
                        <input
                            type="file"
                            multiple
                            accept=".sqlite,.db,.json,.excalidraw"
                            className="hidden"
                            id="settings-import-legacy"
                            onChange={async (e) => {
                                const files = Array.from(e.target.files || []);
                                if (files.length === 0) return;

                                const databaseFile = files.find(f => f.name.endsWith('.sqlite') || f.name.endsWith('.db'));
                                if (databaseFile) {
                                    if (files.length > 1) {
                                        setImportError({ isOpen: true, message: 'Please import legacy database files separately from other files.' });
                                        e.target.value = '';
                                        return;
                                    }

                                    await verifyLegacyDbFile(databaseFile);
                                    e.target.value = '';
                                    return;
                                }

                                const result = await importLegacyFiles(files, null, () => { });

                                if (result.failed > 0) {
                                    setImportError({
                                        isOpen: true,
                                        message: `Import complete with errors.\nSuccess: ${result.success}\nFailed: ${result.failed}\nErrors:\n${result.errors.join('\n')}`
                                    });
                                } else {
                                    setImportSuccess({ isOpen: true, message: `Imported ${result.success} file(s).` });
                                }

                                e.target.value = '';
                            }}
                        />
                        <button
                            onClick={() => document.getElementById('settings-import-legacy')?.click()}
                            disabled={legacyDbImportLoading}
                            className="w-full h-full flex flex-col items-center justify-center gap-3 sm:gap-4 p-6 sm:p-8 bg-white dark:bg-neutral-900 border-2 border-black dark:border-neutral-700 rounded-2xl shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] dark:shadow-[4px_4px_0px_0px_rgba(255,255,255,0.2)] hover:shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] dark:hover:shadow-[6px_6px_0px_0px_rgba(255,255,255,0.2)] hover:-translate-y-1 transition-all duration-200 group"
                        >
                            <div className="w-14 h-14 sm:w-16 sm:h-16 bg-amber-50 dark:bg-neutral-800 rounded-2xl flex items-center justify-center border-2 border-amber-100 dark:border-neutral-700">
                                <Upload size={32} className="text-amber-600 dark:text-amber-400" />
                            </div>
                            <div className="text-center">
                                <h3 className="text-lg sm:text-xl font-bold text-slate-900 dark:text-white mb-1">Legacy Import</h3>
                                <p className="text-sm text-slate-500 dark:text-neutral-400 font-medium">Import `.excalidraw`, legacy JSON, or merge a legacy `.db`</p>
                            </div>
                        </button>
                    </div>
                </div>
            </details>

            <ConfirmModal
                isOpen={legacyDbImportConfirmation.isOpen}
                title="Merge-import legacy database?"
                message={
                    <div className="space-y-2">
                        <div>This will merge legacy data into your account (it will not replace the server database).</div>
                        {legacyDbImportConfirmation.info && (
                            <div className="text-sm text-slate-700 dark:text-neutral-200 space-y-1">
                                <div>Drawings: {legacyDbImportConfirmation.info.drawings}</div>
                                <div>Collections: {legacyDbImportConfirmation.info.collections}</div>
                                <div>Legacy migration: {legacyDbImportConfirmation.info.legacyLatestMigration || 'Unknown'}</div>
                                <div>Current migration: {legacyDbImportConfirmation.info.currentLatestMigration || 'Unknown'}</div>
                            </div>
                        )}
                    </div>
                }
                confirmText="Merge Import"
                cancelText="Cancel"
                onConfirm={async () => {
                    const file = legacyDbImportConfirmation.file;
                    if (!file) return;
                    setLegacyDbImportConfirmation({ isOpen: false, file: null, info: null });

                    const formData = new FormData();
                    formData.append('db', file);

                    try {
                        const response = await api.api.post<{
                            success: boolean;
                            collections: { created: number; updated: number; idConflicts: number };
                            drawings: { created: number; updated: number; idConflicts: number };
                        }>('/import/sqlite/legacy', formData, {
                            headers: { 'Content-Type': 'multipart/form-data' },
                        });

                        setImportSuccess({
                            isOpen: true,
                            message: `Legacy DB imported. Collections: +${response.data.collections.created} / ~${response.data.collections.updated}. Drawings: +${response.data.drawings.created} / ~${response.data.drawings.updated}.`,
                        });
                    } catch (err: unknown) {
                        console.error(err);
                        let message = 'Failed to import legacy database.';
                        if (api.isAxiosError(err)) {
                            message = err.response?.data?.message || err.response?.data?.error || message;
                        }
                        setImportError({ isOpen: true, message });
                    }
                }}
                onCancel={() => setLegacyDbImportConfirmation({ isOpen: false, file: null, info: null })}
            />

            <ConfirmModal
                isOpen={importError.isOpen}
                title="Import Failed"
                message={importError.message}
                confirmText="OK"
                cancelText=""
                showCancel={false}
                isDangerous={false}
                onConfirm={() => setImportError({ isOpen: false, message: '' })}
                onCancel={() => setImportError({ isOpen: false, message: '' })}
            />

            <ConfirmModal
                isOpen={importSuccess.isOpen}
                title="Import Successful"
                message={importSuccess.message}
                confirmText="OK"
                showCancel={false}
                isDangerous={false}
                variant="success"
                onConfirm={() => setImportSuccess({ isOpen: false, message: '' })}
                onCancel={() => setImportSuccess({ isOpen: false, message: '' })}
            />

            <ConfirmModal
                isOpen={authToggleConfirm.isOpen}
                title={authToggleConfirm.nextEnabled ? 'Enable authentication?' : 'Disable authentication?'}
                message={
                    authToggleConfirm.nextEnabled
                        ? 'This will require users to sign in. You will be prompted to set up an admin account immediately.'
                        : (
                            <div className="space-y-2 text-left">
                                <div>
                                    This will turn off authentication for the entire instance.
                                </div>
                                <div className="font-semibold text-rose-700 dark:text-rose-300">
                                    Recommendation: keep authentication enabled unless this instance is fully private.
                                </div>
                            </div>
                        )
                }
                confirmText={authToggleConfirm.nextEnabled ? 'Enable' : 'Continue'}
                cancelText="Cancel"
                isDangerous={!authToggleConfirm.nextEnabled}
                onConfirm={async () => {
                    const nextEnabled = authToggleConfirm.nextEnabled;
                    setAuthToggleConfirm({ isOpen: false, nextEnabled: null });
                    if (typeof nextEnabled !== 'boolean') return;
                    if (!nextEnabled) {
                        setAuthDisableFinalConfirmOpen(true);
                        return;
                    }
                    await setAuthEnabled(nextEnabled);
                }}
                onCancel={() => setAuthToggleConfirm({ isOpen: false, nextEnabled: null })}
            />

            <ConfirmModal
                isOpen={authDisableFinalConfirmOpen}
                title="Final warning: disable authentication?"
                message={
                    <div className="space-y-2 text-left">
                        <div>
                            With authentication off, any user who can access this URL can view and modify all drawings and settings. They can also turn authentication back on and lock you out.
                        </div>
                        <div className="font-semibold text-rose-700 dark:text-rose-300">
                            This is only safe on a trusted private network.
                        </div>
                    </div>
                }
                confirmText="Disable Authentication"
                cancelText="Keep Enabled (Recommended)"
                isDangerous
                onConfirm={async () => {
                    setAuthDisableFinalConfirmOpen(false);
                    await setAuthEnabled(false);
                }}
                onCancel={() => setAuthDisableFinalConfirmOpen(false)}
            />

            <ConfirmModal
                isOpen={backupImportConfirmation.isOpen}
                title="Import backup?"
                message={
                    backupImportConfirmation.info
                        ? `This will merge ${backupImportConfirmation.info.collections} collection(s) and ${backupImportConfirmation.info.drawings} drawing(s) from a Format v${backupImportConfirmation.info.formatVersion} backup exported at ${backupImportConfirmation.info.exportedAt}.`
                        : 'This will merge the backup into your account.'
                }
                confirmText="Import"
                cancelText="Cancel"
                isDangerous={false}
                onConfirm={async () => {
                    const file = backupImportConfirmation.file;
                    if (!file) return;
                    setBackupImportConfirmation({ ...backupImportConfirmation, isOpen: false });
                    setBackupImportLoading(true);
                    try {
                        const formData = new FormData();
                        formData.append('archive', file);
                        await api.api.post('/import/excalidash', formData, {
                            headers: { 'Content-Type': 'multipart/form-data' },
                        });
                        setBackupImportConfirmation({ isOpen: false, file: null, info: null });
                        setBackupImportSuccess(true);
                    } catch (err: unknown) {
                        console.error('Backup import failed:', err);
                        let message = 'Failed to import backup.';
                        if (api.isAxiosError(err)) {
                            message = err.response?.data?.message || err.response?.data?.error || message;
                        }
                        setBackupImportError({ isOpen: true, message });
                        setBackupImportConfirmation({ isOpen: false, file: null, info: null });
                    } finally {
                        setBackupImportLoading(false);
                    }
                }}
                onCancel={() => setBackupImportConfirmation({ isOpen: false, file: null, info: null })}
            />

            <ConfirmModal
                isOpen={backupImportSuccess}
                title="Backup Imported"
                message="Backup imported successfully."
                confirmText="OK"
                showCancel={false}
                isDangerous={false}
                variant="success"
                onConfirm={() => setBackupImportSuccess(false)}
                onCancel={() => setBackupImportSuccess(false)}
            />

            <ConfirmModal
                isOpen={backupImportError.isOpen}
                title="Backup Import Failed"
                message={backupImportError.message}
                confirmText="OK"
                cancelText=""
                showCancel={false}
                isDangerous={false}
                onConfirm={() => setBackupImportError({ isOpen: false, message: '' })}
                onCancel={() => setBackupImportError({ isOpen: false, message: '' })}
            />
        </Layout >
    );
};