---
import Layout from '../layouts/Layout.astro';
import CategoryFilter from '../components/CategoryFilter.astro';
import Card from '../components/Card.astro';
import Icon from '../components/Icon.astro';
import { getDB, listPlugins, searchPlugins, type Plugin } from '../lib/db';
import { EMPTY_STATE, SITE, orderCategories } from '../lib/site';

export const prerender = false;

// Plugin details used to open in a client-side drawer keyed by ?ext=/?id=. Those
// deep links now belong to the dedicated /plugin/[id] page, so send them there
// instead of rendering the catalog with a query nothing acts on.
const legacyId = Astro.url.searchParams.get('ext') ?? Astro.url.searchParams.get('id');
if (legacyId) {
  return Astro.redirect(`/plugin/${encodeURIComponent(legacyId)}`, 301);
}

// A ?q= search is answered by D1 so the results are real at first paint (and the
// grid is populated before the client script runs). The navbar pre-fills the input
// with the same value, so the box and the results never disagree on load.
const searchParam = Astro.url.searchParams.get('q')?.trim() ?? '';
const isSearching = searchParam.length > 0;

let plugins: Plugin[] = [];
let dbError: string | null = null;
try {
  const db = getDB(Astro.locals);
  plugins = isSearching ? await searchPlugins(db, searchParam) : await listPlugins(db);
} catch (error) {
  dbError = error instanceof Error ? error.message : String(error);
}

const categories = orderCategories(plugins.map((plugin) => plugin.category));
const platforms = [...new Set(plugins.flatMap((plugin) => plugin.platforms))].sort();

const categoryCounts = plugins.reduce<Record<string, number>>((acc, plugin) => {
  acc[plugin.category] = (acc[plugin.category] ?? 0) + 1;
  return acc;
}, {});

const total = plugins.length;
---

