{% extends "base.html" %}

{% block extra_css %}
        #catalog.section { padding-top: 130px; min-height: 100vh; }
        @media (max-width: 767px) { #catalog.section { padding-top: 110px; } }

        .transparency-badge {
            display: inline-flex; align-items: center; gap: 8px;
            background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 8%, transparent), color-mix(in srgb, var(--accent) 8%, transparent));
            border: 1px solid color-mix(in srgb, var(--primary) 15%, transparent); border-radius: 12px;
            padding: 8px 16px; font-size: 0.85rem; color: var(--text-soft);
        }
        .transparency-badge i { font-size: 1.1rem; color: var(--primary); }

        .catalog-search {
            max-width: 520px; margin: 0 auto 1.5rem; position: relative;
        }
        .catalog-search input {
            width: 100%; padding: 12px 44px 12px 44px; border: 2px solid #e5e7eb;
            border-radius: 50px; font-size: 0.95rem; background: #fff;
            transition: border-color 0.2s, box-shadow 0.2s; outline: none;
        }
        .catalog-search input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 10%, transparent); }
        .catalog-search input::placeholder { color: #aaa; }
        .catalog-search .search-icon {
            position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
            color: var(--text-muted-custom); font-size: 1rem; pointer-events: none;
        }
        .catalog-search .search-clear {
            position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
            background: none; border: none; font-size: 1.3rem; color: #aaa;
            cursor: pointer; padding: 0 6px; line-height: 1;
        }
        .catalog-search .search-clear:hover { color: #555; }

        .tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 2rem; }
        .tag-pill {
            font-size: 0.8rem; font-weight: 500; color: var(--text-muted-custom);
            background: #fff; border: 1px solid #e5e7eb; padding: 5px 14px;
            border-radius: 50px; cursor: pointer; transition: all 0.2s; user-select: none;
        }
        .tag-pill:hover { border-color: var(--primary); color: var(--primary); }
        .tag-pill.active { background: var(--primary); color: #fff; border-color: var(--primary); }
        .tag-pill.tag-all { font-weight: 600; }

        .catalog-item { display: flex; }
        .catalog-card {
            background: #fff; border-radius: 12px; padding: 0;
            border: 1px solid #eee; transition: transform 0.2s, box-shadow 0.2s;
            overflow: hidden; width: 100%; display: flex; flex-direction: column;
        }
        .catalog-card:hover { transform: translateY(-4px); box-shadow: 0 8px 30px rgba(0,0,0,0.08); }
        .catalog-card-link { text-decoration: none; color: inherit; display: block; flex: 1; }
        .catalog-card-link:hover { color: inherit; }
        .catalog-card-body { padding: 20px; display: flex; gap: 16px; align-items: flex-start; }
        .catalog-cover {
            width: 96px; height: 96px; border-radius: 12px; object-fit: cover; flex-shrink: 0;
            box-shadow: 0 4px 14px rgba(0,0,0,0.12);
        }
        .catalog-text { flex: 1; min-width: 0; }
        .catalog-count:empty { margin: 0; }
        .meta-badge {
            font-size: 0.75rem; font-weight: 600; color: var(--primary);
            background: color-mix(in srgb, var(--primary) 8%, transparent); padding: 3px 10px; border-radius: 50px;
        }
        .meta-badge.count { color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
        .meta-badge.date { color: var(--text-muted-custom); background: color-mix(in srgb, var(--text-muted-custom) 8%, transparent); }
        .catalog-card h5 { font-weight: 700; margin-top: 0.5rem; margin-bottom: 0.5rem; }
        .catalog-card p { font-size: 0.85rem; color: var(--text-muted-custom); margin: 0; }
        .catalog-card .tag-list { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 4px; }
        .catalog-card .tag-sm {
            font-size: 0.7rem; color: var(--text-muted-custom); background: var(--gray-bg);
            padding: 2px 8px; border-radius: 50px;
        }
        .card-actions {
            display: flex; gap: 10px; padding: 16px 20px 18px; margin-top: 14px;
            border-top: 1px solid #f0f0f0; align-items: center;
        }
        .card-play-btn {
            display: inline-flex; align-items: center; gap: 6px;
            background: var(--primary); color: #fff; padding: 8px 20px;
            border-radius: 50px; font-size: 0.85rem; font-weight: 600;
            text-decoration: none; transition: all 0.2s;
        }
        .card-play-btn:hover { background: var(--primary-dark); color: #fff; transform: translateY(-1px); }
        .card-play-btn i { font-size: 1.1rem; }
        .card-browse-btn {
            display: inline-flex; align-items: center; gap: 4px;
            color: var(--text-muted-custom); font-size: 0.85rem; font-weight: 500;
            text-decoration: none; transition: color 0.2s;
        }
        .card-browse-btn:hover { color: var(--primary); }

        .catalog-count { font-size: 0.9rem; color: var(--text-muted-custom); text-align: center; margin-bottom: 1.5rem; }
        .catalog-empty { text-align: center; color: var(--text-muted-custom); padding: 30px 0; }
        .feed-btn { padding: 8px 20px; font-size: 0.85rem; }

        @media (max-width: 767px) {
            .catalog-cover { width: 64px; height: 64px; border-radius: 10px; }
            .catalog-card-body { gap: 12px; padding: 16px; }
        }
        [data-theme="dark"] .card-actions { border-top-color: var(--card-border); }
        [data-theme="dark"] .catalog-search input { background: var(--card-bg); color: var(--text); border-color: var(--card-border); }
        [data-theme="dark"] .catalog-search input::placeholder { color: var(--text-muted-custom); }
        [data-theme="dark"] .tag-pill { background: var(--card-bg); border-color: var(--card-border); color: var(--text-soft); }
        [data-theme="dark"] .catalog-card { background: var(--card-bg); border: 1px solid var(--card-border); }
{% endblock %}

{% block meta %}
    <meta name="description" content="{{ site.description }}">
    <title>{{ site.heading }} - {{ site.title }}</title>
{% endblock %}

{% block header_class %}scrolled solid{% endblock %}

{% block nav_cta %}
{% if site.feed %}
<a class="px-btn px-btn-theme feed-btn d-none d-md-inline-block" href="{{ site.feed }}"><i class="bi bi-rss"></i> Podcast feed</a>
{% endif %}
{% endblock %}

{% block content %}
    <section id="catalog" class="section bg-gray">
        <div class="container">
            <div class="row section-heading justify-content-center mb-4">
                <div class="col-lg-8 text-center">
                    <h3><span>{{ site.heading }}</span></h3>
                    <p class="text-muted mt-3 mb-1">{{ site.description }}</p>
                    <p class="text-muted small mb-3">{{ total_podcasts }} podcast{{ '' if total_podcasts == 1 else 's' }}, {{ total_episodes }} episodes</p>
                    <div class="transparency-badge">
                        <i class="bi bi-patch-check-fill"></i>
                        <span>AI-generated from internal sources{% if fact_check %} and fact-checked against them before recording{% endif %}.</span>
                    </div>
                </div>
            </div>

            {% if podcasts %}
            <div class="catalog-search" id="catalog-search">
                <i class="bi bi-search search-icon"></i>
                <input type="text" id="search-input" placeholder="Search podcasts and episodes" autocomplete="off">
                <button class="search-clear" id="search-clear" style="display:none" title="Clear">&times;</button>
            </div>

            <div class="tag-cloud" id="tag-cloud"{% if not tags %} style="display:none"{% endif %}>
                <span class="tag-pill tag-all active" data-tag="all">All</span>
                {% for tag in tags %}
                <span class="tag-pill" data-tag="{{ tag }}">{{ tag }}</span>
                {% endfor %}
            </div>

            <div class="catalog-count" id="catalog-count"></div>
            {% else %}
            <p class="catalog-empty">No podcasts yet. Create one with isa9000, then rebuild this site.</p>
            {% endif %}

            <div class="row gy-3" id="catalog-grid">
                {% for podcast in podcasts %}
                <div class="col-md-6 catalog-item" data-tags="{{ podcast.tags | join(',') }}" data-title="{{ podcast.title | lower }}" data-search="{{ podcast.title | lower }} {{ podcast.description | lower }} {{ podcast.tags | join(' ') | lower }}{% for ep in podcast.episodes %} {{ ep.title | lower }} {{ ep.summary | lower }}{% endfor %}">
                    <div class="catalog-card">
                        <a href="audio_kb/{{ podcast.slug }}.html" class="catalog-card-link">
                            <div class="catalog-card-body">
                                {% if podcast.cover %}
                                <img class="catalog-cover" src="{{ podcast.cover }}" alt="" loading="lazy">
                                {% endif %}
                                <div class="catalog-text">
                                <div class="d-flex align-items-center gap-2 mb-2 flex-wrap">
                                    <span class="meta-badge count">{{ podcast.episode_count }} episode{{ '' if podcast.episode_count == 1 else 's' }}</span>
                                    {% if podcast.total_duration %}
                                    <span class="meta-badge">{{ podcast.total_duration }}</span>
                                    {% endif %}
                                    {% if podcast.date_label %}
                                    <span class="meta-badge date">{{ podcast.date_label }}</span>
                                    {% endif %}
                                </div>
                                <h5>{{ podcast.title }}</h5>
                                <p>{{ podcast.description }}</p>
                                {% if podcast.tags %}
                                <div class="tag-list">
                                    {% for ctag in podcast.tags %}
                                    <span class="tag-sm">{{ ctag }}</span>
                                    {% endfor %}
                                </div>
                                {% endif %}
                                </div>
                            </div>
                        </a>
                        <div class="card-actions">
                            <a href="audio_kb/{{ podcast.slug }}.html?autoplay=1" class="card-play-btn">
                                <i class="bi bi-play-circle-fill"></i> Play podcast
                            </a>
                            <a href="audio_kb/{{ podcast.slug }}.html" class="card-browse-btn">
                                <i class="bi bi-list-ul"></i> Browse episodes
                            </a>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </section>
{% endblock %}

{% block extra_js %}
{% if podcasts %}
<script>
(function() {
    var cloud = document.getElementById('tag-cloud');
    var grid = document.getElementById('catalog-grid');
    var countEl = document.getElementById('catalog-count');
    var items = grid.querySelectorAll('.catalog-item');
    var pills = cloud.querySelectorAll('.tag-pill');
    var searchInput = document.getElementById('search-input');
    var searchClear = document.getElementById('search-clear');
    var hasTags = {{ 'true' if tags else 'false' }};
    var activeTag = 'all';

    function bigrams(str) {
        var b = [];
        for (var i = 0; i < str.length - 1; i++) b.push(str.charAt(i) + str.charAt(i + 1));
        return b;
    }

    function similarity(a, b) {
        if (a === b) return 1;
        if (a.length < 2 || b.length < 2) return 0;
        var aBi = bigrams(a);
        var bBi = bigrams(b);
        var bSet = {};
        bBi.forEach(function(bi) { bSet[bi] = (bSet[bi] || 0) + 1; });
        var hits = 0;
        aBi.forEach(function(bi) { if (bSet[bi] > 0) { hits++; bSet[bi]--; } });
        return (2.0 * hits) / (aBi.length + bBi.length);
    }

    function fuzzyMatch(query, text, title) {
        query = query.toLowerCase().trim();
        text = text.toLowerCase();
        title = title.toLowerCase();
        if (title.indexOf(query) >= 0) return 1;
        if (text.indexOf(query) >= 0) return 0.9;
        var words = query.split(/\s+/);
        var titleWords = title.split(/\s+/);
        var totalScore = 0;
        var matched = 0;
        for (var i = 0; i < words.length; i++) {
            var w = words[i];
            if (w.length < 2) continue;
            matched++;
            if (text.indexOf(w) >= 0) { totalScore += 0.9; continue; }
            var bestWord = 0;
            for (var j = 0; j < titleWords.length; j++) {
                var s = similarity(w, titleWords[j]);
                if (s > bestWord) bestWord = s;
            }
            totalScore += bestWord >= 0.5 ? bestWord : 0;
        }
        return matched > 0 ? totalScore / matched : 0;
    }

    function applyFilters() {
        var query = searchInput.value.trim();
        searchClear.style.display = query ? '' : 'none';
        var hasSearch = query.length >= 2;

        if (hasTags) cloud.style.display = hasSearch ? 'none' : '';

        if (hasSearch) {
            activeTag = 'all';
            pills.forEach(function(p) { p.classList.remove('active'); });
            cloud.querySelector('.tag-all').classList.add('active');
        }

        var scored = [];
        items.forEach(function(item) {
            var matchTag = activeTag === 'all' || item.getAttribute('data-tags').split(',').indexOf(activeTag) >= 0;
            var score = 1;
            if (hasSearch) {
                score = fuzzyMatch(query, item.getAttribute('data-search'), item.getAttribute('data-title'));
            }
            scored.push({ el: item, show: matchTag && score >= 0.5, score: score });
        });

        if (hasSearch) scored.sort(function(a, b) { return b.score - a.score; });
        scored.forEach(function(s) {
            s.el.style.display = s.show ? '' : 'none';
            grid.appendChild(s.el);
        });

        var visible = scored.filter(function(s) { return s.show; }).length;
        if (hasSearch && visible === 0) {
            countEl.textContent = 'No podcasts match "' + query + '"';
        } else if (hasSearch) {
            countEl.textContent = visible + (visible === 1 ? ' podcast matches' : ' podcasts match');
        } else if (activeTag !== 'all') {
            countEl.textContent = visible + ' podcast' + (visible !== 1 ? 's' : '');
        } else {
            countEl.textContent = '';
        }
    }

    cloud.addEventListener('click', function(e) {
        var pill = e.target.closest('.tag-pill');
        if (!pill) return;
        pills.forEach(function(p) { p.classList.remove('active'); });
        pill.classList.add('active');
        activeTag = pill.getAttribute('data-tag');
        applyFilters();
    });

    var debounceTimer;
    searchInput.addEventListener('input', function() {
        clearTimeout(debounceTimer);
        debounceTimer = setTimeout(applyFilters, 150);
    });

    searchClear.addEventListener('click', function() {
        searchInput.value = '';
        searchClear.style.display = 'none';
        applyFilters();
        searchInput.focus();
    });

    applyFilters();
})();
</script>
{% endif %}
{% endblock %}