import { createFileRoute } from "@tanstack/react-router";
import Breadcrumbs from "@/components/Breadcrumbs";
import { useState } from "react";
import { PeptideCard } from "@/components/kennisbank/PeptideCard";
import { SectionLabel } from "@/components/kennisbank/SectionLabel";
import { categories, peptides } from "@/content/kennisbank/peptides";
import { getKennisbank, type KennisbankL10n } from "@/lib/content.functions";
import { pageHead, tr, useLang } from "@/lib/kennisbank-i18n";
import { headLang } from "@/lib/i18n";

export const Route = createFileRoute("/kennisbank/")({
  // The knowledge base is managed in the admin panel; the content in this
  // codebase is only the fallback for a database that is still empty.
  loader: async () => ({ kennisbank: await getKennisbank() }),
  head: (ctx) => {
    const lang = headLang(ctx);
    return lang === "en"
      ? pageHead("/kennisbank", "Knowledge base: peptides A–Z | Peptidewinkel", "Profiles of BPC-157, TB-500, semaglutide, tirzepatide, ipamorelin and more: mechanism, research, storage and side effects.", lang)
      : pageHead("/kennisbank", "Kennisbank peptiden A–Z | Peptidewinkel", "Profielen van BPC-157, TB-500, semaglutide, tirzepatide, ipamorelin en meer: werking, onderzoek, bewaren en bijwerkingen.", lang);
  },
  component: List,
});

function List() {
  const lang = useLang();
  const en = lang === "en";
  const { kennisbank } = Route.useLoaderData();
  const [cat, setCat] = useState<string>("all");
  const items = kennisbank?.items.length ? kennisbank.items : peptides;
  const labels: Record<string, KennisbankL10n> = kennisbank?.categories.length
    ? Object.fromEntries(kennisbank.categories.map((c) => [c.slug, c.name]))
    : (categories as Record<string, KennisbankL10n>);
  const list = [...items].sort((a, b) => a.name.localeCompare(b.name)).filter((p) => cat === "all" || p.category === cat);
  const chip = (active: boolean) => `rounded-full border px-3 py-1 font-mono text-xs ${active ? "border-primary/40 bg-primary/10 text-primary" : "border-border text-foreground/60 hover:text-foreground"}`;
  return (
    <>
      <Breadcrumbs items={[{ label: en ? 'Knowledge base' : 'Kennisbank' }]} />
    <section className="container pb-24 pt-16">
      <SectionLabel>{en ? "Knowledge base" : "Kennisbank"}</SectionLabel>
      <h1 className="mt-3 text-4xl md:text-6xl font-black tracking-tight">{en ? "Peptides A–Z" : "Kennisbank: peptiden A–Z"}</h1>
      <div className="mt-8 flex flex-wrap gap-2">
        <button className={chip(cat === "all")} onClick={() => setCat("all")}>{en ? "All" : "Alle"}</button>
        {Object.keys(labels).map((c) => (
          <button key={c} className={chip(cat === c)} onClick={() => setCat(c)}>{tr(labels[c], lang)}</button>
        ))}
      </div>
      <div className="mt-8 grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
        {list.map((p, i) => <PeptideCard key={p.slug} p={p} index={i} categoryLabel={labels[p.category ?? ""]} />)}
      </div>
    </section>
    </>
  );
}