{% extends "base.html" %}
{% block title %}JS Formatter - EveryTools{% endblock %}
{% block top_title %}JS Formatter{% endblock %}

{% block content %}
<div class="client-tool">
    <div class="tool-header">
        <h1>JavaScript Formatter</h1>
        <p>Basic beautification and minification. For complex code, use a full tool like Prettier.</p>
    </div>
    <div class="split-pane">
        <div class="pane">
            <div class="pane-header">
                <span>Input</span>
                <div>
                    <button class="btn btn-small" onclick="formatJS()">Beautify</button>
                    <button class="btn btn-small" onclick="minifyJS()">Minify</button>
                </div>
            </div>
            <div class="pane-body">
                <textarea id="js-input" placeholder="function hello(){console.log('hi');}"></textarea>
            </div>
        </div>
        <div class="pane">
            <div class="pane-header">
                <span>Output</span>
                <button class="btn btn-small" onclick="copyOutput()"><i class="bi bi-clipboard"></i> Copy</button>
            </div>
            <div class="pane-body">
                <pre id="js-output"></pre>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
// Stash strings, regex, and comments so we don't mangle them.
function protect(src) {
    const stash = [];
    let i = 0;
    let out = "";
    const push = v => { const k = `\u0000__${stash.length}__\u0000`; stash.push(v); return k; };

    while (i < src.length) {
        const c = src[i];
        if (c === "/" && src[i+1] === "/") {
            const end = src.indexOf("\n", i);
            const seg = src.slice(i, end === -1 ? src.length : end);
            out += push(seg);
            i = end === -1 ? src.length : end;
        } else if (c === "/" && src[i+1] === "*") {
            const end = src.indexOf("*/", i);
            const seg = src.slice(i, end === -1 ? src.length : end + 2);
            out += push(seg);
            i = end === -1 ? src.length : end + 2;
        } else if (c === '"' || c === "'" || c === "`") {
            let j = i + 1;
            while (j < src.length && src[j] !== c) {
                if (src[j] === "\\") j += 2;
                else j++;
            }
            out += push(src.slice(i, j + 1));
            i = j + 1;
        } else {
            out += c;
            i++;
        }
    }
    return { code: out, stash };
}

function restore(code, stash) {
    return code.replace(/\u0000__(\d+)__\u0000/g, (_, n) => stash[+n]);
}

function formatJS() {
    const src = document.getElementById("js-input").value;
    const { code, stash } = protect(src);

    let out = "";
    let depth = 0;
    let inParens = 0;
    const pad = () => "  ".repeat(depth);
    let lineStarted = true;

    for (let i = 0; i < code.length; i++) {
        const c = code[i];
        if (c === "{") {
            out = out.trimEnd() + " {\n";
            depth++;
            lineStarted = true;
            i = skipSpace(code, i + 1) - 1;
        } else if (c === "}") {
            depth = Math.max(0, depth - 1);
            out = out.trimEnd() + "\n" + pad() + "}";
            lineStarted = false;
            // Newline after } unless followed by comma/semicolon/paren
            const nx = code[skipSpace(code, i + 1)];
            if (nx && ",;)]".indexOf(nx) === -1) { out += "\n"; lineStarted = true; }
        } else if (c === ";") {
            out += ";\n";
            lineStarted = true;
            i = skipSpace(code, i + 1) - 1;
        } else if (c === "(") {
            inParens++;
            out += c;
        } else if (c === ")") {
            inParens = Math.max(0, inParens - 1);
            out += c;
        } else if (c === "\n" || c === "\r") {
            if (!lineStarted) { out += "\n"; lineStarted = true; }
        } else if (/\s/.test(c)) {
            if (lineStarted) continue;
            out += " ";
        } else {
            if (lineStarted) { out += pad(); lineStarted = false; }
            out += c;
        }
    }

    out = out.replace(/\n{3,}/g, "\n\n");
    document.getElementById("js-output").textContent = restore(out, stash).trim();
}

function skipSpace(s, i) {
    while (i < s.length && /\s/.test(s[i])) i++;
    return i;
}

function minifyJS() {
    const src = document.getElementById("js-input").value;
    const { code, stash } = protect(src);
    const minified = code
        .replace(/\n/g, " ")
        .replace(/\s*([{}();,:=<>+\-*/%!&|?])\s*/g, "$1")
        .replace(/\s+/g, " ")
        .trim();
    document.getElementById("js-output").textContent = restore(minified, stash);
}

function copyOutput() {
    navigator.clipboard.writeText(document.getElementById("js-output").textContent);
}
</script>
{% endblock %}