{% extends 'base.html' %}{% load static %}
{% block title %}Chat with {{ merchant.business_name }} — Unity Nation{% endblock %}
{% block content %}
<div class="container chat-page">
  <div class="chat-hd">
    <div style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px">
      <div style="display:flex;align-items:center;gap:12px">
        <div style="width:40px;height:40px;border-radius:10px;background:rgba(123,95,230,.2);display:flex;align-items:center;justify-content:center;font-size:1rem">🏪</div>
        <div>
          <div style="font-family:var(--ff);font-size:1.05rem;font-weight:700">{{ merchant.business_name }}</div>
          <div style="font-size:.76rem;color:var(--muted)">Direct conversation with merchant</div>
        </div>
      </div>
      <a href="{% url 'merchant_detail' merchant.id %}" class="btn btn-ghost btn-sm"><i class="fas fa-store"></i>View Store</a>
    </div>
  </div>

  <div class="chat-msgs" id="chatMsgs">
    {% for msg in messages %}
    <div class="msg-row {% if msg.sender == user %}mine{% endif %}">
      <div class="m-av">{{ msg.sender.username|first|upper }}</div>
      <div>
        <div class="m-bub">
          <div class="m-user">{{ msg.sender.username }}</div>
          <div class="m-text">{{ msg.message }}</div>
          <div class="m-time">{{ msg.created_at|date:"M d, H:i" }}</div>
        </div>
      </div>
    </div>
    {% empty %}
    <div style="text-align:center;padding:50px 20px;color:var(--muted)">
      <div style="font-size:2rem;margin-bottom:12px">💬</div>
      <p>No messages yet. Start a conversation with {{ merchant.business_name }}.</p>
    </div>
    {% endfor %}
  </div>

  <div class="chat-bar">
    <form id="cF" method="post" action="{% url 'chat_with_merchant' merchant.id %}">{% csrf_token %}
      <div class="chat-bar-row">
        <textarea name="message" id="cI" class="chat-inp" rows="1" placeholder="Write a message… (Enter to send)" required></textarea>
        <button type="submit" class="btn btn-violet"><i class="fas fa-paper-plane"></i>Send</button>
      </div>
    </form>
  </div>
</div>
<script>
const cm=document.getElementById('chatMsgs');if(cm)cm.scrollTop=cm.scrollHeight;
const ci=document.getElementById('cI');
if(ci){ci.addEventListener('input',()=>{ci.style.height='auto';ci.style.height=Math.min(ci.scrollHeight,110)+'px'});ci.addEventListener('keydown',e=>{if(e.key==='Enter'&&!e.shiftKey){e.preventDefault();document.getElementById('cF').submit()}})}
</script>
{% endblock %}