<a href="/admin/support" class="btn btn-ghost btn-sm" style="margin-bottom:20px"><i class="bi bi-arrow-left"></i> Back to Support</a>

<div class="support-detail-grid">
  <!-- Ticket Info -->
  <div>
    <div class="form-card" style="margin-bottom:16px">
      <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:12px">
        <h3 style="margin:0"><%= ticket.subject %></h3>
        <span class="badge badge-<%= ticket.status==='open'?'danger':ticket.status==='in_progress'?'warning':ticket.status==='resolved'?'success':'secondary' %>"><%= ticket.status.replace('_',' ') %></span>
      </div>
      <div class="detail-list">
        <div class="dl-row"><span>Ticket #</span><code><%= ticket.ticket_number %></code></div>
        <div class="dl-row"><span>Category</span><span class="badge badge-secondary"><%= ticket.category %></span></div>
        <div class="dl-row"><span>Priority</span><span class="badge badge-<%= ticket.priority==='urgent'?'danger':ticket.priority==='high'?'warning':'secondary' %>"><%= ticket.priority %></span></div>
        <div class="dl-row"><span>Organization</span><strong><%= ticket.org_name || '—' %></strong></div>
        <div class="dl-row"><span>Contact</span><strong><%= ticket.first_name %> <%= ticket.last_name %></strong></div>
        <div class="dl-row"><span>Email</span><a href="mailto:<%= ticket.email %>"><%= ticket.email %></a></div>
        <div class="dl-row"><span>Created</span><%= moment(ticket.created_at).format('MMM D, YYYY h:mm A') %></div>
        <% if (ticket.resolved_at) { %><div class="dl-row"><span>Resolved</span><%= moment(ticket.resolved_at).format('MMM D, YYYY') %></div><% } %>
      </div>
    </div>

    <!-- Original Description -->
    <div class="form-card" style="margin-bottom:16px">
      <h4 style="margin-bottom:12px;color:#6b7280;font-size:.8rem;text-transform:uppercase">Original Message</h4>
      <p style="font-size:.9rem;line-height:1.7"><%= ticket.description %></p>
    </div>

    <!-- Ticket Controls -->
    <div class="form-card">
      <h4 style="margin-bottom:12px">Update Ticket</h4>
      <div class="form-row" style="margin-bottom:12px">
        <div class="form-group">
          <label>Status</label>
          <select id="ticketStatus" class="admin-select" style="width:100%">
            <option value="open" <%= ticket.status==='open'?'selected':'' %>>Open</option>
            <option value="in_progress" <%= ticket.status==='in_progress'?'selected':'' %>>In Progress</option>
            <option value="waiting_on_customer" <%= ticket.status==='waiting_on_customer'?'selected':'' %>>Waiting on Customer</option>
            <option value="resolved" <%= ticket.status==='resolved'?'selected':'' %>>Resolved</option>
            <option value="closed" <%= ticket.status==='closed'?'selected':'' %>>Closed</option>
          </select>
        </div>
        <div class="form-group">
          <label>Priority</label>
          <select id="ticketPriority" class="admin-select" style="width:100%">
            <option value="low" <%= ticket.priority==='low'?'selected':'' %>>Low</option>
            <option value="medium" <%= ticket.priority==='medium'?'selected':'' %>>Medium</option>
            <option value="high" <%= ticket.priority==='high'?'selected':'' %>>High</option>
            <option value="urgent" <%= ticket.priority==='urgent'?'selected':'' %>>Urgent</option>
          </select>
        </div>
      </div>
      <div class="form-group" style="margin-bottom:12px">
        <label>Assign To</label>
        <select id="ticketAssignee" class="admin-select" style="width:100%">
          <option value="">Unassigned</option>
          <% staff.forEach(s => { %><option value="<%= s.id %>" <%= ticket.assigned_to===s.id?'selected':'' %>><%= s.first_name %> <%= s.last_name %></option><% }) %>
        </select>
      </div>
      <button class="btn btn-primary btn-sm" onclick="updateTicket()"><i class="bi bi-check-lg"></i> Save Changes</button>
    </div>
  </div>

  <!-- Conversation -->
  <div>
    <div class="form-card">
      <h3>Conversation</h3>
      <div class="ticket-thread">
        <% if (replies && replies.length) { %>
        <% replies.forEach(r => { %>
        <div class="thread-message <%= r.is_staff_reply ? 'staff-msg' : 'member-msg' %> <%= r.is_internal_note ? 'internal-note' : '' %>">
          <div class="tm-header">
            <span class="tm-author"><%= r.first_name %> <%= r.last_name %><% if(r.is_staff_reply) { %> <span class="badge badge-info" style="font-size:.65rem">Staff</span><% } %><% if(r.is_internal_note) { %> <span class="badge badge-secondary" style="font-size:.65rem">Internal</span><% } %></span>
            <span class="tm-time"><%= moment(r.created_at).format('MMM D, h:mm A') %></span>
          </div>
          <p class="tm-content"><%= r.content %></p>
        </div>
        <% }) %>
        <% } else { %><p style="text-align:center;color:#9ca3af;padding:20px;font-size:.85rem">No replies yet.</p><% } %>
      </div>

      <!-- Reply Form -->
      <div class="reply-form">
        <div class="form-group" style="margin-bottom:10px">
          <textarea id="replyContent" rows="4" placeholder="Type your reply..." style="width:100%;padding:10px;border:1.5px solid #e5e7eb;border-radius:8px;font-family:var(--font);font-size:.875rem;resize:vertical"></textarea>
        </div>
        <div style="display:flex;gap:10px;align-items:center">
          <button class="btn btn-primary btn-sm" onclick="sendReply(false)"><i class="bi bi-send-fill"></i> Send to Member</button>
          <button class="btn btn-outline-primary btn-sm" onclick="sendReply(true)"><i class="bi bi-lock-fill"></i> Internal Note</button>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
