import type { Metadata } from "next";
import Link from "next/link";
import { notFound } from "next/navigation";
import { getCmsProvider } from "@/lib/cms/provider";
import { getRequestCmsProvider } from "@/lib/cms/provider.server";
import { getMockPublicProperties } from "@/lib/core/mock-projection";
import { PropertyCard } from "@/components/property-card";

export async function generateStaticParams() {
  const areas = await getCmsProvider().listAreaGuides();
  return areas.map(({ slug }) => ({ slug }));
}

export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string }>;
}): Promise<Metadata> {
  const area = await (
    await getRequestCmsProvider()
  ).getAreaGuide((await params).slug);
  return area
    ? { title: area.name, description: area.introduction }
    : { title: "Area guide not found" };
}

export default async function AreaGuidePage({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const area = await (
    await getRequestCmsProvider()
  ).getAreaGuide((await params).slug);
  if (!area) notFound();

  const properties = getMockPublicProperties().filter(
    (property) => property.area === area.name,
  );

  return (
    <article>
      <header className="detail-hero detail-hero--editorial">
        <div>
          <p className="eyebrow">Area guide · {area.character}</p>
          <h1>{area.name}</h1>
          <p className="detail-hero__lead">{area.introduction}</p>
        </div>
        <div className="fact-panel">
          <p className="eyebrow">At a glance</p>
          <ul className="plain-list">
            {area.highlights.map((highlight) => (
              <li key={highlight}>{highlight}</li>
            ))}
          </ul>
          <p className="review-note">Editorially reviewed {area.reviewedAt}</p>
        </div>
      </header>
      <section className="section">
        <div className="section-heading">
          <div>
            <p className="eyebrow">Mock CORE projection</p>
            <h2>Properties connected to this area.</h2>
          </div>
          <p>
            Editorial area content and operational property facts remain
            separate, joined only by an approved public area identifier in the
            production design.
          </p>
        </div>
        {properties.length ? (
          <div className="property-grid">
            {properties.map((property) => (
              <PropertyCard
                key={property.publicPropertyId}
                property={property}
              />
            ))}
          </div>
        ) : (
          <div className="empty-state">
            No mock properties are linked to this area.
          </div>
        )}
        <Link className="text-link return-link" href="/areas">
          ← Back to all areas
        </Link>
      </section>
    </article>
  );
}