<Layout title={SITE.name} description={SITE.description}>
  <div class="aurora relative">
    <div class="grid-lines pointer-events-none absolute inset-0" aria-hidden="true"></div>

    <section class="relative mx-auto max-w-7xl px-4 pb-10 pt-16 sm:px-6 lg:px-8">
      <div class="grid items-center gap-10 lg:grid-cols-[minmax(0,1fr)_minmax(0,1fr)]">
        <div>
          <p class="inline-flex items-center gap-2 rounded-full border border-zinc-800 bg-zinc-900/50 px-3 py-1 text-xs text-zinc-400">
            <span class="h-1.5 w-1.5 rounded-full bg-cyan-400"></span>
            Live catalog · served from Cloudflare D1
          </p>
          <h1 class="mt-5 max-w-3xl text-balance text-4xl font-bold tracking-tight text-white sm:text-5xl">
            Extend your OpenROM preservation workflow
          </h1>
          <p class="mt-4 max-w-2xl text-pretty text-base leading-relaxed text-zinc-400">
            {SITE.description} Every download count below is a real, live number — nothing here is
            simulated.
          </p>

          <div class="mt-7 flex flex-wrap items-center gap-3">
            <a
              href="#catalog"
              class="inline-flex h-11 items-center gap-2 rounded-lg bg-gradient-to-r from-cyan-500 to-purple-500 px-5 text-sm font-semibold text-zinc-950 transition hover:from-cyan-400 hover:to-purple-400"
            >
              Browse extensions
              <Icon name="chevron-right" class="h-4 w-4" />
            </a>
            <a
              href={SITE.contributing}
              class="inline-flex h-11 items-center gap-2 rounded-lg border border-zinc-800 px-5 text-sm font-medium text-zinc-200 transition hover:border-zinc-700 hover:text-white"
            >
              Publish an Extension
            </a>
          </div>
        </div>

        <div class="relative">
          <div
            class="pointer-events-none absolute -inset-4 rounded-[2rem] bg-gradient-to-tr from-cyan-500/20 via-transparent to-purple-500/20 blur-2xl"
            aria-hidden="true"
          >
          </div>
          <img
            src="/images/romeo-banner.png"
            alt="ROMeo, the OpenROM mascot, standing in a retro arcade shop"
            width="1200"
            height="670"
            class="relative w-full rounded-2xl border border-zinc-800 object-cover shadow-xl shadow-cyan-950/20"
          />
        </div>
      </div>
    </section>
  </div>

  <main id="catalog" class="mx-auto max-w-7xl px-4 pb-20 sm:px-6 lg:px-8">
    {
      dbError ? (
        <div class="rounded-xl border border-red-500/30 bg-red-500/5 p-6">
          <h2 class="text-sm font-semibold text-red-300">Catalog temporarily unavailable</h2>
          <p class="mt-1.5 text-sm text-zinc-400">
            The D1 database could not be reached. Please try again shortly.
          </p>
          <p class="mt-3 break-all font-mono text-xs text-zinc-600">{dbError}</p>
        </div>
      ) : total === 0 && !isSearching ? (
        <div
          class="relative overflow-hidden rounded-2xl border border-zinc-800 bg-zinc-900/30 px-6 py-16 text-center"
          data-empty-state
        >
          <div
            class="pointer-events-none absolute left-1/2 top-0 h-56 w-56 -translate-x-1/2 rounded-full bg-cyan-500/10 blur-3xl"
            aria-hidden="true"
          >
          </div>
          <img
            src="/images/romeo-search.png"
            alt="ROMeo, the OpenROM mascot, looking puzzled through a magnifying glass"
            width="140"
            height="140"
            class="relative mx-auto h-[140px] w-[140px] object-contain drop-shadow-[0_0_24px_rgba(34,211,238,0.25)]"
          />
          <h2 class="relative mt-6 text-xl font-semibold text-white">{EMPTY_STATE.title}</h2>
          <p class="relative mx-auto mt-2 max-w-md text-sm leading-relaxed text-zinc-400">
            {EMPTY_STATE.body}
          </p>
          <a
            href={SITE.contributing}
            class="relative mt-7 inline-flex h-11 items-center gap-2 rounded-lg bg-gradient-to-r from-cyan-500 to-purple-500 px-5 text-sm font-semibold text-zinc-950 transition hover:from-cyan-400 hover:to-purple-400"
          >
            {EMPTY_STATE.cta}
            <Icon name="external-link" class="h-4 w-4" />
          </a>
        </div>
      ) : (
        <div class="grid gap-8 lg:grid-cols-[16rem_minmax(0,1fr)]">
          <CategoryFilter
            categories={categories}
            platforms={platforms}
            categoryCounts={categoryCounts}
            total={total}
          />

          <section>
            <div class="mb-5 flex items-baseline justify-between gap-3">
              <h2 class="text-sm font-semibold text-zinc-300">
                <span data-result-count>{total}</span>
                {total === 1 ? ' extension' : ' extensions'}
                {isSearching && <span class="font-normal text-zinc-500">for “{searchParam}”</span>}
              </h2>
              <p class="text-xs text-zinc-600">Sorted live from D1</p>
            </div>

            <div data-plugin-grid class="grid gap-4 sm:grid-cols-2">
              {plugins.map((plugin) => (
                <Card plugin={plugin} />
              ))}
            </div>

            <div
              data-no-results
              class="hidden rounded-2xl border border-zinc-800 bg-zinc-900/30 px-6 py-14 text-center"
            >
              <img
                src="/images/romeo-search.png"
                alt="ROMeo, the OpenROM mascot, looking puzzled through a magnifying glass"
                width="128"
                height="128"
                class="mx-auto h-32 w-32 object-contain drop-shadow-[0_0_24px_rgba(34,211,238,0.25)]"
              />
              <h3 class="mt-5 text-lg font-semibold text-white">
                ROMeo couldn&rsquo;t find any extensions!
              </h3>
              <p class="mx-auto mt-2 max-w-md text-sm leading-relaxed text-zinc-400">
                Try a different search term, or be the first to build this extension for OpenROM!
              </p>
              <div class="mt-6 flex flex-wrap items-center justify-center gap-3">
                <a
                  href={SITE.contributing}
                  class="inline-flex h-10 items-center gap-2 rounded-lg bg-gradient-to-r from-cyan-500 to-purple-500 px-4 text-sm font-semibold text-zinc-950 transition hover:from-cyan-400 hover:to-purple-400"
                >
                  Publish an Extension
                  <Icon name="external-link" class="h-4 w-4" />
                </a>
                <button
                  type="button"
                  data-clear-filters
                  class="inline-flex h-10 items-center gap-2 rounded-lg border border-zinc-800 px-4 text-sm font-medium text-zinc-300 transition hover:border-zinc-700 hover:text-white"
                >
                  Clear filters
                </button>
              </div>
            </div>
          </section>
        </div>
      )
    }
  </main>
</Layout>

