import { MARK_DARK, MarkImg } from './mark';

/**
 * Shared chrome for Open Graph images (ImageResponse cannot read CSS variables → dark-theme token hex values inlined).
 * `Frame` = header lockup + content + footer; `Wallpaper` = the dark atlas plate with a faint coordinate grid and the mark
 * large at left — used by the root OG image and by the per-type OG images (D1–D3) through `Wallpaper` + `Counters`.
 */
export const INK = '#e9ebf0';
export const INK2 = '#a3a9b8';
export const INK3 = '#6f7688';
export const ACCENT = '#6d95ff';
export const ACCENT2 = '#f2b04a';
export const CANVAS = '#0b0d11';
export const SURFACE = '#12151b';
export const RULE = 'rgba(190,200,225,0.14)';

export function Mark({ px = 56 }: { px?: number }) {
  return <MarkImg px={px} colors={{ ...MARK_DARK, plate: SURFACE }} />;
}

/** Faint coordinate grid covering the whole image (absolute, behind content). */
export function Grid({ step = 60, opacity = 1 }: { step?: number; opacity?: number }) {
  return (
    <div
      style={{
        position: 'absolute',
        inset: 0,
        display: 'flex',
        opacity,
        backgroundImage: `linear-gradient(to right, ${RULE} 1px, transparent 1px), linear-gradient(to bottom, ${RULE} 1px, transparent 1px)`,
        backgroundSize: `${step}px ${step}px`,
      }}
    />
  );
}

export function Lockup({ px = 56, fontSize = 32 }: { px?: number; fontSize?: number }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: Math.round(px * 0.3) }}>
      <Mark px={px} />
      <div style={{ display: 'flex', fontSize, letterSpacing: -1, alignItems: 'baseline' }}>
        <span style={{ fontWeight: 700 }}>AI</span>
        <span style={{ color: INK2, marginLeft: Math.round(fontSize * 0.28), fontWeight: 500 }}>Atlas</span>
      </div>
    </div>
  );
}

export function Frame({ children, footer }: { children: React.ReactNode; footer: string }) {
  return (
    <div style={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', padding: '56px 72px', background: CANVAS, color: INK, fontFamily: 'sans-serif', position: 'relative' }}>
      <Grid />
      <div style={{ position: 'absolute', right: -160, top: -200, width: 720, height: 720, borderRadius: 999, background: 'radial-gradient(circle at 40% 40%, rgba(109,149,255,0.16), rgba(11,13,17,0) 70%)', display: 'flex' }} />
      <div style={{ display: 'flex', position: 'relative' }}>
        <Lockup />
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', position: 'relative' }}>{children}</div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', color: INK3, fontSize: 21, position: 'relative' }}>
        <span>{footer}</span>
        <span>who said it · when · where · how it was extracted</span>
      </div>
    </div>
  );
}

export function Eyebrow({ children, color = ACCENT }: { children: string; color?: string }) {
  return <div style={{ display: 'flex', fontSize: 18, letterSpacing: 3, textTransform: 'uppercase', color, fontWeight: 600 }}>{children}</div>;
}

export function Title({ children }: { children: string }) {
  const long = children.length > 26;
  return (
    <div style={{ display: 'flex', fontSize: long ? 58 : 74, fontWeight: 600, lineHeight: 1.04, letterSpacing: -2.2, maxWidth: 1040, overflow: 'hidden', maxHeight: long ? 128 : 160 }}>
      <span style={{ display: 'block', overflow: 'hidden', textOverflow: 'ellipsis' }}>{children}</span>
    </div>
  );
}

export function Facts({ items }: { items: [string, string][] }) {
  if (!items.length) return null;
  return (
    <div style={{ display: 'flex', gap: 52, marginTop: 10 }}>
      {items.map(([label, value]) => (
        <div key={label} style={{ display: 'flex', flexDirection: 'column' }}>
          <span style={{ fontSize: 15, letterSpacing: 2.5, textTransform: 'uppercase', color: INK3, fontWeight: 600 }}>{label}</span>
          <span style={{ fontSize: 34, fontWeight: 600, color: INK, letterSpacing: -1, marginTop: 6 }}>{value}</span>
        </div>
      ))}
    </div>
  );
}

