import { ImageResponse } from "next/og";
import { BRAND, Mark, PulseBackdrop } from "@/components/brand";
import { api, type Stats } from "@/lib/api";
import { fmtInt } from "@/lib/format";

export const runtime = "nodejs";
export const alt = "WebSensor — The Web is changing. We are watching.";
export const size = { width: 1200, height: 630 };
export const contentType = "image/png";

/** Site-wide share image (spec §82–83). Live counters come from the API; nothing is fabricated. */
export default async function OpenGraphImage() {
  const s: Stats = await api.stats().catch(() => ({}) as Stats);
  const facts = [s.sources ? `${fmtInt(s.sources)} sources` : null, s.sensors ? `${fmtInt(s.sensors)} sensors` : null, s.events_24h ? `${fmtInt(s.events_24h)} events / 24 h` : null].filter(Boolean) as string[];
  return new ImageResponse(
    (
      <div style={{ width: "100%", height: "100%", display: "flex", flexDirection: "column", justifyContent: "space-between", padding: 64, background: `linear-gradient(135deg, ${BRAND.bg} 0%, #0f1622 100%)`, color: "#e6e8ee", fontFamily: "Inter, system-ui, sans-serif", position: "relative" }}>
        <PulseBackdrop width={1200} height={630} />
        <div style={{ display: "flex", alignItems: "center", gap: 20 }}>
          <Mark size={72} />
          <div style={{ display: "flex", flexDirection: "column" }}>
            <div style={{ display: "flex", fontSize: 44, fontWeight: 700, letterSpacing: -1 }}>
              Web<span style={{ color: BRAND.signal }}>Sensor</span>
            </div>
            <div style={{ display: "flex", fontSize: 20, color: BRAND.subtle, fontFamily: "monospace", letterSpacing: 3 }}>REAL-TIME INTERNET CHANGE INTELLIGENCE</div>
          </div>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 20, maxWidth: 900 }}>
          <div style={{ display: "flex", flexDirection: "column", fontSize: 80, fontWeight: 700, letterSpacing: -3, lineHeight: 1.02 }}>
            <span>The Web is changing.</span>
            <span style={{ color: BRAND.muted }}>We are watching.</span>
          </div>
          <div style={{ display: "flex", fontSize: 28, color: BRAND.muted, lineHeight: 1.35 }}>What changed, where, when, whether it was silent, how important it is — with immutable evidence.</div>
        </div>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", fontSize: 24, color: BRAND.subtle, fontFamily: "monospace" }}>
          <div style={{ display: "flex", gap: 28 }}>
            {facts.map((f) => (
              <span key={f} style={{ display: "flex", alignItems: "center", gap: 10 }}>
                <span style={{ width: 8, height: 8, borderRadius: 8, background: BRAND.signal }} />
                {f}
              </span>
            ))}
          </div>
          <span>www.websensor.io</span>
        </div>
      </div>
    ),
    { ...size },
  );
}