{% load static %}
<div class="chat-widget">
    <button id="chat-fab" class="chat-fab" aria-label="Open Picker Assistant">
        <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/></svg>
    </button>

    <div id="chat-panel" class="chat-panel">
        <div class="chat-panel-header">
            <div>
                <strong>Picker Assistant</strong>
                <p id="chat-mode-label">Choose how I can help</p>
            </div>
            <div style="display: flex; gap: 8px; align-items: center;">
                <button type="button" id="chat-mode-switch-btn" class="chat-reset-btn" title="Change mode" style="display: none;">Mode</button>
                <button type="button" id="chat-memory-btn" class="chat-memory-btn" title="Clear saved preferences">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7z"/><circle cx="12" cy="9" r="2.5"/></svg>
                    Memory
                </button>
                <button type="button" id="chat-reset-btn" class="chat-reset-btn" title="Clear chat history (keeps preferences)">Reset</button>
                <button type="button" id="chat-close-btn" class="chat-close-btn" aria-label="Close">&times;</button>
            </div>
        </div>

        <div id="chat-mode-picker" class="chat-mode-picker">
            <p>What would you like to do?</p>
            <button type="button" class="chat-mode-btn" data-mode="purchase">
                <strong><i class="bi bi-cart3"></i> Purchase</strong>
                <span>Buy now &amp; schedule delivery</span>
            </button>
            <button type="button" class="chat-mode-btn" data-mode="plan">
                <strong><i class="bi bi-calendar2-week"></i> Plan</strong>
                <span>Plan your week, save it for later</span>
            </button>
            <button type="button" class="chat-mode-btn" data-mode="market">
                <strong><i class="bi bi-graph-up"></i> Market</strong>
                <span>Prices, trends &amp; what's in season</span>
            </button>
            <button type="button" class="chat-mode-btn" data-mode="location">
                <strong><i class="bi bi-geo-alt"></i> Location</strong>
                <span>Set or confirm your delivery area</span>
            </button>
            <button type="button" class="chat-mode-btn" data-mode="help">
                <strong><i class="bi bi-question-circle"></i> Help</strong>
                <span>How does Picker work?</span>
            </button>
        </div>

        <div id="chat-messages" class="chat-messages" style="display: none;"></div>
        <div id="chat-checkout-bar" class="chat-checkout-bar">
            <span class="chat-checkout-count">0 item(s) in cart</span>
            <a href="{% url 'market:cart' %}" class="chat-checkout-link">Go to Checkout &rarr;</a>
        </div>
        <form id="chat-form" class="chat-input-row" style="display: none;">
            <input type="text" id="chat-input" placeholder="Type a message" autocomplete="off">
            <button type="submit" aria-label="Send">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><path d="M22 2 11 13M22 2 15 22l-4-9-9-4 20-7z"/></svg>
            </button>
        </form>
    </div>
</div>
<script src="{% static 'js/chat-widget.js' %}"></script>