// ==========================================
// hotkeys.js: HELP MENU RENDERING
// ==========================================

/**
 * Help content — keep in sync with keyboard.js tool bindings.
 * Each section: { title, hint?, tone?, rows: [{ action, keys }] }
 * keys: string or string[] (rendered as separate <kbd> chips)
 */
window.HELP_SECTIONS = [
    {
        id: "workspace",
        title: "Workspace",
        hint: "Switch between annotating and designing fillable fields",
        tone: "cyan",
        rows: [
            { action: "Form mode (on Pointer)", keys: "F" },
            { action: "Editor mode (from Form)", keys: "E" },
            { action: "In Editor → Edit / Stamp tool", keys: "E" },
            { action: "Toggle Editor ↔ Form", keys: ["M", "Header switch"] },
            { action: "Pointer / Select", keys: "V" },
            { action: "Deselect / Select mode", keys: "Esc" }
        ]
    },
    {
        id: "form-tools",
        title: "Form mode tools",
        hint: "Only while Form workspace is active",
        tone: "violet",
        rows: [
            { action: "Form: Text field", keys: "T" },
            { action: "Form: Checkbox", keys: "C" },
            { action: "Form: Radio button", keys: "R" },
            { action: "Form: Dropdown", keys: "D" },
            { action: "Form: Signature (name line)", keys: "G" },
            { action: "Place / size a field", keys: "Click-drag on page" },
            { action: "Resize selected field", keys: ["Corner handle", "W / H"] },
            { action: "Edit dropdown choices", keys: "Options… on field" },
            { action: "Radio group", keys: "Same name + unique values" },
            { action: "Save Project (re-editable)", keys: "Ctrl + S · File → Save Project (.ccspdf)" },
            { action: "Export PDF (flattened)", keys: "File → Export PDF (.pdf)" }
        ]
    },
    {
        id: "editor-tools",
        title: "Editor tools",
        hint: "Annotate and stamp (Editor workspace)",
        tone: "coral",
        rows: [
            { action: "Text box", keys: "T" },
            { action: "Rectangle", keys: "R" },
            { action: "Circle / Ellipse", keys: "O" },
            { action: "Line", keys: "L" },
            { action: "Redact (select text)", keys: "D" },
            { action: "Snip & Move", keys: "S" },
            { action: "Table / Grid", keys: "G" },
            { action: "Insert image", keys: "I" },
            { action: "Insert signature", keys: "N" },
            { action: "Edit / Stamp (vacuum)", keys: "E" }
        ]
    },
    {
        id: "objects",
        title: "Canvas & objects",
        tone: "slate",
        rows: [
            { action: "X-Ray (see through layers)", keys: "X" },
            { action: "Delete selection", keys: ["Del", "Backspace"] },
            { action: "Clone selection", keys: "Alt + Drag" },
            { action: "Copy selection", keys: "Ctrl + C" },
            { action: "Paste at cursor", keys: "Ctrl + V" },
            { action: "New objects land on top", keys: "(auto max z + 1)" },
            { action: "Bring to front", keys: "]" },
            { action: "Send backward one step", keys: "[" },
            { action: "Lock aspect / axis while drag", keys: "Shift + Drag" },
            { action: "Snap edges / abut (default)", keys: "Drag near edges" },
            { action: "Free move (no snap)", keys: "Ctrl + Drag" },
            { action: "Nudge 1px (undo coalesces)", keys: "Arrow keys" },
            { action: "Nudge 10px", keys: "Shift + Arrow" }
        ]
    },
    {
        id: "nav",
        title: "Navigation",
        tone: "slate",
        rows: [
            { action: "Zoom in / out", keys: ["Ctrl + Scroll", "+", "−"] },
            { action: "Scroll page vertically", keys: "Mouse wheel" },
            { action: "Scroll page horizontally", keys: ["Shift + Scroll", "Ctrl + Shift + Scroll"] }
        ]
    },
    {
        id: "history",
        title: "History & files",
        tone: "slate",
        rows: [
            { action: "Undo", keys: "Ctrl + Z" },
            { action: "Redo", keys: ["Ctrl + Y", "Ctrl + Shift + Z"] },
            { action: "Save project (.ccspdf)", keys: "Ctrl + S" }
        ]
    },
    {
        id: "power",
        title: "Power moves",
        tone: "amber",
        rows: [
            { action: "Marquee select", keys: "Drag in Pointer mode" },
            { action: "Text vacuum (stamp)", keys: "Drag in Edit mode" },
            { action: "Redact selected text", keys: "Drag or click in Redact" },
            { action: "Cut canvas snippet", keys: "Drag in Snip mode" },
            { action: "Copy canvas snippet", keys: "Alt + Drag in Snip" },
            { action: "Toggle pixelated render", keys: "Toolbar → Smoothing" }
        ]
    }
];

