import { t } from '@/i18n';
import { cn } from '@/lib/cn';
import { MAP_HEIGHT, MAP_WIDTH, isoLookupFromCountries, worldPaths } from '@/lib/map-geo';
import type { CountrySummary } from '@/lib/types';

/**
 * Server-rendered world map highlighting a group's members (accent) against the other countries (surface-2).
 * Static SVG — no hover layer needed, the members table below carries the detail.
 */
export function MemberMap({ members, countries, name, className }: { members: string[]; countries: CountrySummary[]; name: string; className?: string }) {
  const { paths, sphere } = worldPaths();
  const numeric = isoLookupFromCountries(countries as Array<{ id: string; iso_numeric?: string | null }>);
  const set = new Set(members);
  const summary = t('region.map.summary', { n: members.length, name });
  return (
    <figure className={cn('min-w-0', className)}>
      <div className="relative w-full" style={{ aspectRatio: `${MAP_WIDTH} / ${MAP_HEIGHT}` }}>
        <svg viewBox={`0 0 ${MAP_WIDTH} ${MAP_HEIGHT}`} className="h-full w-full" role="img" aria-label={summary}>
          <title>{summary}</title>
          <path d={sphere} fill="var(--surface)" stroke="var(--rule)" strokeWidth={1} />
          <g stroke="var(--surface)" strokeWidth={0.6} strokeLinejoin="round">
            {paths.map((p, i) => {
              const iso3 = p.iso3 ?? (p.numeric ? numeric.get(p.numeric) ?? null : null);
              const on = iso3 ? set.has(iso3) : false;
              return <path key={iso3 ?? `${p.name}-${i}`} d={p.d} fill={on ? 'var(--accent)' : 'var(--nodata)'} fillOpacity={on ? 0.9 : 0.55} />;
            })}
          </g>
        </svg>
      </div>
      <figcaption className="mt-2 flex flex-wrap items-center gap-x-3 text-2xs text-ink-2">
        <span className="inline-flex items-center gap-1">
          <span aria-hidden className="inline-block h-2.5 w-3.5 rounded-xs bg-accent" /> {name}
        </span>
        <span className="inline-flex items-center gap-1">
          <span aria-hidden className="inline-block h-2.5 w-3.5 rounded-xs bg-nodata" /> {t('chart.legend.noData')}
        </span>
      </figcaption>
    </figure>
  );
}