{% extends "base.html" %}
{% block title %}Sraosha — {{ "New Connection" if mode == "create" else "Edit " + form.name }}{% endblock %}

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

  <div class="flex items-center gap-4">
    <a href="/ui/connections" class="text-indigo-600 hover:underline text-sm">&larr; Connections</a>
    <h1 class="text-2xl font-bold text-gray-900">
      {% if mode == "create" %}New Connection{% else %}Edit {{ form.name }}{% endif %}
    </h1>
  </div>

  {% if errors %}
  <div class="bg-red-50 border border-red-200 rounded-lg p-4">
    <div class="flex items-start gap-3">
      <svg class="w-5 h-5 text-red-500 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
      <div>
        {% for err in errors %}
        <p class="text-sm text-red-700">{{ err }}</p>
        {% endfor %}
      </div>
    </div>
  </div>
  {% endif %}

  <form method="post"
        action="{% if mode == 'edit' %}/ui/connections/{{ conn_id }}/edit{% else %}/ui/connections/new{% endif %}"
        id="connection-form">

    <!-- General -->
    <div class="bg-white rounded-xl border border-gray-200 p-6 space-y-5">
      <h2 class="text-lg font-semibold text-gray-900">Connection Details</h2>
      <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">Connection Name</label>
          <input type="text" name="name" value="{{ form.name }}" placeholder="prod-postgres" required
                 class="w-full border border-gray-300 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent" />
          <p class="text-xs text-gray-400 mt-1">Unique name used to reference this connection.</p>
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">Server Type</label>
          <select name="server_type" id="server-type-select" onchange="updateConnectionFields()"
                  class="w-full border border-gray-300 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500" required>
            {% for t in [
              "postgres", "mysql", "bigquery", "snowflake", "redshift",
              "databricks", "trino", "duckdb", "mssql", "athena",
              "clickhouse", "oracle", "vertica", "presto", "synapse",
              "denodo", "dremio", "motherduck", "db2", "spark",
              "fabric", "cloudsql", "dask",
            ] %}
            <option value="{{ t }}" {% if form.server_type == t %}selected{% endif %}>{{ t }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="md:col-span-2">
          <label class="block text-sm font-medium text-gray-700 mb-1">Description</label>
          <input type="text" name="description" value="{{ form.description or '' }}" placeholder="Production PostgreSQL database"
                 class="w-full border border-gray-300 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent" />
        </div>
      </div>
    </div>

    <!-- Connection Parameters -->
    <div class="bg-white rounded-xl border border-gray-200 p-6 space-y-5 mt-6">
      <h2 class="text-lg font-semibold text-gray-900">Connection Parameters</h2>
      <div class="grid grid-cols-1 md:grid-cols-2 gap-5" id="conn-fields">
        <div data-field="host">
          <label class="block text-sm font-medium text-gray-700 mb-1">Host</label>
          <input type="text" name="host" value="{{ form.host or '' }}" placeholder="db.company.com"
                 class="w-full border border-gray-300 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent" />
        </div>
        <div data-field="port">
          <label class="block text-sm font-medium text-gray-700 mb-1">Port</label>
          <input type="number" name="port" value="{{ form.port or '' }}" placeholder="5432"
                 class="w-full border border-gray-300 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent" />
        </div>
        <div data-field="database">
          <label class="block text-sm font-medium text-gray-700 mb-1">Database</label>
          <input type="text" name="database" value="{{ form.database or '' }}" placeholder="warehouse"
                 class="w-full border border-gray-300 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent" />
        </div>
        <div data-field="schema">
          <label class="block text-sm font-medium text-gray-700 mb-1">Schema</label>
          <input type="text" name="schema_name" value="{{ form.schema_name or '' }}" placeholder="public"
                 class="w-full border border-gray-300 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent" />
        </div>
        <div data-field="account" style="display:none">
          <label class="block text-sm font-medium text-gray-700 mb-1">Account</label>
          <input type="text" name="account" value="{{ form.account or '' }}" placeholder="xy12345.us-east-1"
                 class="w-full border border-gray-300 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent" />
        </div>
        <div data-field="warehouse" style="display:none">
          <label class="block text-sm font-medium text-gray-700 mb-1">Warehouse</label>
          <input type="text" name="warehouse" value="{{ form.warehouse or '' }}" placeholder="COMPUTE_WH"
                 class="w-full border border-gray-300 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent" />
        </div>
        <div data-field="role" style="display:none">
          <label class="block text-sm font-medium text-gray-700 mb-1">Role</label>
          <input type="text" name="role" value="{{ form.role or '' }}" placeholder="SYSADMIN"
                 class="w-full border border-gray-300 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent" />
        </div>
        <div data-field="catalog" style="display:none">
          <label class="block text-sm font-medium text-gray-700 mb-1">Catalog</label>
          <input type="text" name="catalog" value="{{ form.catalog or '' }}" placeholder="hive"
                 class="w-full border border-gray-300 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent" />
        </div>
        <div data-field="httpPath" style="display:none">
          <label class="block text-sm font-medium text-gray-700 mb-1">HTTP Path</label>
          <input type="text" name="http_path" value="{{ form.http_path or '' }}" placeholder="/sql/1.0/warehouses/abc123"
                 class="w-full border border-gray-300 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent" />
        </div>
        <div data-field="project" style="display:none">
          <label class="block text-sm font-medium text-gray-700 mb-1">Project</label>
          <input type="text" name="project" value="{{ form.project or '' }}" placeholder="my-gcp-project"
                 class="w-full border border-gray-300 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent" />
        </div>
        <div data-field="dataset" style="display:none">
          <label class="block text-sm font-medium text-gray-700 mb-1">Dataset</label>
          <input type="text" name="dataset" value="{{ form.dataset or '' }}" placeholder="analytics"
                 class="w-full border border-gray-300 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent" />
        </div>
        <div data-field="location" style="display:none">
          <label class="block text-sm font-medium text-gray-700 mb-1">Location</label>
          <input type="text" name="location" value="{{ form.location or '' }}" placeholder="us-east1"
                 class="w-full border border-gray-300 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent" />
        </div>
        <div data-field="path" style="display:none">
          <label class="block text-sm font-medium text-gray-700 mb-1">Path</label>
          <input type="text" name="path" value="{{ form.path or '' }}" placeholder="/data/warehouse.duckdb"
                 class="w-full border border-gray-300 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent" />
        </div>
        <div data-field="region" style="display:none">
          <label class="block text-sm font-medium text-gray-700 mb-1">Region</label>
          <input type="text" name="extra_region" value="{{ (form.extra_params or {}).get('region', '') }}" placeholder="us-east-1"
                 class="w-full border border-gray-300 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent" />
        </div>
        <div data-field="s3_staging_dir" style="display:none">
          <label class="block text-sm font-medium text-gray-700 mb-1">S3 Staging Dir</label>
          <input type="text" name="extra_s3_staging_dir" value="{{ (form.extra_params or {}).get('s3_staging_dir', '') }}" placeholder="s3://my-bucket/athena-results/"
                 class="w-full border border-gray-300 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent" />
        </div>
        <div data-field="tenant_id" style="display:none">
          <label class="block text-sm font-medium text-gray-700 mb-1">Tenant ID</label>
          <input type="text" name="extra_tenant_id" value="{{ (form.extra_params or {}).get('tenant_id', '') }}" placeholder="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
                 class="w-full border border-gray-300 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent" />
        </div>
        <div data-field="client_id" style="display:none">
          <label class="block text-sm font-medium text-gray-700 mb-1">Client ID</label>
          <input type="text" name="extra_client_id" value="{{ (form.extra_params or {}).get('client_id', '') }}" placeholder="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
                 class="w-full border border-gray-300 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent" />
        </div>
        <div data-field="workspace" style="display:none">
          <label class="block text-sm font-medium text-gray-700 mb-1">Workspace</label>
          <input type="text" name="extra_workspace" value="{{ (form.extra_params or {}).get('workspace', '') }}" placeholder="my-workspace"
                 class="w-full border border-gray-300 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent" />
        </div>
        <div data-field="lakehouse" style="display:none">
          <label class="block text-sm font-medium text-gray-700 mb-1">Lakehouse</label>
          <input type="text" name="extra_lakehouse" value="{{ (form.extra_params or {}).get('lakehouse', '') }}" placeholder="my-lakehouse"
                 class="w-full border border-gray-300 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent" />
        </div>
        <div data-field="client_secret" style="display:none">
          <label class="block text-sm font-medium text-gray-700 mb-1">Client Secret</label>
          <input type="password" name="extra_client_secret" value="" placeholder="{% if (form.extra_params or {}).get('client_secret') %}(set — leave blank to keep){% else %}Enter client secret{% endif %}" autocomplete="new-password"
                 class="w-full border border-gray-300 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent" />
        </div>
      </div>
    </div>

    <!-- Credentials -->
    <div class="bg-white rounded-xl border border-gray-200 p-6 space-y-5 mt-6">
      <div class="flex items-center gap-2">
        <svg class="w-5 h-5 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
        <h2 class="text-lg font-semibold text-gray-900">Credentials</h2>
      </div>
      <p class="text-sm text-gray-500">Credentials are encrypted at rest. Leave blank to keep existing values when editing.</p>

      <div class="grid grid-cols-1 md:grid-cols-2 gap-5" id="cred-fields">
        <div data-cred="username">
          <label class="block text-sm font-medium text-gray-700 mb-1">Username</label>
          <input type="text" name="username" value="{{ form.username or '' }}" placeholder="db_user" autocomplete="off"
                 class="w-full border border-gray-300 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent" />
        </div>
        <div data-cred="password">
          <label class="block text-sm font-medium text-gray-700 mb-1">Password</label>
          <input type="password" name="password" value="" placeholder="{% if form.has_password %}(encrypted — leave blank to keep){% else %}Enter password{% endif %}" autocomplete="new-password"
                 class="w-full border border-gray-300 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent" />
        </div>
        <div data-cred="token" style="display:none">
          <label class="block text-sm font-medium text-gray-700 mb-1">Token / API Key</label>
          <input type="password" name="token" value="" placeholder="{% if form.has_token %}(encrypted — leave blank to keep){% else %}Enter token{% endif %}" autocomplete="new-password"
                 class="w-full border border-gray-300 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent" />
        </div>
        <div data-cred="service_account_json" style="display:none" class="md:col-span-2">
          <label class="block text-sm font-medium text-gray-700 mb-1">Service Account JSON</label>
          <textarea name="service_account_json" rows="4" placeholder="{% if form.has_service_account_json %}(encrypted — leave blank to keep){% else %}Paste service account JSON here{% endif %}" autocomplete="off"
                    class="w-full border border-gray-300 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent font-mono"></textarea>
        </div>
      </div>
    </div>

    <!-- Submit -->
    <div class="flex items-center justify-between mt-8 pt-6 border-t border-gray-200">
      <a href="/ui/connections" 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>
        {% if mode == "create" %}Create Connection{% else %}Save Changes{% endif %}
      </button>
    </div>
  </form>

</div>

<script>
const CONN_FIELDS = {
  postgres:    ['host','port','database','schema'],
  mysql:       ['host','port','database','schema'],
  redshift:    ['host','port','database','schema'],
  trino:       ['host','port','catalog','schema'],
  bigquery:    ['project','dataset','location'],
  snowflake:   ['account','warehouse','database','schema','role'],
  databricks:  ['host','port','catalog','schema','httpPath'],
  duckdb:      ['path','database','schema'],
  mssql:       ['host','port','database','schema'],
  athena:      ['region','database','schema','s3_staging_dir'],
  clickhouse:  ['host','port','database'],
  oracle:      ['host','port','database'],
  vertica:     ['host','port','database','schema'],
  presto:      ['host','port','catalog','schema'],
  synapse:     ['host','port','database','schema'],
  denodo:      ['host','port','database'],
  dremio:      ['host','port','schema'],
  motherduck:  ['database','schema'],
  db2:         ['host','port','database','schema'],
  spark:       ['host','port','catalog','schema','httpPath'],
  fabric:      ['tenant_id','client_id','database','workspace','lakehouse'],
  cloudsql:    ['host','port','database','schema'],
  dask:        ['path'],
};
const CONN_CREDS = {
  postgres:    ['username','password'],
  mysql:       ['username','password'],
  redshift:    ['username','password'],
  trino:       ['username','password'],
  snowflake:   ['username','password'],
  bigquery:    ['service_account_json'],
  databricks:  ['token'],
  duckdb:      [],
  mssql:       ['username','password'],
  athena:      [],
  clickhouse:  ['username','password'],
  oracle:      ['username','password'],
  vertica:     ['username','password'],
  presto:      ['username','password'],
  synapse:     ['username','password'],
  denodo:      ['username','password'],
  dremio:      ['username','password'],
  motherduck:  ['token'],
  db2:         ['username','password'],
  spark:       ['token'],
  fabric:      ['client_secret'],
  cloudsql:    ['username','password'],
  dask:        [],
};
const ALL_CONN_FIELDS = [
  'host','port','database','schema','account','warehouse','role','catalog',
  'httpPath','project','dataset','location','path',
  'region','s3_staging_dir','tenant_id','client_id','workspace','lakehouse','client_secret',
];
const ALL_CREDS = ['username','password','token','service_account_json'];

function updateConnectionFields() {
  const t = document.getElementById('server-type-select').value;
  const visible = CONN_FIELDS[t] || ['host','port','database','schema'];
  const visibleCreds = CONN_CREDS[t] || ['username','password'];

  ALL_CONN_FIELDS.forEach(f => {
    const el = document.querySelector('#conn-fields [data-field="' + f + '"]');
    if (el) el.style.display = visible.includes(f) ? '' : 'none';
  });
  ALL_CREDS.forEach(c => {
    const el = document.querySelector('#cred-fields [data-cred="' + c + '"]');
    if (el) el.style.display = visibleCreds.includes(c) ? '' : 'none';
  });
}

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