{% extends "admin/base.html" %}

{% block title %}Chat Transcript | Admin{% endblock %}

{% block content %}
<div class="admin-page-head">
  <div>
    <p class="eyebrow-dark">Chatbot</p>
    <h1>Transcript</h1>
    <p class="mt-2 text-sm font-bold text-zinc-500">{{ chat_session.source_page or 'Unknown page' }} / {{ chat_session.public_stock_number or chat_session.title_en or 'General enquiry' }}</p>
  </div>
  <a class="btn-outline" href="{{ url_for('admin_chatbot') }}">Back to Chatbot</a>
</div>

<section class="admin-panel mt-8">
  <div class="grid gap-4 md:grid-cols-4">
    <div><p class="form-label">Language</p><p class="mt-1 font-black">{{ chat_session.language_code }}</p></div>
    <div><p class="form-label">Lead created</p><p class="mt-1 font-black">{{ 'Yes' if chat_session.lead_created else 'No' }}</p></div>
    <div><p class="form-label">Created</p><p class="mt-1 font-black">{{ chat_session.created_at }}</p></div>
    <div><p class="form-label">Updated</p><p class="mt-1 font-black">{{ chat_session.updated_at }}</p></div>
  </div>
  {% if chat_session.visitor_name or chat_session.visitor_email or chat_session.visitor_phone or chat_session.visitor_whatsapp %}
    <div class="mt-5 rounded-lg border border-zinc-200 bg-zinc-50 p-4 text-sm leading-6">
      <strong>Visitor:</strong> {{ chat_session.visitor_name }} {{ chat_session.visitor_email }} {{ chat_session.visitor_phone }} {{ chat_session.visitor_whatsapp }}
    </div>
  {% endif %}
</section>

<section class="admin-panel mt-6">
  <h2>Messages</h2>
  <div class="mt-5 grid gap-3">
    {% for message in messages %}
      <article class="rounded-lg border border-zinc-200 p-4 {{ 'bg-zinc-50' if message.role == 'user' else 'bg-white' }}">
        <div class="flex flex-wrap justify-between gap-2">
          <p class="text-sm font-black uppercase tracking-[0.12em] text-zinc-500">{{ message.role }}</p>
          <p class="text-xs font-bold text-zinc-500">{{ message.created_at }}{% if message.model %} / {{ message.model }}{% endif %}</p>
        </div>
        <p class="mt-3 whitespace-pre-wrap text-sm leading-6 text-zinc-700">{{ message.message }}</p>
      </article>
    {% else %}
      <p class="text-sm text-zinc-600">No messages stored for this session.</p>
    {% endfor %}
  </div>
</section>
{% endblock %}