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

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

<div class="panel">
    <header>
        Step 3 — {% if sql_mode %}map columns &amp; configure merge{% else %}choose columns &amp; configure merge{% endif %}
        <span class="subtitle">{{ qualified_table }}</span>
        <span style="margin-left:auto">
            {% if sql_mode %}
            <a href="/wizard/sql?source_connection_id={{ connection.id }}">&larr; edit SQL</a>
            {% else %}
            <a href="/wizard/tables?source_connection_id={{ connection.id }}{% for k,v in qvals.items() %}&amp;{{ k }}={{ v }}{% endfor %}&amp;browse=1">&larr; different table</a>
            {% endif %}
        </span>
    </header>
    <div class="body">
        {% if fetch_error %}
        <pre class="sql" style="color:var(--danger)">{{ fetch_error }}</pre>
        {% endif %}
    </div>
</div>

{% if dest_warn %}
<div class="flash warn">
    Dest table <code>{{ dest_warn.qualified }}</code> already exists on the
    default destination. If you proceed, pipekit will <strong>not</strong> drop
    or recreate it — your picks below (dest names) must match the existing
    columns, or the create will fail. Existing columns:
    <span class="mono">{{ dest_warn.columns|join(', ') }}</span>
</div>
{% endif %}

{% if not fetch_error %}
<form method="post" action="/wizard/create">
    <input type="hidden" name="source_connection_id" value="{{ connection.id }}">
    {% if sql_mode %}
    <input type="hidden" name="entry_mode" value="sql">
    {% else %}
    <input type="hidden" name="table" value="{{ table }}">
    {% for k, v in qvals.items() %}
        <input type="hidden" name="{{ k }}" value="{{ v }}">
    {% endfor %}
    {% endif %}

    <div class="two-col">
        <div class="panel">
            <header>
                Columns
                {% if sql_mode %}
                <span class="subtitle">{{ columns|length }} from the query — all created; types default to <code>text</code></span>
                {% else %}
                <span class="subtitle">{{ columns|length }} total — uncheck to exclude</span>
                <span style="margin-left:auto">
                    <button type="button" class="ghost" onclick="toggleAll(true)">all</button>
                    <button type="button" class="ghost" onclick="toggleAll(false)">none</button>
                </span>
                {% endif %}
            </header>
            <div class="body tight">
                <table class="grid picker">
                    <thead>
                        <tr>
                            {% if not sql_mode %}<th class="pick"></th>{% endif %}
                            <th style="width:3em">#</th>
                            <th>source name</th>
                            {% if not sql_mode %}
                            <th>source type</th>
                            <th style="width:3em">null?</th>
                            {% endif %}
                            <th>dest name</th>
                            <th>dest type</th>
                            <th>description</th>
                        </tr>
                    </thead>
                    <tbody>
                    {% if sql_mode %}
                    {% for c in columns %}
                        <tr>
                            <td class="mono">{{ c.position }}</td>
                            <td class="mono">
                                {{ c.name }}
                                <input type="hidden" name="sql_col_name" value="{{ c.name }}">
                            </td>
                            <td>
                                <input type="text" class="mono"
                                       name="sql_dest_name"
                                       value="{{ c.default_dest_name }}"
                                       style="width:100%;font-size:12px">
                            </td>
                            <td>
                                <input type="text" class="mono"
                                       name="sql_dest_type"
                                       value="{{ c.default_dest_type }}"
                                       style="width:100%;font-size:12px">
                            </td>
                            <td>
                                <input type="text"
                                       name="sql_dest_desc"
                                       value="{{ c.default_description }}"
                                       style="width:100%;font-size:12px">
                            </td>
                        </tr>
                    {% endfor %}
                    {% else %}
                    {% for c in columns %}
                        <tr onclick="var cb=document.getElementById('col-{{ loop.index }}'); if(event.target.tagName!=='INPUT') cb.checked=!cb.checked; fillQuery()">
                            <td class="pick">
                                <input type="checkbox" id="col-{{ loop.index }}"
                                       class="col-check" name="col" value="{{ c.name }}" checked
                                       onchange="fillQuery()">
                            </td>
                            <td class="mono">{{ c.position }}</td>
                            <td class="mono">{{ c.name }}</td>
                            <td class="mono" style="color:var(--text-muted)">{{ c.type_raw }}</td>
                            <td class="mono">{{ 'Y' if c.nullable else 'N' }}</td>
                            <td>
                                <input type="text" class="mono"
                                       name="dest_name__{{ c.name }}"
                                       value="{{ c.default_dest_name }}"
                                       style="width:100%;font-size:12px">
                            </td>
                            <td>
                                <input type="text" class="mono"
                                       name="dest_type__{{ c.name }}"
                                       value="{{ c.default_dest_type }}"
                                       style="width:100%;font-size:12px">
                            </td>
                            <td>
                                <input type="text"
                                       name="dest_desc__{{ c.name }}"
                                       value="{{ c.default_description }}"
                                       style="width:100%;font-size:12px">
                            </td>
                        </tr>
                    {% endfor %}
                    {% endif %}
                    </tbody>
                </table>
            </div>
        </div>

        <div>
            <div class="panel">
                <header>Module</header>
                <div class="body">
                    <label class="field">
                        <span>name</span>
                        <input type="text" name="module_name" required
                               value="{{ default_module_name }}">
                        <span class="help">used in the URL and as the default staging table name</span>
                    </label>
                </div>
            </div>

            <div class="panel">
                <header>Destination</header>
                <div class="body">
                    <label class="field">
                        <span>connection</span>
                        <select name="dest_connection_id" required>
                            {% for c in all_connections %}
                            <option value="{{ c.id }}"
                                {% if default_dest_conn_id and c.id == default_dest_conn_id %}selected{% endif %}>
                                {{ c.name }}
                            </option>
                            {% endfor %}
                        </select>
                    </label>
                    <label class="field">
                        <span>dest table</span>
                        <input type="text" name="dest_table" required
                               value="{{ (default_dest_schema + '.' + default_module_name) if default_dest_schema else default_module_name }}">
                        <span class="help">fully-qualified (schema.table) in the destination DB</span>
                    </label>
                    <label class="field">
                        <span>staging table</span>
                        <input type="text" name="staging_table"
                               placeholder="pipekit_staging.{{ default_module_name }}">
                        <span class="help">optional — defaults to pipekit_staging.&lt;name&gt;</span>
                    </label>
                    <label class="field">
                        <span>table description</span>
                        <textarea name="dest_description" rows="2"
                                  style="width:100%">{{ table_description }}</textarea>
                        <span class="help">emitted as COMMENT ON TABLE after CREATE</span>
                    </label>
                </div>
            </div>

            <div class="panel">
                <header>Merge</header>
                <div class="body">
                    <label class="field">
                        <span>strategy</span>
                        <select name="merge_strategy" id="merge_strategy"
                                onchange="onStrategyChange(this.value)">
                            <option value="full">full (truncate + insert)</option>
                            <option value="incremental">incremental (delete by key + insert)</option>
                            <option value="append">append (insert only)</option>
                        </select>
                    </label>
                    <label class="field" id="mkf" style="display:none">
                        <span>merge key</span>
                        <input type="text" name="merge_key" placeholder="e.g. id  or  id,version">
                        <span class="help">column name(s) used for the DELETE predicate</span>
                    </label>
                </div>
            </div>

            <div class="panel" id="wm-panel" style="display:none">
                <header>
                    Watermarks
                    <button type="button" class="btn ghost" style="margin-left:auto"
                            onclick="addWatermarkRow()">+ add</button>
                </header>
                <div class="body">
                    <p class="help" style="margin-bottom:0.6rem">
                        Add a watermark for each <code>{placeholder}</code> you plan to use in the source query's WHERE clause.
                        Edit the query below to add the filter after choosing columns.
                    </p>
                    <table class="grid" id="wm-table" style="display:none">
                        <thead>
                            <tr>
                                <th>name</th>
                                <th>resolver connection</th>
                                <th>resolver SQL</th>
                                <th>default value</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody id="wm-tbody"></tbody>
                    </table>
                    <div id="wm-empty" class="empty">No watermarks added yet.</div>
                </div>
            </div>

            <div class="panel" id="query-panel" style="{% if not sql_mode %}display:none{% endif %}">
                <header>Source query
                    {% if sql_mode %}
                    <span class="subtitle">runs verbatim at run time</span>
                    {% else %}
                    <span class="subtitle">auto-generated from picks — edit to add WHERE clause</span>
                    {% endif %}
                </header>
                <div class="body">
                    <textarea name="source_query" id="source-query" rows="10" class="mono"
                              style="width:100%" oninput="checkPlaceholders()"
                              {% if not sql_mode %}placeholder="Leave blank to auto-generate from column picks"{% endif %}>{% if sql_mode %}{{ source_query }}{% endif %}</textarea>
                    <div id="placeholder-warning" class="flash warn" style="display:none;margin-top:0.4rem"></div>
                    {% if sql_mode %}
                    <span class="help">Edit if needed. <code>{name}</code> placeholders resolve from watermarks at run time.</span>
                    {% else %}
                    <span class="help">Leave blank to auto-generate. Add <code>WHERE col &gt; {name}</code> for incremental filtering.</span>
                    {% endif %}
                </div>
            </div>

            <div class="panel">
                <header>Create</header>
                <div class="body" style="display:flex;justify-content:flex-end;gap:0.5rem">
                    <a class="btn ghost" href="/">cancel</a>
                    <button type="submit" class="primary">create module</button>
                </div>
            </div>
        </div>
    </div>
