{% extends "base.html" %}
{% set section = "modules" %}
{% block title %}New module — step 2{% endblock %}

{% block content %}
{% include "_wizard_steps.html" %}

<div class="panel">
    <header>
        Step 2 — browse tables on {{ connection.name }}
        <span class="subtitle">driver: {{ driver_kind }}</span>
        <span style="margin-left:auto"><a href="/wizard">&larr; change connection</a></span>
    </header>
    <div class="body">
        <form method="get" action="/wizard/tables">
            <input type="hidden" name="source_connection_id" value="{{ connection.id }}">
            <input type="hidden" name="browse" value="1">

            {% for f in browse_fields %}
            <label class="field">
                <span>{{ f.label }}{% if f.required %} *{% endif %}</span>
                <input type="text" name="{{ f.name }}"
                       value="{{ qvals.get(f.name, '') }}"
                       {% if f.required %}required{% endif %}
                       {% if f.name == 'schema' %}list="schema-options" autocomplete="off" id="schema-input"{% endif %}
                       placeholder="{{ f.default or '' }}">
                {% if f.help %}<span class="help">{{ f.help }}</span>{% endif %}
            </label>
            {% endfor %}
            <datalist id="schema-options"></datalist>

            <label class="field">
                <span>table (skip browse)</span>
                <input type="text" name="table" id="jump-table"
                       placeholder="schema.table — or leave blank to browse"
                       autocomplete="off" spellcheck="false">
                <span class="help">if you know the table, fill this in and click jump. <code>schema.table</code> auto-populates the qualifier above on tab-out.</span>
            </label>

            <div class="actions" style="margin-top:0.8rem">
                <button type="submit" class="primary">browse &rarr;</button>
                <button type="submit" id="jump-btn"
                        formaction="/wizard/columns" disabled>
                    jump to columns &rarr;
                </button>
            </div>
        </form>
        <script>
            (function () {
                var tbl = document.getElementById('jump-table');
                var btn = document.getElementById('jump-btn');
                var schemaInput = document.querySelector('input[name="schema"]')
                                || document.querySelector('input[name="library"]');

                function updateBtn() {
                    btn.disabled = !tbl.value.trim();
                }
                tbl.addEventListener('input', updateBtn);
                tbl.addEventListener('blur', function () {
                    var v = tbl.value.trim();
                    var dot = v.indexOf('.');
                    if (dot > 0 && schemaInput) {
                        schemaInput.value = v.substring(0, dot);
                        tbl.value = v.substring(dot + 1);
                        updateBtn();
                    }
                });
                updateBtn();

                // Populate <datalist> + visible "Schemas" panel from the
                // source DB. Refetch when scoping qualifiers change (mssql:
                // database, linked_server).
                var dlist = document.getElementById('schema-options');
                var countTag = document.getElementById('schema-count');
                var gridBody = document.getElementById('schema-grid-body');
                var emptyTag = document.getElementById('schema-empty');
                var filterInput = document.getElementById('schema-filter');
                var dbInput = document.querySelector('input[name="database"]');
                var lsInput = document.querySelector('input[name="linked_server"]');
                var connId = {{ connection.id }};
                var allSchemas = [];
                var inFlight = 0;

                function applySchemaFilter() {
                    var q = (filterInput.value || '').toLowerCase().trim();
                    var visible = 0;
                    Array.prototype.forEach.call(gridBody.children, function (tr) {
                        var n = tr.getAttribute('data-name') || '';
                        var show = !q || n.toLowerCase().indexOf(q) !== -1;
                        tr.style.display = show ? '' : 'none';
                        if (show) visible++;
                    });
                    countTag.textContent = q
                        ? visible + ' of ' + allSchemas.length + ' shown'
                        : allSchemas.length + ' total';
                }

                function renderSchemas() {
                    dlist.innerHTML = '';
                    gridBody.innerHTML = '';
                    allSchemas.forEach(function (s) {
                        var o = document.createElement('option');
                        o.value = s;
                        dlist.appendChild(o);

                        var tr = document.createElement('tr');
                        tr.setAttribute('data-name', s);
                        tr.style.cursor = 'pointer';
                        var td = document.createElement('td');
                        td.className = 'mono';
                        td.textContent = s;
                        tr.appendChild(td);
                        tr.addEventListener('click', function () {
                            if (schemaInput) schemaInput.value = s;
                        });
                        gridBody.appendChild(tr);
                    });
                    emptyTag.style.display = allSchemas.length ? 'none' : '';
                    applySchemaFilter();
                }

                function loadSchemas() {
                    var qs = new URLSearchParams({ source_connection_id: connId });
                    if (dbInput && dbInput.value.trim()) qs.set('database', dbInput.value.trim());
                    if (lsInput && lsInput.value.trim()) qs.set('linked_server', lsInput.value.trim());
                    var token = ++inFlight;
                    countTag.textContent = 'loading…';
                    fetch('/wizard/schemas?' + qs.toString())
                        .then(function (r) { return r.json(); })
                        .then(function (j) {
                            if (token !== inFlight) return;            // stale
                            allSchemas = j.schemas || [];
                            renderSchemas();
                            if (j.error) {
                                countTag.textContent = 'load failed: ' + j.error;
                                countTag.style.color = 'var(--danger)';
                            } else {
                                countTag.style.color = '';
                            }
                        })
                        .catch(function (e) {
                            if (token !== inFlight) return;
                            countTag.textContent = 'load failed: ' + e;
                            countTag.style.color = 'var(--danger)';
                        });
                }
                filterInput.addEventListener('input', applySchemaFilter);
                if (dbInput) dbInput.addEventListener('change', loadSchemas);
                if (lsInput) lsInput.addEventListener('change', loadSchemas);
                loadSchemas();
            })();
        </script>
    </div>
