{% extends spa_base or "base.html"%}
{% block title %}Admin - Chamado #{{ ticket.id }}{% endblock %}
{% block extra_head %}
<style>
    .ticket-page { max-width: 800px; margin: 0 auto; }
    .page-header { margin-bottom: 24px; }
    .page-header h1 { font-size: 1.3em; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
    .page-header .meta { color: var(--text-muted); font-size: 0.85em; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
    .ticket-status { padding: 3px 10px; border-radius: 100px; font-size: 0.75em; font-weight: 600; }
    .ticket-status.aberto { background: rgba(245,197,24,0.1); color: var(--gold); }
    .ticket-status.em_atendimento { background: rgba(70,211,105,0.1); color: var(--green); }
    .ticket-status.respondido { background: rgba(100,150,255,0.1); color: #6496ff; }
    .ticket-status.fechado { background: rgba(128,128,128,0.1); color: var(--text-muted); }
    .messages-list { display: grid; gap: 16px; margin-bottom: 24px; }
    .msg-item {
        background: var(--bg-card); border-radius: var(--radius-lg); padding: 16px 20px;
        border: 1px solid var(--border);
    }
    .msg-item.admin { border-left: 3px solid var(--primary); }
    .msg-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
    .msg-sender { font-weight: 600; font-size: 0.85em; color: var(--text-primary); }
    .msg-sender.admin-tag { color: var(--primary); }
    .msg-time { font-size: 0.75em; color: var(--text-muted); }
    .msg-body { color: var(--text-secondary); font-size: 0.9em; line-height: 1.6; white-space: pre-wrap; }
    .reply-form { background: var(--bg-card); border-radius: var(--radius-lg); padding: 20px; border: 1px solid var(--border); margin-bottom: 20px; }
    .reply-form textarea {
        width: 100%; min-height: 100px; padding: 12px; background: var(--bg-surface);
        border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text-primary);
        font-size: 0.9em; font-family: inherit; resize: vertical; margin-bottom: 12px;
    }
    .reply-form textarea:focus { outline: none; border-color: var(--text-secondary); }
    .reply-actions { display: flex; gap: 12px; flex-wrap: wrap; }
    .status-form { display: flex; gap: 8px; align-items: center; }
    .status-form select {
        padding: 8px 12px; background: var(--bg-surface); border: 1px solid var(--border);
        border-radius: var(--radius-md); color: var(--text-primary); font-size: 0.85em;
    }
    .back-link { color: var(--text-muted); font-size: 0.85em; text-decoration: none; display: inline-block; margin-bottom: 16px; }
    .back-link:hover { color: var(--text-primary); }
</style>
{% endblock %}
{% block content %}
<div class="ticket-page">
    <a href="{{ url_for('admin_suporte') }}" class="back-link">&larr; Voltar</a>
    <div class="page-header">
        <h1>#{{ ticket.id }} - {{ ticket.subject }}</h1>
        <div class="meta">
            <span class="ticket-status {{ ticket.status }}">{{ ticket.status|replace('_', ' ')|capitalize }}</span>
            <span>{{ ticket.user.email }}</span>
            <span>{{ ticket.created_at|bdatetime }}</span>
        </div>
    </div>

    <div class="messages-list">
        {% for msg in messages %}
        <div class="msg-item {% if msg.is_admin %}admin{% endif %}">
            <div class="msg-header">
                <span class="msg-sender {% if msg.is_admin %}admin-tag{% endif %}">
                    {% if msg.is_admin %}&#x1f451; Suporte{% else %}{{ ticket.user.email }}{% endif %}
                </span>
                <span class="msg-time">{{ msg.created_at|bdatetime }}</span>
            </div>
            <div class="msg-body">{{ msg.message }}</div>
        </div>
        {% endfor %}
    </div>

    <form class="reply-form" method="POST" action="{{ url_for('admin_suporte_responder', ticket_id=ticket.id) }}">
        <textarea name="message" placeholder="Escreva sua resposta..." required></textarea>
        <div class="reply-actions">
            <button type="submit" class="btn">Enviar Resposta</button>
            <form method="POST" action="{{ url_for('admin_suporte_status', ticket_id=ticket.id) }}">
                <div class="status-form">
                    <select name="status">
                        <option value="aberto" {% if ticket.status == 'aberto' %}selected{% endif %}>Aberto</option>
                        <option value="em_atendimento" {% if ticket.status == 'em_atendimento' %}selected{% endif %}>Em Atendimento</option>
                        <option value="respondido" {% if ticket.status == 'respondido' %}selected{% endif %}>Respondido</option>
                        <option value="resolvido" {% if ticket.status == 'resolvido' %}selected{% endif %}>Resolvido</option>
                        <option value="fechado" {% if ticket.status == 'fechado' %}selected{% endif %}>Fechado</option>
                    </select>
                    <button type="submit" class="btn btn-outline btn-sm">Alterar Status</button>
                </div>
            </form>
        </div>
    </form>
</div>
{% endblock %}