{% extends 'base.html' %}
{% load static %}
{% block title %}{{ t.title_market }} — PickkerMarket{% endblock %}
{% block content %}
<section class="page-hero" style="background-image: url('{% static 'img/market-web.jpg' %}');">
    <div class="page-hero-inner">
        <h1>{{ t.market_title }}</h1>
        <p>{{ t.market_subtitle }}</p>
        {% if is_b2b %}<span class="b2b-hero-badge">{{ t.market_b2b_hero_badge }}</span>{% endif %}
    </div>
    {% include 'market/_market_ticker.html' %}
</section>

{% if picker_session.is_authenticated and picker_session.role == 'customer' %}
<div class="business-mode-bar">
    <div class="container business-mode-row">
        <span class="business-mode-copy">
            {% if is_b2b %}{{ t.market_business_mode_on }}{% else %}{{ t.market_business_mode_off }}{% endif %}
        </span>
        <form method="post" action="{% url 'market:toggle_business_mode' %}" class="mode-switch-form">
            {% csrf_token %}
            <input type="hidden" name="next" value="{% url 'market:market' %}">
            <span class="mode-switch-label">{{ t.market_personal }}</span>
            <label class="mode-switch">
                <input type="checkbox" onchange="this.form.submit()" {% if is_b2b %}checked{% endif %} aria-label="{{ t.aria_toggle_business_mode }}">
                <span class="mode-switch-track"><span class="mode-switch-thumb"></span></span>
            </label>
            <span class="mode-switch-label">{{ t.market_business }}</span>
        </form>
    </div>
</div>
{% endif %}

<section class="produce-section">
    <div class="container">
        <span class="section-kicker">{% if is_b2b %}{{ t.market_wholesale_catalog }}{% else %}{{ t.market_available_now }}{% endif %}</span>
        <h2>{% if is_b2b %}{{ t.market_bulk_pricing }}{% else %}{{ t.market_browse_produce }}{% endif %}</h2>

        <form method="get" class="market-filter-bar">
            <div class="map-search-wrap" style="flex: 1; min-width: 180px;">
                <input type="text" name="q" value="{{ search_query }}" placeholder="{{ t.market_search_placeholder }}" class="market-search-input" id="market-search-input" autocomplete="off" style="width: 100%;">
                <div class="geocode-results" id="market-search-suggestions" style="display: none;"></div>
            </div>
            <select name="category" class="market-category-select" onchange="this.form.submit()">
                <option value="">{{ t.market_all_categories }}</option>
                {% for c in categories %}
                <option value="{{ c.name }}" {% if selected_category == c.name %}selected{% endif %}>{{ c.display_name }}</option>
                {% endfor %}
            </select>
            <button type="submit" class="btn-small">{{ t.market_search_button }}</button>
            {% if selected_category or search_query %}
            <a href="{% url 'market:market' %}" class="btn-small market-clear-filter">{{ t.market_clear_filters }}</a>
            {% endif %}
        </form>

        <div class="ue-grid">
            {% for product in products %}
            <div class="ue-card">
                <div class="ue-card-media">
                    {% if product.image_url %}
                        <img src="{{ product.image_url }}" alt="{{ product.display_name }}">
                    {% else %}
                        <img src="{% static 'img/market-thumb.jpg' %}" alt="{{ product.display_name }}">
                    {% endif %}
                    {% if is_b2b %}<span class="b2b-badge">B2B</span>{% endif %}
                </div>
                <div class="ue-card-body">
                    <h3>{{ product.display_name }}</h3>
                    <p class="ue-card-meta">{{ product.category_display }} &middot; {{ product.per_unit_display }}</p>
                    <div style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap;">
                        <span class="ue-price" id="price-{{ product.id }}">TSh {{ product.effective_price|floatformat:0 }}</span>
                        {% if product.price_badge and product.price_badge.change_pct != None %}
                        <span class="surface-badge {% if product.price_badge.direction == 'up' %}warn{% elif product.price_badge.direction == 'down' %}ok{% endif %}" title="{{ t.market_price_vs_previous }} {{ product.price_badge.region }}">
                            {% if product.price_badge.direction == 'up' %}&#9650;{% elif product.price_badge.direction == 'down' %}&#9660;{% else %}&#8212;{% endif %} {{ product.price_badge.change_pct }}%
                        </span>
                        {% endif %}
                        {% if product.bulk_savings_pct %}
                        <span class="bulk-savings-badge">{{ t.market_save_prefix }} {{ product.bulk_savings_pct }}{{ t.market_save_suffix }}</span>
                        {% endif %}
                    </div>
                    {% if product.min_qty > 1 %}<p class="ue-min-qty" id="min-qty-note-{{ product.id }}">{{ t.market_sold_in_lots }} {{ product.min_qty_unit_display }}</p>{% endif %}

                    {% if picker_session.is_authenticated and picker_session.role == 'customer' %}
                    <form method="post" action="{% url 'market:add_to_cart' product.id %}" class="ue-add-row measure-add-row">
                        {% csrf_token %}
                        <input type="hidden" name="next" value="{% url 'market:market' %}">
                        {% if product.active_measures %}
                        <select name="measure_id" class="ue-measure-select" data-price-target="price-{{ product.id }}" data-qty-target="qty-{{ product.id }}" data-note-target="min-qty-note-{{ product.id }}" data-sold-in-lots-text="{{ t.market_sold_in_lots }}">
                            <option value="" data-price="{{ product.effective_price|floatformat:0 }}" data-unit="{{ product.unit_display }}" data-min-qty="{{ product.min_qty }}">{{ product.unit_display }}</option>
                            {% for m in product.active_measures %}
                            <option value="{{ m.id }}" data-price="{{ m.price|floatformat:0 }}" data-unit="{{ m.label }}" data-min-qty="{{ m.min_qty|default:'1' }}" {% if m.is_default %}selected{% endif %}>{{ m.label }}{% if m.min_qty > 1 %} (min {{ m.min_qty }}){% endif %}</option>
                            {% endfor %}
                        </select>
                        {% endif %}
                        <input type="number" name="quantity" id="qty-{{ product.id }}" class="ue-qty-input" value="{{ product.min_qty }}" min="{{ product.min_qty }}" aria-label="{{ t.aria_quantity }}">
                        <button type="submit" class="ue-add-btn-front" aria-label="{{ t.market_add_to_cart }} — {{ product.display_name }}" title="{{ t.market_add_to_cart }}">
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M12 5v14M5 12h14"/></svg>
                        </button>
                    </form>
                    {% else %}
                    <p class="auth-switch" style="margin-top: 10px;"><a href="{% url 'accounts:login' %}">{{ t.market_log_in_to_purchase }}</a></p>
                    {% endif %}
                </div>
            </div>
            {% empty %}
            <p>{{ t.market_no_produce }}</p>
            {% endfor %}
        </div>
    </div>