</div>

<div class="panel" id="schema-panel">
    <header>
        Schemas
        <span class="subtitle" id="schema-count">loading…</span>
        <span style="margin-left:auto">
            <input type="text" id="schema-filter"
                   placeholder="filter (substring)"
                   autocomplete="off" spellcheck="false"
                   style="min-width:18rem;font-family:var(--mono);font-size:12px">
        </span>
    </header>
    <div class="body tight" style="max-height:18rem;overflow:auto">
        <table class="grid picker" id="schema-grid">
            <tbody id="schema-grid-body"></tbody>
        </table>
        <div id="schema-empty" class="empty" style="display:none">no schemas</div>
    </div>
</div>

{% if fetch_error %}
<div class="panel">
    <header>Browse failed</header>
    <div class="body"><pre class="sql" style="color:var(--danger)">{{ fetch_error }}</pre></div>
</div>
{% elif attempted %}
<div class="panel">
    <header>
        Tables
        <span class="subtitle" id="tbl-count">{{ tables|length }} found</span>
        {% if tables %}
        <span style="margin-left:auto;display:flex;gap:0.5rem;align-items:center">
            <input type="text" id="tbl-filter" form="wizard-next-form"
                   placeholder="filter (regex, case-insensitive)"
                   autocomplete="off" spellcheck="false"
                   style="min-width:22rem;font-family:var(--mono);font-size:12px">
            <span id="tbl-filter-err" style="color:var(--danger);font-size:12px;display:none">invalid regex — substring match</span>
            <button type="submit" class="primary" form="wizard-next-form">next &rarr;</button>
        </span>
        {% endif %}
    </header>
    <div class="body tight">
        {% if tables %}
        <form method="get" action="/wizard/columns" id="wizard-next-form">
            <input type="hidden" name="source_connection_id" value="{{ connection.id }}">
            {% for name, val in qvals.items() %}
                <input type="hidden" name="{{ name }}" value="{{ val }}">
            {% endfor %}
            <table class="grid picker" id="tbl-grid">
                <thead>
                    <tr>
                        <th class="pick"></th>
                        <th style="width:5em">kind</th>
                        <th>schema</th>
                        <th>name</th>
                        <th>qualified</th>
                    </tr>
                </thead>
                <tbody>
                {% for t in tables %}
                    <tr data-match="{{ t.schema }}.{{ t.name }}"
                        onclick="document.getElementById('tbl-{{ loop.index }}').checked=true">
                        <td class="pick">
                            <input type="radio" id="tbl-{{ loop.index }}"
                                   name="table" value="{{ t.name }}"
                                   {% if loop.first %}checked{% endif %}
                                   data-schema="{{ t.schema }}">
                        </td>
                        <td class="mono">{{ t.kind }}</td>
                        <td class="mono">{{ t.schema }}</td>
                        <td class="mono">{{ t.name }}</td>
                        <td class="mono" style="color:var(--text-muted)">{{ t.full_name }}</td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
            <input type="hidden" name="table_schema" id="table_schema" value="{{ tables[0].schema if tables else '' }}">
            <div class="body" style="display:flex;justify-content:flex-end;gap:0.5rem">
                <button type="submit" class="primary">next &rarr;</button>
            </div>
        </form>
        <script>
            (function () {
                var radios = document.querySelectorAll('input[name="table"]');
                var tschema = document.getElementById('table_schema');
                radios.forEach(function (r) {
                    r.addEventListener('change', function () {
                        tschema.value = r.dataset.schema || '';
                    });
                });

                var totalRows = {{ tables|length }};
                var input = document.getElementById('tbl-filter');
                var errTag = document.getElementById('tbl-filter-err');
                var countTag = document.getElementById('tbl-count');
                var rows = document.querySelectorAll('#tbl-grid tbody tr');

                function applyFilter() {
                    var q = input.value;
                    var rx = null, useSubstring = false;
                    errTag.style.display = 'none';
                    input.style.borderColor = '';
                    if (q) {
                        try { rx = new RegExp(q, 'i'); }
                        catch (e) {
                            useSubstring = true;
                            errTag.style.display = '';
                            input.style.borderColor = 'var(--danger)';
                        }
                    }
                    var visible = 0, firstVisibleRadio = null;
                    rows.forEach(function (tr) {
                        var s = tr.getAttribute('data-match') || '';
                        var show = !q
                            || (rx ? rx.test(s) : s.toLowerCase().indexOf(q.toLowerCase()) !== -1);
                        tr.style.display = show ? '' : 'none';
                        if (show) {
                            visible++;
                            if (!firstVisibleRadio) firstVisibleRadio = tr.querySelector('input[type="radio"]');
                        }
                    });
                    countTag.textContent = q
                        ? visible + ' of ' + totalRows + ' shown'
                        : totalRows + ' found';
                    // If the current selection is hidden, promote the first visible one.
                    var selected = document.querySelector('input[name="table"]:checked');
                    if ((!selected || selected.closest('tr').style.display === 'none') && firstVisibleRadio) {
                        firstVisibleRadio.checked = true;
                        tschema.value = firstVisibleRadio.dataset.schema || '';
                    }
                }
                input.addEventListener('input', applyFilter);
                // Focus the filter by default so it's keyboard-first.
                input.focus();
            })();
        </script>
        {% else %}
        <div class="empty">No tables matched those qualifiers.</div>
        {% endif %}
    </div>
</div>
{% elif not required_ok %}
<div class="panel">
    <header>Waiting</header>
    <div class="body"><div class="empty">Fill in the required qualifier(s) above, then click Browse.</div></div>
</div>
{% endif %}
{% endblock %}