{% extends "base.html" %}
{% block title %}DBSprout Dashboard — Schema ERD{% endblock %}

{% block head_extra %}
  {# ── S-091: Mermaid.js client-side ERD rendering (CDN, no server-side image gen). ── #}
  <script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
  {% if erd_mermaid %}
  {# ── S-091-F1: SVG pan/zoom via CDN (loaded only when ERD is present). ── #}
  <script src="https://cdn.jsdelivr.net/npm/svg-pan-zoom@3/dist/svg-pan-zoom.min.js"></script>
  {% endif %}
{% endblock %}

{% block content %}
  <h1 class="text-2xl font-bold mb-4">Schema ERD</h1>

  {% if erd_mermaid %}

    {# ── S-091-F1: Table-detail JSON blob (enables click-to-detail, no network round-trip). ── #}
    <script id="erd-table-data" type="application/json">{{ table_details_json | safe }}</script>

    {# ── S-091-F1: Large-schema controls — filter + column toggle. ── #}
    <div class="flex flex-wrap gap-3 mb-4 items-center">
      <div class="form-control">
        <label class="label pb-1">
          <span class="label-text text-xs font-semibold uppercase tracking-wide opacity-60">Filter tables</span>
        </label>
        <input
          id="erd-filter-input"
          type="text"
          placeholder="table name…"
          class="input input-bordered input-sm w-48"
          aria-label="Filter tables by name"
        />
      </div>
      <div class="form-control">
        <label class="label cursor-pointer gap-2 pb-1">
          <span class="label-text text-xs font-semibold uppercase tracking-wide opacity-60">Show columns</span>
          <input
            id="erd-columns-toggle"
            type="checkbox"
            class="toggle toggle-sm toggle-primary"
            checked
            aria-label="Toggle column visibility"
          />
        </label>
      </div>
    </div>

    {# ── ERD diagram container ── #}
    <div id="erd" class="card bg-base-100 shadow">
      <div class="card-body overflow-x-auto">
        <pre class="mermaid">{{ erd_mermaid }}</pre>
      </div>
    </div>
    <p class="text-sm opacity-70 mt-2">
      Entity-relationship diagram auto-generated from the latest schema snapshot
      (<code>.dbsprout/snapshots/</code>). Updates when the snapshot changes.
      Click a table node to see its column details.
    </p>

    {# ── S-091-F1: Click-to-detail panel (hidden until a table is clicked). ── #}
    <div
      id="erd-detail-panel"
      class="card bg-base-100 shadow mt-4 hidden"
      role="region"
      aria-label="Table column details"
    >
      <div class="card-body">
        <div class="flex items-center justify-between mb-2">
          <h2 id="erd-detail-title" class="card-title text-lg"></h2>
          <button
            id="erd-detail-close"
            class="btn btn-sm btn-ghost"
            aria-label="Close detail panel"
          >&#x2715;</button>
        </div>
        <div id="erd-detail-content" class="overflow-x-auto"></div>
      </div>
    </div>

    {# ── S-091-F1: Client-side interactivity script ── #}
    <script>
      (function () {
        "use strict";

        // ── Mermaid initialisation ──────────────────────────────────────────
        if (window.mermaid && window.mermaid.initialize) {
          window.mermaid.initialize({ startOnLoad: false, theme: "default" });
        }

        // ── Table detail data from embedded JSON blob ──────────────────────
        var tableData = {};
        var dataEl = document.getElementById("erd-table-data");
        if (dataEl) {
          try { tableData = JSON.parse(dataEl.textContent); } catch (_) {}
        }

        // ── Click handler called by Mermaid click directives ──────────────
        window.erdTableClick = function (tableName) {
          var panel = document.getElementById("erd-detail-panel");
          var title = document.getElementById("erd-detail-title");
          var content = document.getElementById("erd-detail-content");
          if (!panel || !title || !content) return;

          var info = tableData[tableName];
          if (!info) return;

          title.textContent = tableName;

          var rows = (info.columns || []).map(function (col) {
            var badges = [];
            if (col.primary_key) badges.push('<span class="badge badge-primary badge-xs">PK</span>');
            if (col.unique) badges.push('<span class="badge badge-secondary badge-xs">UQ</span>');
            if (!col.nullable) badges.push('<span class="badge badge-warning badge-xs">NOT NULL</span>');
            return (
              "<tr>" +
              "<td class=\"font-mono text-sm\">" + escHtml(col.name) + "</td>" +
              "<td class=\"font-mono text-sm opacity-70\">" + escHtml(col.data_type) + "</td>" +
              "<td>" + badges.join(" ") + "</td>" +
              "</tr>"
            );
          }).join("");

          var fkRows = (info.foreign_keys || []).map(function (fk) {
            return (
              "<tr>" +
              "<td class=\"font-mono text-sm\">" + escHtml(fk.columns.join(", ")) + "</td>" +
              "<td class=\"font-mono text-sm opacity-70\">→ " + escHtml(fk.ref_table) + "(" + escHtml(fk.ref_columns.join(", ")) + ")</td>" +
              "</tr>"
            );
          }).join("");

          content.innerHTML =
            "<table class=\"table table-compact w-full\">" +
            "<thead><tr><th>Column</th><th>Type</th><th>Constraints</th></tr></thead>" +
            "<tbody>" + rows + "</tbody>" +
            "</table>" +
            (fkRows
              ? "<div class=\"mt-3\"><p class=\"text-xs font-semibold uppercase opacity-60 mb-1\">Foreign Keys</p>" +
                "<table class=\"table table-compact w-full\"><thead><tr><th>Column(s)</th><th>References</th></tr></thead>" +
                "<tbody>" + fkRows + "</tbody></table></div>"
              : "");

          panel.classList.remove("hidden");
          panel.scrollIntoView({ behavior: "smooth", block: "nearest" });
        };

        function escHtml(str) {
          return String(str)
            .replace(/&/g, "&amp;")
            .replace(/</g, "&lt;")
            .replace(/>/g, "&gt;")
            .replace(/"/g, "&quot;");
        }

        // ── Close button ───────────────────────────────────────────────────
        var closeBtn = document.getElementById("erd-detail-close");
        if (closeBtn) {
          closeBtn.addEventListener("click", function () {
            var panel = document.getElementById("erd-detail-panel");
            if (panel) panel.classList.add("hidden");
          });
        }

        // ── Filter input ───────────────────────────────────────────────────
        var filterInput = document.getElementById("erd-filter-input");
        if (filterInput) {
          filterInput.addEventListener("input", function () {
            var q = this.value.trim().toLowerCase();
            var erdEl = document.getElementById("erd");
            if (!erdEl) return;
            // Highlight matching entity labels in the SVG text nodes
            erdEl.querySelectorAll("g.er.entityBox + text, .entityLabel").forEach(function (el) {
              var name = el.textContent.trim().toLowerCase();
              var parent = el.closest("g");
              if (parent) {
                parent.style.opacity = (!q || name.includes(q)) ? "1" : "0.2";
              }
            });
          });
        }

        // ── Columns toggle ─────────────────────────────────────────────────
        var colsToggle = document.getElementById("erd-columns-toggle");
        if (colsToggle) {
          colsToggle.addEventListener("change", function () {
            var erdEl = document.getElementById("erd");
            if (!erdEl) return;
            // attr rows are inside <g class="er.attributeBoxEven/Odd"> elements
            var show = this.checked;
            erdEl.querySelectorAll(
              ".er.attributeBoxEven, .er.attributeBoxOdd, .attributeText, .er.entityLabel ~ g"
            ).forEach(function (el) {
              el.style.display = show ? "" : "none";
            });
          });
        }

        // ── Mermaid render + SVG pan/zoom init ────────────────────────────
        document.addEventListener("DOMContentLoaded", function () {
          if (!window.mermaid) return;
          window.mermaid.run().then(function () {
            var svg = document.querySelector("#erd svg");

            // ── Click-to-detail binding ──────────────────────────────────
            // Mermaid 10.9.x erDiagram has no `click` directive, so bind the
            // handler here instead. Each entity-title <text> equals its table
            // name; bind its enclosing <g> to the existing detail handler.
            if (svg) {
              svg.querySelectorAll("text").forEach(function (t) {
                var name = (t.textContent || "").trim();
                if (!tableData[name]) return;
                var node = t.closest("g");
                if (!node) return;
                node.style.cursor = "pointer";
                node.addEventListener("click", function () {
                  window.erdTableClick(name);
                });
              });
            }

            if (svg && window.svgPanZoom) {
              // Remove fixed dimensions so pan/zoom can resize freely
              svg.removeAttribute("width");
              svg.removeAttribute("height");
              svg.style.width = "100%";
              svg.style.height = "600px";
              window.svgPanZoom(svg, {
                zoomEnabled: true,
                controlIconsEnabled: true,
                fit: true,
                center: true,
              });
            }
          });
        });

      })();
    </script>

  {% else %}
    <div class="alert alert-info">
      <span>
        No schema snapshot found yet. Run <code>dbsprout init</code> or
        <code>dbsprout generate</code> to capture a schema, then refresh this view.
      </span>
    </div>
  {% endif %}
{% endblock %}