{% extends "base.html" %}
{% block title %}SOVD Resource Catalog{% endblock %}

{% block content %}
<h3>Resource Catalog</h3>
<p>All configured SOVD resources across every entity. <strong>Edit</strong> or <strong>delete</strong> existing items, or <strong>add</strong> new ones — changes are written to the YAML files immediately.</p>

{% set type_labels = [
  ("data",       "Data Resources"),
  ("operations", "Operations"),
  ("faults",     "Faults"),
  ("modes",      "Modes"),
] %}

{% for res_type, label in type_labels %}
  {% set items = catalog[res_type] %}
  <details open>
    <summary style="cursor:pointer;user-select:none">
      <strong>{{ label }}</strong> &mdash; {{ items | length }} item(s)
      &nbsp;
      <button class="btn-add" style="font-size:.8em;padding:2px 8px"
        onclick="event.stopPropagation();openAdd('{{ res_type }}')">+ Add</button>
    </summary>

    {% if items %}
    <div style="overflow-x:auto">
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Entity</th>
          <th>Tags</th>
          <th style="white-space:nowrap">Actions</th>
        </tr>
      </thead>
      <tbody>
        {% for item in items %}
        <tr>
          <td><code>{{ item.id }}</code></td>
          <td>{{ item.name | default("—") }}</td>
          <td>
            <a href="/ui/entities/{{ item.entity_type }}/{{ item.entity_path.lstrip('/') }}">
              <code>{{ item.entity_path }}</code>
            </a>
          </td>
          <td>
            {% for tag in item.tags | default([]) %}
              <span style="background:#e0e7ff;border-radius:3px;padding:1px 5px;font-size:.8em">{{ tag }}</span>
            {% endfor %}
          </td>
          <td style="white-space:nowrap">
            <button onclick="openEdit('{{ res_type }}','{{ item.id }}','{{ item.entity_path }}','{{ item.entity_type }}')"
                    title="Edit">&#9998;</button>
            <button onclick="confirmDelete('{{ res_type }}','{{ item.id }}','{{ item.entity_path }}')"
                    title="Delete" style="color:#dc2626">&#128465;</button>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
    </div>
    {% else %}
    <p style="color:#888;padding:0 1rem">No {{ label | lower }} configured.</p>
    {% endif %}
  </details>
{% endfor %}


<!-- ── Modal ─────────────────────────────────────────────────────── -->
<dialog id="crud-modal" style="width:min(640px,95vw);border-radius:8px;padding:1.5rem;border:1px solid #ccc">
  <h4 id="modal-title" style="margin:0 0 .8rem">Edit Resource</h4>

  <label style="display:block;margin-bottom:.4rem">
    <strong>Resource JSON</strong>
    <small id="modal-hint" style="color:#666"></small>
    <textarea id="modal-json" rows="16"
      style="width:100%;font-family:monospace;font-size:.85em;box-sizing:border-box;margin-top:.3rem"></textarea>
  </label>

  <div id="modal-error" style="color:#dc2626;margin-bottom:.5rem;display:none"></div>

  <div style="display:flex;gap:.6rem;justify-content:flex-end">
    <button id="modal-save" onclick="modalSave()">Save</button>
    <button onclick="document.getElementById('crud-modal').close()"
            style="background:none;border:1px solid currentColor">Cancel</button>
  </div>
</dialog>


<script>
  /* ── state ── */
  let _mode = "";       // "edit" | "add"
  let _resType  = "";
  let _resId    = "";
  let _entityPath = "";

  const TEMPLATES = {
    data:       { id: "", name: "", description: "", data: {}, tags: [] },
    operations: { id: "", name: "", description: "" },
    faults:     { id: "", name: "", description: "", severity: 1, scope: "internal", status: "active" },
    modes:      { id: "", name: "", description: "", value: "" },
  };

  /* ── open helpers ── */
  function openEdit(resType, resId, entityPath, entityType) {
    _mode = "edit"; _resType = resType; _resId = resId; _entityPath = entityPath;
    document.getElementById("modal-title").textContent = `Edit ${resType} — ${resId}`;
    document.getElementById("modal-hint").textContent  = "(entity: " + entityPath + ")";
    document.getElementById("modal-error").style.display = "none";

    fetch(`/catalog?type=${resType}`)
      .then(r => r.json())
      .then(d => {
        const item = (d[resType] || []).find(
          r => r.id === resId && r.entity_path === entityPath
        );
        if (item) {
          const { entity_path, entity_type, ...rest } = item;
          document.getElementById("modal-json").value = JSON.stringify(rest, null, 2);
        } else {
          document.getElementById("modal-json").value = "{}";
        }
        document.getElementById("crud-modal").showModal();
      });
  }

  function openAdd(resType) {
    _mode = "add"; _resType = resType; _resId = ""; _entityPath = "";
    document.getElementById("modal-title").textContent = `Add ${resType}`;
    document.getElementById("modal-hint").textContent  = 'Set "entity_path" to the entity id, e.g. "/engine/ecu"';
    document.getElementById("modal-error").style.display = "none";
    const tmpl = { entity_path: "", ...TEMPLATES[resType] };
    document.getElementById("modal-json").value = JSON.stringify(tmpl, null, 2);
    document.getElementById("crud-modal").showModal();
  }

  /* ── save ── */
  async function modalSave() {
    const raw = document.getElementById("modal-json").value.trim();
    let body;
    try { body = JSON.parse(raw); }
    catch(e) { showModalError("Invalid JSON: " + e.message); return; }

    document.getElementById("modal-save").disabled = true;
    hideModalError();

    let url, method;
    if (_mode === "add") {
      url    = `/admin/resources/${_resType}`;
      method = "POST";
      // entity_path must be in the body (user sets it in the textarea)
    } else {
      body.entity_path = _entityPath;
      url    = `/admin/resources/${_resType}/${encodeURIComponent(_resId)}`;
      method = "PUT";
    }

    try {
      const resp = await fetch(url, {
        method,
        headers: {"Content-Type": "application/json"},
        body: JSON.stringify(body),
      });
      if (!resp.ok) {
        const err = await resp.json().catch(() => ({error: resp.statusText}));
        showModalError(err.error || resp.statusText);
        return;
      }
      document.getElementById("crud-modal").close();
      location.reload();
    } catch(e) {
      showModalError("Network error: " + e.message);
    } finally {
      document.getElementById("modal-save").disabled = false;
    }
  }

  /* ── delete ── */
  async function confirmDelete(resType, resId, entityPath) {
    if (!confirm(`Delete ${resType} "${resId}" from ${entityPath}?\n\nThis edits the YAML file.`)) return;

    try {
      const resp = await fetch(
        `/admin/resources/${resType}/${encodeURIComponent(resId)}?entity_path=${encodeURIComponent(entityPath)}`,
        { method: "DELETE" }
      );
      if (!resp.ok) {
        const err = await resp.json().catch(() => ({error: resp.statusText}));
        alert("Error: " + (err.error || resp.statusText));
        return;
      }
      location.reload();
    } catch(e) {
      alert("Network error: " + e.message);
    }
  }

  function showModalError(msg) {
    const el = document.getElementById("modal-error");
    el.textContent = msg;
    el.style.display = "block";
  }
  function hideModalError() {
    document.getElementById("modal-error").style.display = "none";
  }
</script>
{% endblock %}