/**
 * Settings > Data & Privacy — export and account deletion
 */
const { html } = window;
const { useState, useCallback } = hooks;

export default function DataSection() {
    const [exporting, setExporting] = useState(false);
    const [deleting, setDeleting] = useState(false);

    const exportData = useCallback(async () => {
        setExporting(true);
        try {
            await sw.api.dataPortability.exportMe();
            sw.toast('Export started \u2014 you will receive a download link shortly', 'success');
        } catch (e) { sw.toast(e.message, 'error'); }
        finally { setExporting(false); }
    }, []);

    const deleteAccount = useCallback(async () => {
        const ok = await sw.confirm(
            'Are you sure you want to delete your account? This action is permanent and cannot be undone. All your data, conversations, and settings will be permanently deleted.',
            true,
        );
        if (!ok) return;
        setDeleting(true);
        try {
            await sw.api.dataPortability.deleteAccount({ confirm: true });
            sw.toast('Account deletion initiated', 'success');
        } catch (e) { sw.toast(e.message, 'error'); }
        finally { setDeleting(false); }
    }, []);

    return html`
        <div>
            <div class="settings-section">
                <h3>Export Your Data</h3>
                <p class="text-muted" style="font-size:13px;margin:0 0 12px;">
                    Download a copy of all your data including conversations, settings, and memories.
                    The export will be prepared and a download link will be provided.
                </p>
                <button class="btn-md btn-primary" disabled=${exporting} onClick=${exportData}>
                    ${exporting ? 'Preparing\u2026' : 'Export My Data'}
                </button>
            </div>

            <div class="settings-section" style="margin-top:24px;border-top:1px solid var(--border);padding-top:20px;">
                <h3 style="color:var(--danger);">Danger Zone</h3>
                <p class="text-muted" style="font-size:13px;margin:0 0 12px;">
                    Permanently delete your account and all associated data. This action cannot be undone.
                    We recommend exporting your data before proceeding.
                </p>
                <button class="btn-md btn-danger" disabled=${deleting} onClick=${deleteAccount}>
                    ${deleting ? 'Deleting\u2026' : 'Delete My Account'}
                </button>
            </div>
        </div>
    `;
}
