/**
 * Region (state/province) dealer listing. Public URL: {apex}/dealers/{region}.
 * Only regions meeting MIN_DEALERS_FOR_REGION_PAGE get pages; everything
 * else 404s (and lives inline on the hub instead). Unknown slugs 404 —
 * region URLs mint exclusively from lib/region-slugs.ts.
 */
import type { Metadata } from 'next';
import Link from 'next/link';
import { notFound } from 'next/navigation';
import { APEX_CONFIGS, getApexBySlug } from '@/lib/apex-config';
import {
  getDealersForApex,
  groupDealersByRegion,
  MIN_DEALERS_FOR_REGION_PAGE,
  type RegionGroup,
} from '@/lib/dealer-directory';
import { getRegionBySlug } from '@/lib/region-slugs';
import { buildRegionJsonLd } from '@/lib/directory-jsonld';
import { getCanonicalUrl } from '@/lib/seo-utils';
import { ApexHeader } from '@/components/apex/ApexHeader';
import { ApexFooter } from '@/components/apex/ApexFooter';
import { ApexAnalytics } from '@/components/apex/ApexAnalytics';
import { DealerRow } from '@/components/directory/DealerRow';

export const revalidate = 3600;
export const dynamic = 'force-static';
export const dynamicParams = true; // regions appear/disappear with dealer counts

/** City anchor id/href slug — one source so the jump link and target never drift. */
const citySlug = (city: string) => city.toLowerCase().replace(/[^a-z0-9]+/g, '-');

export async function generateStaticParams() {
  const params: Array<{ domainSlug: string; region: string }> = [];
  for (const apex of Object.values(APEX_CONFIGS)) {
    try {
      const dealers = await getDealersForApex(apex.domainPrefix, apex.domain);
      const grouped = groupDealersByRegion(dealers, apex.country);
      // Only domestic (paged) regions are pre-generated and sitemapped.
      // loadRegionGroup also resolves foreign (cross-border) regions so they
      // still render on demand (dynamicParams), but we intentionally do not
      // pre-build or sitemap them — cross-border dealers are an edge case and
      // shouldn't get promoted, country-mismatched region pages.
      for (const g of grouped.paged) {
        params.push({ domainSlug: apex.slug, region: g.region.slug });
      }
    } catch {
      // Build-time DB hiccup: skip pre-generation; dynamicParams renders on demand.
    }
  }
  return params;
}

interface Props {
  params: Promise<{ domainSlug: string; region: string }>;
}

async function loadRegionGroup(
  domainSlug: string,
  regionSlug: string
): Promise<{ apex: NonNullable<ReturnType<typeof getApexBySlug>>; group: RegionGroup } | null> {
  const apex = getApexBySlug(domainSlug);
  const region = getRegionBySlug(regionSlug);
  if (!apex || !region) return null;
  const dealers = await getDealersForApex(apex.domainPrefix, apex.domain);
  const grouped = groupDealersByRegion(dealers, apex.country);
  const group = [...grouped.paged, ...grouped.foreign].find((g) => g.region.slug === region.slug);
  if (!group || group.count < MIN_DEALERS_FOR_REGION_PAGE) return null;
  return { apex, group };
}

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { domainSlug, region } = await params;
  const loaded = await loadRegionGroup(domainSlug, region);
  if (!loaded) return {};
  const { apex, group } = loaded;
  const url = `https://${apex.hostname}/dealers/${group.region.slug}`;
  const title = `AMSOIL Dealers in ${group.region.name} | ${apex.siteName}`;
  const description = `${group.count} independent AMSOIL dealers in ${group.region.name}, grouped by city. Find a dealer near you and visit their site.`;
  // No hreflang here (unlike the hub): regions are country-specific, so a US
  // state has no CA-province counterpart and vice versa. The cross-country
  // sibling URL would 404, and hreflang to a non-200 page is invalid — a bare
  // self-canonical is correct for these pages.
  return {
    title,
    description,
    alternates: { canonical: url },
    openGraph: { type: 'website', url, siteName: apex.siteName, title, description },
  };
}

