{% extends "base.html" %}
{% block title %}Data Model{% endblock %}
{% block heading %}Data Model Designer{% endblock %}

{% block content %}
<div class="flex items-center justify-between mb-6">
  <p class="text-sm text-slate-500">Design your normalized raw storage model — Bronze ingestion targets through to Gold star schema.</p>
  <button onclick="document.getElementById('add-table-modal').classList.remove('hidden')" class="btn-primary">
    <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="M12 4v16m8-8H4"/>
    </svg>
    Add Table
  </button>
</div>

<!-- Layer summary -->
<div class="grid grid-cols-3 gap-4 mb-6">
  {% for layer, color, desc in [
    ("bronze", "orange", "Raw ingestion targets. Exact copy of source data."),
    ("silver", "slate",  "Cleansed, typed, SCD applied. Conformed layer."),
    ("gold",   "yellow", "Star schema. Business-ready for semantic model."),
  ] %}
  {% set layer_tables = cfg.tables|selectattr('layer','eq',layer)|list %}
  <div class="card p-4 border-l-4 border-{{ color }}-400">
    <div class="flex items-center justify-between mb-1">
      <span class="badge-{{ layer }} text-sm">{{ layer|upper }}</span>
      <span class="text-2xl font-bold text-slate-800">{{ layer_tables|length }}</span>
    </div>
    <p class="text-xs text-slate-500">{{ desc }}</p>
    {% if layer_tables %}
    <div class="mt-2 space-y-0.5">
      {% for t in layer_tables[:3] %}
      <p class="text-xs font-mono text-slate-600 truncate">{{ t.name }}</p>
      {% endfor %}
      {% if layer_tables|length > 3 %}
      <p class="text-xs text-slate-400">+{{ layer_tables|length - 3 }} more</p>
      {% endif %}
    </div>
    {% endif %}
  </div>
  {% endfor %}
</div>

