import { ImageResponse } from "next/og";
import { api } from "@/lib/api";
import { fmtInt, fmtMw } from "@/lib/format";

/**
 * Shared Open Graph template (1200×630) — dark ink, thin world-grid texture, mark + wordmark,
 * title/tagline, stats strip. Entity pages reuse `renderOg({ title, subtitle, stats, eyebrow })`.
 * Satori subset of CSS only: flex layout, no grid, no CSS vars.
 */

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

const INK = "#0b0f14";
const PAPER = "#eceae5";
const MUTED = "#8a9099";
const ACCENT = "#e8763a";
const HAIR = "rgba(236,234,229,0.08)";

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

export interface OgProps {
  eyebrow?: string;
  title: string;
  subtitle?: string;
  stats?: OgStat[];
  footer?: string;
}

function Mark({ size }: { size: number }) {
  return (
    <svg width={size} height={size} viewBox="0 0 32 32" fill="none">
      <circle cx="15" cy="16" r="12" stroke={PAPER} strokeWidth="2.2" />
      <path d="M15 4c-3.2 2.9-4.8 6.9-4.8 12s1.6 9.1 4.8 12c3.2-2.9 4.8-6.9 4.8-12S18.2 6.9 15 4Z" stroke={PAPER} strokeWidth="1.4" />
      <path d="M4.6 10.6h20.8M4.6 21.4h20.8" stroke={PAPER} strokeWidth="2" strokeLinecap="round" />
      <path d="M3 16h28" stroke={ACCENT} strokeWidth="2.6" strokeLinecap="round" />
    </svg>
  );
}

function Graticule() {
  const cols = Array.from({ length: 25 }, (_, i) => i * 50);
  const rows = Array.from({ length: 13 }, (_, i) => i * 50);
  return (
    <div style={{ position: "absolute", inset: 0, display: "flex" }}>
      {cols.map((x) => (
        <div key={`c${x}`} style={{ position: "absolute", left: x, top: 0, width: 1, height: 630, background: HAIR }} />
      ))}
      {rows.map((y) => (
        <div key={`r${y}`} style={{ position: "absolute", top: y, left: 0, height: 1, width: 1200, background: HAIR }} />
      ))}
      {/* meridian arcs as thin ellipses */}
      {[220, 420, 640].map((rx, i) => (
        <div key={i} style={{ position: "absolute", left: 900 - rx, top: 315 - 420, width: rx * 2, height: 840, borderRadius: "50%", border: `1px solid ${HAIR}` }} />
      ))}
      <div style={{ position: "absolute", inset: 0, background: "linear-gradient(90deg, rgba(11,15,20,0.9) 0%, rgba(11,15,20,0.4) 55%, rgba(11,15,20,0) 100%)" }} />
    </div>
  );
}

export function OgTemplate({ eyebrow, title, subtitle, stats, footer }: OgProps) {
  return (
    <div style={{ width: 1200, height: 630, display: "flex", flexDirection: "column", background: INK, color: PAPER, fontFamily: "Inter, sans-serif", position: "relative", padding: 64 }}>
      <Graticule />
      <div style={{ display: "flex", alignItems: "center", gap: 18, position: "relative" }}>
        <Mark size={56} />
        <div style={{ display: "flex", alignItems: "baseline", fontSize: 40, letterSpacing: -1 }}>
          <span style={{ fontWeight: 600 }}>DataCenter</span>
          <span style={{ fontWeight: 400, color: "#b9b6ae" }}>Index</span>
          <div style={{ width: 4, height: 24, background: ACCENT, marginLeft: 12 }} />
        </div>
      </div>
      <div style={{ display: "flex", flexDirection: "column", flex: 1, justifyContent: "center", position: "relative", paddingRight: 240 }}>
        {eyebrow && <div style={{ fontSize: 20, letterSpacing: 3, textTransform: "uppercase", color: MUTED, marginBottom: 14 }}>{eyebrow}</div>}
        <div style={{ fontSize: title.length > 40 ? 52 : 64, fontWeight: 600, letterSpacing: -2, lineHeight: 1.05 }}>{title}</div>
        {subtitle && <div style={{ fontSize: 26, color: "#b9b6ae", marginTop: 18, lineHeight: 1.3 }}>{subtitle}</div>}
      </div>
      <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", position: "relative", borderTop: `1px solid rgba(236,234,229,0.18)`, paddingTop: 22 }}>
        <div style={{ display: "flex", gap: 40 }}>
          {(stats ?? []).map((s, i) => (
            <div key={i} style={{ display: "flex", flexDirection: "column" }}>
              <div style={{ fontSize: 32, fontWeight: 600, letterSpacing: -1 }}>{s.value}</div>
              <div style={{ fontSize: 13, letterSpacing: 1.5, textTransform: "uppercase", color: MUTED, marginTop: 3 }}>{s.label}</div>
            </div>
          ))}
        </div>
        <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-end", fontSize: 18, color: MUTED }}>
          <span>{footer ?? "www.datacenterindex.io"}</span>
          <span style={{ fontSize: 13, letterSpacing: 2, textTransform: "uppercase", marginTop: 4 }}>published figures · sourced · versioned</span>
        </div>
      </div>
    </div>
  );
}

/** Live stats for the default share image, with a graceful fallback when the API is down. */
export async function ogDashboardStats(): Promise<OgStat[]> {
  const r = await api.dashboard();
  if (!r.ok || !r.data?.stats) return [{ label: "Global coverage", value: "Facilities · MW · Countries" }];
  const s = r.data.stats;
  return [
    { label: "Facilities indexed", value: fmtInt(s.facilities) },
    { label: "Known operational MW", value: fmtMw(s.knownOperationalMw) },
    { label: "Under construction (≈)", value: fmtMw(s.constructionMw) },
    { label: "Countries", value: fmtInt(s.countries) },
    { label: "Events · 24 h", value: fmtInt(s.events24h) },
  ];
}

export function renderOg(props: OgProps): ImageResponse {
  return new ImageResponse(<OgTemplate {...props} />, { ...OG_SIZE });
}