{% extends "layouts/main.html" %}
{% block title %}{{ page_title }} — pyvelm{% endblock %}
{% block page_title %}{{ page_title }}{% endblock %}

{% block content %}
<div class="space-y-4" x-data="pvApps()">
    <div class="flex flex-wrap items-center gap-2">
        <div class="relative flex-1 min-w-[200px] max-w-sm">
            <svg class="absolute left-2.5 top-1/2 -translate-y-1/2 w-4 h-4 text-body-subtle pointer-events-none"
                 fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round"
                      d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 15.803 7.5 7.5 0 0015.803 15.803z"/>
            </svg>
            <input type="search"
                   x-ref="searchInput"
                   x-model="query"
                   @input="apply()"
                   placeholder="Search modules…"
                   autocomplete="off"
                   class="w-full pl-8 pr-3 py-1.5 text-sm rounded-md border border-default
                          bg-neutral-primary text-body placeholder:text-body-subtle
                          focus:outline-none focus:ring-2 focus:ring-fg-brand/40 focus:border-fg-brand">
        </div>

        <div class="flex items-center gap-1 text-xs">
            <template x-for="opt in [
                {key: '',           label: 'All'},
                {key: 'installed',  label: 'Installed'},
                {key: 'to_upgrade', label: 'Upgrade'},
                {key: 'uninstalled', label: 'Not installed'}
            ]" :key="opt.key">
                <button type="button"
                        @click="stateFilter = opt.key; apply()"
                        :class="stateFilter === opt.key
                                ? 'bg-fg-brand text-white border-fg-brand'
                                : 'bg-neutral-primary text-body border-default hover:bg-neutral-secondary'"
                        class="px-2.5 py-1 rounded-full border font-medium transition-colors">
                    <span x-text="opt.label"></span>
                </button>
            </template>
        </div>

        <select x-model="categoryFilter" @change="apply()"
                class="text-xs rounded-md border border-default bg-neutral-primary text-body
                       py-1 pl-2 pr-6 focus:outline-none focus:ring-2 focus:ring-fg-brand/40
                       focus:border-fg-brand">
            <option value="">All categories</option>
            {% for cat in categories %}
            <option value="{{ cat }}">{{ cat }}</option>
            {% endfor %}
        </select>

        <div class="flex-1"></div>

        <span class="text-xs text-body-subtle"
              x-text="`${visibleCount} of {{ catalog | length }} module{{ 's' if (catalog | length) != 1 else '' }}`">
        </span>
    </div>

    <div x-show="visibleCount === 0 && {{ catalog | length }}" x-cloak
         class="bg-neutral-primary border border-default rounded-lg p-5 text-center">
        <p class="text-sm text-body-subtle">No modules match the current filters.</p>
        <button type="button" @click="reset()"
                class="mt-2 text-xs text-fg-brand hover:underline">
            Clear filters
        </button>
    </div>

    {% if catalog %}
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3">
        {% for app in catalog %}
        <article data-pv-app="{{ app.name }}"
                 data-pv-app-state="{{ app.state }}"
                 data-pv-app-category="{{ app.category }}"
                 data-pv-app-haystack="{{ (app.name ~ ' ' ~ app.display_name ~ ' ' ~ app.summary ~ ' ' ~ app.description ~ ' ' ~ app.author ~ ' ' ~ app.category) | lower }}"
                 class="bg-neutral-primary border border-default rounded-xl shadow-sm
                        flex flex-col min-h-0 overflow-hidden
                        hover:border-fg-brand/40 hover:shadow-md transition-all">
            <a href="/web/apps/{{ app.name }}"
               class="group flex flex-col gap-2 flex-1 min-h-0 p-3.5 pb-2">
                <div class="flex items-start justify-between gap-2">
                    {% with size='w-9 h-9', icon_size='w-5 h-5' %}
                    {% include "apps/_icon.html" %}
                    {% endwith %}
                    <div class="flex flex-col items-end gap-0.5 shrink-0 min-w-0 max-w-[45%]">
                        {% include "apps/_state_badge.html" %}
                        <span class="text-2xs font-mono text-body-subtle truncate w-full text-right"
                              title="Technical name: {{ app.name }}">{{ app.name }}</span>
                    </div>
                </div>
                <h4 class="text-sm font-semibold text-heading truncate group-hover:text-fg-brand">
                    {{ app.display_name }}
                </h4>
                <p class="text-xs text-body-subtle truncate">{{ app.category }}</p>
                {% if app.summary %}
                <p class="text-xs text-body line-clamp-2 leading-relaxed">{{ app.summary }}</p>
                {% endif %}
            </a>
            <footer class="px-3 pb-3 pt-2 border-t border-default" @click.stop>
                {% with compact=true %}
                {% include "apps/_actions.html" %}
                {% endwith %}
            </footer>
        </article>
        {% endfor %}
    </div>
    {% else %}
    <div class="bg-neutral-primary border border-default rounded-lg p-6 text-center">
        <p class="text-sm text-body-subtle">
            No modules discovered. Configure <code>module_roots</code> on
            <code>create_app()</code> to point at a directory of modules.
        </p>
    </div>
    {% endif %}
</div>

{% include "apps/_scripts.html" %}
<script>
    document.addEventListener('alpine:init', () => {
        Alpine.data('pvApps', () => ({
            ...(window.pvAppsUninstallMixin ? window.pvAppsUninstallMixin() : {}),
            query: '',
            stateFilter: '',
            categoryFilter: '',
            visibleCount: 0,
            init() {
                this.$nextTick(() => {
                    this.apply();
                    const el = this.$refs.searchInput;
                    if (el) {
                        el.focus();
                        el.select?.();
                    }
                });
            },
            apply() {
                const q = (this.query || '').trim().toLowerCase();
                let visible = 0;
                document.querySelectorAll('[data-pv-app]').forEach(card => {
                    const stateOk = !this.stateFilter
                        || card.getAttribute('data-pv-app-state') === this.stateFilter;
                    const catOk = !this.categoryFilter
                        || card.getAttribute('data-pv-app-category') === this.categoryFilter;
                    const queryOk = !q
                        || (card.getAttribute('data-pv-app-haystack') || '').includes(q);
                    const show = stateOk && catOk && queryOk;
                    card.style.display = show ? '' : 'none';
                    if (show) visible++;
                });
                this.visibleCount = visible;
            },
            reset() {
                this.query = '';
                this.stateFilter = '';
                this.categoryFilter = '';
                this.apply();
                this.$refs.searchInput?.focus();
            },
        }));
    });
</script>
{% endblock %}