/** Live counter strip (label above value, hairline separators). Empty array → renders nothing (graceful fallback). */
export function Counters({ items, size = 'md' }: { items: [string, string][]; size?: 'sm' | 'md' }) {
  if (!items.length) return null;
  const vs = size === 'sm' ? 30 : 38;
  return (
    <div style={{ display: 'flex', borderTop: `1px solid ${RULE}`, paddingTop: 18, gap: 0 }}>
      {items.map(([label, value], i) => (
        <div key={label} style={{ display: 'flex', flexDirection: 'column', paddingRight: 36, paddingLeft: i === 0 ? 0 : 36, borderLeft: i === 0 ? 'none' : `1px solid ${RULE}` }}>
          <span style={{ fontSize: 14, letterSpacing: 2.5, textTransform: 'uppercase', color: INK3, fontWeight: 600 }}>{label}</span>
          <span style={{ fontSize: vs, fontWeight: 600, color: INK, letterSpacing: -1, marginTop: 4, fontVariantNumeric: 'tabular-nums' }}>{value}</span>
        </div>
      ))}
    </div>
  );
}

/**
 * The "wallpaper": dark plate, faint grid, the mark large at left, title + tagline at right and a counter strip at the bottom.
 * `eyebrow` defaults to the site tagline; `title` to "AI Atlas". Per-type OG images pass their own eyebrow/title/counters.
 */
export function Wallpaper({ eyebrow, title = 'AI Atlas', subtitle, counters = [], footer = 'www.ai-atlas.co', markPx = 300 }: { eyebrow?: string; title?: string; subtitle?: string; counters?: [string, string][]; footer?: string; markPx?: number }) {
  return (
    <div style={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', padding: '56px 72px 48px', background: CANVAS, color: INK, fontFamily: 'sans-serif', position: 'relative' }}>
      <Grid step={50} />
      <div style={{ position: 'absolute', left: -120, bottom: -260, width: 760, height: 760, borderRadius: 999, background: 'radial-gradient(circle at 50% 50%, rgba(109,149,255,0.14), rgba(11,13,17,0) 68%)', display: 'flex' }} />
      <div style={{ display: 'flex', alignItems: 'center', gap: 56, position: 'relative', flex: 1 }}>
        <div style={{ display: 'flex', flexShrink: 0 }}>
          <MarkImg px={markPx} colors={{ ...MARK_DARK, plate: SURFACE }} />
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14, minWidth: 0 }}>
          {eyebrow && <Eyebrow>{eyebrow}</Eyebrow>}
          <div style={{ display: 'flex', fontSize: title.length > 22 ? 56 : 84, fontWeight: 700, lineHeight: 1, letterSpacing: -3, maxHeight: 180, overflow: 'hidden' }}>
            {title === 'AI Atlas' ? (
              <>
                <span>AI</span>
                <span style={{ color: INK2, marginLeft: 22, fontWeight: 500 }}>Atlas</span>
              </>
            ) : (
              <span style={{ display: 'block', overflow: 'hidden', textOverflow: 'ellipsis' }}>{title}</span>
            )}
          </div>
          {subtitle && <div style={{ display: 'flex', fontSize: 27, color: INK2, lineHeight: 1.3, maxWidth: 720 }}>{subtitle}</div>}
        </div>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 16, position: 'relative' }}>
        <Counters items={counters} />
        <div style={{ display: 'flex', justifyContent: 'space-between', color: INK3, fontSize: 19 }}>
          <span>{footer}</span>
          <span>who said it · when · where · how it was extracted</span>
        </div>
      </div>
    </div>
  );
}

export function Fallback({ label }: { label: string }) {
  return (
    <Frame footer="www.ai-atlas.co">
      <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
        <Eyebrow>{label}</Eyebrow>
        <Title>Explore the AI ecosystem.</Title>
        <div style={{ fontSize: 24, color: INK2, display: 'flex' }}>Models · organizations · research · providers & pricing · benchmarks · hardware</div>
      </div>
    </Frame>
  );
}