// LinkSync Options Page Script

document.addEventListener("DOMContentLoaded", async () => {
    const statusEl = document.getElementById("status");
    const syncInfoEl = document.getElementById("sync-info");

    const settings = await browser.storage.local.get([
        "linksync_server_url",
        "linksync_api_key",
        "linksync_sync_mode",
        "linksync_deletions",
        "linksync_auto_sync",
        "linksync_last_sync",
    ]);

    document.getElementById("server-url").value = settings.linksync_server_url || "http://localhost:5000";
    document.getElementById("api-key").value = settings.linksync_api_key || "";
    document.getElementById("sync-mode").value = settings.linksync_sync_mode || "bi-directional";
    document.getElementById("deletions").checked = settings.linksync_deletions === true;
    document.getElementById("auto-sync").checked = settings.linksync_auto_sync === true;

    if (settings.linksync_last_sync) {
        syncInfoEl.textContent = `Last sync: ${new Date(settings.linksync_last_sync).toLocaleString()}`;
    }

    document.getElementById("test-btn").addEventListener("click", async () => {
        try {
            const url = document.getElementById("server-url").value.replace(/\/+$/, "");
            const response = await fetch(`${url}/health`, { signal: AbortSignal.timeout(5000) });
            if (response.ok) {
                showStatus("Connection successful!", "success");
            } else {
                showStatus(`Server returned ${response.status}`, "error");
            }
        } catch (e) {
            showStatus(`Connection failed: ${e.message}`, "error");
        }
    });

    document.getElementById("sync-form").addEventListener("submit", async (e) => {
        e.preventDefault();
        await browser.storage.local.set({
            linksync_server_url: document.getElementById("server-url").value.replace(/\/+$/, ""),
            linksync_api_key: document.getElementById("api-key").value,
            linksync_sync_mode: document.getElementById("sync-mode").value,
            linksync_deletions: document.getElementById("deletions").checked,
            linksync_auto_sync: document.getElementById("auto-sync").checked,
        });
        showStatus("Settings saved successfully", "success");
    });

    document.getElementById("sync-now-btn").addEventListener("click", async () => {
        try {
            const result = await browser.runtime.sendMessage({ type: "SYNC_NOW" });
            if (result && result.success) {
                syncInfoEl.textContent = `Last sync: ${new Date().toLocaleString()} (${result.actions?.length || 0} actions)`;
                showStatus("Sync completed", "success");
            } else {
                showStatus(`Sync failed: ${result?.error}`, "error");
            }
        } catch (e) {
            showStatus(`Sync error: ${e.message}`, "error");
        }
    });

    function showStatus(message, type) {
        statusEl.textContent = message;
        statusEl.className = type;
        setTimeout(() => { statusEl.className = ""; }, 3000);
    }
});