import { NextResponse } from "next/server";

type RouteContext = {
  params: Promise<{
    path: string[];
  }>;
};

function toTitle(value: string) {
  return value
    .replace(/\.(png|jpg|jpeg|webp|svg)$/i, "")
    .replace(/[-_]/g, " ")
    .replace(/\b\w/g, (letter) => letter.toUpperCase());
}

export async function GET(_request: Request, context: RouteContext) {
  const { path } = await context.params;
  const fileName = path.at(-1) ?? "Bashista Auto";
  const category = path[0] ?? "image";
  const title = toTitle(fileName);
  const isScooter = category === "scooters";
  const isGallery = category === "gallery";
  const width = isGallery ? 900 : 720;
  const height = isGallery ? 540 : 520;
  const subtitle = isScooter ? "Electric Scooter" : "Bashista Auto";

  const scooterShape = `
    <circle cx="230" cy="365" r="54" fill="#0b1f3a" opacity=".92"/>
    <circle cx="500" cy="365" r="54" fill="#0b1f3a" opacity=".92"/>
    <circle cx="230" cy="365" r="27" fill="#eaf2ff"/>
    <circle cx="500" cy="365" r="27" fill="#eaf2ff"/>
    <path d="M235 315 C305 248 405 238 492 304 L535 337 L470 337 C430 309 333 310 285 337 L195 337 C204 328 216 321 235 315Z" fill="#ffffff" stroke="#dbe5f4" stroke-width="8"/>
    <path d="M352 262 L452 224 C476 214 501 229 509 255 L516 279 L425 297 C389 304 367 291 352 262Z" fill="#10213f"/>
    <path d="M278 305 L330 243 L382 258 L341 315Z" fill="#16a34a" opacity=".9"/>
    <path d="M498 259 L562 244 L574 260 L520 286Z" fill="#10213f"/>
    <path d="M275 279 L210 260" stroke="#10213f" stroke-width="12" stroke-linecap="round"/>
  `;

  const genericShape = `
    <rect x="90" y="95" width="${width - 180}" height="${height - 190}" rx="34" fill="#ffffff" opacity=".72"/>
    <path d="M120 ${height - 150} C230 ${height - 250} 330 ${height - 80} 455 ${height - 190} S675 ${height - 185} ${width - 95} ${height - 110}" fill="none" stroke="#1769ff" stroke-width="18" stroke-linecap="round" opacity=".24"/>
    <circle cx="${width - 165}" cy="135" r="54" fill="#16a34a" opacity=".2"/>
    <circle cx="150" cy="${height - 130}" r="42" fill="#1769ff" opacity=".18"/>
  `;

  const svg = `
    <svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}" role="img" aria-label="${title}">
      <defs>
        <linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stop-color="#eef6ff"/>
          <stop offset="56%" stop-color="#ffffff"/>
          <stop offset="100%" stop-color="#dcfce7"/>
        </linearGradient>
      </defs>
      <rect width="100%" height="100%" rx="32" fill="url(#bg)"/>
      ${isScooter ? scooterShape : genericShape}
      <text x="50%" y="${isScooter ? height - 72 : height / 2 + 12}" text-anchor="middle" fill="#0b1f3a" font-family="Arial, Helvetica, sans-serif" font-size="34" font-weight="700">${title}</text>
      <text x="50%" y="${isScooter ? height - 35 : height / 2 + 52}" text-anchor="middle" fill="#16a34a" font-family="Arial, Helvetica, sans-serif" font-size="18" font-weight="700">${subtitle}</text>
    </svg>
  `;

  return new NextResponse(svg, {
    headers: {
      "content-type": "image/svg+xml; charset=utf-8",
      "cache-control": "public, max-age=31536000, immutable",
    },
  });
}