{% extends "cms/base.html" %}
{% block title %}Chat Session{% endblock %}
{% block page_title %}Chat Session — {{ session.session_id.hex|slice:":8" }}{% endblock %}

{% block cms_content %}
<div class="cms-section-header">
    <h2><i class="fa-solid fa-comment-dots me-2"></i>Chat Transcript</h2>
    <a href="{% url 'cms_chat_sessions' %}" class="btn-cms-ghost">
        <i class="fa-solid fa-arrow-left me-1"></i> Back
    </a>
</div>

<div class="row g-3">
    <div class="col-lg-8">
        <div class="cms-card">
            <div style="max-height:60vh;overflow-y:auto;display:flex;flex-direction:column;gap:.75rem;padding:.5rem 0;">
            {% for msg in session.messages.all %}
                {% if msg.role == 'user' %}
                <div style="align-self:flex-end;max-width:75%;background:#eb5152;color:#fff;padding:.75rem 1rem;border-radius:12px 12px 2px 12px;font-size:.875rem;">
                    {{ msg.content }}
                    <div style="font-size:.65rem;opacity:.65;margin-top:.25rem;text-align:right;">{{ msg.created_at|date:"H:i" }}</div>
                </div>
                {% elif msg.role == 'assistant' %}
                <div style="align-self:flex-start;max-width:75%;background:#123050;color:#fff;padding:.75rem 1rem;border-radius:12px 12px 12px 2px;font-size:.875rem;">
                    {{ msg.content }}
                    <div style="font-size:.65rem;opacity:.55;margin-top:.25rem;">{{ msg.created_at|date:"H:i" }} · {{ msg.tokens }} tokens</div>
                </div>
                {% endif %}
            {% empty %}
                <p style="color:var(--cms-muted);text-align:center;padding:2rem 0;">No messages in this session.</p>
            {% endfor %}
            </div>
        </div>
    </div>

    <div class="col-lg-4">
        <div class="cms-card mb-3">
            <h5>Visitor</h5>
            <div style="font-size:.875rem;">
                <div><strong>{{ session.display_label }}</strong></div>
                {% if session.visitor_name and session.topic %}<div style="color:var(--cms-muted);">{{ session.topic }}</div>{% endif %}
                {% if session.visitor_email %}<div style="color:var(--cms-muted);">{{ session.visitor_email }}</div>{% endif %}
                {% if session.visitor_ip %}<div style="color:var(--cms-muted);font-size:.8rem;">IP: {{ session.visitor_ip }}</div>{% endif %}
            </div>
        </div>

        <div class="cms-card mb-3">
            <h5>Session Info</h5>
            <div style="font-size:.85rem;line-height:1.8;">
                <div><span style="color:var(--cms-muted);">Status:</span> {{ session.get_status_display }}</div>
                <div><span style="color:var(--cms-muted);">Messages:</span> {{ session.message_count }}</div>
                <div><span style="color:var(--cms-muted);">Started:</span> {{ session.created_at|date:"d M Y H:i" }}</div>
                <div><span style="color:var(--cms-muted);">Updated:</span> {{ session.updated_at|date:"d M Y H:i" }}</div>
            </div>
        </div>

        {% if session.handoff_triggered %}
        <div class="cms-card" style="border-left:3px solid #25D366;">
            <h5>WhatsApp Handoff</h5>
            <div style="font-size:.85rem;">
                <div><i class="fa-brands fa-whatsapp me-1" style="color:#25D366"></i>Triggered</div>
                <div style="color:var(--cms-muted);">Keyword: "{{ session.handoff_keyword }}"</div>
                {% if session.handoff_at %}<div style="color:var(--cms-muted);">At: {{ session.handoff_at|date:"H:i" }}</div>{% endif %}
            </div>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}