{% extends "base.html" %}

{% block title %}Discover - Makenotwork{% endblock %}
{% block body_attrs %} class="padded-page"{% endblock %}

{% block content %}
    {% include "partials/site_header.html" %}

    <h1 class="page-title">Discover</h1>

    <div class="discover-layout{% if mode == "projects" && category_filters.is_empty() %} no-sidebar{% endif %}">
        <aside class="discover-sidebar" aria-label="Filters">
            {% if mode == "projects" %}
            <div class="filter-section">
                <div class="filter-title" id="category-label">Category</div>
                <ul class="filter-list" role="listbox" aria-labelledby="category-label">
                    {% for cf in category_filters %}
                    <li class="filter-item{% if cf.active %} is-selected{% endif %}"
                        role="option"
                        aria-selected="{% if cf.active %}true{% else %}false{% endif %}"
                        tabindex="0"
                        hx-get="/discover/results"
                        hx-target="#results-container"
                        hx-indicator="#search-spinner"
                        hx-include=".discover-filter"
                        hx-vals='{"category": "{{ cf.value }}"}'
>
                        <span>{{ cf.name }}</span> <span class="count" aria-label="{{ cf.count }} projects">{{ cf.count }}</span>
                    </li>
                    {% endfor %}
                </ul>
            </div>
            <div class="filter-section">
                <label class="filter-checkbox discover-filter-checkbox">
                    <input type="checkbox" id="has-source-input" name="has_source"
                           class="discover-filter"
                           value="1"
                           {% if has_source %}checked{% endif %}
                           hx-get="/discover/results"
                           hx-trigger="change"
                           hx-target="#results-container"
                           hx-indicator="#search-spinner"
                           hx-include=".discover-filter">
                    Has source code
                </label>
            </div>
            {% endif %}
            {% if mode == "items" %}
            <div class="filter-section">
                <div class="filter-title" id="type-label">Type</div>
                <ul class="filter-list" role="listbox" aria-labelledby="type-label">
                    {% for tf in type_filters %}
                    <li class="filter-item{% if tf.active %} is-selected{% endif %}"
                        role="option"
                        aria-selected="{% if tf.active %}true{% else %}false{% endif %}"
                        tabindex="0"
                        hx-get="/discover/results"
                        hx-target="#results-container"
                        hx-indicator="#search-spinner"
                        hx-include=".discover-filter"
                        hx-vals='{"item_type": "{{ tf.value }}"}'
>
                        <span>{{ tf.name }}</span> <span class="count" aria-label="{{ tf.count }} items">{{ tf.count }}</span>
                    </li>
                    {% endfor %}
                </ul>
            </div>

            <div class="filter-section">
                <div class="filter-title" id="tag-label">Tags <a href="/discover/tags" class="filter-browse-link">Browse all</a></div>
                <ul class="filter-list" role="listbox" aria-labelledby="tag-label">
                    {% for tg in tag_filters %}
                    <li class="filter-item{% if tg.active %} is-selected{% endif %}"
                        role="option"
                        aria-selected="{% if tg.active %}true{% else %}false{% endif %}"
                        tabindex="0"
                        hx-get="/discover/results"
                        hx-target="#results-container"
                        hx-indicator="#search-spinner"
                        hx-include=".discover-filter"
                        hx-vals='{"tag": "{{ tg.value }}"}'
