import type { Metadata } from "next";
import Link from "next/link";
import { notFound } from "next/navigation";
import { ArrowLeft } from "lucide-react";
import { Container } from "@/components/Container";
import { Breadcrumbs } from "@/components/Breadcrumbs";
import { getPublishedStudyBySlug } from "@/lib/research/queries";
import { ApplyForm } from "./ApplyForm";

export const dynamic = "force-dynamic";
export const metadata: Metadata = {
  title: "Apply to collaborate",
  robots: { index: false, follow: false },
};

export default async function StudyApplyPage({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const data = await getPublishedStudyBySlug(slug);
  if (!data) notFound();
  const { study } = data;

  return (
    <section className="bg-white pt-10 pb-16 md:pt-14 md:pb-24">
      <Container>
        <div className="mx-auto max-w-3xl">
          <Breadcrumbs
            items={[
              { label: "Research Portal", href: "/products/research" },
              { label: "Studies", href: "/products/research/studies" },
              {
                label: study.title,
                href: `/products/research/studies/${study.slug}`,
              },
              { label: "Apply" },
            ]}
          />
          <Link
            href={`/products/research/studies/${study.slug}`}
            className="mt-6 inline-flex items-center gap-1 text-[13px] font-semibold text-[var(--color-slate)] hover:text-[var(--color-blue)]"
          >
            <ArrowLeft className="h-3.5 w-3.5" aria-hidden />
            Back to study
          </Link>

          <div className="mt-4 inline-flex items-center gap-2 rounded-full border border-[var(--color-line)] bg-[var(--color-mist)] px-3 py-1 text-[11px] font-bold uppercase tracking-wider text-[var(--color-blue)]">
            Apply to collaborate
          </div>
          <h1 className="mt-4 font-display text-[34px] md:text-[44px] font-extrabold leading-[1.05] tracking-[-0.02em] text-[var(--color-ink)]">
            {study.title}
          </h1>
          <p className="mt-3 text-[15px] leading-relaxed text-[var(--color-slate)]">
            Tell us a little about yourself and the role you&rsquo;d like to
            play. You don&rsquo;t need to be an OrthoGlobe member yet — we
            welcome applications from trainees, consultants, and researchers at
            any level. Fields marked * are required.
          </p>

          <div className="mt-8 rounded-2xl border border-[var(--color-line)] bg-white p-6 shadow-sm md:p-8">
            <ApplyForm
              studySlug={study.slug}
              studyTitle={study.title}
              openRoles={study.openRoles}
            />
          </div>
        </div>
      </Container>
    </section>
  );
}
