/**
 * Share images (Open Graph / Twitter), rendered by Satori through `next/og`.
 *
 * One render function per family — `renderSiteOg`, `renderCompanyOg`, `renderTopicOg` — used by thin route files
 * (`opengraph-image.tsx` + `twitter-image.tsx` at the root, under `/company/[slug]`, `/industry/[slug]`,
 * `/country/[code]`). Route files export only `alt`/`size`/`contentType` + the default function; nothing else is
 * re-exported between them (re-exporting `runtime` between sibling metadata routes broke sibling builds).
 *
 * Satori rules honoured here: every box is `display:flex`; a div never mixes several text children (wrap in spans);
 * images are data URIs; fonts are Geist TTFs read from the `geist` package at first use.
 */
import { existsSync } from 'node:fs';
import * as fs from 'node:fs/promises';
import { createRequire } from 'node:module';
import path from 'node:path';
import { geoGraticule, geoOrthographic, geoPath } from 'd3-geo';
import { ImageResponse } from 'next/og';
import { feature } from 'topojson-client';
import type { GeometryCollection, Topology } from 'topojson-specification';
import land110 from 'world-atlas/land-110m.json';
import { MARK_DARK, MarkImg } from '@/components/brand/mark';
import { API_URL } from '@/lib/api';
import { countryName } from '@/lib/countries';
import { fmtInt, fmtPctSigned, fmtScore, num } from '@/lib/format';
import { logoCandidates, monogram } from '@/lib/profile';
import { HOST_NAME, SITE_NAME, SITE_URL, TAGLINE } from '@/lib/site';
import type { CompanyDetail, Stats } from '@/lib/types';

export const OG_SIZE = { width: 1200, height: 630 };
export const OG_CONTENT_TYPE = 'image/png';
export const OG_ALT = `${SITE_NAME} — ${TAGLINE}`;