</section>

<section class="content-section">
    <div class="content-inner">
        <p>{{ t.market_cant_find }} <a href="{% url 'market:contact' %}">{{ t.market_get_in_touch }}</a> {{ t.market_and_help }}</p>
    </div>
</section>

{% if picker_session.role == 'customer' %}
<a href="{% url 'market:cart' %}" id="cart-fab" class="cart-fab{% if not cart_count %} cart-empty{% endif %}" aria-label="{{ t.nav_cart }}">
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>
    {% if cart_count %}<span class="nav-icon-badge cart-count-badge">{{ cart_count }}</span>{% endif %}
</a>
{% include 'market/_chat_widget.html' %}
{% endif %}
{% endblock %}

{% block extra_scripts %}
<script>
    document.addEventListener('DOMContentLoaded', function () {
        document.querySelectorAll('.ue-add-row').forEach(function (form) {
            form.addEventListener('submit', function (e) {
                e.preventDefault();
                var submitBtn = form.querySelector('.ue-add-btn-front');
                if (submitBtn) submitBtn.disabled = true;
                var formData = new FormData(form);
                fetch(form.action, {
                    method: 'POST',
                    body: formData,
                    headers: { 'X-Requested-With': 'XMLHttpRequest' },
                    credentials: 'same-origin',
                })
                    .then(function (r) { return r.json(); })
                    .then(function (data) {
                        if (submitBtn) submitBtn.disabled = false;
                        updateCartBadges(data.cart_count);
                        if (data.message) showToast(data.message, data.tag || 'success');
                    })
                    .catch(function () {
                        if (submitBtn) submitBtn.disabled = false;
                        form.submit();
                    });
            });
        });

        document.querySelectorAll('.ue-measure-select').forEach(function (select) {
            var priceEl = document.getElementById(select.dataset.priceTarget);
            var qtyEl = document.getElementById(select.dataset.qtyTarget);
            var noteEl = document.getElementById(select.dataset.noteTarget);

            function applyOption(option) {
                if (priceEl) priceEl.textContent = 'TSh ' + option.dataset.price;
                var minQty = parseInt(option.dataset.minQty, 10) || 1;
                if (qtyEl) {
                    qtyEl.min = minQty;
                    if (parseInt(qtyEl.value, 10) < minQty) qtyEl.value = minQty;
                }
                if (noteEl) {
                    if (minQty > 1) {
                        noteEl.textContent = select.dataset.soldInLotsText + ' ' + minQty + ' ' + option.dataset.unit;
                        noteEl.style.display = '';
                    } else {
                        noteEl.style.display = 'none';
                    }
                }
            }

            select.addEventListener('change', function () {
                applyOption(select.options[select.selectedIndex]);
            });
        });

        // Search-as-you-type suggestions — matches product names and
        // categories (see market_search_suggestions), so typing a category
        // word surfaces suggestions too, not just literal product names.
        var searchInput = document.getElementById('market-search-input');
        var suggestionsBox = document.getElementById('market-search-suggestions');
        if (searchInput && suggestionsBox) {
            var debounceTimer = null;
            var searchForm = searchInput.closest('form');

            function hideSuggestions() {
                suggestionsBox.innerHTML = '';
                suggestionsBox.style.display = 'none';
            }

            function selectSuggestion(label) {
                searchInput.value = label;
                hideSuggestions();
                searchForm.submit();
            }

            searchInput.addEventListener('input', function () {
                clearTimeout(debounceTimer);
                var q = searchInput.value.trim();
                if (q.length < 2) {
                    hideSuggestions();
                    return;
                }
                debounceTimer = setTimeout(function () {
                    fetch('{% url "market:market_search_suggestions" %}?q=' + encodeURIComponent(q))
                        .then(function (r) { return r.json(); })
                        .then(function (data) {
                            var results = data.results || [];
                            suggestionsBox.innerHTML = '';
                            if (!results.length) {
                                hideSuggestions();
                                return;
                            }
                            results.forEach(function (item) {
                                var row = document.createElement('div');
                                row.className = 'geocode-result';
                                row.textContent = item.label + (item.type === 'category' ? ' — {{ t.market_category_label|escapejs }}' : '');
                                row.addEventListener('click', function () {
                                    selectSuggestion(item.label);
                                });
                                suggestionsBox.appendChild(row);
                            });
                            suggestionsBox.style.display = '';
                        })
                        .catch(function () { hideSuggestions(); });
                }, 250);
            });

            document.addEventListener('click', function (e) {
                if (!suggestionsBox.contains(e.target) && e.target !== searchInput) hideSuggestions();
            });
        }
    });
</script>
{% endblock %}