>
                        <span>{{ tg.name }}</span>
                        <span class="filter-item-right">
                            <span class="count" aria-label="{{ tg.count }} items">{{ tg.count }}</span>
                            {% if session_user.is_some() && !tg.id.is_empty() %}
                            {% if tg.following %}
                            <button class="tag-follow-btn is-selected" hx-delete="/api/follow/tag/{{ tg.id }}" hx-swap="outerHTML" title="Unfollow" onclick="event.stopPropagation();">Following</button>
                            {% else %}
                            <button class="tag-follow-btn" hx-post="/api/follow/tag/{{ tg.id }}" hx-swap="outerHTML" title="Follow" onclick="event.stopPropagation();">Follow</button>
                            {% endif %}
                            {% endif %}
                        </span>
                    </li>
                    {% endfor %}
                </ul>
            </div>

            <div class="filter-section">
                <div class="filter-title" id="price-label">Price</div>
                <div class="price-inputs" role="group" aria-labelledby="price-label">
                    <label for="min-price" class="sr-only">Minimum price</label>
                    <input type="number" id="min-price" name="min_price" placeholder="0" min="0"
                           class="discover-filter"
                           aria-label="Minimum price"
                           hx-get="/discover/results"
                           hx-trigger="change delay:500ms"
                           hx-target="#results-container"
                           hx-indicator="#search-spinner"
                           hx-include=".discover-filter">
                    <span aria-hidden="true">to</span>
                    <label for="max-price" class="sr-only">Maximum price</label>
                    <input type="number" id="max-price" name="max_price" placeholder="Any"
                           class="discover-filter"
                           aria-label="Maximum price"
                           hx-get="/discover/results"
                           hx-trigger="change delay:500ms"
                           hx-target="#results-container"
                           hx-indicator="#search-spinner"
                           hx-include=".discover-filter">
                </div>
                <ul class="filter-list price-distribution" role="list" aria-label="Price distribution">
                    {% for pf in price_filters %}
                    <li class="price-distribution-item">
                        {{ pf.label }}: {{ pf.count }}
                    </li>
                    {% endfor %}
                </ul>
            </div>

            {% if !ai_tier_filters.is_empty() %}
            <div class="filter-section">
                <div class="filter-title" id="ai-tier-label">AI Disclosure</div>
                <ul class="filter-list" role="listbox" aria-labelledby="ai-tier-label">
                    {% for af in ai_tier_filters %}
                    <li class="filter-item{% if af.active %} is-selected{% endif %}"
                        role="option"
                        aria-selected="{% if af.active %}true{% else %}false{% endif %}"
                        tabindex="0"
                        hx-get="/discover/results"
                        hx-target="#results-container"
                        hx-indicator="#search-spinner"
                        hx-include=".discover-filter"
                        hx-vals='{"ai_tier": "{{ af.value }}"}'>
                        <span>{{ af.name }}</span> <span class="count" aria-label="{{ af.count }} items">{{ af.count }}</span>
                    </li>
                    {% endfor %}
                </ul>
            </div>
            {% endif %}
            {% endif %}
        </aside>

        <button type="button" class="discover-filter-toggle" onclick="document.querySelector('.discover-sidebar').classList.toggle('show'); this.classList.toggle('active');" aria-label="Toggle filters">
            Filters{% if active_filter_count > 0 %} <span class="filter-count">{{ active_filter_count }}</span>{% endif %}
        </button>

        <main class="discover-main">
            <div class="mode-toggle">
                <button class="toggle-btn{% if mode == "items" %} is-selected{% endif %}"
                        hx-get="/discover"
                        hx-target="body"
                        hx-push-url="true"
                        hx-vals='{"mode": "items"}'>Items</button>
                <button class="toggle-btn{% if mode == "projects" %} is-selected{% endif %}"
                        hx-get="/discover"
                        hx-target="body"
                        hx-push-url="true"
                        hx-vals='{"mode": "projects"}'>Projects</button>
                <div class="view-controls">
                    <button type="button" class="view-btn" data-view="list" title="List view">|||</button>
                    <button type="button" class="view-btn is-selected" data-view="grid" title="Grid view">:::</button>
                </div>
            </div>

            <form id="discover-form" action="/discover" method="get">
                <input type="hidden" id="mode-input" name="mode" value="{{ mode }}" class="discover-filter">
                <div class="table-controls">
                    <label for="search-input" class="sr-only">Search {% if mode == "projects" %}projects{% else %}items{% endif %}</label>
                    <div class="search-wrapper">
                    <input type="text"
                           id="search-input"
                           class="search-field discover-filter"
                           placeholder="Search {% if mode == "projects" %}projects{% else %}items{% endif %}..."
                           name="q"
                           value="{{ search_query }}"
                           autocomplete="off"
                           aria-label="Search {% if mode == "projects" %}projects{% else %}items{% endif %}"
                           hx-get="/discover/results"
                           hx-trigger="input changed delay:150ms, search"
                           hx-target="#results-container"
                           hx-indicator="#search-spinner"
                           hx-include=".discover-filter">
                    <div id="search-suggestions" class="search-suggestions"></div>
                    </div>
                    <span id="search-spinner" class="htmx-indicator" aria-live="polite">Searching...</span>
                    <span class="table-meta" id="total-count">{{ total_items }} {% if mode == "projects" %}projects{% else %}items{% endif %}</span>
                    <label for="sort-select" class="sr-only">Sort by</label>
                    <select class="sort-select discover-filter"
                            id="sort-select"
                            name="sort"
                            aria-label="Sort results by"
                            hx-get="/discover/results"
                            hx-trigger="change"
                            hx-target="#results-container"
                            hx-indicator="#search-spinner"
                            hx-include=".discover-filter">
                        {% if mode == "projects" %}
                        <option value="newest"{% if sort_by == "newest" || sort_by == "" %} selected{% endif %}>Newest</option>
                        <option value="most_sold"{% if sort_by == "most_sold" %} selected{% endif %}>Most items</option>
                        {% else %}
                        <option value="most_sold"{% if sort_by == "most_sold" %} selected{% endif %}>Most sold</option>
                        <option value="newest"{% if sort_by == "newest" || sort_by == "" %} selected{% endif %}>Newest</option>
                        <option value="price_asc"{% if sort_by == "price_asc" %} selected{% endif %}>Price asc</option>
                        <option value="price_desc"{% if sort_by == "price_desc" %} selected{% endif %}>Price desc</option>
                        {% endif %}
                    </select>
                    <input type="hidden" id="type-input" name="item_type" value="{{ current_type }}" class="discover-filter">
                    <input type="hidden" id="tag-input" name="tag" value="{{ current_tag }}" class="discover-filter">
                    <input type="hidden" id="category-input" name="category" value="{{ current_category }}" class="discover-filter">
                    <input type="hidden" id="ai-tier-input" name="ai_tier" value="{{ current_ai_tier }}" class="discover-filter">
                </div>
            </form>

            {% if mode == "projects" %}
            <div class="table-header projects-header">
                <span>Name</span>
                <span>Category</span>
                <span class="col-right">Items</span>
                <span class="col-right">Added</span>
            </div>
            {% else %}
            <div class="table-header">
                <span>Type</span>
                <span>Name</span>
                <span>Tag</span>
                <span class="col-right">Price</span>
                <span class="col-right">Added</span>
            </div>
            {% endif %}

            <div id="results-container">
                {% include "partials/discover_results.html" %}
            </div>
        </main>
    </div>
{% endblock %}

