{% extends "base.html" %}
{% block title %}Ticket #{{ ticket.id }}{% endblock %}

{% block extra_css %}
<style>
  .reply-bubble {
    max-width: 85%;
    padding: .65rem 1rem;
    border-radius: 1rem;
    font-size: .9rem;
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.6;
  }
  .reply-admin  { background:#d1ecf1; border-bottom-right-radius:.25rem; align-self:flex-end; }
  .reply-system { background:#f8d7da; border-bottom-left-radius:.25rem; align-self:flex-start; }
  #reply-thread { display:flex; flex-direction:column; gap:.75rem; }
</style>
{% endblock %}

{% block content %}
<div class="mb-3">
  <a href="{{ url_for('support.admin_tickets') }}" class="btn btn-sm btn-outline-secondary">
    <i class="bi bi-arrow-left me-1"></i>All Tickets
  </a>
</div>

<div class="row g-4">

  {# ── Left column: original message + replies ── #}
  <div class="col-lg-8">

    {# Original ticket card #}
    <div class="card shadow-sm mb-3">
      <div class="card-header d-flex justify-content-between align-items-center">
        <strong>Ticket #{{ ticket.id }}: {{ ticket.subject }}</strong>
        {% set status_class = {'open': 'danger', 'answered': 'success', 'closed': 'secondary'} %}
        <span class="badge bg-{{ status_class.get(ticket.status, 'secondary') }}">
          {{ ticket.status | capitalize }}
        </span>
      </div>
      <div class="card-body">
        <div class="text-muted small mb-2">
          <i class="bi bi-person me-1"></i>
          {{ ticket.customer.display_name if ticket.customer else 'Unknown' }}
          {% if ticket.facility %}
          &nbsp;·&nbsp;<i class="bi bi-building me-1"></i>{{ ticket.facility.name }}
          {% endif %}
          &nbsp;·&nbsp;<i class="bi bi-clock me-1"></i>
          {{ ticket.created_at.strftime('%b %d, %Y %I:%M %p') }}
        </div>
        <p class="mb-0" style="white-space:pre-wrap;">{{ ticket.body }}</p>
      </div>
    </div>

    {# Reply thread #}
    {% if replies %}
    <div class="card shadow-sm mb-3">
      <div class="card-header"><i class="bi bi-chat-left-text me-2"></i>Replies</div>
      <div class="card-body">
        <div id="reply-thread">
          {% for reply in replies %}
          <div class="d-flex flex-column">
            <div class="reply-bubble reply-admin ms-auto">
              <div class="text-muted small mb-1">
                <strong>{{ reply.author.display_name if reply.author else 'Support Team' }}</strong>
                &nbsp;·&nbsp;{{ reply.created_at.strftime('%b %d, %Y %I:%M %p') }}
              </div>
              {{ reply.body }}
            </div>
          </div>
          {% endfor %}
        </div>
      </div>
    </div>
    {% endif %}

    {# Add reply form #}
    {% if ticket.status != 'closed' %}
    <div class="card shadow-sm">
      <div class="card-header"><i class="bi bi-reply me-2"></i>Add Reply</div>
      <div class="card-body">
        <form method="post">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
          <input type="hidden" name="action" value="reply">
          <div class="mb-3">
            <textarea name="body" class="form-control" rows="5" required
                      placeholder="Type your reply to the customer…"></textarea>
          </div>
          <button type="submit" class="btn btn-primary">
            <i class="bi bi-send me-1"></i>Send Reply
          </button>
          <span class="text-muted small ms-2">
            The customer will be notified by email.
          </span>
        </form>
      </div>
    </div>
    {% else %}
    <div class="alert alert-secondary">
      <i class="bi bi-lock me-2"></i>This ticket is closed. Change the status to re-open it.
    </div>
    {% endif %}

  </div>

  {# ── Right column: status management ── #}
  <div class="col-lg-4">
    <div class="card shadow-sm">
      <div class="card-header"><i class="bi bi-gear me-2"></i>Ticket Status</div>
      <div class="card-body">
        <p class="mb-2 text-muted small">Current status:</p>
        <p class="fw-semibold mb-3">
          <span class="badge bg-{{ status_class.get(ticket.status, 'secondary') }} fs-6">
            {{ ticket.status | capitalize }}
          </span>
        </p>
        <form method="post" class="d-grid gap-2">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
          <input type="hidden" name="action" value="status">
          {% if ticket.status != 'open' %}
          <button type="submit" name="status" value="open" class="btn btn-outline-danger btn-sm">
            <i class="bi bi-envelope-open me-1"></i>Reopen
          </button>
          {% endif %}
          {% if ticket.status != 'answered' %}
          <button type="submit" name="status" value="answered" class="btn btn-outline-success btn-sm">
            <i class="bi bi-check-circle me-1"></i>Mark Answered
          </button>
          {% endif %}
          {% if ticket.status != 'closed' %}
          <button type="submit" name="status" value="closed" class="btn btn-outline-secondary btn-sm">
            <i class="bi bi-x-circle me-1"></i>Close Ticket
          </button>
          {% endif %}
        </form>
      </div>
    </div>

    {# Customer info card #}
    {% if ticket.customer %}
    <div class="card shadow-sm mt-3">
      <div class="card-header"><i class="bi bi-person-circle me-2"></i>Customer</div>
      <div class="card-body small">
        <p class="mb-1"><strong>{{ ticket.customer.display_name }}</strong></p>
        <p class="mb-1 text-muted">{{ ticket.customer.email }}</p>
        {% if ticket.facility %}
        <hr class="my-2">
        <p class="mb-1"><i class="bi bi-building me-1 text-muted"></i>{{ ticket.facility.name }}</p>
        {% if ticket.facility.address %}
        <p class="mb-0 text-muted">{{ ticket.facility.address }}</p>
        {% endif %}
        {% endif %}
      </div>
    </div>
    {% endif %}

  </div>
</div>
{% endblock %}