import Link from "next/link";
import { Shell } from "@/components/Shell";
import { PageHeader } from "@/components/PageHeader";
import { db, showcaseItems } from "@/db";
import { desc, eq } from "drizzle-orm";
import { Avatar } from "@/components/Avatar";
import type { ShowcaseDiscipline } from "@/db/schema";

export const metadata = { title: "Showcase" };
const disciplines: ShowcaseDiscipline[] = ["UX", "CREATIVE", "DEVELOPMENT", "ANALYTICS", "BRAND"];
const label = (d: string) => d.charAt(0) + d.slice(1).toLowerCase();

export default async function ShowcasePage({ searchParams }: { searchParams: Promise<{ d?: string }> }) {
  const { d } = await searchParams;
  const items = await db.query.showcaseItems.findMany({ where: d ? eq(showcaseItems.discipline, d as ShowcaseDiscipline) : undefined, orderBy: desc(showcaseItems.createdAt), with: { author: true } });
  return (
    <Shell>
      <PageHeader eyebrow="Showcase" title={<>Experiments, games <span className="serif-i">&amp; interesting ideas.</span></>} intro="The stuff that didn't fit a brief – yet. Share a prototype, a Friday hack, a tool, a game. Half of these end up in pitches.">
        <div className="flex flex-wrap gap-1.5">
          <Link href="/showcase" className={`chip ${!d ? "bg-ink text-white" : ""}`}>Everything</Link>
          {disciplines.map((x) => <Link key={x} href={`/showcase?d=${x}`} className={`chip ${d === x ? "bg-ink text-white" : ""}`}>{label(x)}</Link>)}
          <Link href="/showcase/new" className="chip chip-soul ml-auto">+ Add yours</Link>
        </div>
      </PageHeader>
      <section className="mx-auto max-w-7xl px-5 pb-16 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
        {items.map((s, i) => (
          <Link key={s.id} href={`/showcase/${s.slug}`} className="card overflow-hidden group">
            <div className={`aspect-[4/3] p-6 flex flex-col justify-between ${["bg-soul", "bg-ink", "bg-sky", "bg-cream"][i % 4]} ${i % 4 === 3 ? "text-ink" : "text-white"}`}>
              <div className="flex gap-2"><span className="inline-flex rounded-full border border-current/30 bg-white/15 px-3 py-1 text-xs font-medium">{label(s.discipline)}</span><span className="inline-flex rounded-full border border-current/30 bg-white/15 px-3 py-1 text-xs font-medium">{label(s.kind)}</span></div>
              <p className="headline group-hover:underline underline-offset-8">{s.title}</p>
            </div>
            <div className="p-5">
              <p className="text-sm text-ink/75">{s.blurb}</p>
              {s.author && <p className="mt-3 flex items-center gap-2 text-xs text-mist"><Avatar person={s.author} size={22} /> {s.author.firstName} {s.author.lastName}</p>}
            </div>
          </Link>
        ))}
      </section>
    </Shell>
  );
}