import type { ReactNode } from 'react';
import { MARK_PATHS } from '@/components/brand/Logo';
import { MAP_HEIGHT, MAP_WIDTH, worldPaths } from '@/lib/map-geo';

/**
 * Shared building blocks for the OG/Twitter images (next/og ImageResponse → Satori). Satori supports a flex
 * subset of CSS and inline SVG; no CSS variables, so colours are literal. Dark editorial background, the brand
 * mark, a faint world map (Equal Earth, world-atlas 110m) as the "wallpaper" motif. Fonts: Satori's bundled
 * default sans (loading Google fonts at build would make the build network-dependent — avoided on purpose).
 */
export const OG_BG = '#151513';
export const OG_INK = '#f2f0ea';
export const OG_INK2 = '#c9c6bd';
export const OG_INK3 = '#8a877f';
export const OG_ACCENT = '#5598e7';
export const OG_RULE = '#2c2b28';
export const OG_LAND = '#26364a';
export const OG_LAND_STROKE = '#151513';

export function OgMark({ size = 96, color = OG_ACCENT }: { size?: number; color?: string }) {
  const m = MARK_PATHS;
  return (
    <svg width={size} height={size} viewBox="0 0 32 32" fill="none" stroke={color} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
      <circle cx={m.ring.cx} cy={m.ring.cy} r={m.ring.r} />
      <ellipse cx={m.meridian.cx} cy={m.meridian.cy} rx={m.meridian.rx} ry={m.meridian.ry} strokeWidth={1.2} opacity="0.5" />
      <path d={m.tropic} strokeWidth={1.2} opacity="0.5" />
      <path d={m.equator} />
      <path d={m.legs} />
    </svg>
  );
}

/** Large, faint globe with meridians and parallels, positioned at the right edge (kept for the entity cards). */
export function OgMeridians({ size = 760, x = 640, y = -80 }: { size?: number; x?: number; y?: number }) {
  return (
    <svg width={size} height={size} viewBox="0 0 200 200" fill="none" stroke={OG_ACCENT} strokeWidth={0.6} style={{ position: 'absolute', left: x, top: y, opacity: 0.35 }}>
      <circle cx="100" cy="100" r="96" />
      <ellipse cx="100" cy="100" rx="64" ry="96" />
      <ellipse cx="100" cy="100" rx="32" ry="96" />
      <line x1="100" y1="4" x2="100" y2="196" />
      <line x1="4" y1="100" x2="196" y2="100" />
      <ellipse cx="100" cy="100" rx="96" ry="48" />
      <ellipse cx="100" cy="100" rx="96" ry="80" />
      <path d="M12 60h176M12 140h176" opacity="0.7" />
    </svg>
  );
}

/**
 * Faint world map wallpaper: every country of the 110m atlas as a filled path (Equal Earth), plus the sphere
 * outline and a light graticule. `width` in px; positioned absolutely by the caller through `style`.
 * `highlight` (ISO3 list) fills those countries in the accent colour.
 */
export function OgWorldMap({ width = 1320, style, opacity = 0.9, highlight = [] }: { width?: number; style?: React.CSSProperties; opacity?: number; highlight?: string[] }) {
  const { paths, sphere } = worldPaths();
  const height = Math.round((width * MAP_HEIGHT) / MAP_WIDTH);
  const hl = new Set(highlight);
  return (
    <svg width={width} height={height} viewBox={`0 0 ${MAP_WIDTH} ${MAP_HEIGHT}`} style={{ position: 'absolute', opacity, ...style }}>
      <path d={sphere} fill="#191a1c" stroke={OG_RULE} strokeWidth={1} />
      {[-60, -30, 0, 30, 60].map((lat) => {
        const y = MAP_HEIGHT / 2 - (lat / 90) * (MAP_HEIGHT / 2) * 0.98;
        return <line key={lat} x1={0} x2={MAP_WIDTH} y1={y} y2={y} stroke={OG_RULE} strokeWidth={0.6} />;
      })}
      {paths.map((p, i) => (
        <path key={p.iso3 ?? i} d={p.d} fill={p.iso3 && hl.has(p.iso3) ? OG_ACCENT : OG_LAND} stroke={OG_LAND_STROKE} strokeWidth={0.5} />
      ))}
    </svg>
  );
}

export function OgFrame({ children, map = false, highlight }: { children: ReactNode; map?: boolean; highlight?: string[] }) {
  return (
    <div style={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'column', background: OG_BG, color: OG_INK, position: 'relative', overflow: 'hidden', padding: 64, fontFamily: 'sans-serif' }}>
      {map ? <OgWorldMap width={1320} style={{ left: -60, top: 40 }} opacity={0.55} highlight={highlight} /> : <OgMeridians />}
      <div style={{ position: 'absolute', left: 64, right: 64, bottom: 56, height: 1, background: OG_RULE }} />
      {children}
    </div>
  );
}

export function OgWordmark({ size = 34 }: { size?: number }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
      <OgMark size={size * 1.35} />
      <div style={{ display: 'flex', fontSize: size, letterSpacing: -0.5 }}>
        <span style={{ fontWeight: 400 }}>Country</span>
        <span style={{ fontWeight: 700 }}>Atlas</span>
      </div>
    </div>
  );
}

/** Row of three or four headline figures: label above, big number below (used by the default share card). */
export function OgFigures({ items }: { items: Array<{ label: string; value: string }> }) {
  return (
    <div style={{ display: 'flex', gap: 56 }}>
      {items.map((it) => (
        <div key={it.label} style={{ display: 'flex', flexDirection: 'column' }}>
          <div style={{ fontSize: 18, color: OG_INK3, textTransform: 'uppercase', letterSpacing: 1.6, display: 'flex' }}>{it.label}</div>
          <div style={{ fontSize: 44, fontWeight: 600, marginTop: 6, display: 'flex' }}>{it.value}</div>
        </div>
      ))}
    </div>
  );
}