{% extends "base.html" %}
{% block title %}{{ asset.asset_id }} // Synapse-Cortex{% endblock %}
{% block header %}
<a href="/assets" class="text-cortex-muted hover:text-accent-blue">&larr; Assets</a> // {{ asset.asset_id }}
{% endblock %}
{% block content %}
<div id="save-banner" class="hidden mb-4 text-xs border border-accent-green/40 bg-accent-green/10 text-accent-green px-3 py-2 rounded">Saved.</div>
<div id="error-banner" class="hidden mb-4 text-xs border border-accent-red/40 bg-accent-red/10 text-accent-red px-3 py-2 rounded"></div>

<div class="flex items-center gap-2 mb-4">
  <span class="text-[10px] px-2 py-0.5 rounded uppercase border {% if asset.source.value == 'netscanxi' %}bg-accent-blue/15 text-accent-blue border-accent-blue/30{% else %}bg-cortex-panel2 text-cortex-muted border-cortex-border{% endif %}">
    {% if asset.source.value == 'netscanxi' %}Imported from NetscanXi{% else %}Manually created{% endif %}
  </span>
</div>

<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
  <!-- Core Info -->
  <div class="border border-cortex-border bg-cortex-panel rounded-md p-5">
    <div class="text-[10px] text-cortex-muted uppercase tracking-wider font-display mb-3">Core Info</div>
    <div class="space-y-3 text-sm">
      <div>
        <label class="block text-[10px] text-cortex-muted mb-1 uppercase tracking-wider">Name</label>
        <input id="core-name" type="text" value="{{ asset.name }}" class="w-full bg-cortex-panel2 border border-cortex-border rounded px-3 py-2 focus:outline-none focus:border-accent-blue" />
      </div>
      <div class="grid grid-cols-2 gap-3">
        <div>
          <label class="block text-[10px] text-cortex-muted mb-1 uppercase tracking-wider">Type</label>
          <select id="core-type" class="w-full bg-cortex-panel2 border border-cortex-border rounded px-3 py-2">
            {% for t in asset_types %}
            <option value="{{ t.id }}" {% if asset.asset_type_id|string == t.id|string %}selected{% endif %}>{{ t.name }}</option>
            {% endfor %}
          </select>
        </div>
        <div>
          <label class="block text-[10px] text-cortex-muted mb-1 uppercase tracking-wider">Status</label>
          <select id="core-status" class="w-full bg-cortex-panel2 border border-cortex-border rounded px-3 py-2">
            {% for s in ['in_stock', 'in_service', 'in_repair', 'retired'] %}
            <option value="{{ s }}" {% if asset.status.value == s %}selected{% endif %}>{{ s.replace('_',' ')|title }}</option>
            {% endfor %}
          </select>
        </div>
      </div>
      <div>
        <label class="block text-[10px] text-cortex-muted mb-1 uppercase tracking-wider">Location</label>
        <input id="core-location" type="text" value="{{ asset.location or '' }}" class="w-full bg-cortex-panel2 border border-cortex-border rounded px-3 py-2 focus:outline-none focus:border-accent-blue" />
      </div>
      <div>
        <label class="block text-[10px] text-cortex-muted mb-1 uppercase tracking-wider">Assigned To</label>
        <select id="core-assigned" class="w-full bg-cortex-panel2 border border-cortex-border rounded px-3 py-2">
          <option value="">&mdash; unassigned &mdash;</option>
          {% for a in agents %}
          <option value="{{ a.id }}" {% if asset.assigned_to_id and asset.assigned_to_id|string == a.id|string %}selected{% endif %}>{{ a.full_name }}</option>
          {% endfor %}
        </select>
      </div>
      <button onclick="saveSection('core')" 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">
        Save Core Info
      </button>
    </div>
  </div>

  <!-- Network -->
  <div class="border border-cortex-border bg-cortex-panel rounded-md p-5">
    <div class="text-[10px] text-cortex-muted uppercase tracking-wider font-display mb-3">Network</div>
    <div class="space-y-3 text-sm">
      <div>
        <label class="block text-[10px] text-cortex-muted mb-1 uppercase tracking-wider">MAC Address</label>
        <input id="net-mac" type="text" value="{{ asset.mac_address or '' }}" placeholder="00:1A:2B:3C:4D:5E"
               class="w-full bg-cortex-panel2 border border-cortex-border rounded px-3 py-2 font-mono focus:outline-none focus:border-accent-blue" />
      </div>
      <div>
        <label class="block text-[10px] text-cortex-muted mb-1 uppercase tracking-wider">IP Address</label>
        <input id="net-ip" type="text" value="{{ asset.ip_address or '' }}" placeholder="10.0.0.1"
               class="w-full bg-cortex-panel2 border border-cortex-border rounded px-3 py-2 font-mono focus:outline-none focus:border-accent-blue" />
      </div>
      <div class="text-[10px] text-cortex-muted">Cortex Asset ID: <span class="text-chrome font-mono">{{ asset.asset_id }}</span></div>
      <button onclick="saveSection('net')" 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">
        Save Network
      </button>
    </div>
  </div>

  <!-- Discovered OS & Software -->
  <div class="border border-cortex-border bg-cortex-panel rounded-md p-5 lg:col-span-2">
    <div class="text-[10px] text-cortex-muted uppercase tracking-wider font-display mb-3">Discovered OS &amp; Software</div>
    <div class="space-y-3 text-sm">
      {% if asset.netscanxi_device_type %}
      <div class="text-[10px] text-cortex-muted">As reported by NetscanXi: <span class="text-chrome-dim">{{ asset.netscanxi_device_type }}</span></div>
      {% endif %}
      <div>
        <label class="block text-[10px] text-cortex-muted mb-1 uppercase tracking-wider">Operating System</label>
        <input id="os-field" type="text" value="{{ asset.os or '' }}" placeholder="e.g. Ubuntu 22.04 LTS"
               class="w-full max-w-md bg-cortex-panel2 border border-cortex-border rounded px-3 py-2 focus:outline-none focus:border-accent-blue" />
      </div>
      <div>
        <label class="block text-[10px] text-cortex-muted mb-1 uppercase tracking-wider">Software</label>
        <div id="software-rows" class="space-y-2 max-w-lg">
          {% for sw in (asset.software or []) %}
          <div class="software-row flex gap-2">
            <input type="text" value="{{ sw.name }}" placeholder="Name" class="sw-name flex-1 bg-cortex-panel2 border border-cortex-border rounded px-2 py-1.5 text-xs" />
            <input type="text" value="{{ sw.version or '' }}" placeholder="Version" class="sw-version w-28 bg-cortex-panel2 border border-cortex-border rounded px-2 py-1.5 text-xs" />
            <button type="button" onclick="this.closest('.software-row').remove()" class="text-accent-red text-xs px-2">&times;</button>
          </div>
          {% endfor %}
        </div>
        <button type="button" onclick="addSoftwareRow()" class="mt-2 text-[10px] uppercase text-accent-blue hover:underline">+ Add software entry</button>
      </div>
      <button onclick="saveSection('discovered')" 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">
        Save Discovered Info
      </button>
    </div>
  </div>
