{% extends "base.html" %}
{% block title %}Entities — SOVD Admin{% endblock %}
{% block content %}
<h2>Entities</h2>
<p>Manage areas, components, and apps. Changes are written to the YAML files immediately.</p>

<div style="margin-bottom:.8rem">
  <button onclick="openAddEntity()">+ Add Entity</button>
  &nbsp;
  <label>Filter type:
    <select id="type-filter" onchange="filterTable()">
      <option value="">All</option>
      <option value="areas">areas</option>
      <option value="components">components</option>
      <option value="apps">apps</option>
    </select>
  </label>
</div>

<table id="entities-table">
  <thead>
    <tr>
      <th>Type</th>
      <th>Name</th>
      <th>ID</th>
      <th>Tags</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    {% for e in entities %}
    <tr data-type="{{ e.type }}">
      <td><code>{{ e.type }}</code></td>
      <td>{{ e.name }}</td>
      <td><a href="/ui/entities/{{ e.type }}/{{ e.id.lstrip('/') }}"><code>{{ e.id }}</code></a></td>
      <td>{{ e.get('tags', [])|join(', ') }}</td>
      <td style="white-space:nowrap">
        <button onclick="openEditEntity('{{ e.type }}','{{ e.id }}')" title="Edit">&#9998;</button>
        <button onclick="confirmDeleteEntity('{{ e.type }}','{{ e.id }}')"
                title="Delete" style="color:#dc2626">&#128465;</button>
      </td>
    </tr>
    {% endfor %}
  </tbody>
</table>


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

  <label style="display:block;margin-bottom:.4rem">
    <strong>Entity type</strong>
    <select id="entity-type-sel" style="margin-left:.5rem">
      <option value="areas">areas</option>
      <option value="components">components</option>
      <option value="apps">apps</option>
    </select>
  </label>

  <label style="display:block">
    <strong>Entity JSON</strong>
    <small style="color:#666"> — full object (id, name, href, description, tags, endpoints, resources)</small>
    <textarea id="entity-modal-json" rows="18"
      style="width:100%;font-family:monospace;font-size:.85em;box-sizing:border-box;margin-top:.3rem"></textarea>
  </label>

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

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


<script>
  let _entityMode = "";   // "edit" | "add"
  let _editEntityId = "";
  let _editEntityType = "";

  const ENTITY_TEMPLATE = {
    id: "/new-entity",
    name: "New Entity",
    href: "/new-entity",
    description: "",
    tags: [],
    endpoints: {
      data_resources: "/new-entity/data",
      operations: "/new-entity/operations",
      faults: "/new-entity/faults",
      modes: "/new-entity/modes",
      configurations: "/new-entity/configurations"
    },
    resources: {
      data_resources: [],
      operations: [],
      faults: [],
      modes: []
    }
  };

  /* ── open helpers ── */
  function openAddEntity() {
    _entityMode = "add"; _editEntityId = ""; _editEntityType = "";
    document.getElementById("entity-modal-title").textContent = "Add Entity";
    document.getElementById("entity-modal-error").style.display = "none";
    document.getElementById("entity-type-sel").disabled = false;
    document.getElementById("entity-modal-json").value = JSON.stringify(ENTITY_TEMPLATE, null, 2);
    document.getElementById("entity-modal").showModal();
  }

  function openEditEntity(entityType, entityId) {
    _entityMode = "edit"; _editEntityId = entityId; _editEntityType = entityType;
    document.getElementById("entity-modal-title").textContent = `Edit ${entityType} — ${entityId}`;
    document.getElementById("entity-modal-error").style.display = "none";
    document.getElementById("entity-type-sel").value = entityType;
    document.getElementById("entity-type-sel").disabled = true;

    fetch(`/${entityId.replace(/^\//, "")}`)
      .then(r => r.json())
      .then(caps => {
        // Fetch full entity from /areas etc. to get resources config too
        fetch(`/${entityType}`)
          .then(r => r.json())
          .then(col => {
            const fullEntity = (col.items || []).find(e => e.id === entityId || e.href === entityId);
            // Fall back to capabilities if full detail unavailable
            const obj = fullEntity || caps;
            document.getElementById("entity-modal-json").value = JSON.stringify(obj, null, 2);
          })
          .catch(() => {
            document.getElementById("entity-modal-json").value = JSON.stringify(caps, null, 2);
          });
      })
      .catch(() => {
        document.getElementById("entity-modal-json").value = JSON.stringify({id: entityId}, null, 2);
      });

    document.getElementById("entity-modal").showModal();
  }

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

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

    const method = _entityMode === "add" ? "POST" : "PUT";
    const url    = `/admin/entities/${entityType}`;

    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}));
        showEntityError(err.error || resp.statusText);
        return;
      }
      document.getElementById("entity-modal").close();
      location.reload();
    } catch(e) {
      showEntityError("Network error: " + e.message);
    } finally {
      document.getElementById("entity-modal-save").disabled = false;
    }
  }

  /* ── delete ── */
  async function confirmDeleteEntity(entityType, entityId) {
    if (!confirm(`Delete entity "${entityId}" from ${entityType}?\n\nThis edits the YAML file.`)) return;

    try {
      const resp = await fetch(`/admin/entities/${entityType}`, {
        method: "DELETE",
        headers: {"Content-Type": "application/json"},
        body: JSON.stringify({id: entityId}),
      });
      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);
    }
  }

  /* ── filter ── */
  function filterTable() {
    const filter = document.getElementById("type-filter").value;
    document.querySelectorAll("#entities-table tbody tr").forEach(row => {
      row.style.display = (!filter || row.dataset.type === filter) ? "" : "none";
    });
  }

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