---
import SkillCard from "@/components/SkillCard.astro";
import BaseLayout from "@/layouts/BaseLayout.astro";
import { getCatalogStats, loadCatalog } from "@/lib/catalog";

const entries = await loadCatalog();
const stats = getCatalogStats(entries);
const domains = [...new Set(entries.flatMap((entry) => entry.domains))].sort((a, b) => a.localeCompare(b, "zh-CN"));
---

<BaseLayout title="Skills 目录 — 仓颉 Skill" description={`浏览 ${stats.packs} 个 Skill Pack 和 ${stats.skills} 个经过蒸馏的原子 Skill。`}>
  <section class="page-hero compact"><div class="shell"><p class="eyebrow">Registry</p><h1>Skills 目录</h1><p class="lede">当前收录 <strong>{stats.packs}</strong> 个 Skill Pack，共 <strong>{stats.skills}</strong> 个原子 Skill。搜索名称、领域或使用场景，快速找到合适的方法。</p></div></section>

  <section class="catalog-section shell">
    <div class="filters" role="search" aria-label="筛选 Skills">
      <label class="search-field"><span>搜索</span><input id="skill-search" type="search" placeholder="例如：投资、文案、AI…" autocomplete="off" /></label>
      <label><span>领域</span><select id="domain-filter"><option value="">全部领域</option>{domains.map((domain) => <option value={domain}>{domain}</option>)}</select></label>
      <label><span>质量</span><select id="quality-filter"><option value="">全部质量</option><option value="verified">已验证</option><option value="community">社区收录</option><option value="experimental">实验性</option></select></label>
      <label><span>来源</span><select id="source-filter"><option value="">全部来源</option><option value="github">GitHub 仓库</option><option value="bundled">仓库内置</option></select></label>
    </div>

    <div class="results-bar"><p id="results-count" aria-live="polite">显示全部 {entries.length} 个 Skill Pack</p><button id="reset-filters" type="button">重置筛选</button></div>
    <div id="skills-grid" class="skill-grid">
      {entries.map((entry) => <SkillCard entry={entry} filterable />)}
    </div>
    <div id="empty-state" class="empty-state" hidden><h2>没有找到匹配的 Skill</h2><p>换一个关键词，或清空筛选条件再试。</p><button class="button secondary" type="button" data-reset>清空筛选</button></div>
  </section>

  <script>
    const search = document.querySelector<HTMLInputElement>("#skill-search");
    const domain = document.querySelector<HTMLSelectElement>("#domain-filter");
    const quality = document.querySelector<HTMLSelectElement>("#quality-filter");
    const source = document.querySelector<HTMLSelectElement>("#source-filter");
    const cards = [...document.querySelectorAll<HTMLElement>("[data-skill-card]")];
    const count = document.querySelector<HTMLElement>("#results-count");
    const empty = document.querySelector<HTMLElement>("#empty-state");

    function applyFilters() {
      const query = search?.value.trim().toLocaleLowerCase("zh-CN") ?? "";
      let visible = 0;
      for (const card of cards) {
        const matches = (!query || card.dataset.search?.includes(query))
          && (!domain?.value || card.dataset.domains?.split("|").includes(domain.value))
          && (!quality?.value || card.dataset.quality === quality.value)
          && (!source?.value || card.dataset.source === source.value);
        card.hidden = !matches;
        if (matches) visible += 1;
      }
      if (count) count.textContent = visible === cards.length ? `显示全部 ${visible} 个 Skill Pack` : `找到 ${visible} 个 Skill Pack`;
      if (empty) empty.hidden = visible !== 0;
      const params = new URLSearchParams();
      if (query) params.set("q", query);
      if (domain?.value) params.set("domain", domain.value);
      if (quality?.value) params.set("quality", quality.value);
      history.replaceState(null, "", `${location.pathname}${params.size ? `?${params}` : ""}`);
    }

    function resetFilters() {
      if (search) search.value = "";
      if (domain) domain.value = "";
      if (quality) quality.value = "";
      if (source) source.value = "";
      applyFilters();
      search?.focus();
    }

    const params = new URLSearchParams(location.search);
    if (search) search.value = params.get("q") ?? "";
    if (domain) domain.value = params.get("domain") ?? "";
    if (quality) quality.value = params.get("quality") ?? "";
    applyFilters();

    [search, domain, quality, source].forEach((control) => control?.addEventListener("input", applyFilters));
    document.querySelectorAll("#reset-filters, [data-reset]").forEach((button) => button.addEventListener("click", resetFilters));
  </script>
</BaseLayout>

<style>
  .page-hero.compact { padding-bottom: 42px; }
  .page-hero.compact h1 { font-size: clamp(42px, 6vw, 64px); }
  .catalog-section { padding-top: 38px; }
  .filters { display: grid; grid-template-columns: minmax(260px, 1.6fr) repeat(3, 1fr); gap: 10px; padding: 15px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--soft); }
  .filters label { display: grid; gap: 6px; }
  .filters label > span { color: var(--muted); font-size: 11px; font-weight: 700; }
  .filters input, .filters select { width: 100%; height: 43px; padding: 0 12px; border: 1px solid var(--line); border-radius: 6px; background: white; color: var(--ink); outline: none; }
  .filters input:focus, .filters select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
  .results-bar { display: flex; justify-content: space-between; align-items: center; min-height: 67px; }
  .results-bar p { color: var(--muted); font-size: 13px; }
  .results-bar button { border: 0; background: transparent; color: var(--accent); font-size: 13px; }
  .empty-state { padding: 80px 20px; text-align: center; }
  .empty-state h2 { margin-bottom: 4px; }
  .empty-state p { margin-top: 0; color: var(--muted); }
  @media (max-width: 820px) { .filters { grid-template-columns: 1fr 1fr; } .search-field { grid-column: 1 / -1; } }
  @media (max-width: 520px) { .filters { grid-template-columns: 1fr; } .search-field { grid-column: auto; } }
</style>