import { notFound } from "next/navigation";
import Link from "next/link";
import { Shell } from "@/components/Shell";
import { db, caseStudies } from "@/db";
import { eq } from "drizzle-orm";
import { Avatar } from "@/components/Avatar";
import { fullName } from "@/lib/format";

export default async function CaseStudyPage({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  const cs = await db.query.caseStudies.findFirst({
    where: eq(caseStudies.slug, slug),
    with: { project: { with: { client: true, assignments: { with: { person: true }, orderBy: (a, { desc }) => desc(a.hours) } } } },
  });
  if (!cs) notFound();
  const team = cs.project?.assignments ?? [];
  return (
    <Shell>
      <section className="grain bg-ink text-white">
        <div className="mx-auto max-w-7xl px-5 py-16">
          <p className="eyebrow text-white/60"><Link href="/case-studies" className="hover:text-white">Case studies</Link> · {cs.clientName} · {cs.vertical} · {cs.year}</p>
          <h1 className="display mt-3 max-w-4xl">{cs.title}</h1>
          <p className="mt-5 max-w-2xl text-xl text-white/75">{cs.summary}</p>
          {cs.videoUrl && (
            <div className="mt-8 aspect-video max-w-4xl overflow-hidden rounded-2xl bg-black">
              <iframe src={cs.videoUrl} className="h-full w-full" allow="autoplay; fullscreen" title={cs.title} />
            </div>
          )}
        </div>
      </section>
      <section className="mx-auto max-w-7xl px-5 py-12 grid gap-12 lg:grid-cols-[2fr_1fr]">
        <div className="space-y-10 max-w-3xl">
          {[["The challenge", cs.challenge], ["What we did", cs.approach], ["What moved", cs.results]].map(([h, b]) => b && (
            <div key={h}>
              <h2 className="headline mb-3"><span className="serif-i">{h}</span></h2>
              <p className="text-lg leading-relaxed text-ink/85">{b}</p>
            </div>
          ))}
          <div className="flex flex-wrap gap-1.5">{cs.tags.map((t) => <span key={t} className="chip">{t}</span>)}</div>
        </div>
        <aside>
          <h3 className="eyebrow mb-4">The team <span className="normal-case tracking-normal text-mist">· via Workamajig</span></h3>
          {team.length === 0 && <p className="text-sm text-ink/60">No project linked yet.</p>}
          <ul className="space-y-3">
            {team.map((a) => (
              <li key={a.id}>
                <Link href={`/people/${a.person.slug}`} className="flex items-center gap-3 hover:text-soul">
                  <Avatar person={a.person} size={40} />
                  <span><span className="font-medium block leading-tight">{fullName(a.person)}</span><span className="text-xs text-mist">{a.role ?? a.person.title}</span></span>
                </Link>
              </li>
            ))}
          </ul>
          {cs.project && (
            <p className="mt-6 text-xs text-mist">Workamajig project {cs.project.number} · {cs.project.status}</p>
          )}
        </aside>
      </section>
    </Shell>
  );
}