import type { Metadata } from 'next';
import Link from 'next/link';
import { WorldMap } from '@/components/charts/world-map';
import { CountryChip } from '@/components/ui/badges';
import { Container, PageHeader, Unavailable } from '@/components/ui/section';
import { api, safe } from '@/lib/api';
import { cn } from '@/lib/cn';
import { fmtInt, fmtPctSigned, fmtScore, num } from '@/lib/format';
import { routes } from '@/lib/site';

export const metadata: Metadata = { title: 'Country atlas', description: 'Activity, hiring, expansion and industry mix of monitored companies by country.' };
export const revalidate = 300;

export default async function CountriesPage() {
  const [data, map] = await Promise.all([safe(api.countries()), safe(api.map('events_30d'))]);
  return (
    <Container wide>
      <PageHeader eyebrow="Country atlas" title="Countries" lede="Monitored companies by headquarters country: activity, structured events, hiring momentum and industry mix. Coverage differs by country — compare trends, not absolute counts." />
      {map?.buckets.length ? <WorldMap buckets={map.buckets} className="mb-8" /> : null}
      {!data ? (
        <Unavailable what="Countries" />
      ) : (
        <>
          <div className="table-scroll hidden md:block">
            <table className="data-table">
              <thead>
                <tr>
                  <th>Country</th>
                  <th>Region</th>
                  <th className="num">Companies</th>
                  <th className="num">Events 7 d</th>
                  <th className="num">Events 30 d</th>
                  <th className="num">Activity</th>
                  <th className="num">Hiring 30 d</th>
                  <th>Industry mix</th>
                </tr>
              </thead>
              <tbody>
                {data.items.map((c) => {
                  const h = num(c.hiring_momentum_30d);
                  return (
                    <tr key={c.code}>
                      <td className="primary">
                        <Link href={routes.country(c.code)} className="row-link inline-flex items-center gap-2">
                          <CountryChip code={c.code} link={false} /> {c.name}
                        </Link>
                      </td>
                      <td className="text-ink-2">{c.region ?? '—'}</td>
                      <td className="num tnum">{fmtInt(c.companies)}</td>
                      <td className="num tnum">{fmtInt(c.events_7d)}</td>
                      <td className="num tnum">{fmtInt(c.events_30d)}</td>
                      <td className="num tnum">{fmtScore(c.activity_score)}</td>
                      <td className={cn('num tnum', h !== null && (h > 0 ? 'text-positive' : h < 0 ? 'text-danger' : ''))}>{h === null ? '—' : fmtPctSigned(h)}</td>
                      <td className="text-xs text-ink-2">{c.industry_mix.slice(0, 3).map((m) => `${m.industry.replace(/-/g, ' ')} ${m.companies}`).join(' · ')}</td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
          <ul className="divide-y divide-rule border-y border-rule md:hidden">
            {data.items.map((c) => (
              <li key={c.code}>
                <Link href={routes.country(c.code)} className="block py-3">
                  <p className="flex items-center gap-2 text-[15px] font-medium text-ink">
                    <CountryChip code={c.code} link={false} /> {c.name}
                  </p>
                  <p className="tnum mt-0.5 text-xs text-ink-3">
                    {fmtInt(c.companies)} companies · {fmtInt(c.events_30d)} events 30 d · activity {fmtScore(c.activity_score)} · hiring {fmtPctSigned(c.hiring_momentum_30d, 0)}
                  </p>
                </Link>
              </li>
            ))}
          </ul>
        </>
      )}
    </Container>
  );
}