/* Makenotwork — SyncKit dashboard tabs (project + user).
 *
 * Loaded once globally (base.html), like synckit-billing.js. Each tab partial
 * calls window.initSyncKitTab(config) on render to wire its create form and
 * pass tab-specific bits (edit-control classes, whether Regenerate shows the
 * new key inline, the create-form mode). All table-row buttons call the global
 * syncKit* functions below. No template value is ever interpolated into a JS
 * string: ids/slugs/names arrive via data-* attributes, the project list via a
 * <template> of <option>s — so titles/slugs can't break out of a string. */
'use strict';

(function () {
    // Tab-specific config, refreshed on each initSyncKitTab() call (tabs are
    // re-rendered HTMX partials; the script itself loads once).
    var cfg = {
        editInputClass: 'proj-synckit-slug-input input--sm w-120',
        editBtnClass: 'proj-synckit-btn-row',
        regenInline: false,
    };

    function netError() { showToast('Network error. Please check your connection and try again.'); }
    function reloadTab() { document.getElementById('tab-synckit').click(); }

    // A "Copy" button that copies `text` and briefly flips its label. Built via
    // addEventListener so the secret key never lands in an inline onclick string.
    function makeCopyButton(text, className) {
        var btn = document.createElement('button');
        btn.type = 'button';
        btn.className = className;
        btn.textContent = 'Copy';
        btn.addEventListener('click', function () {
            navigator.clipboard.writeText(text).then(function () {
                btn.textContent = 'Copied';
                setTimeout(function () { btn.textContent = 'Copy'; }, 1500);
            });
        });
        return btn;
    }

    window.syncKitCopyKey = function (event, key) {
        navigator.clipboard.writeText(key).then(function () {
            var btn = event.target;
            var orig = btn.textContent;
            btn.textContent = 'Copied';
            setTimeout(function () { btn.textContent = orig; }, 1500);
        });
    };

    window.syncKitRegenKey = function (appId) {
        if (!confirm('Regenerate API key? All existing clients using the current key will stop working.')) return;
        fetch('/api/sync/apps/' + appId + '/regenerate-key', {
            method: 'POST',
            credentials: 'same-origin',
            headers: csrfHeaders(),
        }).then(function (res) {
            if (!res.ok) { showToast('Failed to regenerate key.'); return; }
            if (!cfg.regenInline) { reloadTab(); return; }
            // Project tab: reveal the new key inline with a copy button.
            return res.json().then(function (data) {
                var display = document.getElementById('synckit-key-display-' + appId);
                if (display && data.api_key) {
                    var parent = display.parentElement;
                    parent.innerHTML = '';
                    var code = document.createElement('code');
                    code.className = 'proj-synckit-code--wrap';
                    code.textContent = data.api_key;
                    parent.appendChild(code);
                    parent.appendChild(document.createTextNode(' '));
                    parent.appendChild(makeCopyButton(data.api_key, 'btn-small btn-secondary proj-synckit-btn-row'));
                    parent.appendChild(document.createTextNode(' '));
                    var warn = document.createElement('span');
                    warn.className = 'form-hint proj-synckit-hint-warn';
                    warn.textContent = 'Save this key now: it cannot be shown again.';
                    parent.appendChild(warn);
                }
                showToast('Key regenerated. Copy it now: it will not be shown again.');
            });
        }).catch(netError);
    };

    window.syncKitDeleteApp = function (appId, name) {
        if (!confirm('Delete sync app "' + name + '"? This will remove all devices and sync data for this app.')) return;
        fetch('/api/sync/apps/' + appId, {
            method: 'DELETE',
            credentials: 'same-origin',
            headers: csrfHeaders(),
        }).then(function (res) {
            if (res.ok) { reloadTab(); } else { showToast('Failed to delete app.'); }
        }).catch(netError);
    };

    window.syncKitShowSlugForm = function (appId, currentSlug) {
        var cell = document.getElementById('synckit-slug-cell-' + appId);
        if (!cell) return;
        cell.innerHTML = '';
        var input = document.createElement('input');
        input.type = 'text';
        input.value = currentSlug;
        input.placeholder = 'e.g. goingson';
        input.className = cfg.editInputClass;
        cell.appendChild(input);
        cell.appendChild(document.createTextNode(' '));
        var saveBtn = document.createElement('button');
        saveBtn.className = 'btn-small ' + cfg.editBtnClass;
        saveBtn.textContent = 'Save';
        saveBtn.addEventListener('click', function () {
            var slug = input.value.trim();
            if (!slug) return;
            fetch('/api/sync/apps/' + appId + '/slug', {
                method: 'PUT',
                credentials: 'same-origin',
                headers: { 'Content-Type': 'application/json', ...csrfHeaders() },
                body: JSON.stringify({ slug: slug }),
            }).then(function (res) {
                if (res.ok) {
                    reloadTab();
                    showToast('Update slug set to "' + slug + '".');
                } else {
                    res.text().then(function (t) { showToast(t || 'Failed to set slug.'); });
                }
            }).catch(netError);
        });
        cell.appendChild(saveBtn);
        cell.appendChild(document.createTextNode(' '));
        var cancelBtn = document.createElement('button');
        cancelBtn.className = 'btn-small secondary ' + cfg.editBtnClass;
        cancelBtn.textContent = 'Cancel';
        cancelBtn.addEventListener('click', reloadTab);
        cell.appendChild(cancelBtn);
    };

    window.syncKitShowLinkForm = function (appId) {
        var cell = document.getElementById('synckit-link-cell-' + appId);
        if (!cell) return;
        cell.innerHTML = '';
        var select = document.createElement('select');
        select.id = 'synckit-link-select-' + appId;
        select.className = 'user-synckit-edit-select input--sm';
        var noneOpt = document.createElement('option');
        noneOpt.value = '';
        noneOpt.textContent = 'None';
        select.appendChild(noneOpt);
        // Options come from a server-rendered <template> (HTML-escaped), not from
        // values interpolated into this script.
        var tpl = document.getElementById('synckit-projects-options');
        if (tpl && tpl.content) {
            tpl.content.querySelectorAll('option').forEach(function (opt) {
                select.appendChild(opt.cloneNode(true));
            });
        }
        cell.appendChild(select);
        cell.appendChild(document.createTextNode(' '));
        var saveBtn = document.createElement('button');
        saveBtn.className = 'btn-small user-synckit-edit-btn';
        saveBtn.textContent = 'Save';
        saveBtn.addEventListener('click', function () { window.syncKitSaveLink(appId); });
        cell.appendChild(saveBtn);
        cell.appendChild(document.createTextNode(' '));
        var cancelBtn = document.createElement('button');
        cancelBtn.className = 'btn-small secondary user-synckit-edit-btn';
        cancelBtn.textContent = 'Cancel';
        cancelBtn.addEventListener('click', reloadTab);
        cell.appendChild(cancelBtn);
    };

    window.syncKitSaveLink = function (appId) {
        var sel = document.getElementById('synckit-link-select-' + appId);
        if (!sel) return;
        var projectId = sel.value;
        fetch('/api/sync/apps/' + appId + '/link', {
            method: 'PUT',
            credentials: 'same-origin',
            headers: { 'Content-Type': 'application/json', ...csrfHeaders() },
            body: JSON.stringify({ project_id: projectId || null, item_id: null }),
        }).then(function (res) {
            if (res.ok) { reloadTab(); } else { showToast('Failed to update link.'); }
        }).catch(netError);
    };

    // Project tab: render the just-created app's key inline (one-time reveal).
    function showCreatedKeyInline(statusEl, apiKey) {
        statusEl.className = 'proj-synckit-create-status--reset';
        statusEl.innerHTML = '';
        var wrap = document.createElement('div');
        wrap.className = 'proj-synckit-new-key';
        var heading = document.createElement('p');
        heading.className = 'proj-synckit-new-key-heading';
        heading.textContent = 'Save this API key now: it cannot be shown again.';
        wrap.appendChild(heading);
        var code = document.createElement('code');
        code.className = 'proj-synckit-code--selectable';
        code.textContent = apiKey;
        wrap.appendChild(code);
        wrap.appendChild(document.createTextNode(' '));
        wrap.appendChild(makeCopyButton(apiKey, 'btn-small btn-secondary proj-synckit-btn-row'));
        var doneBtn = document.createElement('button');
        doneBtn.type = 'button';
        doneBtn.className = 'btn-small proj-synckit-btn-tight';
        doneBtn.textContent = 'Done';
        doneBtn.addEventListener('click', reloadTab);
        wrap.appendChild(doneBtn);
        statusEl.appendChild(wrap);
    }

    function wireCreateForm() {
        var form = document.getElementById('synckit-create-form');
        if (!form) return;
        form.addEventListener('submit', function (e) {
            e.preventDefault();
            var nameInput = document.getElementById('synckit-app-name');
            var name = nameInput.value.trim();
            if (!name) return;

            var body = { name: name };
            if (cfg.create && cfg.create.mode === 'project') {
                if (cfg.create.projectId) body.project_id = cfg.create.projectId;
            } else {
                var projectSelect = document.getElementById('synckit-app-project');
                var projectId = projectSelect ? projectSelect.value : '';
                if (projectId) body.project_id = projectId;
            }

            fetch('/api/sync/apps', {
                method: 'POST',
                credentials: 'same-origin',
                headers: { 'Content-Type': 'application/json', ...csrfHeaders() },
                body: JSON.stringify(body),
            }).then(function (res) {
                var statusEl = document.getElementById('synckit-create-status');
                if (res.ok) {
                    // User tab just reloads; project tab reveals the key inline.
                    if (!cfg.create || cfg.create.mode !== 'project') { reloadTab(); return; }
                    return res.json().then(function (data) {
                        if (statusEl && data.api_key) showCreatedKeyInline(statusEl, data.api_key);
                    });
                }
                return res.text().then(function (t) {
                    if (!statusEl) return;
                    statusEl.className = (cfg.create && cfg.create.errorClass) || 'proj-synckit-create-status--error';
                    statusEl.textContent = t || 'Failed to create app.';
                });
            }).catch(function () {
                var statusEl = document.getElementById('synckit-create-status');
                if (!statusEl) return;
                statusEl.className = (cfg.create && cfg.create.errorClass) || 'proj-synckit-create-status--error';
                statusEl.textContent = 'Network error. Please check your connection and try again.';
            });
        });
    }

    window.initSyncKitTab = function (config) {
        cfg = config || {};
        if (window.initSyncKitBilling) window.initSyncKitBilling();
        wireCreateForm();
    };
})();