{% extends "base.html" %}
{% set section = "modules" %}
{% block title %}Edit module · {{ module.name }} — Pipekit{% endblock %}

{% block content %}
<div class="panel">
    <header>
        Edit module &middot; {{ module.name }}
        <span class="subtitle">
            module #{{ module.id }}
            {% if module.running %}<span class="pill running">running</span>{% endif %}
        </span>
        <span style="margin-left:auto"><a href="{{ cancel_url }}">&larr; back to module</a></span>
    </header>
    <div class="body">
        {% if module.running %}
        <div class="flash warning" style="margin-bottom:0.8rem">
            This module is currently running. Saving changes now is allowed but may affect the in-flight run.
        </div>
        {% endif %}

        <form method="post" action="{{ form_action }}" id="module-form">
            <label class="field">
                <span>name</span>
                <input type="text" name="name" required value="{{ module.name }}">
                <span class="help">must be unique; also used as the default staging table suffix</span>
            </label>

            <div class="two-col" style="gap:1rem">
                <label class="field">
                    <span>source connection</span>
                    <select name="source_connection_id" required>
                        {% for c in connections %}
                        <option value="{{ c.id }}"
                            {% if c.id == module.source_connection_id %}selected{% endif %}>
                            {{ c.name }}
                        </option>
                        {% endfor %}
                    </select>
                    <span class="help">where <code>source_query</code> runs</span>
                </label>

                <label class="field">
                    <span>dest connection</span>
                    <select name="dest_connection_id" required>
                        {% for c in connections %}
                        <option value="{{ c.id }}"
                            {% if c.id == module.dest_connection_id %}selected{% endif %}>
                            {{ c.name }}
                        </option>
                        {% endfor %}
                    </select>
                    <span class="help">where staging + merge run</span>
                </label>
            </div>

            <div class="two-col" style="gap:1rem">
                <label class="field">
                    <span>dest table</span>
                    <input type="text" name="dest_table" required value="{{ module.dest_table }}">
                    <span class="help"><code>schema.table</code> — editing here does NOT rename the actual table</span>
                </label>

                <label class="field">
                    <span>staging table</span>
                    <input type="text" name="staging_table" required value="{{ module.staging_table }}">
                    <span class="help">dropped on save; recreated from dest on next run</span>
                </label>
            </div>

            <label class="field">
                <span>source query</span>
                <textarea name="source_query" id="source-query" rows="14" required class="mono"
                          oninput="checkPlaceholders()">{{ module.source_query }}</textarea>
                <span class="help">free text; <code>{name}</code> placeholders resolved from watermarks at run time</span>
            </label>
            <div id="placeholder-warning" class="flash warn" style="display:none;margin-top:0.3rem"></div>

            <div class="panel" style="margin-top:1rem">
                <header>Merge &amp; watermarks</header>
                <div class="body">
                    <div class="two-col" style="gap:1rem;margin-bottom:0.8rem">
                        <label class="field">
                            <span>merge strategy</span>
                            <select name="merge_strategy" id="merge-strategy" required
                                    onchange="onStrategyChange(this.value)">
                                {% for s in ("full", "incremental", "append") %}
                                <option value="{{ s }}" {% if s == module.merge_strategy %}selected{% endif %}>{{ s }}</option>
                                {% endfor %}
                            </select>
                        </label>

                        <label class="field" id="merge-key-field"
                               style="{{ '' if module.merge_strategy == 'incremental' else 'display:none' }}">
                            <span>merge key</span>
                            <input type="text" name="merge_key" value="{{ module.merge_key or '' }}"
                                   placeholder="id  or  id,version">
                            <span class="help">column name(s) for the DELETE predicate</span>
                        </label>
                    </div>

                    <div id="watermarks-section"
                         style="{{ '' if module.merge_strategy == 'incremental' else 'display:none' }}">
                        <div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.5rem">
                            <strong>Watermarks</strong>
                            <span class="help" style="margin:0">— resolver SQL runs before each sync; result substituted as <code>{name}</code> in source query</span>
                            <button type="button" class="btn ghost" style="margin-left:auto"
                                    onclick="addWatermarkRow()">+ add</button>
                        </div>
                        <table class="grid" id="wm-table">
                            <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">
                                {% for w in watermarks %}
                                <tr>
                                    <input type="hidden" name="wm_id" value="{{ w.id }}">
                                    <td><input type="text" name="wm_name" value="{{ w.name }}"
                                               class="mono" style="width:100%" oninput="checkPlaceholders()"></td>
                                    <td>
                                        <select name="wm_connection_id" style="width:100%">
                                            {% for c in connections %}
                                            <option value="{{ c.id }}"
                                                {% if c.id == w.connection_id %}selected{% endif %}>
                                                {{ c.name }}
                                            </option>
                                            {% endfor %}
                                        </select>
                                    </td>
                                    <td><textarea name="wm_resolver_sql" rows="2" class="mono"
                                                  style="width:100%;min-width:16rem">{{ w.resolver_sql }}</textarea></td>
                                    <td><input type="text" name="wm_default_value"
                                               value="{{ w.default_value or '' }}"
                                               placeholder="(fail if null)"
                                               style="width:100%"></td>
                                    <td>
                                        <button type="button" class="ghost"
                                                style="color:var(--danger);border:none"
                                                onclick="removeWatermarkRow(this, '{{ w.id }}')">remove</button>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                        {% if not watermarks %}
                        <div id="wm-empty" class="empty" style="margin-top:0.4rem">No watermarks — add one to enable incremental filtering.</div>
                        {% endif %}
                    </div>
                </div>
            </div>

            <label class="field" style="margin-top:1rem">
                <span>dest description</span>
                <textarea name="dest_description" rows="2">{{ module.dest_description or '' }}</textarea>
                <span class="help">COMMENT ON TABLE value; re-applied on save if changed</span>
            </label>

            <label class="field" style="flex-direction:row;align-items:center;gap:0.5rem">
                <input type="checkbox" name="enabled" value="1"
                       {% if module.enabled %}checked{% endif %}>
                <span>enabled</span>
                <span class="help">disabled modules are skipped by group runs; ad-hoc runs still work</span>
            </label>

            <div class="actions" style="justify-content:flex-end;margin-top:0.8rem">
                <a class="btn ghost" href="{{ cancel_url }}">cancel</a>
                <button type="submit" class="primary">save changes</button>
            </div>
        </form>
    </div>
</div>

<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 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:16rem"></textarea></td>
        <td><input type="text" name="wm_default_value" placeholder="(fail if null)"
                   style="width:100%"></td>
        <td>
            <button type="button" class="ghost" style="color:var(--danger);border:none"
                    onclick="removeWatermarkRow(this, '')">remove</button>
        </td>
    </tr>
</template>

<script>
function onStrategyChange(val) {
    document.getElementById('merge-key-field').style.display = val === 'incremental' ? '' : 'none';
    document.getElementById('watermarks-section').style.display = val === 'incremental' ? '' : 'none';
    checkPlaceholders();
}

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

function removeWatermarkRow(btn, wmId) {
    if (wmId) {
        const input = document.createElement('input');
        input.type = 'hidden';
        input.name = 'wm_deleted_id';
        input.value = wmId;
        document.getElementById('module-form').appendChild(input);
    }
    btn.closest('tr').remove();
    checkPlaceholders();
}

function checkPlaceholders() {
    const strategy = document.getElementById('merge-strategy').value;
    const warn = document.getElementById('placeholder-warning');
    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';
    }
}

document.addEventListener('DOMContentLoaded', checkPlaceholders);
</script>
{% endblock %}