export type AlertPhotoScene = "cable" | "heat" | "crack";

export function createAlertPhoto(scene: AlertPhotoScene, accent: string) {
  const sceneMarkup =
    scene === "cable"
      ? `
        <path d="M64 112 C140 90, 222 88, 304 104 S470 132, 556 110" stroke="${accent}" stroke-width="6" fill="none" stroke-linecap="round" opacity="0.9" />
        <path d="M314 106 L340 92 L366 120" stroke="#ffe9a6" stroke-width="5" fill="none" stroke-linecap="round" />
        <circle cx="340" cy="106" r="32" fill="rgba(255,102,82,0.18)" stroke="#ff8e79" stroke-width="2" stroke-dasharray="6 6" />
      `
      : scene === "heat"
        ? `
          <ellipse cx="340" cy="122" rx="84" ry="46" fill="rgba(255,122,68,0.26)" />
          <ellipse cx="344" cy="122" rx="58" ry="30" fill="rgba(255,193,82,0.28)" />
          <path d="M320 146 C330 126, 334 114, 332 96 C344 112, 350 126, 348 148" fill="none" stroke="#ffd36a" stroke-width="4" stroke-linecap="round" />
          <path d="M358 142 C366 126, 372 114, 370 100 C382 112, 388 126, 384 144" fill="none" stroke="#ff8a5b" stroke-width="4" stroke-linecap="round" />
        `
        : `
          <path d="M206 88 L234 130 L226 166 L268 210 L254 248 L294 282" stroke="#d8ecff" stroke-width="4" fill="none" stroke-linecap="round" />
          <path d="M248 152 L280 136 L306 164" stroke="#d8ecff" stroke-width="3" fill="none" stroke-linecap="round" />
          <path d="M266 212 L302 196 L328 220" stroke="#d8ecff" stroke-width="3" fill="none" stroke-linecap="round" />
          <ellipse cx="258" cy="178" rx="86" ry="118" fill="rgba(132,196,255,0.08)" stroke="${accent}" stroke-width="2" stroke-dasharray="5 7" />
        `;

  const svg = `
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 360">
      <defs>
        <linearGradient id="bg" x1="0" x2="1" y1="0" y2="1">
          <stop offset="0%" stop-color="#041523" />
          <stop offset="55%" stop-color="#0a2740" />
          <stop offset="100%" stop-color="#06111d" />
        </linearGradient>
        <linearGradient id="tunnel" x1="0" x2="1" y1="0.4" y2="0.6">
          <stop offset="0%" stop-color="#132b3f" />
          <stop offset="50%" stop-color="#0a2135" />
          <stop offset="100%" stop-color="#132b3f" />
        </linearGradient>
      </defs>
      <rect width="640" height="360" fill="url(#bg)" />
      <rect x="0" y="0" width="640" height="58" fill="rgba(7,18,30,0.52)" />
      <rect x="0" y="302" width="640" height="58" fill="rgba(3,10,18,0.66)" />
      <path d="M0 82 C98 58, 196 52, 320 56 C448 60, 548 58, 640 78 L640 0 L0 0 Z" fill="rgba(17,38,56,0.88)" />
      <path d="M0 314 C112 286, 228 278, 320 282 C456 286, 554 280, 640 256 L640 360 L0 360 Z" fill="rgba(14,24,36,0.96)" />
      <path d="M44 250 C148 226, 254 214, 352 214 C452 214, 548 204, 606 188" stroke="url(#tunnel)" stroke-width="92" fill="none" stroke-linecap="round" opacity="0.92" />
      <path d="M54 248 C158 226, 254 214, 352 214 C452 214, 540 204, 596 190" stroke="rgba(113,227,255,0.12)" stroke-width="1.6" fill="none" stroke-dasharray="4 10" />
      <g opacity="0.78">
        <circle cx="96" cy="104" r="3" fill="#8ae5ff" />
        <circle cx="134" cy="118" r="2.2" fill="#8ae5ff" />
        <circle cx="182" cy="94" r="2.6" fill="#8ae5ff" />
        <circle cx="444" cy="96" r="2.8" fill="#8ae5ff" />
        <circle cx="522" cy="116" r="2.4" fill="#8ae5ff" />
        <circle cx="564" cy="102" r="2.8" fill="#8ae5ff" />
      </g>
      <g opacity="0.54">
        <circle cx="86" cy="286" r="2.2" fill="#74d9ff" />
        <circle cx="154" cy="300" r="2.8" fill="#74d9ff" />
        <circle cx="452" cy="292" r="2.2" fill="#74d9ff" />
        <circle cx="548" cy="284" r="2.6" fill="#74d9ff" />
      </g>
      ${sceneMarkup}
      <rect x="20" y="20" width="600" height="320" rx="16" fill="none" stroke="rgba(110,224,255,0.12)" stroke-width="2" />
    </svg>
  `;

  return `data:image/svg+xml;charset=UTF-8,${encodeURIComponent(svg)}`;
}

export const recentAlertPhotoSources = {
  "线缆破损": createAlertPhoto("cable", "#ff8f79"),
  "局部高温": createAlertPhoto("heat", "#ffc86c"),
  "墙体裂缝": createAlertPhoto("crack", "#89d8ff"),
} as const;

const fallbackAlertPhoto = recentAlertPhotoSources["墙体裂缝"];

export function getRecentAlertPhoto(type: string) {
  return recentAlertPhotoSources[type as keyof typeof recentAlertPhotoSources] ?? fallbackAlertPhoto;
}
