/* global React */

/**
 * Scene — minimal, illustrative backdrops per scenario.
 * All gestural SVG (silhouettes, geometric shapes, simple horizons).
 * No photorealistic or branded environments.
 */

function Scene({ scenarioId }) {
  const palette = SCENE_PALETTES[scenarioId] || SCENE_PALETTES.free;

  return (
    <div
      className="scene"
      style={{
        background: `linear-gradient(180deg, ${palette.sky} 0%, ${palette.ground} 100%)`,
      }}
    >
      <svg className="scene-art" viewBox="0 0 1440 900" preserveAspectRatio="xMidYMid slice">
        {SCENE_RENDERERS[scenarioId]?.(palette) || SCENE_RENDERERS.free(palette)}
      </svg>
    </div>
  );
}

const SCENE_PALETTES = {
  free: {
    sky: "#F4EFE6",
    ground: "#EAE3D5",
    accent: "#E55934",
    soft: "#D4E0CB",
    deep: "#1F1A14",
  },
  airport: {
    sky: "#DCE7F0",
    ground: "#F1ECE2",
    accent: "#3B6EA8",
    soft: "#B9C9DA",
    deep: "#1F2A38",
  },
  job: {
    sky: "#E8E4DC",
    ground: "#D9D2C4",
    accent: "#5A4636",
    soft: "#C7BFB0",
    deep: "#2A2218",
  },
  restaurant: {
    sky: "#F4D9C2",
    ground: "#EBC09E",
    accent: "#B84A2D",
    soft: "#E8A87C",
    deep: "#3A1F12",
  },
  shopping: {
    sky: "#F2E1E5",
    ground: "#E6CCD2",
    accent: "#A93C5C",
    soft: "#E0BBC4",
    deep: "#3A1A24",
  },
  doctor: {
    sky: "#E4ECE8",
    ground: "#D2DED7",
    accent: "#4F7A6C",
    soft: "#BFD0C7",
    deep: "#1A2A24",
  },
  hotel: {
    sky: "#EDE4D0",
    ground: "#D9C9A6",
    accent: "#8B6A3A",
    soft: "#C8B589",
    deep: "#2A1F10",
  },
  friends: {
    sky: "#E8E8F0",
    ground: "#D4D4E0",
    accent: "#5C5C9E",
    soft: "#BFBFD0",
    deep: "#1F1F30",
  },
};

