{% extends "studio/base.html" %}

{% block studio_title %}SQL{% endblock %}

{% block studio_content %}
<div class="px-8 py-8 max-w-5xl">

    <div class="mb-8">
        <h1 class="text-2xl font-bold text-zinc-800 dark:text-zinc-100">SQL console</h1>
        <p class="text-sm text-zinc-500 dark:text-zinc-400 mt-1">Run read queries directly against the database</p>
    </div>

    <div class="rounded-3xl border border-zinc-200 dark:border-zinc-700 bg-white dark:bg-neutral-800 p-6">
        <form id="sql-form" class="space-y-4">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

            <textarea id="sql-input" rows="6" spellcheck="false"
                placeholder="SELECT * FROM users LIMIT 50;"
                class="w-full px-4 py-3 rounded-xl border border-stone-300 dark:border-zinc-600 bg-white dark:bg-neutral-900 font-mono text-sm text-zinc-800 dark:text-zinc-100 placeholder:text-zinc-400 outline-none focus:border-primary focus:ring-2 focus:ring-primary/20 transition resize-y"></textarea>

            <div class="flex items-center justify-between">
                <label class="inline-flex items-center gap-2 text-sm text-zinc-600 dark:text-zinc-300 cursor-pointer">
                    <input type="checkbox" id="sql-write" class="h-4 w-4 rounded border-stone-300 text-primary focus:ring-primary">
                    Allow write statements (INSERT / UPDATE / DELETE / DDL)
                </label>

                <button type="submit"
                    class="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl bg-primary text-white text-sm font-medium hover:opacity-90 transition">
                    <ion-icon name="play-outline"></ion-icon> Run query
                </button>
            </div>
        </form>
    </div>

    <div id="sql-results" class="mt-6"></div>
</div>

<script>
(function () {
    const form = document.getElementById("sql-form");
    const results = document.getElementById("sql-results");

    function renderTable(data) {
        if (!data.columns || !data.columns.length) return "";

        let html = '<div class="rounded-3xl border border-zinc-200 dark:border-zinc-700 bg-white dark:bg-neutral-800 overflow-hidden">';
        html += '<div class="px-6 py-3 border-b border-zinc-100 dark:border-zinc-700/60 text-xs text-zinc-400">' +
            data.rowcount + ' row' + (data.rowcount === 1 ? "" : "s") + "</div>";
        html += '<div class="overflow-x-auto"><table class="w-full text-sm"><thead><tr class="text-left text-xs uppercase tracking-wide text-zinc-400 dark:text-zinc-500 border-b border-zinc-100 dark:border-zinc-700/60">';
        data.columns.forEach(function (col) {
            html += '<th class="px-4 py-3 font-medium whitespace-nowrap">' + window.escapeHtml(col) + "</th>";
        });
        html += "</tr></thead><tbody class='divide-y divide-zinc-100 dark:divide-zinc-700/60'>";

        data.rows.forEach(function (row) {
            html += '<tr class="hover:bg-zinc-50 dark:hover:bg-zinc-700/30 transition">';
            row.forEach(function (cell) {
                html += '<td class="px-4 py-3 text-zinc-600 dark:text-zinc-300 max-w-[20rem] truncate">' +
                    window.escapeHtml(cell == null ? "" : cell) + "</td>";
            });
            html += "</tr>";
        });

        html += "</tbody></table></div></div>";
        return html;
    }

    form.addEventListener("submit", async function (e) {
        e.preventDefault();

        const sql = document.getElementById("sql-input").value.trim();
        if (!sql) {
            window.studio.toast("Please enter a query.", false);
            return;
        }

        results.innerHTML = '<p class="text-sm text-zinc-400 dark:text-zinc-500">Running…</p>';

        try {
            const data = await window.studio.request("/api/sql", "POST", {
                sql: sql,
                write: document.getElementById("sql-write").checked,
            });

            if (data.columns && data.columns.length) {
                results.innerHTML = renderTable(data);
            } else {
                results.innerHTML = '<div class="rounded-2xl border border-green-200 dark:border-green-500/30 bg-green-50 dark:bg-green-500/10 px-5 py-4 text-sm text-green-700 dark:text-green-300">' +
                    "Executed successfully" +
                    (data.rowcount !== undefined ? " — " + data.rowcount + " row(s) affected" : "") +
                    "</div>";
            }
        } catch (err) {
            results.innerHTML = '<div class="rounded-2xl border border-red-200 dark:border-red-500/30 bg-red-50 dark:bg-red-500/10 px-5 py-4 text-sm text-red-700 dark:text-red-300 font-mono whitespace-pre-wrap">' +
                window.escapeHtml(err.message) + "</div>";
        }
    });
})();
</script>
{% endblock %}