{% extends "base.html" %}
{% block title %}{{ ticket.ticket_number }} // Synapse-Cortex{% endblock %}
{% block header %}
<a href="/tickets" class="text-cortex-muted hover:text-accent-blue">&larr; Tickets</a> // {{ ticket.ticket_number }}
{% 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 justify-between gap-2 mb-4">
  <span class="text-[10px] px-2 py-0.5 rounded uppercase border {% if ticket.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 ticket.source.value == 'netscanxi' %}Auto-created from NetscanXi{% else %}Manually created{% endif %}
  </span>
  {% if user.role.value in ('global_admin', 'tenant_admin') %}
  <button id="delete-ticket-btn" class="text-[10px] uppercase text-accent-red hover:underline">Delete Ticket</button>
  {% endif %}
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
  <div class="lg:col-span-2 space-y-4">
    <div class="border border-cortex-border bg-cortex-panel rounded-md p-5">
      <label class="block text-[10px] text-cortex-muted mb-1 uppercase tracking-wider">Title</label>
      <input id="field-title" type="text" value="{{ ticket.title }}"
             class="w-full bg-cortex-panel2 border border-cortex-border rounded px-3 py-2 text-lg font-display focus:outline-none focus:border-accent-blue" />

      <label class="block text-[10px] text-cortex-muted mb-1 mt-4 uppercase tracking-wider">Description</label>
      <textarea id="field-description" rows="8"
                class="w-full bg-cortex-panel2 border border-cortex-border rounded px-3 py-2 text-sm focus:outline-none focus:border-accent-blue">{{ ticket.description or '' }}</textarea>

      <button id="save-btn" class="mt-4 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 Changes
      </button>
    </div>

    <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">Actions Taken</div>

      <div class="flex gap-2 mb-4">
        <input id="action-body" type="text" placeholder="Describe the action taken..."
               class="flex-1 bg-cortex-panel2 border border-cortex-border rounded px-3 py-2 text-sm focus:outline-none focus:border-accent-blue" />
        <button id="add-action-btn" 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 shrink-0">
          Log Action
        </button>
      </div>

      <div id="actions-list" class="space-y-3 text-sm">
        <div class="text-cortex-muted text-xs">Loading...</div>
      </div>
    </div>
  </div>

  <div class="space-y-4">
    <div class="border border-cortex-border bg-cortex-panel rounded-md p-5 space-y-4">
      <div class="text-[10px] text-cortex-muted uppercase tracking-wider font-display">Ticket Info</div>

      <div>
        <label class="block text-[10px] text-cortex-muted mb-1 uppercase tracking-wider">Status</label>
        <select id="field-status" class="w-full bg-cortex-panel2 border border-cortex-border rounded px-3 py-2 text-sm">
          {% for s in ['new', 'in_progress', 'awaiting_user', 'resolved', 'closed'] %}
          <option value="{{ s }}" {% if ticket.status.value == s %}selected{% endif %}>{{ s.replace('_', ' ')|upper }}</option>
          {% endfor %}
        </select>
      </div>

      <div>
        <label class="block text-[10px] text-cortex-muted mb-1 uppercase tracking-wider">Priority</label>
        <select id="field-priority" class="w-full bg-cortex-panel2 border border-cortex-border rounded px-3 py-2 text-sm">
          {% for p in ['critical', 'high', 'medium', 'low'] %}
          <option value="{{ p }}" {% if ticket.priority.value == p %}selected{% endif %}>{{ p|upper }}</option>
          {% endfor %}
        </select>
      </div>

      <div>
        <label class="block text-[10px] text-cortex-muted mb-1 uppercase tracking-wider">Assigned To</label>
        <select id="field-assigned" class="w-full bg-cortex-panel2 border border-cortex-border rounded px-3 py-2 text-sm">
          <option value="">&mdash; unassigned &mdash;</option>
          {% for a in agents %}
          <option value="{{ a.id }}" {% if ticket.assigned_to_id and ticket.assigned_to_id|string == a.id|string %}selected{% endif %}>{{ a.full_name }}</option>
          {% endfor %}
        </select>
      </div>

      <div class="pt-3 border-t border-cortex-border text-xs space-y-2">
        <div class="flex justify-between"><span class="text-cortex-muted">Type</span><span class="text-chrome uppercase">{{ ticket.ticket_type.value }}</span></div>
        <div class="flex justify-between"><span class="text-cortex-muted">Requester</span><span class="text-chrome">{{ ticket.requester.full_name if ticket.requester else '—' }}</span></div>
        <div class="flex justify-between"><span class="text-cortex-muted">Asset</span>
          <span class="text-chrome">
            {% if ticket.asset %}<a href="/assets/{{ ticket.asset.id }}" class="text-accent-blue hover:underline">{{ ticket.asset.asset_id }}</a>{% else %}—{% endif %}
          </span>
        </div>
        <div class="flex justify-between"><span class="text-cortex-muted">Resolution Due</span>
          <span class="{% if ticket.is_sla_breaching %}text-accent-red{% else %}text-chrome{% endif %}">
            {{ ticket.resolution_due_at.strftime('%Y-%m-%d %H:%M') if ticket.resolution_due_at else '—' }}
          </span>
        </div>
        {% if ticket.is_sla_breaching %}
        <div class="text-accent-red uppercase animate-pulse">&#9650; SLA Breaching</div>
        {% endif %}
        <div class="flex justify-between"><span class="text-cortex-muted">Created</span><span class="text-chrome">{{ ticket.created_at.strftime('%Y-%m-%d %H:%M') }}</span></div>
        {% if ticket.external_ref %}
        <div class="flex justify-between gap-2"><span class="text-cortex-muted shrink-0">External Ref</span><span class="text-chrome-dim font-mono text-right break-all">{{ ticket.external_ref }}</span></div>
        {% endif %}
      </div>
    </div>
  </div>
</div>

<script>
  const TICKET_ID = "{{ ticket.id }}";

  function escapeHtml(str) {
    const div = document.createElement('div');
    div.textContent = str;
    return div.innerHTML;
  }

  async function loadActions() {
    const list = document.getElementById('actions-list');
    const res = await fetch('/api/v1/tickets/' + TICKET_ID + '/actions');
    if (!res.ok) {
      list.innerHTML = '<div class="text-accent-red text-xs">Failed to load actions.</div>';
      return;
    }
    const actions = await res.json();
    if (!actions.length) {
      list.innerHTML = '<div class="text-cortex-muted text-xs">No actions logged yet.</div>';
      return;
    }
    list.innerHTML = actions.map(function (a) {
      const when = new Date(a.created_at).toLocaleString();
      return '<div class="border-b border-cortex-border/60 pb-2">' +
        '<div class="text-[10px] text-cortex-muted uppercase tracking-wider mb-1">' +
          escapeHtml(a.user_name || 'Unknown user') + ' &middot; ' + escapeHtml(when) +
        '</div>' +
        '<div class="text-chrome">' + escapeHtml(a.body) + '</div>' +
      '</div>';
    }).join('');
  }

  document.getElementById('add-action-btn').addEventListener('click', async function () {
    const input = document.getElementById('action-body');
    const body = input.value.trim();
    if (!body) return;

    const res = await fetch('/api/v1/tickets/' + TICKET_ID + '/actions', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ body: body }),
    });

    if (res.ok) {
      input.value = '';
      loadActions();
    } else {
      alert('Failed to log action.');
    }
  });

  loadActions();

  const deleteBtn = document.getElementById('delete-ticket-btn');
  if (deleteBtn) {
    deleteBtn.addEventListener('click', async function () {
      if (!confirm('Delete this ticket? This cannot be undone.')) return;
      const res = await fetch('/api/v1/tickets/' + TICKET_ID, { method: 'DELETE' });
      if (res.ok) {
        window.location.href = '/tickets';
      } else {
        alert('Failed to delete ticket.');
      }
    });
  }

  document.getElementById('save-btn').addEventListener('click', async function () {
    const saveBanner = document.getElementById('save-banner');
    const errorBanner = document.getElementById('error-banner');
    saveBanner.classList.add('hidden');
    errorBanner.classList.add('hidden');

    const assignedVal = document.getElementById('field-assigned').value;
    const payload = {
      title: document.getElementById('field-title').value,
      description: document.getElementById('field-description').value,
      status: document.getElementById('field-status').value,
      priority: document.getElementById('field-priority').value,
    };
    if (assignedVal) payload.assigned_to_id = assignedVal;

    const res = await fetch('/api/v1/tickets/{{ ticket.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 %}