</div>

{% if tickets %}
<div class="mt-4 border border-cortex-border bg-cortex-panel rounded-md">
  <div class="px-4 py-3 border-b border-cortex-border text-[10px] text-cortex-muted uppercase tracking-wider">Linked Tickets</div>
  <table class="w-full text-sm">
    <tbody>
      {% for t in tickets %}
      <tr class="border-b border-cortex-border/60 hover:bg-cortex-panel2">
        <td class="px-4 py-2"><a href="/tickets/{{ t.id }}" class="text-accent-blue hover:underline">{{ t.ticket_number }}</a></td>
        <td class="px-4 py-2">{{ t.title }}</td>
        <td class="px-4 py-2 text-xs uppercase text-chrome-dim">{{ t.status.value.replace('_',' ') }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endif %}

<script>
  const ASSET_ID = "{{ asset.id }}";

  function addSoftwareRow() {
    const div = document.createElement('div');
    div.className = 'software-row flex gap-2';
    div.innerHTML = `
      <input type="text" placeholder="Name" class="sw-name flex-1 bg-cortex-panel2 border border-cortex-border rounded px-2 py-1.5 text-xs" />
      <input type="text" placeholder="Version" class="sw-version w-28 bg-cortex-panel2 border border-cortex-border rounded px-2 py-1.5 text-xs" />
      <button type="button" onclick="this.closest('.software-row').remove()" class="text-accent-red text-xs px-2">&times;</button>`;
    document.getElementById('software-rows').appendChild(div);
  }

  async function saveSection(section) {
    const saveBanner = document.getElementById('save-banner');
    const errorBanner = document.getElementById('error-banner');
    saveBanner.classList.add('hidden');
    errorBanner.classList.add('hidden');

    let payload = {};
    if (section === 'core') {
      const assignedVal = document.getElementById('core-assigned').value;
      payload = {
        name: document.getElementById('core-name').value,
        asset_type_id: document.getElementById('core-type').value,
        status: document.getElementById('core-status').value,
        location: document.getElementById('core-location').value,
      };
      if (assignedVal) payload.assigned_to_id = assignedVal;
    } else if (section === 'net') {
      payload = {
        mac_address: document.getElementById('net-mac').value || null,
        ip_address: document.getElementById('net-ip').value || null,
      };
    } else if (section === 'discovered') {
      const software = Array.from(document.querySelectorAll('.software-row')).map(row => ({
        name: row.querySelector('.sw-name').value,
        version: row.querySelector('.sw-version').value || null,
      })).filter(sw => sw.name);
      payload = {
        os: document.getElementById('os-field').value || null,
        software: software,
      };
    }

    const res = await fetch('/api/v1/assets/' + ASSET_ID, {
      method: 'PATCH',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(payload),
    });

    if (res.ok) {
      saveBanner.classList.remove('hidden');
    } else {
      const err = await res.json().catch(() => ({}));
      errorBanner.textContent = err.detail ? JSON.stringify(err.detail) : 'Failed to save changes.';
      errorBanner.classList.remove('hidden');
    }
  }
</script>
{% endblock %}