<!-- Table cards -->
{% if cfg.tables %}
<div class="space-y-4">
  {% for table in cfg.tables %}
  <div class="card overflow-hidden">
    <!-- Table header -->
    <div class="flex items-center justify-between px-5 py-4 bg-slate-50 border-b border-slate-200">
      <div class="flex items-center gap-3">
        <span class="badge-{{ table.layer }}">{{ table.layer }}</span>
        <h3 class="font-mono font-semibold text-slate-800">{{ table.name }}</h3>
        {% if table.scd_type > 0 %}
        <span class="inline-flex px-2 py-0.5 rounded text-xs font-medium bg-indigo-100 text-indigo-700">SCD {{ table.scd_type }}</span>
        {% endif %}
        {% if table.partition_column %}
        <span class="inline-flex px-2 py-0.5 rounded text-xs font-medium bg-cyan-100 text-cyan-700">⬡ {{ table.partition_column }}</span>
        {% endif %}
      </div>
      <div class="flex items-center gap-2">
        <span class="text-xs text-slate-400">{{ table.columns|length }} column(s)</span>
        <button onclick="document.getElementById('col-modal-{{ loop.index }}').classList.remove('hidden')"
                class="btn-secondary text-xs py-1">+ Column</button>
        <form method="post" action="/model/delete-table/{{ table.name }}?project={{ project }}"
              onsubmit="return confirm('Delete table {{ table.name }}?')">
          <button class="btn-danger">✕</button>
        </form>
      </div>
    </div>

    {% if table.description %}
    <p class="px-5 py-2 text-xs text-slate-500 bg-blue-50 border-b border-blue-100">{{ table.description }}</p>
    {% endif %}

    <!-- Columns -->
    {% if table.columns %}
    <div class="overflow-x-auto">
      <table class="w-full text-xs">
        <thead class="bg-slate-50 border-b border-slate-100">
          <tr>
            <th class="text-left px-4 py-2 font-medium text-slate-500">Column</th>
            <th class="text-left px-4 py-2 font-medium text-slate-500">Type</th>
            <th class="text-left px-4 py-2 font-medium text-slate-500">Source</th>
            <th class="text-left px-4 py-2 font-medium text-slate-500">Flags</th>
            <th class="text-left px-4 py-2 font-medium text-slate-500">Description</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-slate-50">
          {% for col in table.columns %}
          <tr class="hover:bg-slate-50">
            <td class="px-4 py-2 font-mono font-medium text-slate-800">
              {% if col.is_primary_key %}
              <span title="Primary Key" class="text-yellow-500 mr-1">🔑</span>
              {% elif col.is_foreign_key %}
              <span title="Foreign Key" class="text-blue-400 mr-1">🔗</span>
              {% endif %}
              {{ col.name }}
            </td>
            <td class="px-4 py-2">
              <span class="font-mono text-slate-600">{{ col.data_type }}</span>
              {% if not col.nullable %}<span class="ml-1 text-red-500" title="NOT NULL">*</span>{% endif %}
            </td>
            <td class="px-4 py-2 font-mono text-slate-400">{{ col.source_column or col.name }}</td>
            <td class="px-4 py-2">
              <div class="flex items-center gap-1">
                {% if col.pii %}<span class="inline-flex px-1.5 py-0.5 rounded bg-red-100 text-red-700 font-medium">PII</span>{% endif %}
                {% if col.is_foreign_key and col.references_table %}
                <span class="inline-flex px-1.5 py-0.5 rounded bg-blue-100 text-blue-700 font-mono" title="{{ col.references_table }}.{{ col.references_column }}">FK</span>
                {% endif %}
              </div>
            </td>
            <td class="px-4 py-2 text-slate-500">{{ col.description or "—" }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    {% else %}
    <div class="px-5 py-4 text-center">
      <p class="text-xs text-slate-400">No columns yet —
        <button onclick="document.getElementById('col-modal-{{ loop.index }}').classList.remove('hidden')"
                class="text-brand-600 hover:underline">add first column</button>
      </p>
    </div>
    {% endif %}

    <!-- Add column modal (per table) -->
    <div id="col-modal-{{ loop.index }}" class="hidden fixed inset-0 z-50 flex items-center justify-center">
      <div class="absolute inset-0 bg-black/50" onclick="document.getElementById('col-modal-{{ loop.index }}').classList.add('hidden')"></div>
      <div class="relative bg-white rounded-2xl shadow-2xl w-full max-w-lg mx-4">
        <div class="bg-slate-900 px-6 py-4 flex items-center justify-between">
          <h2 class="text-white font-semibold">Add Column → <code class="text-brand-300">{{ table.name }}</code></h2>
          <button onclick="document.getElementById('col-modal-{{ loop.index }}').classList.add('hidden')" class="text-slate-400 hover:text-white">✕</button>
        </div>
        <form method="post" action="/model/add-column/{{ table.name }}?project={{ project }}" class="p-6 space-y-4">
          <div class="grid grid-cols-2 gap-4">
            <div>
              <label class="form-label">Column Name *</label>
              <input name="col_name" required placeholder="customer_id" class="form-input font-mono"/>
            </div>
            <div>
              <label class="form-label">Source Column</label>
              <input name="source_column" placeholder="(same as name)" class="form-input font-mono"/>
            </div>
          </div>
          <div class="grid grid-cols-2 gap-4">
            <div>
              <label class="form-label">Data Type</label>
              <select name="data_type" class="form-select font-mono">
                {% for dt in data_types %}<option>{{ dt }}</option>{% endfor %}
              </select>
            </div>
            <div class="flex flex-col gap-2 pt-1">
              <label class="flex items-center gap-2 text-sm">
                <input name="nullable" type="checkbox" checked value="true" class="w-4 h-4 rounded"/> Nullable
              </label>
              <label class="flex items-center gap-2 text-sm">
                <input name="is_primary_key" type="checkbox" value="true" class="w-4 h-4 rounded"/> Primary Key 🔑
              </label>
              <label class="flex items-center gap-2 text-sm">
                <input name="pii" type="checkbox" value="true" class="w-4 h-4 rounded"/>
                <span>PII <span class="text-xs text-red-500">(mask in reports)</span></span>
              </label>
            </div>
          </div>
          <div class="grid grid-cols-2 gap-4">
            <div>
              <label class="flex items-center gap-2 text-sm font-medium mb-1">
                <input name="is_foreign_key" type="checkbox" value="true" class="w-4 h-4 rounded"/> Foreign Key 🔗
              </label>
              <input name="references_table" placeholder="references table" class="form-input font-mono text-xs"/>
            </div>
            <div>
              <label class="form-label">References Column</label>
              <input name="references_column" placeholder="column" class="form-input font-mono text-xs"/>
            </div>
          </div>
          <div>
            <label class="form-label">Description</label>
            <input name="description" placeholder="What does this column represent?" class="form-input"/>
          </div>
          <div class="flex gap-3 justify-end border-t border-slate-100 pt-3">
            <button type="button" onclick="document.getElementById('col-modal-{{ loop.index }}').classList.add('hidden')" class="btn-secondary">Cancel</button>
            <button type="submit" class="btn-primary">Add Column</button>
          </div>
        </form>
      </div>
    </div>
  </div>
  {% endfor %}
</div>
{% else %}
<div class="card p-12 text-center">
  <div class="w-16 h-16 rounded-2xl bg-slate-100 flex items-center justify-center mx-auto mb-4">
    <svg class="w-8 h-8 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
            d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5z"/>
    </svg>
  </div>
  <h3 class="font-semibold text-slate-700 mb-1">Model is empty</h3>
  <p class="text-sm text-slate-400 mb-4">Add tables to build your normalized raw storage model.</p>
  <button onclick="document.getElementById('add-table-modal').classList.remove('hidden')" class="btn-primary mx-auto">Add First Table</button>
</div>
{% endif %}

<!-- Add Table Modal -->
<div id="add-table-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center">
  <div class="absolute inset-0 bg-black/50" onclick="document.getElementById('add-table-modal').classList.add('hidden')"></div>
  <div class="relative bg-white rounded-2xl shadow-2xl w-full max-w-lg mx-4">
    <div class="bg-slate-900 px-6 py-4 flex items-center justify-between">
      <h2 class="text-white font-semibold">Add Table</h2>
      <button onclick="document.getElementById('add-table-modal').classList.add('hidden')" class="text-slate-400 hover:text-white">✕</button>
    </div>
    <form method="post" action="/model/add-table?project={{ project }}" class="p-6 space-y-4">
      <div class="grid grid-cols-2 gap-4">
        <div>
          <label class="form-label">Table Name *</label>
          <input name="name" required placeholder="raw_crm_customer" class="form-input font-mono"/>
        </div>
        <div>
          <label class="form-label">Layer</label>
          <select name="layer" class="form-select">
            {% for l in layers %}<option value="{{ l }}">{{ l }}</option>{% endfor %}
          </select>
        </div>
      </div>
      <div>
        <label class="form-label">Description</label>
        <input name="description" placeholder="What does this table store? Source, grain, refresh frequency." class="form-input"/>
      </div>
      <div class="grid grid-cols-2 gap-4">
        <div>
          <label class="form-label">Source</label>
          <select name="source_id" class="form-select">
            <option value="">— None —</option>
            {% for src in sources %}
            <option value="{{ src.id }}">{{ src.name }}</option>
            {% endfor %}
          </select>
        </div>
        <div>
          <label class="form-label">Partition Column</label>
          <input name="partition_column" placeholder="_ingested_at" class="form-input font-mono"/>
        </div>
      </div>
      <div>
        <label class="form-label">SCD Type (0 = not a SCD table)</label>
        <select name="scd_type" class="form-select">
          <option value="0">0 — Not SCD</option>
          <option value="1">1 — Overwrite</option>
          <option value="2">2 — Track history (recommended)</option>
          <option value="6">6 — Hybrid (Type 1+2+3)</option>
        </select>
      </div>
      <div class="flex gap-3 justify-end border-t border-slate-100 pt-3">
        <button type="button" onclick="document.getElementById('add-table-modal').classList.add('hidden')" class="btn-secondary">Cancel</button>
        <button type="submit" class="btn-primary">Add Table</button>
      </div>
    </form>
  </div>
</div>
{% endblock %}