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

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

<div class="row justify-content-center">
  <div class="col-lg-8">

    {# Original request #}
    <div class="card shadow-sm mb-3">
      <div class="card-header d-flex justify-content-between align-items-center">
        <strong>Request #{{ ticket.id }}: {{ ticket.subject }}</strong>
        {% set status_class = {'open': 'warning', 'answered': 'success', 'closed': 'secondary'} %}
        {% set status_label = {'open': 'Awaiting reply', 'answered': 'Answered', 'closed': 'Closed'} %}
        <span class="badge bg-{{ status_class.get(ticket.status, 'secondary') }}">
          {{ status_label.get(ticket.status, ticket.status | capitalize) }}
        </span>
      </div>
      <div class="card-body">
        <div class="text-muted small mb-2">
          {% if ticket.facility %}
          <i class="bi bi-building me-1"></i>{{ ticket.facility.name }}&nbsp;·&nbsp;
          {% endif %}
          <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>

    {# Staff replies #}
    {% if replies %}
    <div class="card shadow-sm mb-3">
      <div class="card-header">
        <i class="bi bi-chat-left-text me-2"></i>Replies from Support Team
      </div>
      <div class="card-body">
        <div id="reply-thread">
          {% for reply in replies %}
          <div class="border rounded p-3 bg-light">
            <div class="text-muted small mb-2">
              <i class="bi bi-person-badge me-1"></i>
              <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>
            <div style="white-space:pre-wrap;word-break:break-word;">{{ reply.body }}</div>
          </div>
          {% endfor %}
        </div>
      </div>
    </div>
    {% else %}
    <div class="alert alert-info">
      <i class="bi bi-hourglass-split me-2"></i>
      Your request has been received. Our team will reply shortly.
    </div>
    {% endif %}

    {% if ticket.status != 'closed' %}
    <div class="card shadow-sm mt-3">
      <div class="card-header"><i class="bi bi-reply me-2"></i>Add a Follow-up</div>
      <div class="card-body">
        <form method="post">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
          <div class="mb-3">
            <textarea name="body" class="form-control" rows="4" required
                      placeholder="Type your follow-up message…"></textarea>
          </div>
          <button type="submit" class="btn btn-primary btn-sm">
            <i class="bi bi-send me-1"></i>Send Reply
          </button>
        </form>
      </div>
    </div>
    {% else %}
    <div class="alert alert-secondary mt-3">
      <i class="bi bi-lock me-2"></i>This request is closed.
      <a href="{{ url_for('support.chat') }}">Start a new chat</a> if you need further help.
    </div>
    {% endif %}

    <div class="text-center mt-3">
      <a href="{{ url_for('support.chat') }}" class="btn btn-outline-primary btn-sm">
        <i class="bi bi-chat-dots me-1"></i>Ask another question
      </a>
    </div>

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