const input = document.getElementById('input');
const transformed = document.getElementById('transformed');
const preview = document.getElementById('preview');

input.addEventListener('input', update);

function renderPreview(raw) {
    // 1. Markdown Parse (Pehle markdown convert karein)
    let html = marked.parse(raw);

    // 2. Render Display Math ($$ .. $$)
    // Yeh logic sirf tabhi replace karega jab closing $$ mil jaaye
    html = html.replace(/\$\$([\s\S]+?)\$\$/g, (match, expr) => {
        try {
            // KaTeX render check
            return katex.renderToString(expr.trim(), {
                displayMode: true,
                throwOnError: true // Galti hone par catch block mein bhej dega
            });
        } catch (e) {
            return match; // Agar invalid LaTeX hai toh original text ($$..) hi rehne do
        }
    });

    // 3. Render Inline Math ($ .. $)
    // Negative lookbehind use kiya hai taaki $$ ko target na kare
    html = html.replace(/(?<!\$)\$([^\$\n]+?)\$(?!\$)/g, (match, expr) => {
        try {
            return katex.renderToString(expr.trim(), {
                displayMode: false,
                throwOnError: true
            });
        } catch (e) {
            return match; // Invalid hone par render mat karo, as-is rehne do
        }
    });

    preview.innerHTML = html;
}

function update() {
    const val = input.value;

    // Transformed View Logic (Sirf valid pairs ko replace karega)
    let transformedText = val;
    let displayCount = 0;

    // Display Math replace for Transformed View
    transformedText = transformedText.replace(/\$\$([\s\S]+?)\$\$/g, (match, expr) => {
        return "{% katex %}" + expr.trim() + "{% endkatex %}";
    });

    // Inline Math replace for Transformed View
    transformedText = transformedText.replace(/(?<!\$)\$([^\$\n]+?)\$(?!\$)/g, (match, expr) => {
        return "{% katex inline %}" + expr.trim() + "{% endkatex %}";
    });

    transformed.innerText = transformedText;
    renderPreview(val);
}
function copyTransformed() {
    const textToCopy = transformed.innerText; // Sirf transformed content lega
    if (!textToCopy) return;

    navigator.clipboard.writeText(textToCopy).then(() => {
        const btn = document.getElementById('copyBtn');
        btn.innerHTML = "✅ Copied!";
        btn.style.background = "var(--success)";
        setTimeout(() => {
            btn.innerHTML = "📋 Copy Result";
            btn.style.background = "var(--accent)";
        }, 2000);
    });
}

function showTab(idx) {
    document.querySelectorAll('.panel').forEach((p, i) => {
        p.classList.toggle('active', i === idx);
        if (window.innerWidth > 850) p.style.display = "flex"; // Reset for desktop
    });
    document.querySelectorAll('.tab').forEach((t, i) => t.classList.toggle('active', i === idx));
}

function loadFile(e) {
    const file = e.target.files[0];
    const reader = new FileReader();
    reader.onload = (ev) => { input.value = ev.target.result; update(); };
    reader.readAsText(file);
}

// Default content
input.value = "# Hello LaTeX\nWrite math between double dollar signs:\n\n$$ e^{i\\pi} + 1 = 0 $$";
update();