import React from "react";
import Image from "next/image";
import type { IllustrationVariant } from "@/lib/errors/errorTypes";
import styles from "./ErrorIllustration.module.css";

interface ErrorIllustrationProps {
  variant?: IllustrationVariant;
  handwrittenText?: string;
  code?: string | number;
  altText?: string;
}

export default function ErrorIllustration({
  variant = "not-found",
  handwrittenText,
  code,
  altText,
}: ErrorIllustrationProps) {
  // Jika varian not-found (404), gunakan ilustrasi raster resolusi tinggi yang sudah disediakan
  if (variant === "not-found") {
    return (
      <div className={styles.illustrationContainer}>
        <div className={styles.rasterWrap}>
          <Image
            src="/images/errors/404-mountain-sign.jpg"
            alt={altText || "404 — Rute Tidak Ditemukan"}
            width={720}
            height={720}
            priority
            quality={95}
            className={styles.rasterImage}
          />
        </div>
      </div>
    );
  }

  // Untuk varian lain: render ilustrasi vektor seragam bertema alam terbuka (outdoor / mountain / pine / sign)
  return (
    <div className={styles.illustrationContainer}>
      {handwrittenText && (
        <div className={styles.handwrittenBadge} aria-hidden="true">
          <span className={styles.handwrittenText}>{handwrittenText}</span>
          <svg
            className={styles.handwrittenLine}
            viewBox="0 0 110 14"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M3 10C35 4 75 3 107 10"
              stroke="#3DAD3C"
              strokeWidth="2.4"
              strokeLinecap="round"
            />
          </svg>
        </div>
      )}

      <div className={styles.vectorWrap}>
        <svg
          className={styles.vectorSvg}
          viewBox="0 0 500 420"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          aria-hidden="true"
        >
          <defs>
            <linearGradient id="errSky" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stopColor="#EBF6ED" stopOpacity="0.8" />
              <stop offset="100%" stopColor="#FFFFFF" stopOpacity="0.1" />
            </linearGradient>
            <linearGradient id="errMtnFar" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stopColor="#C4DFCA" stopOpacity="0.85" />
              <stop offset="100%" stopColor="#E2F1E6" stopOpacity="0.3" />
            </linearGradient>
            <linearGradient id="errMtnMid" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stopColor="#89B893" stopOpacity="0.9" />
              <stop offset="100%" stopColor="#C6E3CD" stopOpacity="0.7" />
            </linearGradient>
            <linearGradient id="errFog" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stopColor="#FFFFFF" stopOpacity="0.85" />
              <stop offset="100%" stopColor="#FFFFFF" stopOpacity="0" />
            </linearGradient>
          </defs>

          {/* Background Sky & Topo contour lines */}
          <rect width="500" height="420" fill="url(#errSky)" />
          <path
            d="M-20 120 C 140 60 280 180 520 90"
            stroke="#3DAD3C"
            strokeWidth="1.2"
            strokeDasharray="4 6"
            opacity="0.18"
          />
          <path
            d="M-40 180 C 120 110 260 220 540 140"
            stroke="#3DAD3C"
            strokeWidth="1"
            strokeDasharray="5 7"
            opacity="0.12"
          />

          {/* Far Mountain Peaks */}
          <polygon points="50,260 170,120 280,260" fill="url(#errMtnFar)" />
          <polygon points="210,260 340,95 470,260" fill="url(#errMtnFar)" />

          {/* Mid Mountain Peaks */}
          <polygon points="-20,290 120,165 260,290" fill="url(#errMtnMid)" opacity="0.85" />
          <polygon points="190,290 310,145 440,290" fill="url(#errMtnMid)" opacity="0.85" />

          {/* Cloud / Fog layer */}
          <ellipse cx="250" cy="270" rx="200" ry="25" fill="url(#errFog)" />

          {/* Pine Forest Ridge */}
          <g fill="#1F5444" opacity="0.8">
            <polygon points="60,310 75,270 90,310" />
            <polygon points="80,310 95,260 110,310" />
            <polygon points="100,310 115,275 130,310" />
            <polygon points="360,310 375,265 390,310" />
            <polygon points="380,310 395,255 410,310" />
            <polygon points="400,310 415,270 430,310" />
          </g>

          {/* Rocky Ground Base */}
          <path
            d="M0 370 Q 140 330 250 345 T 500 370 L 500 420 L 0 420 Z"
            fill="#55665D"
            opacity="0.25"
          />
          <path
            d="M160 380 Q 250 355 340 380 Q 380 415 160 415 Z"
            fill="#7C8D84"
            opacity="0.6"
          />

          {/* Central Variant Icon / Marker */}
          {variant === "restricted" && (
            <g transform="translate(250, 240)">
              {/* Wooden Trail Gate */}
              <rect x="-10" y="-30" width="20" height="130" fill="#6B4B32" rx="3" />
              {/* Crossed wooden boards */}
              <rect x="-95" y="10" width="190" height="30" fill="#8B6242" rx="4" transform="rotate(-6)" />
              <rect x="-90" y="45" width="180" height="26" fill="#785336" rx="4" transform="rotate(3)" />
              {/* Akses Terbatas Badge */}
              <rect x="-65" y="-12" width="130" height="28" fill="#B91C1C" rx="5" />
              <text
                x="0"
                y="6"
                textAnchor="middle"
                fill="#FFFFFF"
                fontSize="12"
                fontWeight="bold"
                fontFamily="Plus Jakarta Sans, sans-serif"
                letterSpacing="0.05em"
              >
                AKSES TERBATAS
              </text>
            </g>
          )}

          {variant === "timeout" && (
            <g transform="translate(250, 240)">
              {/* Compass Ring */}
              <circle cx="0" cy="30" r="62" fill="#FFFFFF" stroke="#3DAD3C" strokeWidth="6" />
              <circle cx="0" cy="30" r="54" fill="#F4FAF5" stroke="#C4E8C3" strokeWidth="2" />
              {/* Compass Needle */}
              <polygon points="0,30 -8,5 0,-18 8,5" fill="#DC2626" />
              <polygon points="0,30 -8,55 0,78 8,55" fill="#68746E" />
              <circle cx="0" cy="30" r="5" fill="#17211D" />
              {/* Subtle Clock Hour Ring */}
              <circle cx="0" cy="30" r="42" fill="none" stroke="#68746E" strokeWidth="1.5" strokeDasharray="3 7" />
            </g>
          )}

          {variant === "server" && (
            <g transform="translate(250, 240)">
              {/* Foggy Mountain Trail Marker */}
              <rect x="-8" y="-20" width="16" height="130" fill="#5F6E66" rx="3" />
              <polygon points="-60,-10 60,-10 75,10 60,30 -60,30" fill="#3DAD3C" rx="4" />
              <text
                x="0"
                y="14"
                textAnchor="middle"
                fill="#FFFFFF"
                fontSize="13"
                fontWeight="bold"
                fontFamily="Plus Jakarta Sans, sans-serif"
              >
                POS JALUR {code ? `· ${code}` : ""}
              </text>
              {/* Floating fog rings */}
              <ellipse cx="-40" cy="70" rx="50" ry="12" fill="#FFFFFF" opacity="0.6" />
              <ellipse cx="40" cy="85" rx="65" ry="14" fill="#FFFFFF" opacity="0.75" />
            </g>
          )}

          {variant === "offline" && (
            <g transform="translate(250, 240)">
              {/* Disconnected Trail Marker with Signal Icon */}
              <circle cx="0" cy="30" r="55" fill="#FFFFFF" stroke="#DC2626" strokeWidth="4" />
              {/* Broken Trail Vector */}
              <path
                d="M-30 45 L-10 15 L5 25 L30 -5"
                stroke="#68746E"
                strokeWidth="4"
                strokeDasharray="6 6"
                fill="none"
              />
              <line x1="-35" y1="-5" x2="35" y2="65" stroke="#DC2626" strokeWidth="4.5" strokeLinecap="round" />
            </g>
          )}

          {variant === "expired" && (
            <g transform="translate(250, 240)">
              {/* Trail Permit Ticket Card */}
              <rect x="-65" y="-5" width="130" height="75" rx="8" fill="#FFFFFF" stroke="#E5890A" strokeWidth="3" />
              <line x1="-50" y1="20" x2="50" y2="20" stroke="#E5890A" strokeWidth="1.5" strokeDasharray="4 4" />
              <text
                x="0"
                y="12"
                textAnchor="middle"
                fill="#17211D"
                fontSize="11"
                fontWeight="bold"
                fontFamily="Plus Jakarta Sans, sans-serif"
              >
                SIMAKSI / TIKET
              </text>
              <rect x="-40" y="32" width="80" height="20" rx="4" fill="#FEF3E0" />
              <text
                x="0"
                y="46"
                textAnchor="middle"
                fill="#B36A05"
                fontSize="10"
                fontWeight="bold"
                fontFamily="Plus Jakarta Sans, sans-serif"
              >
                KADALUWARSA
              </text>
            </g>
          )}

          {variant === "transaction" && (
            <g transform="translate(250, 240)">
              {/* Booking Pin Marker on Trail */}
              <circle cx="0" cy="15" r="48" fill="#FFFFFF" stroke="#3DAD3C" strokeWidth="4" />
              <path
                d="M-18 20 L-6 32 L20 6"
                stroke="#3DAD3C"
                strokeWidth="5"
                strokeLinecap="round"
                strokeLinejoin="round"
                fill="none"
              />
              <rect x="-45" y="68" width="90" height="22" rx="4" fill="#EDF8EC" stroke="#C4E8C3" />
              <text
                x="0"
                y="83"
                textAnchor="middle"
                fill="#2B8B2A"
                fontSize="10"
                fontWeight="bold"
                fontFamily="Plus Jakarta Sans, sans-serif"
              >
                DATA DIPERBARUI
              </text>
            </g>
          )}
        </svg>
      </div>
    </div>
  );
}