.support-detail-grid { display:grid; grid-template-columns:300px 1fr; gap:20px; }
.detail-list { display:flex; flex-direction:column; gap:0; }
.dl-row { display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid #f3f4f6; font-size:.82rem; }
.dl-row:last-child { border-bottom:none; }
.dl-row span:first-child { color:#6b7280; }
.ticket-thread { display:flex; flex-direction:column; gap:12px; max-height:500px; overflow-y:auto; padding:4px; margin-bottom:16px; }
.thread-message { padding:12px 14px; border-radius:10px; }
.staff-msg { background:#eff6ff; border-left:3px solid #1a56db; }
.member-msg { background:#f9fafb; border-left:3px solid #e5e7eb; }
.internal-note { background:#fffbeb !important; border-left:3px solid #f59e0b !important; opacity:.85; }
.tm-header { display:flex; justify-content:space-between; margin-bottom:6px; }
.tm-author { font-size:.8rem; font-weight:700; color:#374151; }
.tm-time { font-size:.72rem; color:#9ca3af; }
.tm-content { font-size:.85rem; line-height:1.6; color:#374151; white-space:pre-wrap; }
.reply-form { border-top:1px solid #e5e7eb; padding-top:16px; }
@media(max-width:768px){ .support-detail-grid{grid-template-columns:1fr} }
</style>

<script>
async function updateTicket() {
  const status      = document.getElementById('ticketStatus').value;
  const priority    = document.getElementById('ticketPriority').value;
  const assigned_to = document.getElementById('ticketAssignee').value;
  await fetch(`/admin/support/<%= ticket.id %>`, {method:'PUT',headers:{'Content-Type':'application/json'},body:JSON.stringify({status,priority,assigned_to})});
  location.reload();
}
async function sendReply(isInternal) {
  const content = document.getElementById('replyContent').value.trim();
  if (!content) return;
  const res = await fetch(`/admin/support/<%= ticket.id %>/reply`, {method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({content, is_internal: String(isInternal)})});
  if((await res.json()).success) location.reload();
}
</script>
