import { geoEqualEarth, type GeoPermissibleObjects } from 'd3-geo';
import { t } from '@/i18n';
import { cn } from '@/lib/cn';
import { MAP_HEIGHT, MAP_WIDTH, worldPaths } from '@/lib/map-geo';

/**
 * Small static locator map for a country hero: the world in a muted tone, the country (and its neighbours,
 * lighter) in the accent, plus a ring at the capital / centroid so micro-states stay visible. Server component.
 */
export function MiniMap({ iso3, neighbours = [], latitude, longitude, name, className }: { iso3: string; neighbours?: string[]; latitude?: number | null; longitude?: number | null; name: string; className?: string }) {
  const { paths, sphere } = worldPaths();
  const projection = geoEqualEarth().fitExtent(
    [
      [4, 4],
      [MAP_WIDTH - 4, MAP_HEIGHT - 4],
    ],
    { type: 'Sphere' } as GeoPermissibleObjects,
  );
  const pt = latitude != null && longitude != null ? projection([longitude, latitude]) : null;
  const nb = new Set(neighbours);
  const own = paths.find((p) => p.iso3 === iso3);
  return (
    <svg viewBox={`0 0 ${MAP_WIDTH} ${MAP_HEIGHT}`} className={cn('h-auto w-full', className)} role="img" aria-label={t('country.miniMap', { name })}>
      <title>{t('country.miniMap', { name })}</title>
      <path d={sphere} fill="var(--map-water)" stroke="var(--rule)" strokeWidth={1} />
      <g stroke="var(--map-stroke)" strokeWidth={0.5} strokeLinejoin="round">
        {paths.map((p, i) => (
          <path key={p.iso3 ?? `${p.name}-${i}`} d={p.d} fill={p.iso3 === iso3 ? 'var(--accent)' : p.iso3 && nb.has(p.iso3) ? 'var(--accent-soft)' : 'var(--nodata)'} fillOpacity={p.iso3 === iso3 ? 1 : p.iso3 && nb.has(p.iso3) ? 1 : 0.7} />
        ))}
        {own ? <path d={own.d} fill="none" stroke="var(--ink)" strokeWidth={0.8} /> : null}
      </g>
      {pt ? (
        <g>
          <circle cx={pt[0]} cy={pt[1]} r={14} fill="none" stroke="var(--accent)" strokeWidth={2.5} opacity={0.9} />
          <circle cx={pt[0]} cy={pt[1]} r={4} fill="var(--accent)" stroke="var(--surface)" strokeWidth={1.5} />
        </g>
      ) : null}
    </svg>
  );
}