import Link from "next/link";
import { Shell } from "@/components/Shell";
import { PageHeader } from "@/components/PageHeader";
import { db, caseStudies } from "@/db";
import { eq } from "drizzle-orm";

export const metadata = { title: "Case studies" };

export default async function CaseStudiesPage({ searchParams }: { searchParams: Promise<{ vertical?: string }> }) {
  const { vertical } = await searchParams;
  const all = await db.query.caseStudies.findMany({ where: eq(caseStudies.published, true), orderBy: (c, { desc, asc }) => [desc(c.year), asc(c.title)] });
  const verticals = [...new Set(all.map((c) => c.vertical).filter(Boolean))] as string[];
  const list = vertical ? all.filter((c) => c.vertical === vertical) : all;
  return (
    <Shell>
      <PageHeader eyebrow="Case studies" title={<>The work, and <span className="serif-i">how it worked.</span></>} intro="Every study is linked to its Workamajig project, so the credits are real and the team who made it is one click away.">
        <div className="flex flex-wrap gap-1.5">
          <Link href="/case-studies" className={`chip ${!vertical ? "bg-ink text-white" : ""}`}>All</Link>
          {verticals.map((v) => <Link key={v} href={`/case-studies?vertical=${encodeURIComponent(v)}`} className={`chip ${vertical === v ? "bg-ink text-white" : ""}`}>{v}</Link>)}
        </div>
      </PageHeader>
      <section className="mx-auto max-w-7xl px-5 pb-16 grid gap-4 md:grid-cols-2">
        {list.map((c, i) => (
          <Link key={c.id} href={`/case-studies/${c.slug}`} className={`card overflow-hidden group ${i === 0 ? "md:col-span-2" : ""}`}>
            <div className={`${i % 3 === 0 ? "bg-ink" : i % 3 === 1 ? "bg-soul" : "bg-sky"} text-white p-8 min-h-56 flex flex-col justify-end`}>
              <p className="eyebrow text-white/60">{c.clientName} · {c.year}</p>
              <h2 className={`${i === 0 ? "display" : "headline"} mt-2 group-hover:underline decoration-2 underline-offset-8`}>{c.title}</h2>
            </div>
            <div className="p-6">
              <p className="text-ink/80">{c.summary}</p>
              <div className="mt-3 flex flex-wrap gap-1.5">{c.tags.map((t) => <span key={t} className="chip">{t}</span>)}</div>
            </div>
          </Link>
        ))}
      </section>
    </Shell>
  );
}