import type { Metadata } from "next";
import Link from "next/link";
import Image from "next/image";
import { Container } from "@/components/Container";
import { Button } from "@/components/Button";
import { listPublishedCourses } from "@/lib/academy/queries";
import { getViewer } from "@/lib/auth/viewer";

export const metadata: Metadata = {
  title: "Academy course catalogue",
  description:
    "OrthoGlobe Academy — a structured, surgeon-led orthopaedic curriculum. Browse the published course catalogue.",
};

export const dynamic = "force-dynamic";

export default async function AcademyCoursesPage() {
  const [courses, viewer] = await Promise.all([
    listPublishedCourses(),
    getViewer(),
  ]);
  const empty = courses.length === 0;

  return (
    <>
      <section className="relative overflow-hidden border-b border-[var(--color-line)] bg-gradient-to-b from-[var(--color-mist)]/60 to-white pb-10 pt-10 md:pb-14 md:pt-14">
        <div
          aria-hidden
          className="pointer-events-none absolute -left-32 top-0 h-[480px] w-[480px] rounded-full bg-[var(--color-blue)]/10 blur-3xl"
        />
        <div
          aria-hidden
          className="pointer-events-none absolute -right-24 top-16 h-[360px] w-[360px] rounded-full bg-[var(--color-blue)]/5 blur-3xl"
        />
        <Container>
          <div className="relative mx-auto max-w-5xl">
            <Link
              href="/products/academy"
              className="inline-flex items-center gap-2 text-[13px] font-semibold text-[var(--color-slate)] transition-colors hover:text-[var(--color-blue)]"
            >
              <span>&larr;</span> OrthoGlobe Academy
            </Link>
            <div className="mt-8 flex items-center gap-3">
              <span className="inline-flex items-center rounded-full bg-[var(--color-blue)] px-3 py-1 text-[11px] font-bold uppercase tracking-wider text-white shadow-sm">
                Catalogue
              </span>
              <span className="text-[11px] font-bold uppercase tracking-wider text-[var(--color-slate)]">
                {empty ? "In production" : `${courses.length} course${courses.length === 1 ? "" : "s"}`}
              </span>
            </div>
            <h1 className="mt-6 font-display text-[40px] font-extrabold leading-[1.04] tracking-[-0.025em] text-[var(--color-ink)] md:text-[60px]">
              {empty
                ? "The Academy catalogue is being authored."
                : "Structured orthopaedic learning."}
            </h1>
            <p className="mt-6 max-w-3xl text-[20px] leading-[1.55] text-[var(--color-slate)]">
              {empty
                ? "OrthoGlobe Academy will publish a structured orthopaedic curriculum from foundation level to advanced masterclasses. We are authoring the first cohort of modules now and will list them here as they become ready."
                : "Short-form, surgeon-authored courses designed for the way orthopaedic trainees and consultants actually learn."}
            </p>
          </div>
        </Container>
      </section>

      <section className="border-b border-[var(--color-line)] bg-white py-16 md:py-20">
        <Container>
          {empty ? (
            <EmptyState signedIn={viewer.signedIn} />
          ) : (
            <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
              {courses.map((c) => (
                <Link
                  key={c.id}
                  href={`/products/academy/courses/${c.slug}`}
                  className="group flex flex-col overflow-hidden rounded-2xl border border-[var(--color-line)] bg-white transition-[border-color,box-shadow] hover:border-[var(--color-blue)] hover:shadow-[0_20px_48px_rgba(30,64,255,0.08)]"
                >
                  <div className="relative aspect-[16/9] w-full bg-[var(--color-mist)]">
                    {c.coverPhoto && (
                      <Image
                        src={c.coverPhoto}
                        alt={c.coverPhotoAlt ?? c.title}
                        fill
                        sizes="(min-width: 1024px) 360px, (min-width: 768px) 50vw, 100vw"
                        className="object-cover"
                      />
                    )}
                  </div>
                  <div className="flex flex-1 flex-col p-6">
                    <div className="flex items-center gap-2 text-[11px] font-bold uppercase tracking-[0.15em] text-[var(--color-blue)]">
                      <span>{c.level}</span>
                      <span className="text-[var(--color-line)]">·</span>
                      <span className="text-[var(--color-slate)]">{c.topic}</span>
                    </div>
                    <h3 className="mt-3 font-display text-[22px] font-extrabold leading-tight tracking-[-0.01em] text-[var(--color-ink)] group-hover:text-[var(--color-blue)]">
                      {c.title}
                    </h3>
                    {c.shortDescription && (
                      <p className="mt-3 line-clamp-3 text-[15px] leading-relaxed text-[var(--color-slate)]">
                        {c.shortDescription}
                      </p>
                    )}
                    <div className="mt-auto flex items-center gap-4 pt-5 text-[13px] text-[var(--color-slate)]">
                      <span>{c.lessonsCount} lesson{c.lessonsCount === 1 ? "" : "s"}</span>
                      {c.durationMin > 0 && (
                        <>
                          <span className="text-[var(--color-line)]">·</span>
                          <span>{c.durationMin} min</span>
                        </>
                      )}
                      {c.instructorName && (
                        <>
                          <span className="text-[var(--color-line)]">·</span>
                          <span className="truncate">{c.instructorName}</span>
                        </>
                      )}
                    </div>
                  </div>
                </Link>
              ))}
            </div>
          )}
        </Container>
      </section>
    </>
  );
}

function EmptyState({ signedIn = false }: { signedIn?: boolean }) {
  return (
    <div className="mx-auto max-w-3xl space-y-8 text-[16px] leading-relaxed text-[var(--color-ink)]">
      <div className="rounded-2xl border border-[var(--color-line)] bg-[var(--color-mist)]/40 p-8 md:p-10">
        <h2 className="font-display text-[24px] font-bold tracking-tight text-[var(--color-navy)] md:text-[28px]">
          What to expect at launch
        </h2>
        <ul className="mt-5 space-y-3 text-[var(--color-slate)]">
          {[
            "Structured learning paths from foundation to sub-specialty.",
            "Short-form video lessons authored by surgeons who operate.",
            "Case-based decision points and module quizzes.",
            "CPD-accredited certificates suitable for revalidation.",
            "Free core access for vetted OrthoGlobe members.",
          ].map((t) => (
            <li key={t} className="flex gap-3">
              <span className="mt-2 inline-block h-1.5 w-1.5 flex-none rounded-full bg-[var(--color-blue)]" />
              {t}
            </li>
          ))}
        </ul>
      </div>
      <p>
        We do not list courses, faculty, or syllabi until the content is authored and reviewed.
        If you would like to be notified the moment the first module is published — or if you
        teach orthopaedics and would like to contribute as faculty — please apply for membership
        and mention Academy in your statement of interest.
      </p>
      <div className="flex flex-wrap items-center gap-4 pt-2">
        {!signedIn && <Button href="/join">Join OrthoGlobe</Button>}
        <Button href="/products/academy" variant={signedIn ? "primary" : "ghost"}>
          Back to Academy
        </Button>
      </div>
    </div>
  );
}
