// Backend content is fetched only when a request arrives.
export const dynamic = 'force-dynamic';

import Link from 'next/link';
import type { Metadata } from 'next';
import { paths } from '@justice-choice/seo-engine';
import { api } from '@/lib/api';
import { fmtNumber } from '@/lib/format';
import { pageMetadata } from '@/lib/meta';
import type { CityListItem, SeoMeta } from '@/lib/types';
import { Breadcrumbs } from '@/components/Breadcrumbs';
import { ArrowRightIcon, CompassIcon, MapPinIcon } from '@/components/Icons';

type Props = { params: Promise<{ country: string; region: string }> };
type RegionData = { region: { name: string; slug: string; code: string | null }; country: { name: string; slug: string }; intro: string | null; cities: CityListItem[]; seo: SeoMeta | null };

const load = (country: string, region: string) => api<RegionData>(`/regions/${encodeURIComponent(region)}?country=${encodeURIComponent(country)}`);

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { country, region } = await params;
  const d = await load(country, region);
  return pageMetadata(d.seo, { path: paths.region(country, region), title: `Lawyers in ${d.region.name}` });
}

export default async function RegionPage({ params }: Props) {
  const { country, region } = await params;
  const d = await load(country, region);
  return (
    <div className="mx-auto max-w-4xl px-4 py-8 sm:px-6 sm:py-10">
      <Breadcrumbs items={[{ label: 'Home', href: '/' }, { label: d.country.name, href: paths.country(country) }, { label: d.region.name, href: paths.region(country, region) }]} />
      <p className="eyebrow mt-6">
        <CompassIcon className="h-3.5 w-3.5" /> Region{d.region.code ? ` · ${d.region.code}` : ''}
      </p>
      <h1 className="mt-3 font-serif text-[2.25rem] font-semibold leading-[1.1] tracking-tight sm:text-[2.75rem]">
        Lawyers in {d.region.name}, {d.country.name}
      </h1>
      {d.intro && <p className="mt-4 text-lg leading-relaxed text-ink-2">{d.intro}</p>}
      {d.cities.length ? (
        <ul className="mt-8 grid gap-3 sm:grid-cols-2">
          {d.cities.map((c) => (
            <li key={c.slug}>
              <Link href={c.path} className="card card-hover group flex items-center gap-3 p-4">
                <span className="grid h-10 w-10 shrink-0 place-items-center rounded-lg bg-sunken text-muted transition-colors group-hover:bg-ledger-soft group-hover:text-ledger">
                  <MapPinIcon className="h-5 w-5" />
                </span>
                <span className="min-w-0 flex-1">
                  <span className="block truncate font-semibold">{c.name}</span>
                  <span className="num block text-sm text-muted">{fmtNumber(c.lawyers)} lawyers</span>
                </span>
                <ArrowRightIcon className="h-4 w-4 text-muted transition-all group-hover:translate-x-0.5 group-hover:text-ledger" />
              </Link>
            </li>
          ))}
        </ul>
      ) : (
        <p className="card mt-8 p-6 text-ink-2">No cities with published lawyers in this region yet.</p>
      )}
    </div>
  );
}