{% extends "base.html" %}
{% block title %}Models — TraceBi{% endblock %}

{% block content %}
<div class="page-title">Data Models</div>
<p class="page-sub">Relational data models — tables and join relationships registered with TraceBi.</p>

{% if models %}
<div class="split" x-data="modelsApp()" x-cloak>

  <!-- Left: model list -->
  <div>
    <div class="list-panel">
      {% for m in models %}
      <div class="list-item" :class="selected?.name === '{{ m.name }}' && 'selected'"
           @click="select('{{ m.name }}')">
        <div class="list-item-name">{{ m.name }}</div>
        <div class="list-item-sub">
          {{ m.tables | length }} table{{ 's' if m.tables | length != 1 }}
          · {{ m.relationships | length }} relationship{{ 's' if m.relationships | length != 1 }}
        </div>
      </div>
      {% endfor %}
    </div>
  </div>

  <!-- Right: model detail + table preview -->
  <div>
    <div x-show="!selected" class="card">
      <div class="empty">
        <div class="empty-icon">⊞</div>
        <p>Select a model to explore its tables and relationships.</p>
      </div>
    </div>

    <template x-if="selected">
      <div>
        <!-- Tables -->
        <div class="card">
          <div class="card-title" x-text="selected.name + ' — Tables'"></div>
          <table>
            <thead><tr><th>Table</th><th>Connector</th><th>Source</th><th></th></tr></thead>
            <tbody>
              <template x-for="t in selected.tables" :key="t.name">
                <tr>
                  <td><strong x-text="t.name"></strong></td>
                  <td><span class="badge badge-blue" x-text="t.connector"></span></td>
                  <td><code x-text="t.source"></code></td>
                  <td>
                    <button class="btn btn-outline btn-sm" @click="previewTable(t.name)">
                      Preview
                    </button>
                  </td>
                </tr>
              </template>
            </tbody>
          </table>
        </div>

        <!-- Relationships -->
        <template x-if="selected.relationships.length > 0">
          <div class="card">
            <div class="card-title" x-text="selected.name + ' — Relationships'"></div>
            <table>
              <thead><tr><th>Name</th><th>Left</th><th>Right</th><th>Keys</th><th>Join</th></tr></thead>
              <tbody>
                <template x-for="r in selected.relationships" :key="r.name">
                  <tr>
                    <td><strong x-text="r.name"></strong></td>
                    <td x-text="r.left_table"></td>
                    <td x-text="r.right_table"></td>
                    <td><code x-text="r.left_key + ' = ' + r.right_key"></code></td>
                    <td><span class="badge badge-gray" x-text="r.how"></span></td>
                  </tr>
                </template>
              </tbody>
            </table>
          </div>
        </template>

        <!-- Table preview -->
        <template x-if="preview">
          <div class="card">
            <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:14px;">
              <div class="card-title" style="margin:0; border:none; padding:0;"
                   x-text="'Preview — ' + preview.table + ' (' + preview.rows + ' rows)'"></div>
              <button class="btn btn-outline btn-sm" @click="preview = null">✕ Close</button>
            </div>

            <div x-show="previewLoading" style="padding:24px; text-align:center;">
              <span class="spinner"></span>
            </div>

            <div x-show="!previewLoading && preview.data" style="overflow-x:auto;">
              <table>
                <thead>
                  <tr>
                    <template x-for="col in preview.columns" :key="col">
                      <th x-text="col"></th>
                    </template>
                  </tr>
                </thead>
                <tbody>
                  <template x-for="(row, i) in preview.data" :key="i">
                    <tr>
                      <template x-for="col in preview.columns" :key="col">
                        <td x-text="row[col] ?? '—'"></td>
                      </template>
                    </tr>
                  </template>
                </tbody>
              </table>
            </div>

            <!-- Lineage for this load -->
            <details style="margin-top:16px;">
              <summary style="cursor:pointer; font-size:12px; color:var(--blue); font-weight:600; padding:6px 0;">
                Data Lineage
              </summary>
              <div style="margin-top:10px; overflow-x:auto;">
                <table style="font-size:11px;">
                  <thead><tr><th>Step</th><th>Operation</th><th>Description</th><th>Source</th></tr></thead>
                  <tbody>
                    <template x-for="(node, idx) in preview.lineage" :key="idx">
                      <tr>
                        <td x-text="idx + 1"></td>
                        <td><span class="badge badge-blue" x-text="node.operation"></span></td>
                        <td x-text="node.description"></td>
                        <td x-text="node.source ?? '—'"></td>
                      </tr>
                    </template>
                  </tbody>
                </table>
              </div>
            </details>
          </div>
        </template>

      </div>
    </template>
  </div>
</div>

{% else %}
<div class="card">
  <div class="empty">
    <div class="empty-icon">⊞</div>
    <p>No models registered yet.</p>
  </div>
</div>
{% endif %}

<script>
function modelsApp() {
  return {
    selected: null,
    preview: null,
    previewLoading: false,

    async select(name) {
      const res = await fetch(`/api/models/${name}`);
      this.selected = await res.json();
      this.preview = null;
    },

    async previewTable(tableName) {
      if (!this.selected) return;
      this.preview = { table: tableName, columns: [], data: [], rows: 0, lineage: [] };
      this.previewLoading = true;
      try {
        const res = await fetch(`/api/models/${this.selected.name}/tables/${tableName}/preview`);
        const data = await res.json();
        this.preview = data;
      } finally {
        this.previewLoading = false;
      }
    },
  };
}
</script>
{% endblock %}