const SCENE_RENDERERS = {
  free: (p) => (
    <g>
      {/* Soft cafe interior — warm window light */}
      <rect x="0" y="0" width="1440" height="900" fill={p.sky} />
      {/* Window grid (left) */}
      <g opacity="0.18">
        <rect x="60" y="120" width="280" height="380" fill="none" stroke={p.deep} strokeWidth="2" />
        <line x1="200" y1="120" x2="200" y2="500" stroke={p.deep} strokeWidth="2" />
        <line x1="60" y1="310" x2="340" y2="310" stroke={p.deep} strokeWidth="2" />
        <rect x="80" y="140" width="120" height="170" fill="#FFFBEB" opacity="0.7" />
        <rect x="220" y="140" width="100" height="170" fill="#FFFBEB" opacity="0.7" />
      </g>
      {/* Plant */}
      <g opacity="0.5" transform="translate(120, 600)">
        <rect x="-40" y="80" width="80" height="100" fill={p.accent} opacity="0.5" />
        <ellipse cx="0" cy="50" rx="50" ry="20" fill={p.soft} />
        <path d="M -20 50 Q -30 -20 -10 -60 Q 0 -30 0 50" fill={p.soft} stroke={p.deep} strokeWidth="1" opacity="0.6" />
        <path d="M 20 50 Q 30 -10 0 -50 Q 10 -10 0 50" fill={p.soft} stroke={p.deep} strokeWidth="1" opacity="0.6" />
      </g>
      {/* Right shelf with mugs */}
      <g opacity="0.3" transform="translate(1180, 380)">
        <rect x="0" y="0" width="220" height="6" fill={p.deep} />
        <circle cx="40" cy="-15" r="14" fill="none" stroke={p.deep} strokeWidth="2" />
        <circle cx="90" cy="-15" r="14" fill="none" stroke={p.deep} strokeWidth="2" />
        <circle cx="140" cy="-15" r="14" fill="none" stroke={p.deep} strokeWidth="2" />
      </g>
      {/* Ground line */}
      <rect x="0" y="780" width="1440" height="120" fill={p.ground} />
    </g>
  ),

  airport: (p) => (
    <g>
      <rect x="0" y="0" width="1440" height="900" fill={p.sky} />
      {/* Distant terminal silhouette */}
      <g opacity="0.18">
        <path d="M 0 580 L 200 530 L 400 560 L 600 510 L 800 560 L 1100 540 L 1440 570 L 1440 700 L 0 700 Z" fill={p.deep} />
      </g>
      {/* Window frame (departure lounge feel) */}
      <g opacity="0.5">
        <rect x="120" y="80" width="340" height="540" fill="none" stroke={p.deep} strokeWidth="3" opacity="0.5" />
        <line x1="290" y1="80" x2="290" y2="620" stroke={p.deep} strokeWidth="3" opacity="0.5" />
        <line x1="120" y1="350" x2="460" y2="350" stroke={p.deep} strokeWidth="3" opacity="0.5" />
      </g>
      {/* Plane silhouette in window */}
      <g opacity="0.35" transform="translate(900, 280)">
        <ellipse cx="0" cy="0" rx="180" ry="22" fill={p.deep} />
        <path d="M -60 0 L -90 -40 L -30 0 Z" fill={p.deep} />
        <path d="M -60 0 L -90 40 L -30 0 Z" fill={p.deep} />
        <path d="M 140 0 L 170 -25 L 160 0 Z" fill={p.deep} />
        <path d="M 140 0 L 170 25 L 160 0 Z" fill={p.deep} />
      </g>
      {/* Sign / departure board hint */}
      <g opacity="0.45" transform="translate(1150, 130)">
        <rect x="0" y="0" width="220" height="80" fill={p.accent} rx="6" />
        <rect x="14" y="16" width="120" height="10" fill="#FFF" opacity="0.7" />
        <rect x="14" y="36" width="180" height="8" fill="#FFF" opacity="0.5" />
        <rect x="14" y="52" width="80" height="8" fill="#FFF" opacity="0.5" />
      </g>
      <rect x="0" y="780" width="1440" height="120" fill={p.ground} />
    </g>
  ),

  job: (p) => (
    <g>
      <rect x="0" y="0" width="1440" height="900" fill={p.sky} />
      {/* Office wall — bookshelf + framed art */}
      <g opacity="0.35">
        {/* Frame 1 */}
        <rect x="160" y="100" width="180" height="240" fill={p.soft} stroke={p.deep} strokeWidth="2" />
        <rect x="180" y="120" width="140" height="200" fill={p.accent} opacity="0.4" />
        {/* Frame 2 */}
        <rect x="400" y="140" width="120" height="160" fill={p.soft} stroke={p.deep} strokeWidth="2" />
      </g>
      {/* Bookshelf (right) */}
      <g opacity="0.4" transform="translate(1080, 80)">
        <rect x="0" y="0" width="300" height="540" fill="none" stroke={p.deep} strokeWidth="2" />
        <line x1="0" y1="140" x2="300" y2="140" stroke={p.deep} strokeWidth="2" />
        <line x1="0" y1="280" x2="300" y2="280" stroke={p.deep} strokeWidth="2" />
        <line x1="0" y1="420" x2="300" y2="420" stroke={p.deep} strokeWidth="2" />
        {/* Books */}
        {[0, 1, 2, 3].map(row => (
          <g key={row} transform={`translate(20, ${row * 140 + 20})`}>
            <rect x="0" y="0" width="22" height="110" fill={p.accent} opacity="0.6" />
            <rect x="26" y="10" width="18" height="100" fill={p.deep} opacity="0.5" />
            <rect x="48" y="0" width="28" height="110" fill={p.soft} />
            <rect x="80" y="20" width="20" height="90" fill={p.accent} opacity="0.5" />
            <rect x="110" y="0" width="24" height="110" fill={p.deep} opacity="0.4" />
          </g>
        ))}
      </g>
      {/* Desk corner suggestion */}
      <rect x="0" y="700" width="1440" height="200" fill={p.ground} />
      <rect x="0" y="700" width="1440" height="8" fill={p.deep} opacity="0.2" />
    </g>
  ),

  restaurant: (p) => (
    <g>
      <rect x="0" y="0" width="1440" height="900" fill={p.sky} />
      {/* Warm pendant lights */}
      <g opacity="0.7">
        <line x1="280" y1="0" x2="280" y2="180" stroke={p.deep} strokeWidth="2" opacity="0.4" />
        <circle cx="280" cy="190" r="28" fill={p.accent} opacity="0.6" />
        <circle cx="280" cy="190" r="60" fill="#FFE7B8" opacity="0.3" />
        <line x1="1180" y1="0" x2="1180" y2="220" stroke={p.deep} strokeWidth="2" opacity="0.4" />
        <circle cx="1180" cy="230" r="28" fill={p.accent} opacity="0.6" />
        <circle cx="1180" cy="230" r="60" fill="#FFE7B8" opacity="0.3" />
      </g>
      {/* Wine bottles / shelves */}
      <g opacity="0.35" transform="translate(80, 320)">
        <rect x="0" y="180" width="300" height="6" fill={p.deep} />
        {[0, 1, 2, 3, 4].map(i => (
          <g key={i} transform={`translate(${i * 60 + 20}, 0)`}>
            <rect x="-8" y="100" width="16" height="80" fill={p.deep} opacity="0.6" />
            <rect x="-5" y="60" width="10" height="40" fill={p.deep} opacity="0.6" />
            <rect x="-3" y="50" width="6" height="10" fill={p.deep} />
          </g>
        ))}
      </g>
      {/* Table edge */}
      <rect x="0" y="760" width="1440" height="140" fill={p.ground} />
      <ellipse cx="720" cy="780" rx="280" ry="14" fill={p.deep} opacity="0.1" />
    </g>
  ),

  shopping: (p) => (
    <g>
      <rect x="0" y="0" width="1440" height="900" fill={p.sky} />
      {/* Clothing racks */}
      <g opacity="0.35">
        <line x1="120" y1="160" x2="500" y2="160" stroke={p.deep} strokeWidth="3" />
        {/* Hangers */}
        {[0, 1, 2, 3, 4, 5].map(i => (
          <g key={i} transform={`translate(${160 + i * 60}, 160)`}>
            <path d="M 0 0 L 0 30 L -25 80 L 25 80 Z" fill={p.accent} opacity={0.4 + (i % 3) * 0.15} />
            <path d="M -10 -5 q 10 -10 20 0" fill="none" stroke={p.deep} strokeWidth="2" />
          </g>
        ))}
      </g>
      {/* Right: shop window with mannequin silhouette */}
      <g opacity="0.4" transform="translate(1000, 200)">
        <rect x="0" y="0" width="360" height="500" fill="none" stroke={p.deep} strokeWidth="3" />
        {/* Mannequin */}
        <circle cx="180" cy="120" r="32" fill={p.deep} opacity="0.4" />
        <path d="M 130 160 L 230 160 L 240 320 L 120 320 Z" fill={p.accent} opacity="0.5" />
        <rect x="160" y="320" width="40" height="120" fill={p.deep} opacity="0.4" />
      </g>
      {/* Floor */}
      <rect x="0" y="780" width="1440" height="120" fill={p.ground} />
    </g>
  ),

  doctor: (p) => (
    <g>
      <rect x="0" y="0" width="1440" height="900" fill={p.sky} />
      {/* Wall chart */}
      <g opacity="0.35" transform="translate(200, 140)">
        <rect x="0" y="0" width="180" height="240" fill="#FFFFFF" stroke={p.deep} strokeWidth="2" />
        {[0, 1, 2, 3, 4].map(i => (
          <rect key={i} x="20" y={30 + i * 38} width={140 - i * 22} height="6" fill={p.deep} opacity={0.7 - i * 0.1} />
        ))}
      </g>
      {/* Plus sign (medical) */}
      <g opacity="0.2" transform="translate(1180, 200)">
        <rect x="-20" y="-60" width="40" height="120" fill={p.accent} />
        <rect x="-60" y="-20" width="120" height="40" fill={p.accent} />
      </g>
      {/* Cabinet */}
      <g opacity="0.35" transform="translate(900, 380)">
        <rect x="0" y="0" width="280" height="320" fill="none" stroke={p.deep} strokeWidth="2" />
        <line x1="140" y1="0" x2="140" y2="320" stroke={p.deep} strokeWidth="2" />
        <line x1="0" y1="160" x2="280" y2="160" stroke={p.deep} strokeWidth="2" />
      </g>
      {/* Floor */}
      <rect x="0" y="780" width="1440" height="120" fill={p.ground} />
    </g>
  ),

  hotel: (p) => (
    <g>
      <rect x="0" y="0" width="1440" height="900" fill={p.sky} />
      {/* Reception counter hint + arches */}
      <g opacity="0.35">
        {[0, 1, 2].map(i => (
          <path
            key={i}
            d={`M ${120 + i * 420} 100 Q ${300 + i * 420} -100 ${480 + i * 420} 100 L ${480 + i * 420} 400 L ${120 + i * 420} 400 Z`}
            fill="none"
            stroke={p.deep}
            strokeWidth="3"
          />
        ))}
      </g>
      {/* Chandelier */}
      <g opacity="0.5" transform="translate(720, 0)">
        <line x1="0" y1="0" x2="0" y2="140" stroke={p.deep} strokeWidth="2" />
        <ellipse cx="0" cy="160" rx="80" ry="20" fill={p.accent} opacity="0.6" />
        {[-60, -30, 0, 30, 60].map(x => (
          <circle key={x} cx={x} cy="180" r="6" fill="#FFE7B8" />
        ))}
      </g>
      {/* Floor + carpet */}
      <rect x="0" y="700" width="1440" height="200" fill={p.ground} />
      <rect x="200" y="720" width="1040" height="180" fill={p.accent} opacity="0.15" />
    </g>
  ),

  friends: (p) => (
    <g>
      <rect x="0" y="0" width="1440" height="900" fill={p.sky} />
      {/* Park: tree silhouettes + sun */}
      <circle cx="1180" cy="220" r="60" fill={p.accent} opacity="0.3" />
      <g opacity="0.4">
        {[
          { x: 140, r: 90 },
          { x: 340, r: 70 },
          { x: 1180, r: 110 },
          { x: 1340, r: 80 },
        ].map((t, i) => (
          <g key={i} transform={`translate(${t.x}, 580)`}>
            <rect x="-12" y="0" width="24" height="120" fill={p.deep} opacity="0.6" />
            <circle cx="0" cy="-30" r={t.r} fill={p.soft} stroke={p.deep} strokeWidth="2" opacity="0.7" />
          </g>
        ))}
      </g>
      {/* Path */}
      <path d="M 0 800 Q 720 720 1440 800 L 1440 900 L 0 900 Z" fill={p.ground} />
      <path d="M 0 800 Q 720 720 1440 800" stroke={p.deep} strokeWidth="2" fill="none" opacity="0.15" />
    </g>
  ),
};

window.Scene = Scene;
window.SCENE_PALETTES = SCENE_PALETTES;