import { ImageResponse } from "next/og";
import { isLocale, type Locale } from "@/i18n/routes";
import { getDb } from "@/lib/db";
import { getProject } from "@/lib/models";

export const runtime = "nodejs";
export const alt = "Projekt auf eldov.win";
export const size = { width: 1200, height: 630 };
export const contentType = "image/png";

export default async function OpenGraphImage({
  params,
}: {
  params: Promise<{ lang: string; slug: string }>;
}) {
  const { lang, slug } = await params;
  const locale: Locale = isLocale(lang) ? lang : "de";
  const project = getProject(getDb(), locale, slug);
  if (!project) {
    return new ImageResponse(<div>eldov.win</div>, size);
  }
  const dict: Record<Locale, { eyebrow: string }> = {
    de: { eyebrow: "Projekt" },
    en: { eyebrow: "Project" },
  };
  return new ImageResponse(
    (
      <div
        style={{
          width: "100%",
          height: "100%",
          display: "flex",
          flexDirection: "column",
          justifyContent: "space-between",
          background: "linear-gradient(180deg, #0a0a10 0%, #14141e 100%)",
          color: "#e7e7ee",
          fontFamily: "ui-monospace, monospace",
          padding: "72px 64px",
        }}
      >
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
            <div style={{
              width: 44, height: 44, display: "flex", alignItems: "center", justifyContent: "center",
              border: "1.5px solid #e84a8f", color: "#e84a8f", fontSize: 26, fontWeight: 700,
            }}>e</div>
            <div style={{ display: "flex", fontSize: 26, color: "#e7e7ee" }}>eldov</div>
            <div style={{ display: "flex", fontSize: 22, color: "#6e6e85" }}>@eldov.win</div>
          </div>
          <div style={{ display: "flex", fontSize: 18, color: "#6e6e85", letterSpacing: "0.1em" }}>
            {dict[locale].eyebrow.toUpperCase()} · {project.number}
          </div>
        </div>

        <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
          <div style={{ display: "flex", fontSize: 64, color: "#e84a8f", fontWeight: 700, letterSpacing: "-0.02em" }}>
            {project.slug}
          </div>
          <div style={{ display: "flex", fontSize: 26, color: "#b8b8c8", lineHeight: 1.4, maxWidth: 900 }}>
            {project.summary}
          </div>
        </div>

        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end" }}>
          <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
            <div style={{
              display: "flex", padding: "6px 12px", border: "1px solid #39ff14", color: "#39ff14",
              fontSize: 14, letterSpacing: "0.08em", textTransform: "uppercase",
            }}>{project.status}</div>
            <div style={{
              display: "flex", padding: "6px 12px", border: "1px solid #232333", color: "#b8b8c8",
              fontSize: 14, letterSpacing: "0.08em", textTransform: "uppercase",
            }}>{project.category}</div>
          </div>
          <div style={{ display: "flex", fontSize: 16, color: "#6e6e85", letterSpacing: "0.06em" }}>
            eldov.win / {project.slug}
          </div>
        </div>
      </div>
    ),
    { ...size }
  );
}
