document.addEventListener("DOMContentLoaded", () => {
    const panel = document.querySelector("[data-settings-import-panel]");
    const toggle = document.querySelector("[data-settings-import-toggle]");
    const submit = document.querySelector("[data-settings-import-submit]");
    const input = document.querySelector("[data-settings-import-json]");
    const csrf = document.querySelector('input[name="csrf_token"]')?.value || "";

    toggle?.addEventListener("click", () => {
        if (!panel) return;
        panel.hidden = !panel.hidden;
        if (!panel.hidden) input?.focus();
    });

    submit?.addEventListener("click", async () => {
        const body = input?.value.trim() || "";
        if (!body) {
            window.WarpBoxAccountUI.toast("Paste settings JSON first.", "warning");
            return;
        }

        const response = await fetch("/account/settings/import.json", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "X-CSRF-Token": csrf,
            },
            body,
        });

        const payload = await response.json().catch(() => ({}));
        if (!response.ok) {
            window.WarpBoxAccountUI.toast(payload.error || "Settings import failed.", "error");
            return;
        }

        window.WarpBoxAccountUI.toast(`Imported ${payload.applied || 0} settings.`, "success");
        window.setTimeout(() => window.location.reload(), 700);
    });
});