export default async function RegionPage({ params }: Props) {
  const { domainSlug, region } = await params;
  const loaded = await loadRegionGroup(domainSlug, region);
  if (!loaded) notFound();
  const { apex, group } = loaded;

  const jsonLd = buildRegionJsonLd(
    apex,
    group.region,
    group.cities.flatMap((c) =>
      c.dealers.map((d) => ({
        businessName: d.businessName,
        city: d.city,
        state: d.state,
        url: getCanonicalUrl(d),
      }))
    )
  );

  return (
    <div className="min-h-screen bg-white text-[#1a1a1a]">
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      />
      <ApexHeader apex={apex} />
      <main id="main" className="mx-auto max-w-5xl px-4 pb-16 sm:px-6 md:pb-20">
        <nav className="pt-6 text-sm text-[#595959] md:pt-8" aria-label="Breadcrumb">
          <ol className="flex flex-wrap items-center gap-2">
            <li>
              <Link
                href="/dealers"
                className="rounded px-1 py-0.5 -mx-1 font-medium text-[#093b66] transition-colors hover:text-[#0d5a99] hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#093b66]"
              >
                Dealers
              </Link>
            </li>
            <li aria-hidden>›</li>
            <li aria-current="page">{group.region.name}</li>
          </ol>
        </nav>
        <h1 className="mt-3 text-3xl font-extrabold uppercase tracking-tight text-[#093b66] md:text-4xl">
          AMSOIL Dealers in {group.region.name}
        </h1>
        <p className="mt-2 mb-8 text-[#595959] md:mb-10">
          {group.count} independent dealers across {group.cities.length}{' '}
          {group.cities.length === 1 ? 'city' : 'cities'}
        </p>

        <div className="flex flex-col gap-6 lg:flex-row lg:gap-8">
          {/* City jump nav */}
          <aside className="lg:w-48 lg:flex-shrink-0">
            <nav
              aria-label="Cities"
              className="flex flex-wrap gap-2 lg:sticky lg:top-24 lg:block lg:rounded-lg lg:border lg:border-[#c6c6c6] lg:bg-[#f0f0f0] lg:p-5"
            >
              <h2 className="hidden text-sm font-semibold uppercase tracking-[0.08em] text-[#595959] lg:mb-3 lg:block">
                Cities
              </h2>
              <ul className="flex flex-wrap gap-2 lg:block lg:space-y-0">
                {group.cities.map((c) => (
                  <li key={c.city}>
                    <a
                      href={`#${citySlug(c.city)}`}
                      className="rounded-full border border-[#c6c6c6] bg-white px-3 py-1 text-sm font-medium text-[#093b66] transition-colors hover:border-[#f8981d] hover:text-[#0d5a99] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#093b66] lg:block lg:border-0 lg:bg-transparent lg:px-0 lg:py-1"
                    >
                      {c.city} ({c.dealers.length})
                    </a>
                  </li>
                ))}
              </ul>
            </nav>
          </aside>

          {/* City-grouped listings */}
          <div className="min-w-0 flex-1">
            {group.cities.map((c) => (
              <section key={c.city} id={citySlug(c.city)} className="scroll-mt-20">
                <h2 className="mb-3 mt-8 border-b border-[#d1d1d1] pb-2 text-lg font-bold tracking-tight text-[#093b66] first:mt-0">
                  {c.city} <span className="font-normal text-[#757575]">({c.dealers.length})</span>
                </h2>
                <ul>
                  {c.dealers.map((d) => (
                    <li key={`${d.subdomain}`}>
                      <DealerRow dealer={d} />
                    </li>
                  ))}
                </ul>
              </section>
            ))}
          </div>
        </div>
      </main>
      <ApexFooter apex={apex} />
      <ApexAnalytics />
    </div>
  );
}