{% extends "base.html" %}
{% block title %}Asset Types // Synapse-Cortex{% endblock %}
{% block header %}Admin // Asset Types{% endblock %}
{% block content %}
<div class="flex items-center justify-between mb-4">
  <div class="text-xs text-cortex-muted uppercase tracking-wider">Tenant Asset Types ({{ asset_types|length }})</div>
  <button onclick="document.getElementById('new-type-modal').classList.remove('hidden')"
          class="bg-accent-blue text-cortex-bg font-display font-bold uppercase tracking-wider text-xs px-4 py-2 rounded hover:bg-accent-blue-bright transition">
    + New Type
  </button>
</div>

<div class="border border-cortex-border bg-cortex-panel rounded-md">
  <table class="w-full text-sm">
    <thead>
      <tr class="text-left text-[10px] text-cortex-muted uppercase tracking-wider border-b border-cortex-border">
        <th class="px-4 py-2">Name</th>
        <th class="px-4 py-2"></th>
      </tr>
    </thead>
    <tbody>
      {% for t in asset_types %}
      <tr class="border-b border-cortex-border/60 hover:bg-cortex-panel2" data-type-id="{{ t.id }}">
        <td class="px-4 py-2">
          <input class="name-input bg-transparent border border-transparent hover:border-cortex-border focus:border-accent-blue focus:bg-cortex-panel2 rounded px-2 py-1 -mx-2 w-full max-w-xs focus:outline-none" value="{{ t.name }}" />
        </td>
        <td class="px-4 py-2 text-right">
          <button class="delete-btn text-[10px] uppercase text-accent-red hover:underline">Delete</button>
        </td>
      </tr>
      {% else %}
      <tr><td colspan="2" class="px-4 py-6 text-center text-cortex-muted text-xs">No asset types yet.</td></tr>
      {% endfor %}
    </tbody>
  </table>
</div>

<div id="new-type-modal" class="hidden fixed inset-0 bg-black/70 flex items-center justify-center z-50 px-4">
  <div class="w-full max-w-md border border-cortex-border bg-cortex-panel rounded-md p-6">
    <div class="flex items-center justify-between mb-4">
      <div class="text-xs uppercase tracking-wider text-accent-blue">New Asset Type</div>
      <button onclick="document.getElementById('new-type-modal').classList.add('hidden')" class="text-cortex-muted hover:text-accent-red">&times;</button>
    </div>
    <div id="type-form-error" class="hidden mb-3 text-xs border border-accent-red/40 bg-accent-red/10 text-accent-red px-3 py-2 rounded"></div>
    <form id="type-form" class="space-y-3 text-sm">
      <div>
        <label class="block text-xs text-cortex-muted mb-1 uppercase tracking-wider">Name</label>
        <input required name="name" type="text" maxlength="80" class="w-full bg-cortex-panel2 border border-cortex-border rounded px-3 py-2 focus:outline-none focus:border-accent-blue" />
      </div>
      <button type="submit" class="w-full bg-accent-blue text-cortex-bg font-display font-bold uppercase tracking-wider text-xs py-2.5 rounded hover:bg-accent-blue-bright transition">
        Create Asset Type
      </button>
    </form>
  </div>
</div>

<script>
  document.getElementById('type-form').addEventListener('submit', async function (e) {
    e.preventDefault();
    const errorBox = document.getElementById('type-form-error');
    errorBox.classList.add('hidden');
    const data = Object.fromEntries(new FormData(e.target).entries());

    const res = await fetch('/api/v1/admin/asset-types', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data),
    });

    if (res.ok) {
      window.location.reload();
    } else {
      const err = await res.json().catch(() => ({}));
      errorBox.textContent = err.detail ? JSON.stringify(err.detail) : 'Failed to create asset type.';
      errorBox.classList.remove('hidden');
    }
  });

  document.querySelectorAll('.name-input').forEach(function (input) {
    input.addEventListener('change', async function () {
      const typeId = input.closest('tr').getAttribute('data-type-id');
      const res = await fetch('/api/v1/admin/asset-types/' + typeId, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ name: input.value }),
      });
      if (!res.ok) {
        const err = await res.json().catch(() => ({}));
        alert(err.detail || 'Failed to rename asset type.');
      }
      window.location.reload();
    });
  });

  document.querySelectorAll('.delete-btn').forEach(function (btn) {
    btn.addEventListener('click', async function () {
      if (!confirm('Delete this asset type?')) return;
      const typeId = btn.closest('tr').getAttribute('data-type-id');
      const res = await fetch('/api/v1/admin/asset-types/' + typeId, { method: 'DELETE' });
      if (res.ok) {
        window.location.reload();
      } else {
        const err = await res.json().catch(() => ({}));
        alert(err.detail || 'Failed to delete asset type.');
      }
    });
  });
</script>
{% endblock %}