{% extends "base.html" %}
{% load static %}

{% block title %}ACA — Chat{% endblock %}

{% block extra_css %}
<style>
  body { overflow: hidden; }
  .theme-toggle { bottom: 72px; } /* avoid overlap with chat input */
  @media (max-width: 640px) {
    .theme-toggle { bottom: 82px; }
  }
  @media (max-width: 420px) {
    .theme-toggle { bottom: 92px; }
  }
  </style>
{% endblock %}

{% block body %}
<div id="app">
    <main id="chat-main">
        <header id="chat-header">
            <h1>
                <a href="/" class="chat-title-link">AI Shopping Assistant</a>
            </h1>
            <button type="button" id="btn-open-cart" class="cart-icon-btn" title="Your Cart" aria-label="Open cart">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/></svg>
                <span id="cart-badge" class="cart-badge" style="display:none;">0</span>
            </button>
        </header>

        <!-- Cart Drawer -->
        <div id="cart-drawer-overlay" class="cart-drawer-overlay" aria-hidden="true"></div>
        <aside id="cart-drawer" class="cart-drawer">
            <div class="cart-drawer-header">
                <h2>Your Cart <span id="cart-drawer-count">(0)</span></h2>
                <button type="button" id="btn-close-cart" aria-label="Close cart">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                </button>
            </div>
            <div id="cart-drawer-items" class="cart-drawer-items">
                <p class="cart-drawer-empty">Your cart is empty</p>
            </div>
            <div class="cart-drawer-footer">
                <div class="cart-drawer-total">
                    <span>Total</span>
                    <span id="cart-drawer-total-amount">0.00</span>
                </div>
                <a href="/cart/" class="btn btn-secondary btn-full" style="margin-bottom:8px;">View Full Cart</a>
                <a href="/cart/checkout/" id="cart-drawer-checkout" class="btn btn-primary btn-full">Checkout</a>
            </div>
        </aside>

        <div id="messages" role="log" aria-live="polite">
            <div class="welcome-message">
                <div class="welcome-icon">&#9670;</div>
                <h2>Welcome to ACA</h2>
                <h3>The platform is in test mode, do not perform any transaction should you come across this page</h3>
                <!--<p>I'm your AI shopping assistant. Tell me what you're looking for and I'll search across all our partner stores to find the best products for you.</p>-->
                <!--<div class="suggestions">-->
                <!--    <button class="suggestion" data-text="I'm looking for running shoes under $150">Running shoes under $150</button>-->
                <!--    <button class="suggestion" data-text="Help me find a laptop for work">Laptop for work</button>-->
                <!--    <button class="suggestion" data-text="I need a gift idea for someone">Gift ideas</button>-->
                <!--</div>-->
            </div>
        </div>

        <form id="chat-form">
            <input type="file" id="chat-image-input" accept="image/*" style="display:none">
            <div class="input-wrapper">
                <button
                    type="button"
                    id="btn-attach-image"
                    title="Attach image"
                    aria-label="Attach image"
                >
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21.44 11.05l-8.49 8.49a6 6 0 0 1-8.49-8.49l8.49-8.48a4 4 0 0 1 5.66 5.66l-8.49 8.48a2 2 0 0 1-2.83-2.83l7.78-7.78"/></svg>
                </button>
                <div id="image-chip" class="image-chip" style="display:none">
                    <div class="image-chip-thumb">
                        <img id="image-chip-preview" alt="Selected image preview">
                        <button type="button" id="btn-remove-image" aria-label="Remove image">&times;</button>
                    </div>
                </div>
                <textarea id="chat-input" placeholder="Tell me what you're looking for..." rows="1" autofocus></textarea>
                <button type="submit" id="btn-send" title="Send message" disabled>
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
                </button>
            </div>
            <p class="disclaimer">ACA searches partner stores only. Products and prices shown are from those stores.</p>
        </form>
    </main>
</div>

<script>
    const CONVERSATION_ID = "{{ conversation_id|default:'' }}";
</script>
<script src="{% static 'js/chat.js' %}"></script>
{% endblock %}