{% block scripts %}
<script>
    // Sync filter UI state on filter click: update active highlight and write
    // the selected filter value into the hidden form input so subsequent
    // search/sort submissions include it.
    document.body.addEventListener('htmx:beforeRequest', function(evt) {
        if (evt.detail.elt.classList.contains('filter-item')) {
            // Only deactivate siblings in the same filter section
            var section = evt.detail.elt.closest('.filter-list');
            if (section) {
                section.querySelectorAll('.filter-item').forEach(function(i) { i.classList.remove('is-selected'); });
            }
            evt.detail.elt.classList.add('is-selected');

            var hxVals = JSON.parse(evt.detail.elt.getAttribute('hx-vals') || '{}');
            if ('item_type' in hxVals) {
                document.getElementById('type-input').value = hxVals.item_type || '';
            }
            if ('tag' in hxVals) {
                document.getElementById('tag-input').value = hxVals.tag || '';
            }
            if ('category' in hxVals) {
                document.getElementById('category-input').value = hxVals.category || '';
            }
            if ('label' in hxVals) {
                document.getElementById('label-input').value = hxVals.label || '';
            }
            if ('ai_tier' in hxVals) {
                document.getElementById('ai-tier-input').value = hxVals.ai_tier || '';
            }
        }
    });

    // View toggle (list vs grid) with localStorage persistence.
    // Re-applied after HTMX swaps because new content replaces the container.
    (function() {
        function applyView(view) {
            var container = document.getElementById('results-container-inner');
            if (container) {
                container.className = 'results-container results-' + view;
            }
            document.querySelectorAll('.view-btn').forEach(function(btn) {
                btn.classList.toggle('is-selected', btn.dataset.view === view);
            });
        }

        // Load saved preference on page load
        document.addEventListener('DOMContentLoaded', function() {
            var saved = safeStorageGet('discoverViewPref') || 'grid';
            applyView(saved);
        });

        // Handle view button clicks
        document.querySelectorAll('.view-btn').forEach(function(btn) {
            btn.addEventListener('click', function() {
                var view = btn.dataset.view;
                applyView(view);
                safeStorageSet('discoverViewPref', view);
            });
        });

        // Re-apply view preference after HTMX swaps new content
        document.body.addEventListener('htmx:afterSwap', function(evt) {
            if (evt.detail.target.id === 'results-container') {
                var saved = safeStorageGet('discoverViewPref') || 'grid';
                applyView(saved);
            }
        });
    })();

    // Search suggestions autocomplete
    (function() {
        var input = document.getElementById('search-input');
        var box = document.getElementById('search-suggestions');
        var timer = null;
        var selectedIdx = -1;

        input.addEventListener('input', function() {
            clearTimeout(timer);
            var q = input.value.trim();
            if (q.length < 2) { box.innerHTML = ''; box.style.display = 'none'; return; }
            timer = setTimeout(function() {
                fetch('/discover/suggestions?q=' + encodeURIComponent(q))
                    .then(function(r) { return r.json(); })
                    .then(function(items) {
                        if (items.length === 0) { box.innerHTML = ''; box.style.display = 'none'; return; }
                        selectedIdx = -1;
                        box.innerHTML = items.map(function(s, i) {
                            return '<a href="' + escapeHtml(s.url) + '" class="suggestion-item" data-idx="' + i + '">'
                                + '<span class="suggestion-label">' + escapeHtml(s.label) + '</span>'
                                + '<span class="suggestion-category">' + escapeHtml(s.category) + '</span></a>';
                        }).join('');
                        box.style.display = 'block';
                    });
            }, 200);
        });

        input.addEventListener('keydown', function(e) {
            var items = box.querySelectorAll('.suggestion-item');
            if (!items.length) return;
            if (e.key === 'ArrowDown') { e.preventDefault(); selectedIdx = Math.min(selectedIdx + 1, items.length - 1); updateHighlight(items); }
            else if (e.key === 'ArrowUp') { e.preventDefault(); selectedIdx = Math.max(selectedIdx - 1, -1); updateHighlight(items); }
            else if (e.key === 'Enter' && selectedIdx >= 0) { e.preventDefault(); items[selectedIdx].click(); }
            else if (e.key === 'Escape') { box.style.display = 'none'; }
        });

        function updateHighlight(items) {
            items.forEach(function(el, i) { el.classList.toggle('highlighted', i === selectedIdx); });
        }

        function escapeHtml(s) { var d = document.createElement('div'); d.textContent = s; return d.innerHTML; }

        document.addEventListener('click', function(e) {
            if (!box.contains(e.target) && e.target !== input) { box.style.display = 'none'; }
        });
    })();
</script>
{% endblock %}