import type { Metadata } from "next";
import { notFound } from "next/navigation";
import Link from "next/link";
import { Container } from "@/components/Container";
import { AtlasHero } from "@/components/atlas/AtlasHero";
import { ConditionCard } from "@/components/atlas/ConditionCard";
import {
  getPublishedRegionBySlug,
  listPublishedConditions,
} from "@/lib/atlas/queries";

type Params = { slug: string };

export const dynamic = "force-dynamic";

export async function generateMetadata({
  params,
}: {
  params: Promise<Params>;
}): Promise<Metadata> {
  const { slug } = await params;
  const region = await getPublishedRegionBySlug(slug);
  if (!region) return { title: "Region not found" };
  return {
    title: `${region.name} — OrthoGlobe Atlas`,
    description: region.summary,
  };
}

export default async function AtlasRegionDetailPage({
  params,
}: {
  params: Promise<Params>;
}) {
  const { slug } = await params;
  const region = await getPublishedRegionBySlug(slug);
  if (!region) notFound();

  const allConditions = await listPublishedConditions();
  const conditionsInRegion = allConditions
    .filter((c) => c.regionSlug === region.slug)
    .sort((a, b) => a.name.localeCompare(b.name));

  return (
    <>
      <AtlasHero
        eyebrow={`Atlas · ${region.name}`}
        title={region.name}
        lede={region.summary}
        backHref="/products/atlas/regions"
        backLabel="All regions"
      />

      <section className="bg-white py-10 md:py-14">
        <Container>
          <div className="mx-auto max-w-6xl">
            <div className="flex items-end justify-between gap-6">
              <div>
                <div className="text-[11px] font-bold uppercase tracking-wider text-[var(--color-blue)]">
                  Conditions
                </div>
                <h2 className="mt-3 font-display text-[28px] font-extrabold tracking-tight text-[var(--color-ink)] md:text-[34px]">
                  {conditionsInRegion.length} condition
                  {conditionsInRegion.length === 1 ? "" : "s"} in this region
                </h2>
              </div>
              <Link
                href="/products/atlas/conditions"
                className="hidden text-[14px] font-semibold text-[var(--color-blue)] underline underline-offset-2 hover:text-[var(--color-blue-deep)] md:inline"
              >
                Browse all conditions →
              </Link>
            </div>

            {conditionsInRegion.length === 0 ? (
              <p className="mt-10 rounded-xl border border-dashed border-[var(--color-line)] bg-[var(--color-mist)]/40 p-10 text-center text-[15px] text-[var(--color-slate)]">
                Conditions for this region are in progress.
              </p>
            ) : (
              <div className="mt-10 grid gap-5 md:grid-cols-2 lg:grid-cols-3">
                {conditionsInRegion.map((c, i) => (
                  <ConditionCard
                    key={c.slug}
                    slug={c.slug}
                    name={c.name}
                    summary={c.summary}
                    category={c.category}
                    index={i}
                  />
                ))}
              </div>
            )}
          </div>
        </Container>
      </section>
    </>
  );
}
