{% extends "base.html" %}
{% block title %}Conversation #{{ chat_session.id }}{% endblock %}

{% block extra_css %}
<style>
  .msg-bubble {
    max-width: 80%;
    padding: .6rem .9rem;
    border-radius: 1rem;
    font-size: .9rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
  }
  .msg-user { background:#0d6efd; color:#fff; border-bottom-right-radius:.25rem; align-self:flex-end; }
  .msg-ai   { background:#f8f9fa; border:1px solid #dee2e6; border-bottom-left-radius:.25rem; align-self:flex-start; }
  .msg-row  { display:flex; flex-direction:column; gap:.75rem; }
</style>
{% endblock %}

{% block content %}
<div class="mb-3">
  {% if is_admin %}
  <a href="{{ url_for('support.admin_conversations') }}" class="btn btn-sm btn-outline-secondary">
    <i class="bi bi-arrow-left me-1"></i>All Conversations
  </a>
  {% else %}
  <a href="{{ url_for('support.my_conversations') }}" class="btn btn-sm btn-outline-secondary">
    <i class="bi bi-arrow-left me-1"></i>My Conversations
  </a>
  {% endif %}
</div>

<div class="row g-4">
  <div class="col-lg-8">
    <div class="card shadow-sm">
      <div class="card-header d-flex justify-content-between align-items-center">
        <strong>{{ chat_session.title or 'Conversation #' ~ chat_session.id }}</strong>
        <small class="text-muted">{{ messages | length }} messages</small>
      </div>
      <div class="card-body">
        {% if messages %}
        <div class="msg-row">
          {% for msg in messages %}
          <div class="msg-bubble msg-{{ msg.role }}">
            {{ msg.content }}
          </div>
          {% endfor %}
        </div>
        {% else %}
        <div class="text-muted text-center py-3">No messages in this conversation.</div>
        {% endif %}
      </div>
    </div>
  </div>

  <div class="col-lg-4">
    <div class="card shadow-sm">
      <div class="card-header"><i class="bi bi-info-circle me-2"></i>Details</div>
      <div class="card-body small">
        {% if is_admin and chat_session.customer %}
        <p class="mb-1"><strong>Customer:</strong> {{ chat_session.customer.display_name }}</p>
        <p class="mb-2 text-muted">{{ chat_session.customer.email }}</p>
        <hr class="my-2">
        {% endif %}
        <p class="mb-1"><strong>Started:</strong> {{ chat_session.created_at.strftime('%b %d, %Y %I:%M %p') }}</p>
        <p class="mb-2"><strong>Last message:</strong> {{ chat_session.last_msg_at.strftime('%b %d, %Y %I:%M %p') }}</p>
        {% if not is_admin %}
        <a href="{{ url_for('support.chat', session_id=chat_session.id) }}"
           class="btn btn-primary btn-sm w-100 mt-2">
          <i class="bi bi-chat me-1"></i>Continue This Chat
        </a>
        {% endif %}
      </div>
    </div>
  </div>
</div>
{% endblock %}