</form>

<template id="wm-row-template">
    <tr>
        <input type="hidden" name="wm_id" value="">
        <td><input type="text" name="wm_name" value="" class="mono" style="width:100%"
                   oninput="checkPlaceholders()"></td>
        <td>
            <select name="wm_connection_id" style="width:100%">
                {% for c in all_connections %}
                <option value="{{ c.id }}">{{ c.name }}</option>
                {% endfor %}
            </select>
        </td>
        <td><textarea name="wm_resolver_sql" rows="2" class="mono"
                      style="width:100%;min-width:12rem"></textarea></td>
        <td><input type="text" name="wm_default_value" placeholder="(fail if null)"
                   style="width:6rem"></td>
        <td>
            <button type="button" class="ghost" style="color:var(--danger);border:none"
                    onclick="removeWatermarkRow(this)">remove</button>
        </td>
    </tr>
</template>

<script>
    const QUALIFIED_TABLE = {{ qualified_table | tojson }};
    const SQL_MODE = {{ 'true' if sql_mode else 'false' }};

    function toggleAll(val) {
        document.querySelectorAll('.col-check').forEach(function (cb) { cb.checked = val; });
        fillQuery();
    }

    function onStrategyChange(val) {
        document.getElementById('mkf').style.display = val === 'incremental' ? '' : 'none';
        document.getElementById('wm-panel').style.display = val === 'incremental' ? '' : 'none';
        // In SQL mode the query panel is always shown (it holds the user's query).
        document.getElementById('query-panel').style.display =
            (SQL_MODE || val === 'incremental') ? '' : 'none';
        if (!SQL_MODE && val === 'incremental') fillQuery();
        checkPlaceholders();
    }

    function fillQuery() {
        if (SQL_MODE) return;   // never overwrite a hand-written query
        const ta = document.getElementById('source-query');
        if (!ta) return;
        const checked = [...document.querySelectorAll('.col-check:checked')];
        if (!checked.length) { ta.value = ''; return; }
        const cols = checked.map(cb => {
            const name = cb.value;
            const destInput = document.querySelector('[name="dest_name__' + name + '"]');
            const dest = destInput ? destInput.value.trim() : name.toLowerCase();
            return '  ' + name + ' AS ' + dest;
        });
        ta.value = 'SELECT\n' + cols.join(',\n') + '\nFROM ' + QUALIFIED_TABLE;
        checkPlaceholders();
    }

    function addWatermarkRow() {
        const tmpl = document.getElementById('wm-row-template');
        const row = tmpl.content.cloneNode(true);
        document.getElementById('wm-tbody').appendChild(row);
        document.getElementById('wm-table').style.display = '';
        document.getElementById('wm-empty').style.display = 'none';
    }

    function removeWatermarkRow(btn) {
        btn.closest('tr').remove();
        const tbody = document.getElementById('wm-tbody');
        if (!tbody.querySelector('tr')) {
            document.getElementById('wm-table').style.display = 'none';
            document.getElementById('wm-empty').style.display = '';
        }
        checkPlaceholders();
    }

    function checkPlaceholders() {
        const strategy = document.getElementById('merge_strategy').value;
        const warn = document.getElementById('placeholder-warning');
        if (!warn) return;
        if (strategy !== 'incremental') { warn.style.display = 'none'; return; }

        const query = (document.getElementById('source-query') || {}).value || '';
        const inQuery = new Set([...query.matchAll(/\{(\w+)\}/g)].map(m => m[1]));
        const inWm = new Set([...document.querySelectorAll('#wm-tbody [name="wm_name"]')]
                              .map(el => el.value.trim()).filter(Boolean));

        const noWm = [...inQuery].filter(n => !inWm.has(n));
        const noPlaceholder = [...inWm].filter(n => !inQuery.has(n));
        const msgs = [];
        if (noWm.length) msgs.push('Placeholder(s) in query with no watermark: ' + noWm.map(n => '{'+n+'}').join(', '));
        if (noPlaceholder.length) msgs.push('Watermark(s) not used in query: ' + noPlaceholder.map(n => '{'+n+'}').join(', '));

        if (msgs.length) {
            warn.textContent = msgs.join(' · ');
            warn.style.display = '';
        } else {
            warn.style.display = 'none';
        }
    }
</script>
{% endif %}
{% endblock %}