import { ImageResponse } from "next/og";
import { NextRequest } from "next/server";

export const runtime = "edge";

/** Strip non-Latin characters to avoid satori font shaping issues with Arabic/Persian. */
function safeText(str: string, fallback: string): string {
  const cleaned = str.replace(/[^ -ɏ\s]/g, "").trim();
  return cleaned.length > 2 ? cleaned : fallback;
}

export async function GET(request: NextRequest) {
  const { searchParams } = new URL(request.url);
  const rawTitle = searchParams.get("t") ?? "Meezi";
  const rawSub = searchParams.get("s") ?? "Smart Cafe & Restaurant Management";
  const page = searchParams.get("page") ?? "meezi.ir";

  const title = safeText(rawTitle, "Meezi");
  const sub = safeText(rawSub, "Smart Cafe & Restaurant Management");
  const tag = safeText(page, "meezi.ir");

  return new ImageResponse(
    (
      <div
        style={{
          width: "100%",
          height: "100%",
          display: "flex",
          flexDirection: "column",
          background: "linear-gradient(140deg, #052e16 0%, #14532d 55%, #166534 100%)",
          padding: "72px 80px",
          fontFamily: "system-ui, -apple-system, sans-serif",
          position: "relative",
        }}
      >
        {/* Top bar */}
        <div style={{ display: "flex", alignItems: "center", gap: "14px" }}>
          {/* Logo mark */}
          <div
            style={{
              width: "52px",
              height: "52px",
              borderRadius: "14px",
              background: "rgba(255,255,255,0.12)",
              border: "1px solid rgba(255,255,255,0.18)",
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              fontSize: "26px",
              fontWeight: "900",
              color: "white",
            }}
          >
            M
          </div>
          <span
            style={{
              fontSize: "26px",
              fontWeight: "700",
              color: "rgba(255,255,255,0.9)",
              letterSpacing: "-0.3px",
            }}
          >
            Meezi
          </span>

          {/* Spacer */}
          <div style={{ flex: 1 }} />

          {/* Right badge */}
          <div
            style={{
              background: "rgba(134,239,172,0.15)",
              border: "1px solid rgba(134,239,172,0.3)",
              borderRadius: "999px",
              padding: "6px 16px",
              fontSize: "13px",
              color: "#86efac",
              fontWeight: "600",
              display: "flex",
              alignItems: "center",
            }}
          >
            {tag}
          </div>
        </div>

        {/* Spacer */}
        <div style={{ flex: 1 }} />

        {/* Main content */}
        <div style={{ display: "flex", flexDirection: "column" }}>
          {/* Tag line */}
          <div
            style={{
              display: "flex",
              marginBottom: "24px",
            }}
          >
            <div
              style={{
                background: "rgba(255,255,255,0.08)",
                border: "1px solid rgba(255,255,255,0.14)",
                borderRadius: "999px",
                padding: "6px 16px",
                fontSize: "14px",
                color: "rgba(255,255,255,0.55)",
                fontWeight: "500",
                display: "flex",
                alignItems: "center",
              }}
            >
              Cafe &amp; Restaurant Management Platform
            </div>
          </div>

          <div
            style={{
              fontSize: title.length > 40 ? "52px" : title.length > 28 ? "62px" : "70px",
              fontWeight: "900",
              color: "white",
              lineHeight: 1.15,
              marginBottom: "20px",
              letterSpacing: "-1px",
              display: "flex",
            }}
          >
            {title}
          </div>
          <div
            style={{
              fontSize: "22px",
              color: "rgba(255,255,255,0.55)",
              lineHeight: 1.5,
              maxWidth: "740px",
              display: "flex",
            }}
          >
            {sub}
          </div>
        </div>

        {/* Bottom accent bar */}
        <div
          style={{
            position: "absolute",
            bottom: 0,
            left: 0,
            right: 0,
            height: "5px",
            background: "linear-gradient(90deg, #22c55e 0%, #16a34a 50%, #15803d 100%)",
          }}
        />
      </div>
    ),
    { width: 1200, height: 630 }
  );
}
