// 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 { CountryPage } from '@/lib/types';
import { Breadcrumbs } from '@/components/Breadcrumbs';
import { Section, Stat } from '@/components/Section';
import { Beacon } from '@/components/Beacon';
import { ArrowRightIcon, BadgeCheckIcon, BuildingIcon, CompassIcon, GlobeIcon, MapPinIcon, PracticeAreaIcon, ScaleIcon, UsersIcon } from '@/components/Icons';

type Props = { params: Promise<{ country: string }> };

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

export default async function CountryPageView({ params }: Props) {
  const { country } = await params;
  const d = await api<CountryPage>(`/countries/${encodeURIComponent(country)}`);
  return (
    <div className="mx-auto max-w-6xl px-4 py-8 sm:px-6 sm:py-10">
      <Beacon />
      <Breadcrumbs items={[{ label: 'Home', href: '/' }, { label: d.country.name, href: paths.country(country) }]} />
      <header className="mt-6 grid gap-8 border-b border-rule pb-10 lg:grid-cols-[1.4fr_1fr]">
        <div>
          <p className="eyebrow">
            <GlobeIcon className="h-3.5 w-3.5" /> Country directory
          </p>
          <h1 className="mt-3 font-serif text-[2.25rem] font-semibold leading-[1.1] tracking-tight sm:text-[2.75rem]">Lawyers in {d.country.name}</h1>
          <p className="mt-4 max-w-2xl text-lg leading-relaxed text-ink-2">{d.intro ?? `Find and compare licensed lawyers across ${d.cities.length} cities in ${d.country.name}.`}</p>
        </div>
        <dl className="card grid grid-cols-1 gap-5 self-end p-5 sm:grid-cols-3 lg:grid-cols-1 xl:grid-cols-3">
          <Stat value={fmtNumber(d.stats.lawyers)} label="lawyers" icon={<UsersIcon className="h-5 w-5" />} />
          <Stat value={fmtNumber(d.stats.verified)} label="verified" icon={<BadgeCheckIcon className="h-5 w-5" />} />
          <Stat value={fmtNumber(d.stats.firms)} label="firms" icon={<BuildingIcon className="h-5 w-5" />} />
        </dl>
      </header>

      <div className="mt-10 grid gap-12 lg:grid-cols-[1.4fr_1fr]">
        <Section title="Cities" icon={<MapPinIcon className="h-4 w-4" />}>
          <ul className="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 · {fmtNumber(c.verified)} verified
                    </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>
        </Section>
        <div className="space-y-12">
          <Section title="Practice areas" icon={<ScaleIcon className="h-4 w-4" />}>
            <ul className="card divide-y divide-rule overflow-hidden">
              {d.practiceAreas.map((a) => (
                <li key={a.slug}>
                  <Link href={paths.practiceArea(a.slug)} className="group flex items-center gap-3 px-4 py-3 transition-colors hover:bg-paper">
                    <PracticeAreaIcon slug={a.slug} className="h-4 w-4 text-muted group-hover:text-ledger" />
                    <span className="flex-1 font-medium group-hover:text-ledger">{a.name}</span>
                    <span className="num text-sm text-muted">{fmtNumber(a.lawyers)}</span>
                  </Link>
                </li>
              ))}
            </ul>
          </Section>
          {d.regions.length > 1 && (
            <Section title="Regions" icon={<CompassIcon className="h-4 w-4" />}>
              <ul className="flex flex-wrap gap-2">
                {d.regions.map((r) => (
                  <li key={r.slug}>
                    <Link href={r.path} className="chip">
                      {r.name} <span className="num text-xs text-muted">{fmtNumber(r.lawyers)}</span>
                    </Link>
                  </li>
                ))}
              </ul>
            </Section>
          )}
        </div>
      </div>
    </div>
  );
}