<script>
  const state = { query: '', category: '', platforms: new Set<string>(), sort: 'downloads' };

  const grid = document.querySelector<HTMLElement>('[data-plugin-grid]');
  const cards = Array.from(document.querySelectorAll<HTMLElement>('.plugin-card'));
  const noResults = document.querySelector<HTMLElement>('[data-no-results]');
  const countEl = document.querySelector<HTMLElement>('[data-result-count]');
  const searchInput = document.querySelector<HTMLInputElement>('#search');

  function applyFilters() {
    if (!grid) return;
    let visible = 0;

    for (const card of cards) {
      const search = card.dataset.search ?? '';
      const category = card.dataset.category ?? '';
      const platforms = (card.dataset.platforms ?? '').split('|');

      const matchesQuery = !state.query || search.includes(state.query);
      const matchesCategory = !state.category || category === state.category;
      const matchesPlatform =
        state.platforms.size === 0 || platforms.some((p) => state.platforms.has(p));

      const show = matchesQuery && matchesCategory && matchesPlatform;
      card.classList.toggle('hidden', !show);
      if (show) visible += 1;
    }

    const sorted = [...cards].sort((a, b) => {
      if (state.sort === 'name') {
        return (a.querySelector('h3')?.textContent ?? '').localeCompare(
          b.querySelector('h3')?.textContent ?? '',
        );
      }
      if (state.sort === 'newest') {
        return (b.dataset.created ?? '').localeCompare(a.dataset.created ?? '');
      }
      return Number(b.dataset.downloads ?? 0) - Number(a.dataset.downloads ?? 0);
    });
    for (const card of sorted) grid.appendChild(card);

    if (countEl) countEl.textContent = String(visible);
    noResults?.classList.toggle('hidden', visible !== 0);
    grid.classList.toggle('hidden', visible === 0);
  }

  // --- Search ---
  searchInput?.addEventListener('input', () => {
    state.query = searchInput.value.trim().toLowerCase();
    applyFilters();
  });

  // --- Category ---
  for (const btn of document.querySelectorAll<HTMLElement>('.category-btn')) {
    btn.addEventListener('click', () => {
      for (const other of document.querySelectorAll<HTMLElement>('.category-btn')) {
        other.dataset.active = 'false';
      }
      btn.dataset.active = 'true';
      state.category = btn.dataset.category ?? '';
      applyFilters();
    });
  }

  // --- Platform ---
  for (const chip of document.querySelectorAll<HTMLElement>('.platform-chip')) {
    chip.addEventListener('click', () => {
      const platform = chip.dataset.platform ?? '';
      const active = chip.dataset.active === 'true';
      if (active) {
        chip.dataset.active = 'false';
        state.platforms.delete(platform);
      } else {
        chip.dataset.active = 'true';
        state.platforms.add(platform);
      }
      applyFilters();
    });
  }

  // --- Sort ---
  document.querySelector<HTMLSelectElement>('[data-sort]')?.addEventListener('change', (event) => {
    state.sort = (event.target as HTMLSelectElement).value;
    applyFilters();
  });

  // --- Clear ---
  document.querySelector<HTMLElement>('[data-clear-filters]')?.addEventListener('click', () => {
    state.query = '';
    state.category = '';
    state.platforms.clear();
    if (searchInput) searchInput.value = '';
    for (const btn of document.querySelectorAll<HTMLElement>('.category-btn')) {
      btn.dataset.active = btn.dataset.category === '' ? 'true' : 'false';
    }
    for (const chip of document.querySelectorAll<HTMLElement>('.platform-chip')) {
      chip.dataset.active = 'false';
    }
    applyFilters();
  });

  // --- Copy install command ---
  document.addEventListener('click', async (event) => {
    const trigger = (event.target as HTMLElement).closest<HTMLElement>('[data-copy-cli]');
    if (!trigger) return;
    const command = trigger.dataset.copyCli ?? '';
    try {
      await navigator.clipboard.writeText(command);
      const original = trigger.innerHTML;
      trigger.innerHTML = '<span class="text-cyan-400">copied</span>';
      setTimeout(() => (trigger.innerHTML = original), 1200);
    } catch {
      /* clipboard unavailable */
    }
  });

  // --- Initial query ---
  // The navbar input is pre-filled server-side from ?q=, so adopt whatever it
  // holds (trimmed, lowercased) as the starting query and reconcile the grid with
  // it. This keeps the box and the server-rendered results in agreement on load.
  if (searchInput && searchInput.value.trim()) {
    state.query = searchInput.value.trim().toLowerCase();
    applyFilters();
  }
</script>