import { readFile } from 'node:fs/promises';
import path from 'node:path';
import { ImageResponse } from 'next/og';

/**
 * Social-share images (Open Graph / Twitter cards), 1200 × 630, rendered server-side with the site
 * fonts (WOFF copies in src/assets/fonts). Shared by the site default (`app/opengraph-image.tsx`)
 * and the entity images (cancer, gene, drug, biomarker, trial). Content is limited to sourced facts
 * passed in by the caller — never estimates.
 */

export const OG_SIZE = { width: 1200, height: 630 } as const;
export const OG_CONTENT_TYPE = 'image/png';

const PAPER = '#fafaf7';
const INK = '#1c1c1a';
const INK2 = '#4a4a46';
const INK3 = '#7b7b75';
const RULE = '#dcdcd4';
const ACCENT = '#0f5f63';
const ACCENT_SOFT = '#e2eeee';

let fontCache: Promise<Array<{ name: string; data: ArrayBuffer; weight: 400 | 500 | 600; style: 'normal' | 'italic' }>> | null = null;
let markCache: Promise<string> | null = null;

function assetDir(): string {
  return path.join(process.cwd(), 'src', 'assets', 'fonts');
}

async function loadFonts() {
  if (!fontCache) {
    fontCache = (async () => {
      const dir = assetDir();
      const read = async (f: string) => {
        const b = await readFile(path.join(dir, f));
        return b.buffer.slice(b.byteOffset, b.byteOffset + b.byteLength) as ArrayBuffer;
      };
      return [
        { name: 'Newsreader', data: await read('newsreader-500.woff'), weight: 500 as const, style: 'normal' as const },
        { name: 'Newsreader', data: await read('newsreader-500i.woff'), weight: 500 as const, style: 'italic' as const },
        { name: 'Inter', data: await read('inter-400.woff'), weight: 400 as const, style: 'normal' as const },
        { name: 'Inter', data: await read('inter-600.woff'), weight: 600 as const, style: 'normal' as const },
      ];
    })();
  }
  return fontCache;
}

/** The brand mark as a PNG data URI (satori renders <img>; SVG dash arrays are not supported). */
async function loadMark(): Promise<string> {
  if (!markCache) {
    markCache = readFile(path.join(process.cwd(), 'public', 'brand', 'logo-mark.png')).then((b) => `data:image/png;base64,${b.toString('base64')}`);
  }
  return markCache;
}

export interface OgFact {
  label: string;
  value: string;
}

export interface OgProps {
  /** Small upper label: entity kind or page family ("Cancer · NCIt C9005", "Gene", "Clinical trial"). */
  kicker: string;
  title: string;
  /** One line under the title (canonical name, mechanism, sponsor…). */
  subtitle?: string | null;
  /** Up to four sourced figures shown as chips (label + value). */
  facts?: OgFact[];
  /** Footer right-hand note, e.g. the sources behind the facts. */
  sourcesNote?: string | null;
}

function clampTitle(t: string): { text: string; size: number } {
  const text = t.length > 110 ? `${t.slice(0, 107).trimEnd()}…` : t;
  const size = text.length <= 28 ? 84 : text.length <= 48 ? 68 : text.length <= 72 ? 56 : 46;
  return { text, size };
}

export async function ogImage(props: OgProps): Promise<ImageResponse> {
  const [fonts, mark] = await Promise.all([loadFonts(), loadMark()]);
  const { text, size } = clampTitle(props.title);
  const facts = (props.facts ?? []).slice(0, 4);
  return new ImageResponse(
    (
      <div style={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'column', background: PAPER, color: INK, fontFamily: 'Inter', padding: '56px 64px 48px' }}>
        {/* top row: brand */}
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
            <img src={mark} width={64} height={64} alt="" />
            <div style={{ display: 'flex', flexDirection: 'column' }}>
              <div style={{ display: 'flex', fontFamily: 'Newsreader', fontWeight: 500, fontSize: 40, letterSpacing: -0.5, lineHeight: 1 }}>
                <span>Cancer</span>
                <span style={{ color: ACCENT }}>Index</span>
              </div>
              <div style={{ fontSize: 15, letterSpacing: 2.2, textTransform: 'uppercase', color: INK3, marginTop: 6 }}>The global index of cancer</div>
            </div>
          </div>
          <div style={{ fontSize: 18, color: INK3, textTransform: 'uppercase', letterSpacing: 2 }}>{props.kicker}</div>
        </div>

        {/* title block */}
        <div style={{ display: 'flex', flexDirection: 'column', flex: 1, justifyContent: 'center', paddingTop: 24, paddingBottom: 16 }}>
          <div style={{ fontFamily: 'Newsreader', fontWeight: 500, fontSize: size, lineHeight: 1.05, letterSpacing: -1, color: INK, maxWidth: 1072, display: 'flex' }}>{text}</div>
          {props.subtitle ? <div style={{ marginTop: 18, fontSize: 26, color: INK2, lineHeight: 1.3, maxWidth: 1040, display: 'flex' }}>{props.subtitle.length > 140 ? `${props.subtitle.slice(0, 137).trimEnd()}…` : props.subtitle}</div> : null}
        </div>

        {/* facts */}
        {facts.length ? (
          <div style={{ display: 'flex', gap: 14, marginBottom: 26 }}>
            {facts.map((f) => (
              <div key={f.label} style={{ display: 'flex', flexDirection: 'column', background: ACCENT_SOFT, border: `1px solid ${RULE}`, borderRadius: 4, padding: '12px 18px', minWidth: 160 }}>
                <div style={{ fontSize: 30, fontWeight: 600, color: INK, lineHeight: 1.1 }}>{f.value}</div>
                <div style={{ fontSize: 15, color: INK2, marginTop: 4, textTransform: 'uppercase', letterSpacing: 1.2 }}>{f.label}</div>
              </div>
            ))}
          </div>
        ) : null}

        {/* footer */}
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 32, borderTop: `2px solid ${RULE}`, paddingTop: 18, fontSize: 18, color: INK3 }}>
          <div style={{ display: 'flex', gap: 10, alignItems: 'center', flexShrink: 0 }}>
            <div style={{ width: 10, height: 10, borderRadius: 5, background: ACCENT }} />
            <span>www.cancerindex.io · a source, a date and a formula version on every number</span>
          </div>
          {props.sourcesNote ? <span style={{ fontSize: 15, textAlign: 'right', maxWidth: 380, lineHeight: 1.25 }}>{props.sourcesNote.length > 90 ? `${props.sourcesNote.slice(0, 87).trimEnd()}…` : props.sourcesNote}</span> : null}
        </div>
      </div>
    ),
    { ...OG_SIZE, fonts },
  );
}