{% extends "base.html" %}
{% block title %}Sraosha — {% if is_edit %}Edit{% else %}New{% endif %} data quality check{% endblock %}

{% block breadcrumbs %}
<div class="flex min-w-0 flex-col gap-1">
  <a href="/ui/data-quality" class="text-xs text-indigo-600 hover:underline dark:text-indigo-400">Data Quality</a>
  <h1 class="truncate text-sm font-semibold text-gray-900 dark:text-white">{% if is_edit %}Edit check{% else %}New check{% endif %}</h1>
</div>
{% endblock %}

{% block content %}
<div class="mx-auto max-w-4xl"
     x-data="dqWizard()"
     x-init="init()">

  {# ── Error banner ── #}
  {% if errors %}
  <div class="mb-6 rounded-xl border border-rose-200 bg-rose-50 p-4 text-sm text-rose-800 dark:border-rose-900 dark:bg-rose-950/40 dark:text-rose-200">
    <ul class="list-inside list-disc space-y-1">
      {% for e in errors %}<li>{{ e }}</li>{% endfor %}
    </ul>
  </div>
  {% endif %}

  {# ── Stepper nav ── #}
  <nav class="mb-8">
    <ol class="flex items-center">
      <template x-for="(s, idx) in steps" :key="idx">
        <li class="flex items-center" :class="idx < steps.length - 1 ? 'flex-1' : ''">
          <button type="button" @click="goToStep(idx + 1)"
                  :disabled="idx + 1 > maxReached"
                  class="group flex items-center gap-2 text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50">
            <span class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 text-xs font-bold transition-colors"
                  :class="step === idx + 1
                    ? 'border-indigo-600 bg-indigo-600 text-white dark:border-indigo-500 dark:bg-indigo-500'
                    : step > idx + 1
                      ? 'border-emerald-500 bg-emerald-500 text-white dark:border-emerald-400 dark:bg-emerald-400'
                      : 'border-gray-300 text-gray-500 dark:border-gray-600 dark:text-gray-400'">
              <template x-if="step > idx + 1">
                <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/></svg>
              </template>
              <template x-if="step <= idx + 1">
                <span x-text="idx + 1"></span>
              </template>
            </span>
            <span class="hidden sm:inline"
                  :class="step === idx + 1
                    ? 'text-indigo-700 dark:text-indigo-300'
                    : 'text-gray-500 dark:text-gray-400'"
                  x-text="s"></span>
          </button>
          <template x-if="idx < steps.length - 1">
            <div class="mx-3 h-px flex-1 bg-gray-200 dark:bg-gray-700"></div>
          </template>
        </li>
      </template>
    </ol>
  </nav>

  <form method="post"
        action="{% if is_edit %}/ui/data-quality/{{ check.id }}/update{% else %}/ui/data-quality/create{% endif %}"
        @submit="onSubmit($event)">

    {# Hidden fields populated by wizard JS #}
    <input type="hidden" name="connection_id" :value="connectionId" />
    <input type="hidden" name="team_id" :value="teamId" />
    <input type="hidden" name="alerting_profile_id" :value="alertingProfileId" />
    <input type="hidden" name="sodacl_yaml" :value="yamlText" />
    <template x-for="t in selectedTableList" :key="t">
      <input type="hidden" name="tables[]" :value="t" />
    </template>
    <template x-for="cat in usedCategories" :key="cat">
      <input type="hidden" name="check_categories[]" :value="cat" />
    </template>

    {# ═══════════════════════════════════════════════════════════════════
       STEP 1 — Connection & Basics
       ═══════════════════════════════════════════════════════════════════ #}
    <div x-show="step === 1" x-cloak class="space-y-6">
      <div class="rounded-xl border border-gray-200 bg-white p-6 dark:border-gray-700 dark:bg-gray-900">
        <h2 class="mb-4 text-lg font-semibold text-gray-900 dark:text-white">Connection &amp; basics</h2>

        <div class="space-y-4">
          <div>
            <label class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">Name <span class="text-rose-500">*</span></label>
            <input type="text" x-model="name" required
                   class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm dark:border-gray-600 dark:bg-gray-800 dark:text-white"
                   placeholder="e.g. Orders freshness check" />
          </div>

          <div>
            <label class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">Description</label>
            <textarea x-model="description" rows="2"
                      class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm dark:border-gray-600 dark:bg-gray-800 dark:text-white"
                      placeholder="Optional description"></textarea>
          </div>

          <div>
            <label class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">Connection <span class="text-rose-500">*</span></label>
            <select x-model="connectionId" @change="onConnectionChange()" required
                    class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm dark:border-gray-600 dark:bg-gray-800 dark:text-white">
              <option value="">Select a connection&hellip;</option>
              {% for c in connections %}
              <option value="{{ c.id }}"
                      data-name="{{ c.name }}"
                      data-type="{{ c.server_type }}"
                      data-schema="{{ c.schema_name or '' }}">{{ c.name }} ({{ c.server_type }})</option>
              {% endfor %}
            </select>
          </div>

          <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
            <div>
              <label class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">Team <span class="text-gray-400">(optional)</span></label>
              <select x-model="teamId"
                      class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm dark:border-gray-600 dark:bg-gray-800 dark:text-white">
                <option value="">— None —</option>
                {% for t in teams|default([]) %}
                <option value="{{ t.id }}">{{ t.name }}</option>
                {% endfor %}
              </select>
            </div>
            <div>
              <label class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">Alerting profile <span class="text-gray-400">(optional)</span></label>
              <select x-model="alertingProfileId"
                      class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm dark:border-gray-600 dark:bg-gray-800 dark:text-white">
                <option value="">— None —</option>
                {% for p in alerting_profiles|default([]) %}
                <option value="{{ p.id }}">{{ p.name }}</option>
                {% endfor %}
              </select>
            </div>
          </div>

          <details class="group rounded-lg border border-gray-200 dark:border-gray-700">
            <summary class="cursor-pointer px-4 py-2.5 text-xs font-medium text-gray-500 dark:text-gray-400">
              Advanced options
            </summary>
            <div class="border-t border-gray-200 px-4 py-3 dark:border-gray-700">
              <label class="mb-1 block text-xs text-gray-500 dark:text-gray-400">Soda connector (data source)</label>
              <select name="data_source_name" x-model="dataSourceName"
                      class="w-full rounded-lg border border-gray-300 px-3 py-2 font-mono text-sm dark:border-gray-600 dark:bg-gray-800 dark:text-white">
                <option value="">Use connection default</option>
                {% for t in soda_connector_types %}
                <option value="{{ t }}">{{ t }}</option>
                {% endfor %}
              </select>
              <p class="mt-1 text-xs text-gray-400 dark:text-gray-500">When blank, the Soda connector type is derived from the connection&rsquo;s database type.</p>
            </div>
          </details>
        </div>
      </div>

      <div class="flex justify-end gap-3">
        <a href="{% if is_edit %}/ui/data-quality/{{ check.id }}{% else %}/ui/data-quality{% endif %}"
           class="rounded-xl border border-gray-300 px-4 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:text-gray-200 dark:hover:bg-gray-800">Cancel</a>
        <button type="button" @click="nextStep()"
                :disabled="!name.trim() || !connectionId"
                class="rounded-xl bg-indigo-600 px-5 py-2.5 text-sm font-medium text-white hover:bg-indigo-500 disabled:opacity-40">
          Next
        </button>
      </div>
    </div>

    {# ═══════════════════════════════════════════════════════════════════
       STEP 2 — Select Tables  (rendered entirely from Alpine state)
       ═══════════════════════════════════════════════════════════════════ #}
    <div x-show="step === 2" x-cloak class="space-y-6">
      <div class="rounded-xl border border-gray-200 bg-white p-6 dark:border-gray-700 dark:bg-gray-900">
        <h2 class="mb-1 text-lg font-semibold text-gray-900 dark:text-white">Select tables</h2>
        <p class="mb-5 text-sm text-gray-500 dark:text-gray-400">Choose which tables to run data quality checks on.</p>

        <div class="mb-4 flex flex-col gap-3 sm:flex-row sm:items-end">
          <div class="flex-1">
            <label class="mb-1 block text-xs font-medium text-gray-500 dark:text-gray-400">Schema</label>
            <input type="text" x-model="schema"
                   class="w-full rounded-lg border border-gray-300 px-3 py-2 font-mono text-sm dark:border-gray-600 dark:bg-gray-800 dark:text-white"
                   placeholder="public" />
          </div>
          <button type="button" @click="discoverTables()"
                  :disabled="discovering"
                  class="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700">
            <svg class="h-4 w-4" :class="discovering && 'animate-spin'" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
            <span x-text="discovering ? 'Discovering...' : 'Discover tables'"></span>
          </button>
        </div>

        {# States: empty / loading / error / results #}
        <template x-if="!discoveryDone && !discovering && !discoveryError">
          <div class="rounded-lg border border-dashed border-gray-300 py-12 text-center dark:border-gray-600">
            <svg class="mx-auto mb-3 h-8 w-8 text-gray-300 dark:text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg>
            <p class="text-sm text-gray-500 dark:text-gray-400">Click <strong>Discover tables</strong> to browse available tables.</p>
          </div>
        </template>

        <template x-if="discovering">
          <div class="flex items-center justify-center gap-2 py-12 text-sm text-gray-500 dark:text-gray-400">
            <svg class="h-5 w-5 animate-spin text-indigo-500" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"/></svg>
            Discovering tables&hellip;
          </div>
        </template>

        <template x-if="discoveryError">
          <div class="rounded-lg border border-rose-200 bg-rose-50 p-4 text-sm text-rose-700 dark:border-rose-900 dark:bg-rose-950/40 dark:text-rose-300" x-text="discoveryError"></div>
        </template>

        {# Table list rendered from Alpine state #}
        <template x-if="discoveryDone && !discovering && discoveredTableNames.length > 0">
          <div class="space-y-3">
            <div class="flex items-center justify-between">
              <p class="text-sm text-gray-600 dark:text-gray-300">
                Found <strong x-text="discoveredTableNames.length"></strong> table<span x-show="discoveredTableNames.length !== 1">s</span>
              </p>
              <div class="flex items-center gap-3">
                <button type="button" @click="discoveredTableNames.forEach(t => selectedTables[t] = true)" class="text-xs text-indigo-600 hover:underline dark:text-indigo-400">Select all</button>
                <button type="button" @click="discoveredTableNames.forEach(t => selectedTables[t] = false)" class="text-xs text-gray-500 hover:underline dark:text-gray-400">Deselect all</button>
              </div>
            </div>

            <div class="relative">
              <input type="text" x-model="tableFilter" placeholder="Filter tables..."
                     class="mb-2 w-full rounded-lg border border-gray-200 px-3 py-2 text-sm dark:border-gray-600 dark:bg-gray-800 dark:text-white" />
            </div>

            <div class="max-h-80 overflow-y-auto rounded-lg border border-gray-200 dark:border-gray-700">
              <table class="w-full text-sm">
                <thead class="sticky top-0 bg-gray-50 dark:bg-gray-800">
                  <tr>
                    <th class="w-10 px-4 py-2.5 text-left"></th>
                    <th class="px-4 py-2.5 text-left text-xs font-medium uppercase text-gray-500 dark:text-gray-400">Table</th>
                    <th class="px-4 py-2.5 text-left text-xs font-medium uppercase text-gray-500 dark:text-gray-400">Type</th>
                    <th class="px-4 py-2.5 text-left text-xs font-medium uppercase text-gray-500 dark:text-gray-400">Columns</th>
                  </tr>
                </thead>
                <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
                  <template x-for="tName in filteredTableNames" :key="tName">
                    <tr class="cursor-pointer hover:bg-gray-50/50 dark:hover:bg-gray-800/50"
                        @click="toggleTable(tName)">
                      <td class="px-4 py-2.5">
                        <input type="checkbox" :checked="selectedTables[tName]"
                               @click.stop="toggleTable(tName)"
                               class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500 dark:border-gray-600" />
                      </td>
                      <td class="px-4 py-2.5 font-mono text-gray-900 dark:text-white" x-text="tName"></td>
                      <td class="px-4 py-2.5">
                        <span class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium"
                              :class="(discoveredTableMeta[tName] || {}).table_type === 'view'
                                ? 'bg-purple-100 text-purple-700 dark:bg-purple-950 dark:text-purple-300'
                                : 'bg-blue-100 text-blue-700 dark:bg-blue-950 dark:text-blue-300'"
                              x-text="(discoveredTableMeta[tName] || {}).table_type || 'table'"></span>
                      </td>
                      <td class="px-4 py-2.5 text-gray-500 dark:text-gray-400">
                        <span class="text-xs" x-text="((discoveredTables[tName] || []).length) + ' col' + ((discoveredTables[tName] || []).length !== 1 ? 's' : '')"></span>
                      </td>
                    </tr>
                  </template>
                </tbody>
              </table>
            </div>
          </div>
        </template>

        <template x-if="discoveryDone && !discovering && discoveredTableNames.length === 0 && !discoveryError">
          <div class="rounded-lg border border-dashed border-gray-300 py-8 text-center dark:border-gray-600">
            <p class="text-sm text-gray-500 dark:text-gray-400">No tables found in this schema.</p>
          </div>
        </template>

        {# Manual table entry #}
        <div class="mt-4 border-t border-gray-200 pt-4 dark:border-gray-700">
          <details class="group">
            <summary class="cursor-pointer text-xs font-medium text-gray-500 dark:text-gray-400">Add tables manually</summary>
            <div class="mt-2 flex gap-2">
              <input type="text" x-model="manualTable" @keydown.enter.prevent="addManualTable()"
                     class="flex-1 rounded-lg border border-gray-300 px-3 py-2 font-mono text-sm dark:border-gray-600 dark:bg-gray-800 dark:text-white"
                     placeholder="table_name" />
              <button type="button" @click="addManualTable()"
                      class="rounded-lg border border-gray-200 px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200">Add</button>
            </div>
          </details>
        </div>

        {# Selected summary pills #}
        <template x-if="selectedTableList.length > 0">
          <div class="mt-4">
            <p class="text-xs font-medium text-gray-500 dark:text-gray-400">
              <span x-text="selectedTableList.length"></span> table<span x-show="selectedTableList.length !== 1">s</span> selected
            </p>
            <div class="mt-2 flex flex-wrap gap-1.5">
              <template x-for="t in selectedTableList" :key="t">
                <span class="inline-flex items-center gap-1 rounded-md bg-indigo-50 px-2 py-0.5 font-mono text-xs text-indigo-800 dark:bg-indigo-950 dark:text-indigo-200">
                  <span x-text="t"></span>
                  <button type="button" @click="selectedTables[t] = false" class="ml-0.5 text-indigo-400 hover:text-indigo-700 dark:text-indigo-400 dark:hover:text-indigo-200">&times;</button>
                </span>
              </template>
            </div>
          </div>
        </template>
      </div>

      <div class="flex justify-between gap-3">
        <button type="button" @click="prevStep()"
                class="rounded-xl border border-gray-300 px-4 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:text-gray-200 dark:hover:bg-gray-800">
          Back
        </button>
        <button type="button" @click="nextStep()"
                :disabled="selectedTableList.length === 0"
                class="rounded-xl bg-indigo-600 px-5 py-2.5 text-sm font-medium text-white hover:bg-indigo-500 disabled:opacity-40">
          Next
        </button>
      </div>
    </div>

    {# ═══════════════════════════════════════════════════════════════════
       STEP 3 — Configure checks  (SodaCL templates + YAML)
       ═══════════════════════════════════════════════════════════════════ #}
    <div x-show="step === 3" x-cloak class="space-y-6">
      <div class="rounded-xl border border-gray-200 bg-white p-6 dark:border-gray-700 dark:bg-gray-900">
        <div class="mb-4 flex items-center justify-between">
          <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Configure checks</h2>
          <div class="flex rounded-lg border border-gray-200 dark:border-gray-700">
            <button type="button" @click="switchToVisual()"
                    :class="editorMode === 'visual' ? 'bg-indigo-50 text-indigo-700 dark:bg-indigo-950 dark:text-indigo-300' : 'text-gray-500 dark:text-gray-400'"
                    class="rounded-l-lg px-3 py-1.5 text-xs font-medium">Visual</button>
            <button type="button" @click="switchToYaml()"
                    :class="editorMode === 'yaml' ? 'bg-indigo-50 text-indigo-700 dark:bg-indigo-950 dark:text-indigo-300' : 'text-gray-500 dark:text-gray-400'"
                    class="rounded-r-lg px-3 py-1.5 text-xs font-medium">YAML</button>
          </div>
        </div>

        {# ── Visual check builder ── #}
        <div x-show="editorMode === 'visual'" class="space-y-4">
          <p class="text-sm text-gray-500 dark:text-gray-400">
            Pick templates per table; YAML is generated server-side to match <code class="rounded bg-gray-100 px-1 font-mono text-xs dark:bg-gray-800">soda scan</code> checks.
          </p>
          <div x-show="generateError" class="rounded-lg border border-rose-200 bg-rose-50 p-3 text-sm text-rose-800 dark:border-rose-900 dark:bg-rose-950/40 dark:text-rose-200"
               x-text="generateError"></div>
          <div x-show="editorMode === 'visual' && yamlText.trim() && !_visualFullyParsed"
               class="rounded-lg border border-amber-200 bg-amber-50 p-3 text-sm text-amber-900 dark:border-amber-900 dark:bg-amber-950/40 dark:text-amber-100">
            Some checks could not be mapped to the visual builder (for example <span class="font-mono">for each</span> or <span class="font-mono">group by</span>). Edit in <strong>YAML</strong> mode or remove those blocks before switching back to visual.
          </div>

          <template x-for="tableName in selectedTableList" :key="tableName">
            <div class="rounded-lg border border-gray-200 dark:border-gray-700">
              {# Table accordion header #}
              <button type="button" @click="expandedTable = expandedTable === tableName ? null : tableName"
                      class="flex w-full items-center justify-between px-4 py-3 text-left text-sm font-medium text-gray-900 hover:bg-gray-50 dark:text-white dark:hover:bg-gray-800">
                <div class="flex items-center gap-2">
                  <svg class="h-4 w-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M3 14h18m-9-4v8m-7 0h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
                  <span class="font-mono" x-text="tableName"></span>
                  <template x-if="getTableCheckCount(tableName) > 0">
                    <span class="rounded-full bg-indigo-100 px-2 py-0.5 text-xs font-medium text-indigo-700 dark:bg-indigo-950 dark:text-indigo-300"
                          x-text="getTableCheckCount(tableName) + ' check' + (getTableCheckCount(tableName) > 1 ? 's' : '')"></span>
                  </template>
                </div>
                <svg class="h-4 w-4 text-gray-400 transition-transform" :class="expandedTable === tableName && 'rotate-180'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                </svg>
              </button>

              {# Expanded content #}
              <div x-show="expandedTable === tableName" x-cloak class="border-t border-gray-200 px-4 py-4 dark:border-gray-700">

                {# Check categories #}
                <template x-for="cat in categoryOrder" :key="cat.key">
                  <div class="mb-4">
                    <p class="mb-2 text-xs font-semibold uppercase tracking-wide" :class="cat.color" x-text="cat.label"></p>
                    <div class="flex flex-wrap gap-2">
                      <template x-for="tmpl in checkTemplates.filter(t => t.category === cat.key)" :key="tmpl.key">
                        <button type="button"
                                @click="startAddCheck(tableName, tmpl)"
                                class="group relative inline-flex items-center gap-1.5 rounded-lg border px-3 py-2 text-xs font-medium transition-all"
                                :class="pendingCheck && pendingCheck.table === tableName && pendingCheck.tmpl.key === tmpl.key
                                  ? 'border-indigo-400 bg-indigo-50 text-indigo-700 ring-1 ring-indigo-400 dark:border-indigo-500 dark:bg-indigo-950 dark:text-indigo-300 dark:ring-indigo-500'
                                  : 'border-gray-200 bg-white text-gray-700 hover:border-indigo-300 hover:bg-indigo-50/50 hover:text-indigo-700 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:border-indigo-600 dark:hover:bg-indigo-950/30 dark:hover:text-indigo-300'">
                          <span x-text="tmpl.label"></span>
                          <span class="hidden text-[10px] text-gray-400 group-hover:inline dark:text-gray-500" x-text="tmpl.needs_column ? '(column)' : ''"></span>
                        </button>
                      </template>
                    </div>
                  </div>
                </template>

                {# ── Inline configuration form ── #}
                <template x-if="pendingCheck && pendingCheck.table === tableName">
                  <div class="mt-3 rounded-lg border border-indigo-200 bg-indigo-50/50 p-4 dark:border-indigo-800 dark:bg-indigo-950/20">
                    <div class="mb-3 flex items-center justify-between">
                      <p class="text-sm font-semibold text-indigo-800 dark:text-indigo-200" x-text="'Add ' + pendingCheck.tmpl.label + ' check'"></p>
                      <button type="button" @click="pendingCheck = null" class="text-xs text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">Cancel</button>
                    </div>
                    <p class="mb-3 text-xs text-gray-500 dark:text-gray-400" x-text="pendingCheck.tmpl.description"></p>

                    {# Column selector #}
                    <template x-if="pendingCheck.tmpl.needs_column">
                      <div class="mb-3">
                        <label class="mb-1 block text-xs font-medium text-gray-700 dark:text-gray-300">Column <span class="text-rose-500">*</span></label>
                        <select x-model="pendingCheck.column"
                                class="w-full rounded-lg border border-gray-300 px-3 py-2 font-mono text-sm dark:border-gray-600 dark:bg-gray-800 dark:text-white">
                          <option value="">Select a column...</option>
                          <template x-for="col in getColumnsForTemplate(tableName, pendingCheck.tmpl)" :key="col.column_name">
                            <option :value="col.column_name" x-text="col.column_name + ' (' + col.data_type + ')'"></option>
                          </template>
                        </select>
                        <template x-if="getColumnsForTemplate(tableName, pendingCheck.tmpl).length === 0">
                          <p class="mt-1 text-xs text-amber-600 dark:text-amber-400">No compatible columns found. You can type a column name manually below.</p>
                        </template>
                        <template x-if="getColumnsForTemplate(tableName, pendingCheck.tmpl).length === 0">
                          <input type="text" x-model="pendingCheck.column" placeholder="Type column name..."
                                 class="mt-1 w-full rounded-lg border border-gray-300 px-3 py-2 font-mono text-sm dark:border-gray-600 dark:bg-gray-800 dark:text-white" />
                        </template>
                      </div>
                    </template>

                    {# Dynamic parameter fields #}
                    <template x-for="param in (pendingCheck.tmpl.params || [])" :key="param.name">
                      <div class="mb-3">
                        <label class="mb-1 block text-xs font-medium text-gray-700 dark:text-gray-300" x-text="param.label"></label>

                        <template x-if="param.type === 'select'">
                          <select x-model="pendingCheck.params[param.name]"
                                  class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm dark:border-gray-600 dark:bg-gray-800 dark:text-white">
                            <template x-for="opt in (param.options || [])" :key="opt">
                              <option :value="opt" x-text="opt"></option>
                            </template>
                          </select>
                        </template>

                        <template x-if="param.type === 'sql' || param.type === 'multiline'">
                          <textarea x-model="pendingCheck.params[param.name]" :rows="param.type === 'multiline' ? 6 : 3"
                                    :placeholder="param.placeholder || ''"
                                    class="w-full rounded-lg border border-gray-300 px-3 py-2 font-mono text-sm dark:border-gray-600 dark:bg-gray-800 dark:text-white"></textarea>
                        </template>

                        <template x-if="param.type !== 'select' && param.type !== 'sql' && param.type !== 'multiline'">
                          <input :type="param.type === 'number' ? 'text' : 'text'"
                                 x-model="pendingCheck.params[param.name]"
                                 :placeholder="param.placeholder || ''"
                                 class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm dark:border-gray-600 dark:bg-gray-800 dark:text-white" />
                        </template>
                      </div>
                    </template>

                    {# Add button #}
                    <button type="button" @click="confirmAddCheck(tableName)"
                            :disabled="generatingSnippet || (pendingCheck.tmpl.needs_column && !pendingCheck.column)"
                            class="mt-1 inline-flex items-center gap-1.5 rounded-lg bg-indigo-600 px-4 py-2 text-xs font-medium text-white hover:bg-indigo-500 disabled:opacity-40">
                      <svg x-show="!generatingSnippet" class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
                      <svg x-show="generatingSnippet" class="h-3.5 w-3.5 animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"/></svg>
                      <span x-text="generatingSnippet ? 'Generating…' : 'Add check'"></span>
                    </button>
                  </div>
                </template>

                {# ── Added checks list ── #}
                <template x-if="getTableCheckCount(tableName) > 0">
                  <div class="mt-4">
                    <p class="mb-2 text-xs font-semibold uppercase tracking-wide text-gray-400 dark:text-gray-500">Added checks</p>
                    <div class="space-y-1.5">
                      <template x-for="(chk, ci) in (tableChecks[tableName] || [])" :key="ci">
                        <div class="flex items-center justify-between rounded-lg border border-gray-100 bg-gray-50 px-3 py-2.5 dark:border-gray-700 dark:bg-gray-800">
                          <div class="flex flex-wrap items-center gap-2">
                            <span class="rounded-md bg-indigo-100 px-2 py-0.5 text-xs font-semibold text-indigo-700 dark:bg-indigo-950 dark:text-indigo-300" x-text="chk.label"></span>
                            <template x-if="chk.column">
                              <span class="rounded bg-gray-200 px-1.5 py-0.5 font-mono text-xs text-gray-600 dark:bg-gray-700 dark:text-gray-300" x-text="chk.column"></span>
                            </template>
                            <template x-for="[pkey, pval] in Object.entries(chk.params || {})" :key="pkey">
                              <template x-if="pval && pval !== ''">
                                <span class="text-xs text-gray-400 dark:text-gray-500">
                                  <span x-text="pkey"></span>=<span class="text-gray-600 dark:text-gray-300" x-text="pval"></span>
                                </span>
                              </template>
                            </template>
                          </div>
                          <button type="button" @click="removeCheck(tableName, ci)"
                                  class="ml-2 shrink-0 rounded p-0.5 text-gray-400 hover:bg-rose-100 hover:text-rose-600 dark:hover:bg-rose-950 dark:hover:text-rose-400">
                            <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                          </button>
                        </div>
                      </template>
                    </div>
                  </div>
                </template>
              </div>
            </div>
          </template>
        </div>

        {# ── YAML editor ── #}
        <div x-show="editorMode === 'yaml'" class="space-y-2">
          <p class="text-sm text-gray-500 dark:text-gray-400">Edit the SodaCL YAML directly. Changes here are used as-is.</p>
          <textarea x-model="yamlText" rows="18"
                    @input="yamlManuallyEdited = true"
                    class="w-full rounded-lg border border-gray-300 px-3 py-2 font-mono text-sm leading-relaxed dark:border-gray-600 dark:bg-gray-800 dark:text-white"
                    placeholder="checks for my_table:&#10;  - row_count > 0"></textarea>
        </div>

        {# YAML preview in visual mode #}
        <template x-if="editorMode === 'visual' && yamlText.trim()">
          <div class="mt-4">
            <details open class="group">
              <summary class="cursor-pointer text-xs font-medium text-gray-500 dark:text-gray-400">Generated SodaCL YAML preview</summary>
              <pre class="mt-2 max-h-64 overflow-auto rounded-lg bg-gray-50 p-3 font-mono text-xs leading-relaxed text-gray-800 dark:bg-gray-950 dark:text-gray-200"
                   x-text="yamlText"></pre>
            </details>
          </div>
        </template>
      </div>

      <div class="flex justify-between gap-3">
        <button type="button" @click="prevStep()"
                class="rounded-xl border border-gray-300 px-4 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:text-gray-200 dark:hover:bg-gray-800">
          Back
        </button>
        <button type="button" @click="nextStep()"
                :disabled="!yamlText.trim()"
                class="rounded-xl bg-indigo-600 px-5 py-2.5 text-sm font-medium text-white hover:bg-indigo-500 disabled:opacity-40">
          Next
        </button>
      </div>
    </div>

    {# ═══════════════════════════════════════════════════════════════════
       STEP 4 — Schedule & Review
       ═══════════════════════════════════════════════════════════════════ #}
    <div x-show="step === 4" x-cloak class="space-y-6">
      <div class="rounded-xl border border-gray-200 bg-white p-6 dark:border-gray-700 dark:bg-gray-900">
        <h2 class="mb-4 text-lg font-semibold text-gray-900 dark:text-white">Schedule</h2>

        <label class="flex items-center gap-2">
          <input type="checkbox" x-model="scheduleEnabled" name="schedule_enabled" />
          <span class="text-sm font-medium text-gray-800 dark:text-gray-200">Enable recurring schedule</span>
        </label>

        <div x-show="scheduleEnabled" class="mt-4 grid gap-3 sm:grid-cols-2">
          <div>
            <label class="mb-1 block text-xs text-gray-500 dark:text-gray-400">Interval</label>
            <select x-model="intervalPreset" name="interval_preset"
                    class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm dark:border-gray-600 dark:bg-gray-800 dark:text-white">
              {% for key, label in preset_labels.items() %}
              <option value="{{ key }}">{{ label }}</option>
              {% endfor %}
            </select>
          </div>
          <div x-show="intervalPreset === 'custom'" x-cloak>
            <label class="mb-1 block text-xs text-gray-500 dark:text-gray-400">Cron expression</label>
            <input type="text" x-model="cronExpression" name="cron_expression"
                   placeholder="0 */6 * * *"
                   class="w-full rounded-lg border border-gray-300 px-3 py-2 font-mono text-sm dark:border-gray-600 dark:bg-gray-800 dark:text-white" />
          </div>
        </div>
      </div>

      {% if not is_edit %}
      <label class="flex items-center gap-2 px-1">
        <input type="checkbox" x-model="runNow" name="run_now" value="true" />
        <span class="text-sm text-gray-700 dark:text-gray-300">Run immediately after creating</span>
      </label>
      {% endif %}

      <div class="rounded-xl border border-gray-200 bg-white p-6 dark:border-gray-700 dark:bg-gray-900">
        <h2 class="mb-4 text-lg font-semibold text-gray-900 dark:text-white">Review</h2>
        <dl class="space-y-3 text-sm">
          <div class="flex gap-3">
            <dt class="w-28 shrink-0 font-medium text-gray-500 dark:text-gray-400">Name</dt>
            <dd class="text-gray-900 dark:text-white" x-text="name"></dd>
          </div>
          <div class="flex gap-3">
            <dt class="w-28 shrink-0 font-medium text-gray-500 dark:text-gray-400">Connection</dt>
            <dd class="text-gray-900 dark:text-white" x-text="connectionLabel || '\u2014'"></dd>
          </div>
          <div class="flex gap-3">
            <dt class="w-28 shrink-0 font-medium text-gray-500 dark:text-gray-400">Tables</dt>
            <dd class="text-gray-900 dark:text-white">
              <div class="flex flex-wrap gap-1">
                <template x-for="t in selectedTableList" :key="t">
                  <span class="rounded bg-gray-100 px-1.5 py-0.5 font-mono text-xs dark:bg-gray-800" x-text="t"></span>
                </template>
              </div>
            </dd>
          </div>
          <div class="flex gap-3">
            <dt class="w-28 shrink-0 font-medium text-gray-500 dark:text-gray-400">Checks</dt>
            <dd class="text-gray-900 dark:text-white" x-text="totalCheckCount + ' check' + (totalCheckCount !== 1 ? 's' : '') + ' across ' + selectedTableList.length + ' table' + (selectedTableList.length !== 1 ? 's' : '')"></dd>
          </div>
          <div>
            <dt class="mb-1 font-medium text-gray-500 dark:text-gray-400">SodaCL YAML</dt>
            <dd>
              <pre class="max-h-48 overflow-auto rounded-lg bg-gray-50 p-3 font-mono text-xs leading-relaxed text-gray-800 dark:bg-gray-950 dark:text-gray-200"
                   x-text="yamlText"></pre>
            </dd>
          </div>
        </dl>
      </div>

      <input type="hidden" name="name" :value="name" />
      <input type="hidden" name="description" :value="description" />

      <div class="flex justify-between gap-3">
        <button type="button" @click="prevStep()"
                class="rounded-xl border border-gray-300 px-4 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:text-gray-200 dark:hover:bg-gray-800">
          Back
        </button>
        <button type="submit"
                class="rounded-xl bg-indigo-600 px-6 py-2.5 text-sm font-medium text-white shadow-sm hover:bg-indigo-500">
          {% if is_edit %}Save{% else %}Create{% endif %}
        </button>
      </div>
    </div>
  </form>
</div>

<script>
function dqWizard() {
  const checkTemplates = {{ check_templates_json | safe }};
  const initialForm = {{ form_json | safe }};
  const isEdit = {{ 'true' if is_edit else 'false' }};

  return {
    isEdit: isEdit,
    steps: ['Connection', 'Tables', 'Checks', 'Review'],
    step: 1,
    maxReached: 1,

    // Step 1
    name: initialForm.name || '',
    description: initialForm.description || '',
    connectionId: initialForm.connection_id || '',
    teamId: initialForm.team_id || '',
    alertingProfileId: initialForm.alerting_profile_id || '',
    dataSourceName: initialForm.data_source_name || '',
    connectionLabel: '',

    // Step 2
    schema: initialForm.schema || 'public',
    discovering: false,
    discoveryDone: false,
    discoveryError: '',
    discoveredTables: {},      // { tableName: [{column_name, data_type, is_nullable}] }
    discoveredTableMeta: {},   // { tableName: {table_type} }
    selectedTables: {},
    manualTable: '',
    tableFilter: '',

    // Step 3
    checkTemplates: checkTemplates,
    editorMode: initialForm.sodacl_yaml ? 'yaml' : 'visual',
    tableChecks: {},           // { tableName: [{key, label, column, params, snippet}] }
    expandedTable: null,
    pendingCheck: null,        // { table, tmpl, column, params: {} }
    yamlText: initialForm.sodacl_yaml || '',
    yamlManuallyEdited: !!initialForm.sodacl_yaml,
    _visualFullyParsed: true,
    _yamlBeforeVisual: '',
    generatingSnippet: false,
    generateError: '',

    categoryOrder: [
      { key: 'integrity',  label: 'Data Integrity',  color: 'text-emerald-600 dark:text-emerald-400' },
      { key: 'timeliness', label: 'Timeliness',       color: 'text-sky-600 dark:text-sky-400' },
      { key: 'validation', label: 'Validation',       color: 'text-amber-600 dark:text-amber-400' },
      { key: 'statistical', label: 'Statistical',     color: 'text-violet-600 dark:text-violet-400' },
      { key: 'advanced',   label: 'Advanced',         color: 'text-gray-500 dark:text-gray-400' },
    ],

    // Step 4
    scheduleEnabled: initialForm.schedule_enabled || false,
    intervalPreset: initialForm.interval_preset || 'daily',
    cronExpression: initialForm.cron_expression || '',
    runNow: initialForm.run_now || false,

    get discoveredTableNames() {
      return Object.keys(this.discoveredTables).sort();
    },

    get filteredTableNames() {
      const q = (this.tableFilter || '').toLowerCase();
      if (!q) return this.discoveredTableNames;
      return this.discoveredTableNames.filter(n => n.toLowerCase().includes(q));
    },

    get selectedTableList() {
      return Object.keys(this.selectedTables).filter(t => this.selectedTables[t]).sort();
    },

    get usedCategories() {
      const cats = new Set();
      for (const checks of Object.values(this.tableChecks)) {
        for (const chk of checks) cats.add(chk.key);
      }
      return [...cats];
    },

    get totalCheckCount() {
      let n = 0;
      for (const checks of Object.values(this.tableChecks)) n += (checks || []).length;
      return n;
    },

    getTableCheckCount(tableName) {
      return (this.tableChecks[tableName] || []).length;
    },

    init() {
      if (this.connectionId) {
        const opt = document.querySelector(`select option[value="${this.connectionId}"]`);
        if (opt) this.connectionLabel = opt.textContent.trim();
      }
      const existingTables = initialForm.tables || [];
      for (const t of existingTables) {
        this.selectedTables[t] = true;
        if (!this.discoveredTables[t]) this.discoveredTables[t] = [];
      }
      if (this.isEdit) {
        this.maxReached = this.steps.length;
        if (existingTables.length > 0) {
          this.discoveryDone = true;
        }
      }
      if (this.yamlText.trim()) {
        this._yamlBeforeVisual = this.yamlText;
        this._parseYamlToChecks();
      }
      if (this.isEdit && this.selectedTableList.length > 0) {
        this.discoveryDone = true;
      }
      if (this.isEdit && this.totalCheckCount > 0) {
        this.editorMode = 'visual';
        this.yamlManuallyEdited = false;
        this.expandedTable = this.selectedTableList[0] || null;
      } else if (initialForm.sodacl_yaml) {
        this.editorMode = 'yaml';
        this.yamlManuallyEdited = true;
      }
    },

    goToStep(n) {
      if (n <= this.maxReached) this.step = n;
    },

    nextStep() {
      if (this.step < 4) {
        this.step++;
        if (this.step > this.maxReached) this.maxReached = this.step;
        if (this.step === 2 && !this.discoveryDone && !this.discovering) {
          this.discoverTables();
        }
        if (this.step === 3 && this.selectedTableList.length > 0 && !this.expandedTable) {
          this.expandedTable = this.selectedTableList[0];
        }
        if ((this.step === 3 || this.step === 4) && this.editorMode === 'visual' && !this.yamlManuallyEdited) {
          this.rebuildYaml();
        }
      }
    },

    prevStep() {
      if (this.step > 1) this.step--;
    },

    onConnectionChange() {
      const sel = document.querySelector(`select option[value="${this.connectionId}"]`);
      if (sel) {
        this.connectionLabel = sel.textContent.trim();
        const connSchema = sel.dataset.schema || '';
        if (connSchema) this.schema = connSchema;
      }
      this.discoveryDone = false;
      this.discoveryError = '';
    },

    async discoverTables() {
      if (!this.connectionId) return;
      this.discovering = true;
      this.discoveryError = '';
      try {
        const fd = new FormData();
        fd.append('connection_id', this.connectionId);
        fd.append('schema', this.schema || 'public');
        const resp = await fetch('/ui/partials/dq-discover-tables-json', { method: 'POST', body: fd });
        const data = await resp.json();
        if (data.error) {
          this.discoveryError = data.error;
          this.discovering = false;
          return;
        }
        const prev = { ...this.selectedTables };
        for (const t of (data.tables || [])) {
          this.discoveredTables[t.table_name] = t.columns || [];
          this.discoveredTableMeta[t.table_name] = { table_type: t.table_type || 'table' };
          if (this.selectedTables[t.table_name] === undefined) {
            this.selectedTables[t.table_name] = !this.isEdit;
          }
        }
        // Restore previously selected state
        for (const [tName, wasSelected] of Object.entries(prev)) {
          if (wasSelected && this.discoveredTables[tName] !== undefined) {
            this.selectedTables[tName] = true;
          }
        }
        this.discoveryDone = true;
      } catch (e) {
        this.discoveryError = 'Network error: ' + e.message;
      }
      this.discovering = false;
    },

    toggleTable(tableName) {
      this.selectedTables[tableName] = !this.selectedTables[tableName];
    },

    addManualTable() {
      const t = this.manualTable.trim();
      if (t) {
        this.selectedTables[t] = true;
        if (!this.discoveredTables[t]) this.discoveredTables[t] = [];
        this.manualTable = '';
      }
    },

    // ── Check builder ──

    async startAddCheck(tableName, tmpl) {
      this.generateError = '';
      const params = {};
      for (const p of (tmpl.params || [])) {
        params[p.name] = p.default || '';
      }
      this.pendingCheck = {
        table: tableName,
        tmpl: tmpl,
        column: '',
        params: params,
      };
      if (!tmpl.needs_column && (tmpl.params || []).length === 0) {
        await this.confirmAddCheck(tableName);
      }
    },

    getColumnsForTemplate(tableName, tmpl) {
      const cols = this.discoveredTables[tableName] || [];
      const allowed = tmpl.column_types || [];
      if (allowed.length === 0) return cols;
      return cols.filter(c => allowed.includes(c.data_type));
    },

    _checkSignature(tableName, tmplKey, column, params) {
      const keys = Object.keys(params || {}).sort();
      const ordered = {};
      for (const k of keys) ordered[k] = params[k];
      return JSON.stringify([tableName, tmplKey, column || '', ordered]);
    },

    async confirmAddCheck(tableName) {
      const pc = this.pendingCheck;
      if (!pc || pc.table !== tableName) return;
      const column = pc.tmpl.needs_column ? (pc.column || null) : null;
      const params = { ...pc.params };
      if (pc.tmpl.needs_column && !column) return;

      const sig = this._checkSignature(tableName, pc.tmpl.key, column, params);
      const existing = this.tableChecks[tableName] || [];
      for (const ex of existing) {
        if (this._checkSignature(tableName, ex.key, ex.column, ex.params) === sig) {
          this.pendingCheck = null;
          return;
        }
      }

      this.generatingSnippet = true;
      this.generateError = '';
      let snippet = '';
      try {
        const fd = new FormData();
        fd.append('template_key', pc.tmpl.key);
        fd.append('table', tableName);
        fd.append('column', column || '');
        fd.append('params', JSON.stringify(params));
        const resp = await fetch('/ui/partials/dq-generate-check', { method: 'POST', body: fd });
        const text = await resp.text();
        if (!resp.ok) {
          this.generateError = text || 'Could not generate check';
          return;
        }
        snippet = text;
      } catch (e) {
        this.generateError = 'Network error: ' + (e.message || String(e));
        return;
      } finally {
        this.generatingSnippet = false;
      }

      if (!this.tableChecks[tableName]) this.tableChecks[tableName] = [];
      this.tableChecks[tableName].push({
        key: pc.tmpl.key,
        label: pc.tmpl.label,
        column: column,
        params: params,
        snippet: snippet,
      });
      this.pendingCheck = null;
      if (this.editorMode === 'visual') {
        if (this._visualFullyParsed) {
          this.rebuildYaml();
        } else {
          this._appendCheckToYaml(tableName, snippet);
        }
      }
    },

    removeCheck(tableName, idx) {
      if (this.tableChecks[tableName]) {
        this.tableChecks[tableName].splice(idx, 1);
        if (this.editorMode === 'visual') {
          this.rebuildYaml();
        }
      }
    },

    switchToVisual() {
      this._yamlBeforeVisual = this.yamlText;
      if (this.yamlText.trim()) {
        this._parseYamlToChecks();
      }
      this.editorMode = 'visual';
      if (this.totalCheckCount > 0) {
        this.yamlManuallyEdited = false;
      }
      if (!this.expandedTable && this.selectedTableList.length > 0) {
        this.expandedTable = this.selectedTableList[0];
      }
    },

    switchToYaml() {
      if (this.editorMode === 'visual') this.rebuildYaml();
      this.editorMode = 'yaml';
      this.yamlManuallyEdited = true;
    },

    rebuildYaml() {
      const parts = [];
      const tableGroups = {};
      for (const [tableName, checks] of Object.entries(this.tableChecks)) {
        if (!checks || checks.length === 0) continue;
        if (!tableGroups[tableName]) tableGroups[tableName] = [];
        for (const chk of checks) {
          const lines = chk.snippet.split('\n');
          for (const line of lines) {
            if (line.startsWith('checks for ')) continue;
            if (line.trim()) tableGroups[tableName].push(line);
          }
        }
      }

      if (this._yamlBeforeVisual) {
        const savedBlocks = this._extractYamlTableBlocks(this._yamlBeforeVisual);
        for (const [tableName, blockLines] of Object.entries(savedBlocks)) {
          if (!tableGroups[tableName]) {
            tableGroups[tableName] = blockLines;
          }
        }
      }

      for (const [tableName, checkLines] of Object.entries(tableGroups)) {
        parts.push(`checks for ${tableName}:`);
        for (const line of checkLines) {
          parts.push(line);
        }
      }
      this.yamlText = parts.join('\n') + (parts.length ? '\n' : '');
    },

    _appendCheckToYaml(tableName, snippet) {
      const newLines = snippet.split('\n')
        .filter(l => !l.startsWith('checks for ') && l.trim());
      if (!newLines.length) return;

      const header = `checks for ${tableName}:`;
      const yaml = this.yamlText || '';
      const yamlLines = yaml.split('\n');
      let headerIdx = -1;
      for (let i = 0; i < yamlLines.length; i++) {
        if (yamlLines[i].replace(/\r$/, '').trimEnd() === header) {
          headerIdx = i;
          break;
        }
      }

      if (headerIdx >= 0) {
        let insertAfter = headerIdx;
        for (let i = headerIdx + 1; i < yamlLines.length; i++) {
          const clean = yamlLines[i].replace(/\r$/, '');
          if (/^checks for /.test(clean)) break;
          if (clean.trim()) insertAfter = i;
        }
        yamlLines.splice(insertAfter + 1, 0, ...newLines);
        this.yamlText = yamlLines.join('\n');
      } else {
        const trimmed = yaml.trimEnd();
        const sep = trimmed ? '\n' : '';
        this.yamlText = trimmed + sep + header + '\n' + newLines.join('\n') + '\n';
      }
    },

    _extractYamlTableBlocks(yaml) {
      const blocks = {};
      let currentTable = null;
      let currentLines = [];
      for (const rawLine of (yaml || '').split('\n')) {
        const line = rawLine.replace(/\r$/, '');
        const m = line.match(/^checks for (.+):$/);
        if (m) {
          if (currentTable && currentLines.length > 0) {
            blocks[currentTable] = currentLines;
          }
          currentTable = m[1].trim();
          currentLines = [];
        } else if (currentTable && line.trim()) {
          currentLines.push(line);
        }
      }
      if (currentTable && currentLines.length > 0) {
        blocks[currentTable] = currentLines;
      }
      return blocks;
    },

    _parseYamlToChecks() {
      const yaml = this.yamlText || '';
      if (!yaml.trim()) return;

      const tmplMap = {};
      for (const t of this.checkTemplates) tmplMap[t.key] = t;

      const newTableChecks = {};
      const lines = yaml.split('\n').map(l => l.replace(/\r$/, ''));

      let currentTable = null;
      let blockLines = [];

      const flushBlock = () => {
        if (!currentTable || blockLines.length === 0) return;
        const snippet = 'checks for ' + currentTable + ':\n' + blockLines.join('\n') + '\n';
        const raw = (blockLines[0] || '').replace(/^\s*-\s*/, '').replace(/:\s*$/, '');
        const parsed = this._identifyCheck(raw, blockLines);
        const tmpl = tmplMap[parsed.key];
        const rowLabel = tmpl ? tmpl.label : (parsed.key === 'custom' ? 'Custom (YAML)' : parsed.key);
        if (!newTableChecks[currentTable]) newTableChecks[currentTable] = [];
        newTableChecks[currentTable].push({
          key: parsed.key,
          label: rowLabel,
          column: parsed.column,
          params: parsed.params,
          snippet: snippet,
        });
      };

      for (const line of lines) {
        const tableMatch = line.match(/^checks for (.+):$/);
        if (tableMatch) {
          flushBlock();
          currentTable = tableMatch[1].trim();
          blockLines = [];
          continue;
        }
        if (currentTable && /^\s{2,}-\s/.test(line)) {
          flushBlock();
          blockLines = [line];
        } else if (currentTable && line.trim()) {
          blockLines.push(line);
        }
      }
      flushBlock();

      let parsedCount = 0;
      for (const checks of Object.values(newTableChecks)) parsedCount += checks.length;
      const yamlCheckLines = (yaml.match(/^\s{2,}-\s/gm) || []).length;
      this._visualFullyParsed = (parsedCount >= yamlCheckLines && parsedCount > 0);

      if (parsedCount > 0) {
        for (const tName of Object.keys(newTableChecks)) {
          if (!this.selectedTables[tName]) {
            this.selectedTables[tName] = true;
          }
          if (!this.discoveredTables[tName]) {
            this.discoveredTables[tName] = [];
          }
        }
        this.tableChecks = newTableChecks;
      }
    },

    _identifyCheck(checkLine, blockLines) {
      let m;
      const bl = blockLines || [];

      if (/^row_count\s*[><=!]/.test(checkLine)) {
        return { key: 'volume', column: null, params: {} };
      }
      if ((m = checkLine.match(/^freshness\((\S+)\)\s*<\s*(.+)/))) {
        return { key: 'freshness', column: m[1], params: { threshold: m[2].trim() } };
      }
      if ((m = checkLine.match(/^freshness\((\S+)\)$/)) && bl.length > 1) {
        return { key: 'freshness_warn_fail', column: m[1], params: {} };
      }
      if ((m = checkLine.match(/^missing_count\((\S+)\)/))) {
        return { key: 'completeness', column: m[1], params: {} };
      }
      if ((m = checkLine.match(/^missing_percent\((\S+)\)\s*(\S+)\s*(.+)/))) {
        return {
          key: 'missing_percent',
          column: m[1],
          params: { operator: m[2], threshold: m[3].replace(/%$/, '').trim() },
        };
      }
      if ((m = checkLine.match(/^duplicate_count\((\S+)\)/))) {
        return { key: 'uniqueness', column: m[1], params: {} };
      }
      if ((m = checkLine.match(/^invalid_count\((\S+)\)/))) {
        let validValues = '';
        let validFormat = '';
        let validRegex = '';
        let inValidValues = false;
        for (const line of bl) {
          if (/valid values:/.test(line)) {
            inValidValues = true;
            continue;
          }
          if (inValidValues) {
            const vm = line.match(/^\s*-\s*(.+)/);
            if (vm) validValues = validValues ? validValues + ', ' + vm[1].trim() : vm[1].trim();
            else inValidValues = false;
          }
          const ffmt = line.match(/valid format:\s*(.+)/);
          if (ffmt) validFormat = ffmt[1].trim();
          const frx = line.match(/valid regex:\s*(.+)/);
          if (frx) validRegex = frx[1].trim();
        }
        if (validRegex) {
          return { key: 'validity_regex', column: m[1], params: { pattern: validRegex } };
        }
        if (validFormat) {
          return { key: 'validity_format', column: m[1], params: { valid_format: validFormat } };
        }
        return { key: 'validity', column: m[1], params: { valid_values: validValues } };
      }
      if ((m = checkLine.match(/^values in \(([^)]+)\) must exist in (\S+) \(([^)]+)\)/))) {
        const left = m[1].replace(/\s/g, '');
        const multi = left.includes(',');
        return {
          key: 'consistency',
          column: multi ? null : left,
          params: {
            other_table: m[2],
            other_column: m[3].replace(/\s/g, ''),
            source_columns: multi ? left : '',
          },
        };
      }
      if ((m = checkLine.match(/^(avg|min|max|sum|stddev)\((\S+)\)\s+between\s+(\S+)\s+and\s+(\S+)/))) {
        return {
          key: 'statistical',
          column: m[2],
          params: { metric: m[1], min: m[3], max: m[4] },
        };
      }
      if ((m = checkLine.match(/^row_count same as (\S+)/))) {
        return { key: 'cross_row_count', column: null, params: { other_dataset: m[1] } };
      }
      if (/^anomaly score for/.test(checkLine)) {
        return { key: 'custom', column: null, params: {} };
      }
      if (/^schema/.test(checkLine)) {
        return { key: 'schema', column: null, params: {} };
      }
      if (/^failed rows/.test(checkLine)) {
        let failCondition = '';
        let failQuery = '';
        let qStarted = false;
        const qLines = [];
        for (const bline of bl) {
          const fcm = bline.match(/fail condition:\s*(.+)/);
          if (fcm) failCondition = fcm[1].trim();
          if (/fail query:\s*\|/.test(bline)) {
            qStarted = true;
            continue;
          }
          if (qStarted) {
            qLines.push(bline.replace(/^\s{8}/, ''));
          }
        }
        if (qLines.length) failQuery = qLines.join('\n').trim();
        if (failQuery) {
          return { key: 'failed_rows_query', column: null, params: { fail_query: failQuery, check_name: '' } };
        }
        return { key: 'custom_sql', column: null, params: { fail_condition: failCondition } };
      }
      if (/^profile columns/.test(checkLine)) {
        return { key: 'profiling', column: null, params: {} };
      }

      return { key: 'custom', column: null, params: {} };
    },

    onSubmit(event) {
      if (this.editorMode === 'visual' && !this.yamlManuallyEdited) {
        this.rebuildYaml();
      }
    },
  };
}
</script>
{% endblock %}