// Back-compat for anything still reading SHORTCUTS
window.SHORTCUTS = (function () {
    const out = {};
    (window.HELP_SECTIONS || []).forEach((sec) => {
        const map = {};
        (sec.rows || []).forEach((row) => {
            const k = Array.isArray(row.keys) ? row.keys.join("  ·  ") : String(row.keys);
            map[row.action] = k;
        });
        out[sec.title] = map;
    });
    return out;
})();

function escapeHtml(str) {
    return String(str)
        .replace(/&/g, "&amp;")
        .replace(/</g, "&lt;")
        .replace(/>/g, "&gt;")
        .replace(/"/g, "&quot;");
}

function renderKeyChips(keys) {
    const list = Array.isArray(keys) ? keys : [keys];
    return list
        .map((k, i) => {
            const chip = `<kbd class="help-kbd">${escapeHtml(k)}</kbd>`;
            if (i === 0) return chip;
            return `<span class="help-key-sep">or</span>${chip}`;
        })
        .join("");
}

window.renderHelpModal = function () {
    const container = document.getElementById("hotkeysContainer");
    if (!container) return;

    const sections = window.HELP_SECTIONS || [];
    // Balanced two-column pack by row count (stable visual weight)
    const left = [];
    const right = [];
    let leftN = 0;
    let rightN = 0;
    sections.forEach((sec) => {
        const n = (sec.rows && sec.rows.length) || 0;
        if (leftN <= rightN) {
            left.push(sec);
            leftN += n + 2; // + heading weight
        } else {
            right.push(sec);
            rightN += n + 2;
        }
    });

    const renderCol = (secs) =>
        secs
            .map(
                (sec) => `
        <section class="help-section help-tone-${escapeHtml(sec.tone || "slate")}">
            <header class="help-section-head">
                <h4 class="help-section-title">${escapeHtml(sec.title)}</h4>
                ${sec.hint ? `<p class="help-section-hint">${escapeHtml(sec.hint)}</p>` : ""}
            </header>
            <ul class="help-rows">
                ${(sec.rows || [])
                    .map(
                        (row) => `
                <li class="help-row">
                    <span class="help-action">${escapeHtml(row.action)}</span>
                    <span class="help-keys">${renderKeyChips(row.keys)}</span>
                </li>`
                    )
                    .join("")}
            </ul>
        </section>`
            )
            .join("");

    container.innerHTML = `
        <div class="help-grid">
            <div class="help-col">${renderCol(left)}</div>
            <div class="help-col">${renderCol(right)}</div>
        </div>`;
};

window.resolveHowToHref = function () {
    const path = String(location.pathname || "").replace(/\\/g, "/");
    // Packaged layouts serve the app from .../app/index.html with docs/ next to app/.
    if (/\/app\/(?:index\.html)?$/i.test(path)) return "../docs/index.html";
    return "docs/index.html";
};

window.openHowToDoc = function (ev) {
    if (ev) ev.preventDefault();
    const wv = window.chrome && window.chrome.webview;
    if (window.__CCS_SHELL__ === "webview2" && wv) {
        try {
            wv.postMessage({ type: "open-docs" });
            return;
        } catch (_) { /* fall through to a normal tab */ }
    }
    const href = window.resolveHowToHref();
    window.open(href, "_blank", "noopener");
};

document.getElementById("helpBtn").addEventListener("click", () => {
    const m = APP.DOM.helpModal;
    if (m.style.display === "flex") m.style.display = "none";
    else {
        window.renderHelpModal();
        m.style.display = "flex";
    }
});
document.getElementById("closeHelpBtn").addEventListener("click", () => {
    APP.DOM.helpModal.style.display = "none";
});

const helpHowToLink = document.getElementById("helpHowToLink");
if (helpHowToLink) {
    helpHowToLink.setAttribute("href", window.resolveHowToHref());
    helpHowToLink.addEventListener("click", window.openHowToDoc);
}