/* Palette: the dark theme tokens of globals.css, hard-coded (Satori has no CSS variables). */
const P = {
  bg: '#0a0d12',
  surface: '#11151c',
  surface2: '#171c25',
  ink: '#e8ebf1',
  ink2: '#a3a9b8',
  ink3: '#6f7688',
  rule: 'rgba(190,200,225,0.14)',
  ruleStrong: 'rgba(190,200,225,0.26)',
  accent: '#6d95ff',
  live: '#3fd07a',
  positive: '#3fd07a',
  danger: '#ff6b74',
};
const SANS = 'Geist';
const MONO = 'Geist Mono';
const HOST = SITE_URL.replace(/^https?:\/\//, '');

/* ------------------------------------------------------------------------------------------------------------------ */
/* Fonts                                                                                                               */
/* ------------------------------------------------------------------------------------------------------------------ */
type Font = { name: string; data: ArrayBuffer; weight: 400 | 500 | 600; style: 'normal' };

function geistFontsDir(): string | null {
  const cwd = process.cwd();
  for (const base of [cwd, path.join(cwd, 'apps', 'web'), path.resolve(cwd, '..', '..')]) {
    const p = path.join(base, 'node_modules', 'geist', 'dist', 'fonts');
    if (existsSync(p)) return p;
  }
  try {
    const req = createRequire(path.join(cwd, 'index.js'));
    return path.join(path.dirname(req.resolve('geist/font')), 'fonts');
  } catch {
    return null;
  }
}

let fontsPromise: Promise<Font[]> | null = null;
/** Geist Regular / Medium / SemiBold + Geist Mono Medium. Missing files degrade to Satori's default font. */
export function loadFonts(): Promise<Font[]> {
  fontsPromise ??= (async () => {
    const dir = geistFontsDir();
    if (!dir) return [];
    const wanted: [string, string, Font['weight']][] = [
      ['geist-sans/Geist-Regular.ttf', SANS, 400],
      ['geist-sans/Geist-Medium.ttf', SANS, 500],
      ['geist-sans/Geist-SemiBold.ttf', SANS, 600],
      ['geist-mono/GeistMono-Medium.ttf', MONO, 500],
    ];
    const out: Font[] = [];
    for (const [file, name, weight] of wanted) {
      try {
        // Runtime lookup on purpose (fonts come from node_modules/geist, which is not deployed as a traced asset); plain
        // string concatenation keeps Turbopack's output-file tracing from pulling the whole project in.
        const buf = await fs.readFile(/*turbopackIgnore: true*/ `${dir}/${file}`);
        out.push({ name, data: buf.buffer.slice(buf.byteOffset, buf.byteOffset + buf.byteLength) as ArrayBuffer, weight, style: 'normal' });
      } catch {
        /* font missing → skip */
      }
    }
    return out;
  })();
  return fontsPromise;
}

async function respond(node: React.ReactElement): Promise<ImageResponse> {
  const fonts = await loadFonts();
  return new ImageResponse(node, { ...OG_SIZE, fonts: fonts.length ? fonts : undefined });
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* Globe wireframe (orthographic land + graticule) — the "atlas" backdrop on the right of every share image           */
/* ------------------------------------------------------------------------------------------------------------------ */
let globeCache: string | null = null;
function globeDataUri(): string {
  if (globeCache) return globeCache;
  const W = 760;
  const H = 760;
  const R = 340;
  const projection = geoOrthographic()
    .rotate([-12, -28, 0])
    .scale(R)
    .translate([W / 2, H / 2])
    .clipAngle(90);
  const pathOf = geoPath(projection);
  const topo = land110 as unknown as Topology<{ land: GeometryCollection }>;
  const land = feature(topo, topo.objects.land);
  const graticule = geoGraticule().step([15, 15])();
  const sphere = pathOf({ type: 'Sphere' }) ?? '';
  const svg =
    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${W} ${H}" width="${W}" height="${H}">` +
    `<defs><radialGradient id="g" cx="38%" cy="32%" r="75%"><stop offset="0" stop-color="#1b2433"/><stop offset="1" stop-color="#0a0d12"/></radialGradient></defs>` +
    `<path d="${sphere}" fill="url(#g)"/>` +
    `<path d="${pathOf(graticule) ?? ''}" fill="none" stroke="rgba(190,200,225,0.16)" stroke-width="1"/>` +
    `<path d="${pathOf(land) ?? ''}" fill="rgba(190,200,225,0.13)" stroke="rgba(190,200,225,0.32)" stroke-width="1"/>` +
    `<path d="${sphere}" fill="none" stroke="rgba(190,200,225,0.34)" stroke-width="2"/>` +
    `</svg>`;
  globeCache = `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`;
  return globeCache;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* Building blocks                                                                                                     */
/* ------------------------------------------------------------------------------------------------------------------ */
type Style = React.CSSProperties;
const row = (extra?: Style): Style => ({ display: 'flex', flexDirection: 'row', alignItems: 'center', ...extra });
const col = (extra?: Style): Style => ({ display: 'flex', flexDirection: 'column', ...extra });

function Frame({ children, globe = 'right' }: { children: React.ReactNode; globe?: 'right' | 'corner' | 'none' }) {
  return (
    <div style={{ ...col({ justifyContent: 'space-between' }), width: OG_SIZE.width, height: OG_SIZE.height, padding: 56, background: P.bg, color: P.ink, fontFamily: SANS, position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', left: 0, top: 0, width: 1200, height: 630, display: 'flex', backgroundImage: `linear-gradient(to right, rgba(190,200,225,0.045) 1px, transparent 1px), linear-gradient(to bottom, rgba(190,200,225,0.045) 1px, transparent 1px)`, backgroundSize: '60px 60px' }} />
      {globe !== 'none' && (
        // eslint-disable-next-line @next/next/no-img-element
        <img src={globeDataUri()} width={760} height={760} alt="" style={globe === 'right' ? { position: 'absolute', right: -170, top: -40, width: 760, height: 760, opacity: 0.95 } : { position: 'absolute', right: -300, top: 230, width: 760, height: 760, opacity: 0.8 }} />
      )}
      <div style={{ position: 'absolute', left: 0, top: 0, width: 1200, height: 630, display: 'flex', backgroundImage: 'linear-gradient(to right, rgba(10,13,18,0.9) 40%, rgba(10,13,18,0.35) 70%, rgba(10,13,18,0) 100%)' }} />
      <div style={{ position: 'absolute', left: 0, bottom: 0, width: 1200, height: 6, display: 'flex', background: `linear-gradient(to right, ${P.live}, ${P.accent})` }} />
      {children}
    </div>
  );
}

/** Mark + wordmark, in Geist: "Company" regular ink-2, "Atlas" semibold ink. */
function Lockup({ markPx = 44, fontSize = 26 }: { markPx?: number; fontSize?: number }) {
  return (
    <div style={row({ gap: Math.round(markPx * 0.3) })}>
      <MarkImg px={markPx} colors={MARK_DARK} />
      <div style={row({ gap: Math.round(fontSize * 0.28), fontSize, letterSpacing: -0.6 })}>
        <span style={{ color: P.ink2, fontWeight: 400 }}>Company</span>
        <span style={{ color: P.ink, fontWeight: 600 }}>Atlas</span>
      </div>
    </div>
  );
}

function LivePill({ label = 'LIVE' }: { label?: string }) {
  return (
    <div style={row({ gap: 10, padding: '8px 14px', borderRadius: 999, border: `1px solid rgba(63,208,122,0.4)`, background: 'rgba(63,208,122,0.08)', color: P.live, fontSize: 16, fontFamily: MONO, letterSpacing: 2 })}>
      <div style={{ width: 10, height: 10, borderRadius: 10, background: P.live, display: 'flex' }} />
      <span>{label}</span>
    </div>
  );
}

function Eyebrow({ children, color = P.ink3 }: { children: string; color?: string }) {
  return <span style={{ fontSize: 15, letterSpacing: 2.5, textTransform: 'uppercase', color, fontFamily: MONO, fontWeight: 500 }}>{children}</span>;
}

function Counter({ label, value, tone }: { label: string; value: string; tone?: string }) {
  return (
    <div style={col({ gap: 6, minWidth: 150 })}>
      <Eyebrow>{label}</Eyebrow>
      <span style={{ fontSize: 40, fontWeight: 600, letterSpacing: -1.5, fontFamily: MONO, color: tone ?? P.ink, lineHeight: 1 }}>{value}</span>
    </div>
  );
}

function Footer({ left }: { left?: string }) {
  return (
    <div style={row({ justifyContent: 'space-between', width: '100%' })}>
      <span style={{ fontFamily: MONO, fontSize: 20, color: P.ink2, letterSpacing: -0.3 }}>{left ?? HOST}</span>
      <div style={row({ gap: 10, fontSize: 18, color: P.ink3 })}>
        <span>Hosted on</span>
        <span style={{ color: P.ink2, fontWeight: 500 }}>{HOST_NAME}</span>
      </div>
    </div>
  );
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* 1. Site                                                                                                             */
/* ------------------------------------------------------------------------------------------------------------------ */
export async function renderSiteOg(stats: Stats | null): Promise<ImageResponse> {
  const counters: [string, string][] = stats
    ? [
        ['Companies', fmtInt(stats.companies)],
        ['Sensors', fmtInt(stats.sensors)],
        ['Observations', fmtInt(stats.observations)],
        ['Events', fmtInt(stats.events)],
      ]
    : [];
  return respond(
    <Frame>
      <div style={row({ justifyContent: 'space-between', width: '100%' })}>
        <Lockup markPx={56} fontSize={32} />
        <LivePill />
      </div>
      <div style={col({ gap: 22, maxWidth: 780 })}>
        <Eyebrow>Continuous corporate observation network</Eyebrow>
        <span style={{ fontSize: 78, fontWeight: 600, letterSpacing: -3.5, lineHeight: 1.0, color: P.ink }}>{TAGLINE}</span>
        <span style={{ fontSize: 24, color: P.ink2, lineHeight: 1.35, maxWidth: 700 }}>Public-web sensors on thousands of companies: products, hiring, pricing, leadership, locations and technology — observed, versioned, never overwritten.</span>
      </div>
      <div style={col({ gap: 30, width: '100%' })}>
        {counters.length > 0 && (
          <div style={row({ gap: 56, borderTop: `1px solid ${P.ruleStrong}`, paddingTop: 26 })}>
            {counters.map(([label, value]) => (
              <Counter key={label} label={label} value={value} />
            ))}
          </div>
        )}
        <Footer />
      </div>
    </Frame>,
  );
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* 2. Company                                                                                                          */
/* ------------------------------------------------------------------------------------------------------------------ */
const LOGO_TIMEOUT_MS = 2500;
const LOGO_MAX_BYTES = 1_500_000;
const LOGO_TYPES = new Set(['image/png', 'image/jpeg', 'image/svg+xml']);

/** True for URLs the server may fetch: http(s), public hostnames (no IP literals / localhost) — the API host excepted (mock logos in dev). */
function logoUrlAllowed(u: URL): boolean {
  if (u.protocol !== 'http:' && u.protocol !== 'https:') return false;
  if (u.origin === new URL(API_URL).origin) return true;
  const h = u.hostname.toLowerCase();
  if (h === 'localhost' || h.endsWith('.local') || h.endsWith('.internal') || h.endsWith('.localhost')) return false;
  if (/^\d{1,3}(\.\d{1,3}){3}$/.test(h) || h.startsWith('[') || h.includes(':')) return false;
  return true;
}

/** Fetches the first loadable company logo as a data URI (Satori cannot load remote images reliably); null on any problem. */
export async function fetchLogoDataUri(candidates: string[]): Promise<string | null> {
  for (const c of candidates.slice(0, 3)) {
    try {
      const u = new URL(c);
      if (!logoUrlAllowed(u)) continue;
      const res = await fetch(u, { signal: AbortSignal.timeout(LOGO_TIMEOUT_MS), headers: { accept: 'image/png,image/jpeg,image/svg+xml', 'user-agent': 'CompanyAtlasBot/1.0 (+https://www.company-atlas.co/bot; share-image)' }, redirect: 'follow', next: { revalidate: 86400 } });
      if (!res.ok) continue;
      const type = (res.headers.get('content-type') ?? '').split(';')[0]!.trim().toLowerCase();
      if (!LOGO_TYPES.has(type)) continue;
      const len = Number(res.headers.get('content-length') ?? 0);
      if (len > LOGO_MAX_BYTES) continue;
      const buf = Buffer.from(await res.arrayBuffer());
      if (!buf.length || buf.length > LOGO_MAX_BYTES) continue;
      return `data:${type};base64,${buf.toString('base64')}`;
    } catch {
      /* try next candidate */
    }
  }
  return null;
}

function LogoTile({ name, dataUri, px }: { name: string; dataUri: string | null; px: number }) {
  if (dataUri) {
    return (
      <div style={{ ...row({ justifyContent: 'center' }), width: px, height: px, borderRadius: 20, background: '#ffffff', border: `1px solid ${P.ruleStrong}`, padding: Math.round(px * 0.12), flexShrink: 0 }}>
        {/* eslint-disable-next-line @next/next/no-img-element */}
        <img src={dataUri} alt="" width={px * 0.76} height={px * 0.76} style={{ width: px * 0.76, height: px * 0.76, objectFit: 'contain' }} />
      </div>
    );
  }
  return (
    <div style={{ ...row({ justifyContent: 'center' }), width: px, height: px, borderRadius: 20, background: P.surface2, border: `1px solid ${P.ruleStrong}`, color: P.ink, fontFamily: MONO, fontWeight: 600, fontSize: Math.round(px * 0.4), letterSpacing: -1, flexShrink: 0 }}>
      <span>{monogram(name)}</span>
    </div>
  );
}

function Fact({ label, value }: { label: string; value: string }) {
  return (
    <div style={col({ gap: 6 })}>
      <Eyebrow>{label}</Eyebrow>
      <span style={{ fontSize: 22, color: P.ink, fontWeight: 500, letterSpacing: -0.3 }}>{value}</span>
    </div>
  );
}

function MetricTile({ label, value, hint, tone }: { label: string; value: string; hint: string; tone?: string }) {
  return (
    <div style={{ ...col({ gap: 8 }), flex: 1, padding: '18px 22px', borderRadius: 12, background: 'rgba(17,21,28,0.85)', border: `1px solid ${P.rule}` }}>
      <Eyebrow>{label}</Eyebrow>
      <span style={{ fontSize: 40, fontWeight: 600, fontFamily: MONO, letterSpacing: -1.5, lineHeight: 1, color: tone ?? P.ink }}>{value}</span>
      <span style={{ fontSize: 14, color: P.ink3 }}>{hint}</span>
    </div>
  );
}

function clampName(n: string): { text: string; size: number } {
  const text = n.length > 42 ? `${n.slice(0, 41).trimEnd()}…` : n;
  return { text, size: text.length > 28 ? 42 : text.length > 18 ? 52 : 64 };
}

export async function renderCompanyOg(c: CompanyDetail): Promise<ImageResponse> {
  const p = c.profile ?? null;
  const logo = await fetchLogoDataUri(logoCandidates(c));
  const name = clampName(c.display_name);
  const country = c.country ? countryName(c.country) : null;
  const industry = c.industry_primary ?? c.industries[0] ?? null;
  const hqCity = p?.hq?.city ?? c.hq_city;
  const hq = [hqCity, p?.hq?.region ?? c.hq_region, country].filter(Boolean).join(', ');
  const founded = p?.founded_year ?? c.founded_year;
  const employees = p?.employees ? `${fmtInt(p.employees)}${p.employees_year ? ` (${p.employees_year})` : ''}` : c.employees_band ? c.employees_band : null;
  const facts: [string, string][] = [];
  if (founded) facts.push(['Founded', String(founded)]);
  if (employees) facts.push(['Employees', employees]);
  if (hq) facts.push(['Headquarters', hq]);
  const detail = new Map((c.metrics_detail ?? []).map((m) => [m.metric, m]));
  const tile = (metric: 'activity_score' | 'hiring_momentum_30d' | 'ai_adoption', label: string, pct = false) => {
    const v = num(c.metrics[metric]);
    const d = detail.get(metric);
    if (v === null) return { label, value: '—', hint: 'not enough monitored evidence' };
    return { label, value: pct ? fmtPctSigned(v) : fmtScore(v), hint: d ? `confidence ${Math.round(d.confidence * 100)} %` : pct ? 'vs 30 days ago' : '0–100', tone: pct ? (v > 0 ? P.positive : v < 0 ? P.danger : undefined) : undefined };
  };
  const tiles = [tile('activity_score', 'Activity Score'), tile('hiring_momentum_30d', 'Hiring Momentum 30d', true), tile('ai_adoption', 'AI Adoption')];
  const chips = [c.canonical_domain, country, industry].filter((x): x is string => Boolean(x));

  return respond(
    <Frame globe="corner">
      <div style={row({ justifyContent: 'space-between', width: '100%' })}>
        <Lockup markPx={40} fontSize={23} />
        <div style={row({ gap: 8, fontFamily: MONO, fontSize: 16, color: P.ink3 })}>
          <span>{fmtInt(c.counts.sensors)} sensors</span>
          <span>·</span>
          <span>{fmtInt(c.counts.events)} events</span>
          <span>·</span>
          <span>{fmtInt(c.counts.changes)} changes</span>
        </div>
      </div>
      <div style={col({ gap: 26, width: '100%' })}>
        <div style={row({ gap: 30 })}>
          <LogoTile name={c.display_name} dataUri={logo} px={124} />
          <div style={col({ gap: 12, flex: 1, minWidth: 0 })}>
            <span style={{ fontSize: name.size, fontWeight: 600, letterSpacing: -2, lineHeight: 1.02, color: P.ink }}>{name.text}</span>
            <div style={row({ gap: 10, flexWrap: 'wrap' })}>
              {chips.map((chip, i) => (
                <div key={i} style={{ ...row(), padding: '6px 12px', borderRadius: 6, border: `1px solid ${P.ruleStrong}`, background: 'rgba(17,21,28,0.7)', fontFamily: i === 0 ? MONO : SANS, fontSize: 18, color: P.ink2 }}>
                  <span>{chip}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
        {facts.length > 0 && (
          <div style={row({ gap: 48, borderTop: `1px solid ${P.rule}`, paddingTop: 20 })}>
            {facts.map(([l, v]) => (
              <Fact key={l} label={l} value={v} />
            ))}
          </div>
        )}
        <div style={row({ gap: 16, width: '100%' })}>
          {tiles.map((t) => (
            <MetricTile key={t.label} {...t} />
          ))}
        </div>
      </div>
      <Footer left={`${HOST}/company/${c.slug}`} />
    </Frame>,
  );
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* 3. Topic (industry / country)                                                                                       */
/* ------------------------------------------------------------------------------------------------------------------ */
export type TopicOg = {
  eyebrow: string;
  title: string;
  subtitle?: string | null;
  counters: [string, string][];
  /** Up to eight names shown as chips ("Monitored companies include …"). */
  names?: string[];
  path: string;
};

export async function renderTopicOg(t: TopicOg): Promise<ImageResponse> {
  const title = t.title.length > 40 ? `${t.title.slice(0, 39).trimEnd()}…` : t.title;
  const names = (t.names ?? []).slice(0, 8);
  return respond(
    <Frame>
      <div style={row({ justifyContent: 'space-between', width: '100%' })}>
        <Lockup markPx={44} fontSize={25} />
        <LivePill />
      </div>
      <div style={col({ gap: 18, maxWidth: 820 })}>
        <Eyebrow color={P.accent}>{t.eyebrow}</Eyebrow>
        <span style={{ fontSize: title.length > 24 ? 56 : 72, fontWeight: 600, letterSpacing: -2.5, lineHeight: 1.02, color: P.ink }}>{title}</span>
        {t.subtitle && <span style={{ fontSize: 22, color: P.ink2, lineHeight: 1.35, maxWidth: 760 }}>{t.subtitle.length > 160 ? `${t.subtitle.slice(0, 159).trimEnd()}…` : t.subtitle}</span>}
        {names.length > 0 && (
          <div style={row({ gap: 8, flexWrap: 'wrap', maxWidth: 800 })}>
            {names.map((n) => (
              <div key={n} style={{ ...row(), padding: '5px 10px', borderRadius: 6, border: `1px solid ${P.rule}`, background: 'rgba(17,21,28,0.7)', fontSize: 16, color: P.ink2 }}>
                <span>{n}</span>
              </div>
            ))}
          </div>
        )}
      </div>
      <div style={col({ gap: 28, width: '100%' })}>
        {t.counters.length > 0 && (
          <div style={row({ gap: 56, borderTop: `1px solid ${P.ruleStrong}`, paddingTop: 24 })}>
            {t.counters.map(([label, value]) => (
              <Counter key={label} label={label} value={value} />
            ))}
          </div>
        )}
        <Footer left={`${HOST}${t.path}`} />
      </div>
    </Frame>,
  );
}