import type { Metadata } from "next";
import Link from "next/link";
import { notFound } from "next/navigation";
import { Icon } from "@/components/icons";
import { Button } from "@/components/ui";
import { CtaBand } from "@/components/cta-band";
import { jobs } from "@/content/jobs";
import { site } from "@/content/site";

const dateFmt = new Intl.DateTimeFormat("en-GB", {
  day: "numeric",
  month: "long",
  year: "numeric",
});

export function generateStaticParams() {
  return jobs.map((job) => ({ slug: job.slug }));
}

export async function generateMetadata({
  params,
}: PageProps<"/jobs/[slug]">): Promise<Metadata> {
  const { slug } = await params;
  const job = jobs.find((j) => j.slug === slug);
  if (!job) return { title: "Job not found" };
  return {
    title: `${job.title} — Jobs`,
    description: job.summary,
  };
}

export default async function JobDetailPage({ params }: PageProps<"/jobs/[slug]">) {
  const { slug } = await params;
  const job = jobs.find((j) => j.slug === slug);
  if (!job) notFound();

  return (
    <>
      <article className="bg-cream">
        <div className="container-page py-14 lg:py-20">
          <Link
            href="/jobs"
            className="inline-flex items-center gap-1.5 text-sm font-semibold text-brand-700"
          >
            <Icon name="arrow-right" className="h-4 w-4 rotate-180" />
            All jobs
          </Link>

          <div className="mt-6 flex flex-wrap items-center gap-2 text-xs font-medium text-ink-500">
            <span className="rounded-full bg-brand-50 px-2.5 py-1 text-brand-700">
              {job.category}
            </span>
            <span className="rounded-full bg-white px-2.5 py-1 ring-1 ring-inset ring-ink-100">
              {job.type}
            </span>
            <span className="inline-flex items-center gap-1">
              <Icon name="map-pin" className="h-3.5 w-3.5" />
              {job.location}
            </span>
            <span className="inline-flex items-center gap-1">
              <Icon name="clock" className="h-3.5 w-3.5" />
              Posted {dateFmt.format(new Date(job.postedISO))}
            </span>
          </div>

          <h1 className="mt-4 max-w-3xl font-display text-4xl font-bold tracking-tight text-ink-900">
            {job.title}
          </h1>
          <p className="mt-4 max-w-2xl text-lg leading-relaxed text-ink-600">{job.summary}</p>
        </div>
      </article>

      <div className="container-page grid gap-12 py-14 lg:grid-cols-[1.6fr_1fr] lg:py-20">
        <div className="space-y-10">
          <section>
            <h2 className="font-display text-xl font-bold text-ink-900">Responsibilities</h2>
            <ul className="mt-4 space-y-2.5">
              {job.responsibilities.map((r) => (
                <li key={r} className="flex items-start gap-2.5 text-[15px] text-ink-700">
                  <Icon name="check" className="mt-0.5 h-4 w-4 shrink-0 text-brand-600" />
                  {r}
                </li>
              ))}
            </ul>
          </section>
          <section>
            <h2 className="font-display text-xl font-bold text-ink-900">Requirements</h2>
            <ul className="mt-4 space-y-2.5">
              {job.requirements.map((r) => (
                <li key={r} className="flex items-start gap-2.5 text-[15px] text-ink-700">
                  <Icon name="arrow-right" className="mt-0.5 h-4 w-4 shrink-0 text-accent-500" />
                  {r}
                </li>
              ))}
            </ul>
          </section>
        </div>

        <aside className="lg:sticky lg:top-28 lg:h-fit">
          <div className="rounded-2xl border border-ink-100 bg-white p-6 shadow-card">
            <h2 className="font-display text-base font-bold text-ink-900">Apply for this role</h2>
            <p className="mt-2 text-sm text-ink-600">
              Send your CV and a short cover note quoting <strong>{job.title}</strong>.
            </p>
            <Button
              href={`mailto:${site.contact.jobsEmail}?subject=Application: ${encodeURIComponent(
                job.title,
              )}`}
              withArrow
              className="mt-4 w-full"
            >
              Email your application
            </Button>
            <p className="mt-3 text-xs text-ink-400">
              {site.contact.jobsEmail} · {site.contact.phone}
            </p>
          </div>
        </aside>
      </div>

      <CtaBand
        title="Not the right role?"
        subtitle="Register your CV with our recruitment desk and we will match you to future openings."
      />
    </>
  );
}