{% extends "base.html" %}
{% block title %}Sraosha — Discover from Database{% endblock %}

{% block content %}
<div class="space-y-6">

  <div class="flex items-center gap-4">
    <a href="/ui/contracts" class="text-indigo-600 hover:underline text-sm">&larr; Back to Contracts</a>
    <h1 class="text-2xl font-bold text-gray-900">Discover from Database</h1>
  </div>

  <p class="text-sm text-gray-500">
    Connect to a SQL database, discover tables automatically, and generate data contracts for selected tables.
  </p>

  <form id="discover-form" method="post" action="/ui/contracts/discover">

    <!-- Step 1: Connection -->
    <div class="bg-white rounded-xl border border-gray-200 p-6 space-y-5">
      <div class="flex items-center gap-3">
        <span class="flex items-center justify-center w-7 h-7 rounded-full bg-indigo-100 text-indigo-700 text-sm font-bold">1</span>
        <h2 class="text-lg font-semibold text-gray-900">Connection Details</h2>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div>
          <label class="block text-xs font-medium text-gray-500 mb-1">Server Type</label>
          <select name="server_type" id="discover-type"
                  onchange="updateDiscoverFields()"
                  class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
            <option value="postgres" selected>PostgreSQL</option>
            <option value="mysql">MySQL</option>
            <option value="duckdb">DuckDB</option>
          </select>
        </div>

        <div data-dfield="host">
          <label class="block text-xs font-medium text-gray-500 mb-1">Host</label>
          <input type="text" name="host" placeholder="localhost"
                 class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500" />
        </div>
        <div data-dfield="port">
          <label class="block text-xs font-medium text-gray-500 mb-1">Port</label>
          <input type="text" name="port" id="discover-port" placeholder="5432"
                 class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500" />
        </div>
        <div data-dfield="database">
          <label class="block text-xs font-medium text-gray-500 mb-1">Database</label>
          <input type="text" name="database" placeholder="warehouse"
                 class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500" />
        </div>
        <div data-dfield="schema">
          <label class="block text-xs font-medium text-gray-500 mb-1">Schema</label>
          <input type="text" name="schema" value="public" placeholder="public"
                 class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500" />
        </div>
        <div data-dfield="user">
          <label class="block text-xs font-medium text-gray-500 mb-1">Username</label>
          <input type="text" name="user" placeholder="postgres"
                 class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500" />
        </div>
        <div data-dfield="password">
          <label class="block text-xs font-medium text-gray-500 mb-1">Password</label>
          <input type="password" name="password" placeholder="password"
                 class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500" />
        </div>
        <div data-dfield="path" style="display:none">
          <label class="block text-xs font-medium text-gray-500 mb-1">File Path</label>
          <input type="text" name="path" placeholder="/data/warehouse.duckdb"
                 class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500" />
        </div>
      </div>

      <div class="flex items-center gap-4">
        <button type="button" id="test-btn"
                hx-post="/ui/partials/discover-test"
                hx-include="#discover-form"
                hx-target="#test-result"
                hx-swap="innerHTML"
                class="inline-flex items-center gap-2 bg-white border border-gray-300 text-gray-700 px-4 py-2 rounded-lg text-sm font-medium hover:bg-gray-50 transition-colors">
          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
          Test Connection
        </button>
        <div id="test-result"></div>
      </div>
    </div>

    <!-- Step 2: Discover -->
    <div class="bg-white rounded-xl border border-gray-200 p-6 space-y-5 mt-6">
      <div class="flex items-center justify-between">
        <div class="flex items-center gap-3">
          <span class="flex items-center justify-center w-7 h-7 rounded-full bg-indigo-100 text-indigo-700 text-sm font-bold">2</span>
          <h2 class="text-lg font-semibold text-gray-900">Discover Tables</h2>
        </div>
        <button type="button"
                hx-post="/ui/partials/discover-tables"
                hx-include="#discover-form"
                hx-target="#tables-result"
                hx-swap="innerHTML"
                hx-indicator="#discover-spinner"
                class="inline-flex items-center gap-2 bg-indigo-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-indigo-700 transition-colors shadow-sm">
          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
          Discover Tables
        </button>
      </div>
      <p class="text-sm text-gray-500">
        Click "Discover Tables" to scan the database and list available tables.
      </p>
      <div id="discover-spinner" class="htmx-indicator text-sm text-gray-400">Scanning database...</div>
      <div id="tables-result"></div>
    </div>

    <!-- Step 3: Contract Options & Generate -->
    <div class="bg-white rounded-xl border border-gray-200 p-6 space-y-5 mt-6">
      <div class="flex items-center gap-3">
        <span class="flex items-center justify-center w-7 h-7 rounded-full bg-indigo-100 text-indigo-700 text-sm font-bold">3</span>
        <h2 class="text-lg font-semibold text-gray-900">Contract Options</h2>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div>
          <label class="block text-xs font-medium text-gray-500 mb-1">Team</label>
          <select name="team_id"
                  class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
            <option value="">— Optional —</option>
            {% for t in teams|default([]) %}
            <option value="{{ t.id }}">{{ t.name }}</option>
            {% endfor %}
          </select>
          <p class="text-xs text-gray-400 mt-1">Preferred: registers <code class="text-xs">x-sraosha.team_id</code> for compliance (same as the main contract form).</p>
        </div>
        <div>
          <label class="block text-xs font-medium text-gray-500 mb-1">Alerting profile</label>
          <select name="alerting_profile_id"
                  class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
            <option value="">— Optional —</option>
            {% for p in alerting_profiles|default([]) %}
            <option value="{{ p.id }}">{{ p.name }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="md:col-span-2">
          <label class="block text-xs font-medium text-gray-500 mb-1">Steward <span class="text-gray-400 font-normal">(optional)</span></label>
          <p class="text-xs text-gray-400 mb-1">Fills <code class="bg-gray-100 px-1 rounded text-xs">info.owner</code> only—human/org label, not the compliance team above.</p>
          <input type="text" name="owner" placeholder="e.g. Data platform"
                 class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500" />
        </div>
      </div>

      <div class="flex items-center justify-end gap-3 pt-4 border-t border-gray-200">
        <a href="/ui/contracts" class="text-sm text-gray-500 hover:text-gray-700 transition-colors">Cancel</a>
        <button type="submit"
                class="inline-flex items-center gap-2 bg-indigo-600 text-white px-5 py-2.5 rounded-lg text-sm font-medium hover:bg-indigo-700 transition-colors shadow-sm">
          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
          Generate Contracts
        </button>
      </div>
    </div>

  </form>
</div>

<script>
const DISCOVER_FIELDS = {
  postgres: ['host','port','database','schema','user','password'],
  mysql:    ['host','port','database','schema','user','password'],
  duckdb:   ['path','database','schema'],
};
const DISCOVER_ALL = ['host','port','database','schema','user','password','path'];
const DISCOVER_PORTS = {postgres:'5432', mysql:'3306'};

function updateDiscoverFields() {
  const t = document.getElementById('discover-type').value;
  const visible = DISCOVER_FIELDS[t] || DISCOVER_FIELDS.postgres;
  DISCOVER_ALL.forEach(f => {
    const el = document.querySelector('[data-dfield="' + f + '"]');
    if (el) {
      const show = visible.includes(f);
      el.style.display = show ? '' : 'none';
      if (!show) {
        const inp = el.querySelector('input');
        if (inp) inp.value = '';
      }
    }
  });
  const portInput = document.getElementById('discover-port');
  if (portInput && !portInput.value) portInput.placeholder = DISCOVER_PORTS[t] || '5432';
}

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