{% extends "base.html" %}
{% block title %}#{{ t.id }} — {{ t.title }} · {{ brand }}{% endblock %}
{% block content %}
<div class="grid lg:grid-cols-3 gap-6">
  <section class="lg:col-span-2 card p-5">
    <header class="flex items-start justify-between gap-3">
      <div>
        <h1 class="text-2xl font-bold">#{{ t.id }} · {{ t.title }}</h1>
        <div class="mt-1 flex flex-wrap items-center gap-2 text-xs">
          <span class="tag {{ status_class(t.status) }}">{{ t.status.replace('_',' ').title() }}</span>
          <span class="tag {{ priority_class(t.priority) }}">Priority: {{ t.priority }}</span>
          {% if t.sprint %}<span class="tag">Sprint: {{ t.sprint }}</span>{% endif %}
          {% for label in t.label_list() %}<span class="tag">{{ label }}</span>{% endfor %}
        </div>
      </div>
      {% if can_manage %}
        <a class="btn" href="{{ url_for('admin_edit_ticket', ticket_id=t.id) }}">Edit</a>
      {% endif %}
    </header>

    <article class="prose prose-invert max-w-none mt-4">
      <p class="whitespace-pre-wrap">{{ t.description }}</p>
    </article>

    {% set done,total = checklist_progress(t) %}
    {% if total %}
      <hr class="my-5 border-white/10" />
      <h2 class="font-semibold">Checklist</h2>
      <div class="mt-2">
        <div class="flex items-center justify-between text-xs text-white/60">
          <span>Progress</span><span>{{ done }}/{{ total }}</span>
        </div>
        <div class="h-2 bg-white/10 rounded-full mt-1 overflow-hidden">
          <div class="h-2 bg-emerald-500/70" style="width: {{ (done/total*100)|round(0) }}%"></div>
        </div>
      </div>
      <ul class="mt-3 space-y-2 text-sm">
        {% for i in t.checklist_items() %}
          <li class="flex items-start gap-2">
            <span class="mt-1 inline-block w-3 h-3 rounded border {{ 'bg-emerald-500/80 border-emerald-400/70' if i.checked else 'border-white/30' }}"></span>
            <span class="{{ 'text-white' if i.checked else 'text-white/80' }}">{{ i.text }}</span>
          </li>
        {% endfor %}
      </ul>
    {% endif %}

    <hr class="my-5 border-white/10" />
    <h2 class="font-semibold">Comments</h2>
    <div id="comments" class="mt-3 space-y-3">
      {% for c in t.comments %}
      <div class="card p-3">
        <div class="text-sm"><b>{{ c.author_name }}</b> <span class="text-white/50">· {{ reltime(c.created_at) }}</span></div>
        <div class="mt-1 whitespace-pre-wrap">{{ c.body }}</div>
      </div>
      {% else %}
      <div class="text-white/60">No comments yet.</div>
      {% endfor %}
    </div>

    {% if user %}
    <div class="mt-4">
      <textarea id="commentBox" rows="3" class="w-full bg-black/40 border border-white/10 rounded-lg px-3 py-2" placeholder="Write a comment…"></textarea>
      <div class="mt-2 flex justify-end"><button id="commentBtn" class="btn-accent">Post Comment</button></div>
    </div>
    {% endif %}
  </section>

  <aside class="card p-5 space-y-4">
    <div>
      <h3 class="font-semibold">Assignee</h3>
      <p class="mt-1 text-white/80">{{ t.assignee_name or (t.assignee_id and ('<@' ~ t.assignee_id ~ '>')) or 'Unassigned' }}</p>
      {% if can_manage %}
      <div class="mt-3">
        <label class="text-xs text-white/60">Discord ID</label>
        <input id="assigneeId" value="{{ t.assignee_id or '' }}" class="w-full bg-black/40 border border-white/10 rounded-lg px-2 py-1.5" />
        <label class="text-xs text-white/60 mt-2 block">Display Name</label>
        <input id="assigneeName" value="{{ t.assignee_name or '' }}" class="w-full bg-black/40 border border-white/10 rounded-lg px-2 py-1.5" />
        <button id="assignBtn" class="btn-accent mt-2 w-full">Assign</button>
      </div>
      {% endif %}
    </div>

    <div>
      <h3 class="font-semibold">Dates</h3>
      <div class="text-xs text-white/60 mt-1 space-y-1">
        <div>Created: {{ t.created_at.strftime('%Y-%m-%d %H:%M') }} UTC ({{ reltime(t.created_at) }})</div>
        <div>Updated: {{ t.updated_at.strftime('%Y-%m-%d %H:%M') }} UTC ({{ reltime(t.updated_at) }})</div>
        {% if t.due_at %}<div class="text-red-200">Due: {{ t.due_at.strftime('%Y-%m-%d') }} ({{ reltime(t.due_at) }})</div>{% endif %}
      </div>
    </div>

    <div>
      <h3 class="font-semibold">Meta</h3>
      <div class="text-xs text-white/70 mt-1 space-y-1">
        <div>Priority: <span class="tag {{ priority_class(t.priority) }}">{{ t.priority }}</span></div>
        {% if t.points is not none %}<div>Points: {{ t.points }}</div>{% endif %}
        {% if t.sprint %}<div>Sprint: {{ t.sprint }}</div>{% endif %}
        {% set labels = t.label_list() %}
        {% if labels %}
          <div class="flex flex-wrap gap-1 items-center">
            <span>Labels:</span>
            {% for label in labels %}<span class="tag">{{ label }}</span>{% endfor %}
          </div>
        {% endif %}
      </div>
    </div>
  </aside>
</div>

<script>
const ticketId = {{ t.id }};
const commentBtn = document.getElementById('commentBtn');
const commentBox = document.getElementById('commentBox');
const comments = document.getElementById('comments');
const assignBtn = document.getElementById('assignBtn');
const assigneeId = document.getElementById('assigneeId');
const assigneeName = document.getElementById('assigneeName');

function esc(s){return (s||'').replaceAll('&','&amp;').replaceAll('<','&lt;').replaceAll('>','&gt;');}

commentBtn?.addEventListener('click', async () => {
  const body = commentBox.value.trim();
  if(!body) return;
  const r = await fetch(`/api/tickets/${ticketId}/comment`, {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({body})});
  const data = await r.json();
  if(!r.ok){ alert(data.error||'Failed'); return; }
  commentBox.value='';
  const c = data.comment;
  const el = document.createElement('div');
  el.className='card p-3';
  el.innerHTML = `<div class="text-sm"><b>${esc(c.author_name)}</b> <span class="text-white/50">· ${(new Date(c.created_at)).toISOString().slice(0,16).replace('T',' ')} UTC</span></div><div class="mt-1 whitespace-pre-wrap">${esc(c.body)}</div>`;
  comments.prepend(el);
});

assignBtn?.addEventListener('click', async () => {
  const payload = { assignee_id: assigneeId.value.trim(), assignee_name: assigneeName.value.trim() };
  const r = await fetch(`/api/tickets/${ticketId}/assign`, {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(payload)});
  const data = await r.json();
  if(!r.ok){ alert(data.error||'Failed'); return; }
  location.reload();
});

document.querySelectorAll('[data-status]')?.forEach(btn => {
  btn.addEventListener('click', async () => {
    const status = btn.dataset.status;
    const r = await fetch(`/api/tickets/${ticketId}/status`, {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({status})});
    const data = await r.json();
    if(!r.ok){ alert(data.error||'Failed'); return; }
    location.reload();
  });
});
</script>
{% endblock %}