{% extends "base.html" %}
{% block title %}Regex Tester - EveryTools{% endblock %}
{% block top_title %}Regex Tester{% endblock %}

{% block content %}
<div class="client-tool">
    <div class="tool-header">
        <h1>Regex Tester</h1>
        <p>Test regular expressions with live match highlighting</p>
    </div>
    <div style="display:flex;gap:.5rem;margin-bottom:1rem;align-items:flex-end">
        <div class="form-group" style="flex:1;margin-bottom:0">
            <label>Regular Expression</label>
            <input type="text" id="regex-pattern" placeholder="e.g. \b\w+@\w+\.\w+\b" oninput="testRegex()">
        </div>
        <div class="form-group" style="width:100px;margin-bottom:0">
            <label>Flags</label>
            <input type="text" id="regex-flags" value="gi" placeholder="gi" oninput="testRegex()" style="width:100%">
        </div>
    </div>
    <div class="form-group">
        <label>Test String</label>
        <textarea id="regex-input" class="text-input" rows="5" placeholder="Enter text to test against..." oninput="testRegex()"></textarea>
    </div>
    <div id="regex-error" style="color:var(--danger);font-size:.85rem;margin-bottom:.5rem"></div>
    <div class="pane" style="margin-bottom:1rem">
        <div class="pane-header"><span>Highlighted Matches</span><span id="regex-count" style="font-size:.8rem;color:var(--text-light)">0 matches</span></div>
        <div class="pane-body">
            <div id="regex-output" style="min-height:80px;white-space:pre-wrap;word-break:break-word;font-family:Consolas,Monaco,monospace;font-size:.9rem;line-height:1.6"></div>
        </div>
    </div>
    <div class="pane">
        <div class="pane-header"><span>Match Details</span></div>
        <div class="pane-body">
            <div id="regex-matches" style="font-size:.85rem;max-height:250px;overflow:auto"></div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<style>
.regex-hl { background: #fff3cd; border-bottom: 2px solid var(--warning); border-radius: 2px; }
.regex-hl:nth-of-type(even) { background: #d1ecf1; border-bottom-color: #17a2b8; }
.match-row { padding: .3rem 0; border-bottom: 1px solid var(--border); display: flex; gap: 1rem; }
.match-idx { color: var(--text-light); min-width: 2rem; }
.match-val { font-family: Consolas,Monaco,monospace; }
.match-pos { color: var(--text-light); font-size: .8rem; }
[data-theme="dark"] .regex-hl { background: rgba(244,162,97,.22); }
[data-theme="dark"] .regex-hl:nth-of-type(even) { background: rgba(23,162,184,.22); border-bottom-color: #17a2b8; }
</style>
<script>
function testRegex() {
    const pattern = document.getElementById("regex-pattern").value;
    const flags = document.getElementById("regex-flags").value;
    const input = document.getElementById("regex-input").value;
    const output = document.getElementById("regex-output");
    const errEl = document.getElementById("regex-error");
    const countEl = document.getElementById("regex-count");
    const matchesEl = document.getElementById("regex-matches");

    errEl.textContent = "";
    if (!pattern) {
        output.textContent = input;
        countEl.textContent = "0 matches";
        matchesEl.innerHTML = '<span style="color:var(--text-light)">Enter a pattern to see matches.</span>';
        return;
    }

    let regex;
    try {
        regex = new RegExp(pattern, flags);
    } catch (e) {
        errEl.textContent = e.message;
        output.textContent = input;
        countEl.textContent = "0 matches";
        matchesEl.innerHTML = "";
        return;
    }

    const matches = [];
    let match;
    const allMatches = flags.includes("g") ? input.matchAll(regex) : ((match = regex.exec(input)) ? [match] : []);

    let highlighted = "";
    let lastIdx = 0;
    let count = 0;

    for (const m of allMatches) {
        const start = m.index;
        const end = start + m[0].length;
        highlighted += escapeHtml(input.slice(lastIdx, start));
        highlighted += `<span class="regex-hl">${escapeHtml(m[0])}</span>`;
        lastIdx = end;
        matches.push({ index: count, value: m[0], start, end, groups: m.slice(1) });
        count++;
        if (count > 1000) break;
    }
    highlighted += escapeHtml(input.slice(lastIdx));

    output.innerHTML = highlighted || escapeHtml(input);
    countEl.textContent = count + " match" + (count !== 1 ? "es" : "");

    if (matches.length === 0) {
        matchesEl.innerHTML = '<span style="color:var(--text-light)">No matches found.</span>';
    } else {
        matchesEl.innerHTML = matches.map(m => {
            let groups = "";
            if (m.groups.length) groups = " &nbsp; groups: " + m.groups.map((g,i) => `<span style="color:var(--primary)">[${i+1}]</span> ${escapeHtml(g||"")}`).join(", ");
            return `<div class="match-row"><span class="match-idx">#${m.index+1}</span><span class="match-val">${escapeHtml(m.value)}</span><span class="match-pos">[${m.start}:${m.end}]</span>${groups}</div>`;
        }).join("");
    }
}

function escapeHtml(s) { return s.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;"); }
</script>
{% endblock %}