import Link from 'next/link';
import type { Metadata } from 'next';
import { api } from '@/lib/api';
import { fmtNumber } from '@/lib/format';
import { staticMetadata } from '@/lib/meta';
import { Breadcrumbs } from '@/components/Breadcrumbs';
import { ArrowRightIcon, MapPinIcon, PracticeAreaIcon, ScaleIcon, UsersIcon } from '@/components/Icons';

export const dynamic = 'force-dynamic';

export const metadata: Metadata = staticMetadata({
  title: 'Lawyers by Practice Area',
  description: 'Browse lawyers by practice area on Justice Choice — divorce, family, criminal defense, immigration, personal injury and more — then compare rankings city by city.',
  path: '/practice-areas/',
});

type Area = { id: number; name: string; slug: string; description: string | null; parent_id: number | null; lawyers: number; cities: number; path: string };

export default async function PracticeAreas() {
  const areas = await api<Area[]>('/practice-areas');
  const top = areas.filter((a) => !a.parent_id);
  return (
    <div className="mx-auto max-w-6xl px-4 py-8 sm:px-6 sm:py-10">
      <Breadcrumbs items={[{ label: 'Home', href: '/' }, { label: 'Practice areas', href: '/practice-areas/' }]} />
      <header className="mt-6 max-w-3xl">
        <p className="eyebrow">
          <ScaleIcon className="h-3.5 w-3.5" /> {top.length} areas of law
        </p>
        <h1 className="mt-3 font-serif text-[2.25rem] font-semibold leading-[1.1] tracking-tight sm:text-[2.75rem]">Practice areas</h1>
        <p className="mt-4 text-lg leading-relaxed text-ink-2">Pick the kind of legal problem you have, then compare lawyers in your city.</p>
      </header>
      <ul className="mt-10 grid gap-4 md:grid-cols-2">
        {top.map((a) => {
          const children = areas.filter((c) => c.parent_id === a.id);
          return (
            <li key={a.slug} className="card card-hover group relative flex gap-4 p-5 sm:p-6">
              <span className="grid h-12 w-12 shrink-0 place-items-center rounded-xl bg-ledger-soft text-ledger transition-colors group-hover:bg-ledger group-hover:text-ledger-ink">
                <PracticeAreaIcon slug={a.slug} className="h-6 w-6" />
              </span>
              <div className="min-w-0 flex-1">
                <Link href={a.path} className="font-serif text-xl font-semibold after:absolute after:inset-0 after:content-[''] group-hover:text-ledger">
                  {a.name}
                </Link>
                {a.description && <p className="mt-1 text-sm leading-relaxed text-ink-2">{a.description}</p>}
                {children.length > 0 && (
                  <p className="relative z-10 mt-2 flex flex-wrap items-center gap-1.5 text-sm text-muted">
                    Includes
                    {children.map((c) => (
                      <Link key={c.slug} href={c.path} className="chip px-2 py-0.5 text-xs">
                        {c.name}
                      </Link>
                    ))}
                  </p>
                )}
                <p className="num mt-3 flex flex-wrap gap-x-4 gap-y-1 text-sm text-muted">
                  <span className="inline-flex items-center gap-1.5">
                    <UsersIcon className="h-4 w-4" /> {fmtNumber(a.lawyers)} lawyers
                  </span>
                  <span className="inline-flex items-center gap-1.5">
                    <MapPinIcon className="h-4 w-4" /> {fmtNumber(a.cities)} cities
                  </span>
                </p>
              </div>
              <ArrowRightIcon className="mt-1 h-5 w-5 text-muted transition-all group-hover:translate-x-0.5 group-hover:text-ledger" />
            </li>
          );
        })}
      </ul>
    </div>
  );
}