{% extends "showcase/cabinet/base_cabinet.html" %}

{% block title %}Conversations{% endblock %}

{% block sidebar_title %}
<span class="bi bi-chat-dots fs-5" style="color: var(--cab-primary);"></span>
<span class="cab-sidebar__title ms-2 fw-semibold text-white" style="font-size: 1rem; white-space: nowrap;">Conversations</span>
{% endblock %}

{% block sidebar_nav %}
  <li class="px-2 pt-1 pb-2">
    <input type="text" class="form-control form-control-sm"
           placeholder="Search..."
           value="{{ q }}"
           name="q"
           hx-get="?" hx-trigger="keyup changed delay:400ms" hx-target="#cab-content" hx-push-url="true"
           hx-include="[name='folder'],[name='topic']"
           style="background:rgba(255,255,255,0.07);border-color:rgba(255,255,255,0.12);color:#fff;border-radius:8px;font-size:.8rem;">
    <input type="hidden" name="folder" value="{{ active_folder }}">
    <input type="hidden" name="topic" value="{{ active_topic|default:'' }}">
  </li>

  <li><h6 class="px-3 pt-1 pb-1" style="font-size:.65rem;letter-spacing:.06em;color:rgba(255,255,255,.4);font-weight:600;">FOLDERS</h6></li>
  {% for f in folders %}
  <li>
    <a href="?folder={{ f.key }}"
       class="cab-nav__item d-flex align-items-center px-3 py-2 rounded mx-2 {% if active_folder == f.key %}cab-nav__item--active{% endif %}"
       hx-get="?folder={{ f.key }}" hx-target="#cab-content" hx-push-url="true"
       style="color: var(--cab-sidebar-text); transition: background 0.15s;">
      <span class="bi {{ f.icon }} fs-5 flex-shrink-0"></span>
      <span class="cab-nav__label ms-3 d-flex align-items-center justify-content-between w-100" style="white-space: nowrap;">
        {{ f.label }}
        <span class="badge ms-2" style="background:rgba(255,255,255,0.15);font-weight:400;font-size:.7rem;">{{ f.count }}</span>
      </span>
    </a>
  </li>
  {% endfor %}

  <li><hr style="border-color:rgba(255,255,255,0.08);margin:6px 16px;"></li>
  <li><h6 class="px-3 pb-1" style="font-size:.65rem;letter-spacing:.06em;color:rgba(255,255,255,.4);font-weight:600;">TOPIC</h6></li>
  <li>
    <a href="?folder={{ active_folder }}"
       class="cab-nav__item d-flex align-items-center px-3 py-2 rounded mx-2 {% if not active_topic %}cab-nav__item--active{% endif %}"
       hx-get="?folder={{ active_folder }}" hx-target="#cab-content" hx-push-url="true"
       style="color: var(--cab-sidebar-text); transition: background 0.15s;">
      <span class="bi bi-funnel fs-5 flex-shrink-0"></span>
      <span class="cab-nav__label ms-3" style="white-space: nowrap;">All Topics</span>
    </a>
  </li>
  {% for t in topics %}
  <li>
    <a href="?folder={{ active_folder }}&topic={{ t.pk }}"
       class="cab-nav__item d-flex align-items-center px-3 py-2 rounded mx-2 {% if active_topic == t.pk|stringformat:'s' %}cab-nav__item--active{% endif %}"
       hx-get="?folder={{ active_folder }}&topic={{ t.pk }}" hx-target="#cab-content" hx-push-url="true"
       style="color: var(--cab-sidebar-text); transition: background 0.15s;">
      <span class="bi bi-tag fs-5 flex-shrink-0"></span>
      <span class="cab-nav__label ms-3" style="white-space: nowrap;">{{ t.label }}</span>
    </a>
  </li>
  {% endfor %}
{% endblock %}

{% block cabinet_content %}
<div class="d-flex gap-0" style="height: calc(100vh - 56px); overflow: hidden; margin: -24px;">

  {# ── Conversation list ── #}
  <div style="width:380px;flex-shrink:0;border-right:1px solid var(--cab-border,#e2e8f0);overflow-y:auto;background:#fff;">

    <div class="p-3 border-bottom d-flex align-items-center justify-content-between" style="background:#f8fafc;">
      <span class="fw-semibold" style="font-size:.9rem;color:#374151;">
        {% if active_folder == 'inbox' %}Inbox{% elif active_folder == 'processed' %}Processed{% else %}All Conversations{% endif %}
        <span class="text-muted ms-1" style="font-weight:400;font-size:.8rem;">({{ total }})</span>
      </span>
      <button class="btn btn-sm btn-primary" style="font-size:.75rem;padding:3px 10px;">
        <span class="bi bi-plus-lg me-1"></span>New
      </button>
    </div>

    {% for conv in conversations %}
    <div class="conv-item p-3 border-bottom position-relative"
         style="cursor:pointer;transition:background .15s;"
         hx-get="{% url 'codex_showcase:conversation_detail' conv.pk %}"
         hx-target="#conv-detail"
         hx-swap="innerHTML"
         onclick="document.querySelectorAll('.conv-item').forEach(el=>el.classList.remove('conv-item--active'));this.classList.add('conv-item--active');">

      <div class="d-flex align-items-start gap-2">
        <span class="rounded-circle d-flex align-items-center justify-content-center fw-bold text-white flex-shrink-0"
              style="width:36px;height:36px;background:var(--cab-primary);font-size:.7rem;margin-top:2px;">
          {{ conv.initials }}
        </span>
        <div class="flex-grow-1 min-width-0">
          <div class="d-flex align-items-center justify-content-between mb-1">
            <span class="fw-semibold" style="font-size:.875rem;color:#111827;">{{ conv.client_name }}</span>
            <span class="text-muted flex-shrink-0 ms-2" style="font-size:.72rem;">{{ conv.date }}</span>
          </div>
          <div class="mb-1">
            <span class="badge" style="font-size:.62rem;padding:2px 6px;{% if conv.status == 'open' %}background:#fef3c7;color:#92400e;{% else %}background:#d1fae5;color:#065f46;{% endif %}">
              {% if conv.status == 'open' %}Open{% else %}Processed{% endif %}
            </span>
            <span class="text-muted ms-1" style="font-size:.72rem;">{{ conv.topic }}</span>
          </div>
          <p class="mb-0 text-muted" style="font-size:.8rem;line-height:1.4;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:280px;">
            {{ conv.preview }}
          </p>
        </div>
      </div>

      {% if conv.client_whatsapp %}
      <span class="position-absolute" style="bottom:10px;right:12px;">
        <span class="bi bi-whatsapp" style="color:#25d366;font-size:.75rem;"></span>
      </span>
      {% endif %}
    </div>
    {% empty %}
    <div class="text-center text-muted py-5">
      <span class="bi bi-chat-dots fs-1 d-block mb-2"></span>
      No conversations
    </div>
    {% endfor %}
  </div>

  {# ── Detail panel ── #}
  <div id="conv-detail" class="flex-grow-1 overflow-y-auto" style="background:#f8fafc;">
    {% include "showcase/cabinet/conversations/_empty.html" %}
  </div>

</div>

<style>
.conv-item:hover { background: #f8fafc; }
.conv-item--active { background: #eff6ff !important; border-left: 3px solid var(--cab-primary) !important; }
</style>
{% endblock %}