/* ============================================================================
   JOURNEY MAP — stylised map of the Vietnam route with teardrop pins and the
   trip's photos pinned to cities. All SVG so it stays crisp + exports cleanly.
   ============================================================================ */
function JourneyMap() {
  const T = window.TRIP;
  const store = usePhotos();

  // Approx pin coords on the 320×560 Vietnam viewBox, by city id.
  const COORDS = {
    hanoi: { x: 150, y: 92 }, halong: { x: 200, y: 116 }, sapa: { x: 120, y: 60 },
    hue: { x: 206, y: 232 }, danang: { x: 222, y: 286 }, hoian: { x: 232, y: 300 },
    nhatrang: { x: 236, y: 380 }, dalat: { x: 206, y: 402 },
    hcmc: { x: 140, y: 448 }, phuquoc: { x: 96, y: 486 },
  };
  const pins = T.cities.map((c, i) => {
    const co = COORDS[c.id] || { x: 160, y: 90 + i * 80 };
    return { id: c.id, name: c.name, x: co.x, y: co.y, n: i + 1 };
  });
  const route = pins.map((p) => `${p.x},${p.y}`).join(" ");

  // photo polaroid anchors (in water), each tied to an existing city pin
  const slots = [
    { cx: 62,  cy: 88,  rot: -6 },
    { cx: 270, cy: 158, rot: 5 },
    { cx: 70,  cy: 372, rot: -4 },
  ].map((s, i) => ({ ...s, to: pins[Math.min(i, pins.length - 1)] }));
  const photos = store.list.slice(0, 3);

  const accent = getComputedStyle(document.documentElement).getPropertyValue("--color-teal") || "#038387";

  return (
    <div style={{ position: "relative", borderRadius: 18, overflow: "hidden",
      boxShadow: "var(--shadow8)", border: "1px solid rgba(0,0,0,0.06)" }}>
      <svg viewBox="0 0 320 560" style={{ display: "block", width: "100%" }}>
        <defs>
          <clipPath id="jm-land">
            <path d="M 96 64 C 104 44 150 38 178 52 C 198 62 196 84 214 100 C 236 120 250 128 246 150 C 242 172 220 186 220 214 C 220 244 238 262 236 292 C 234 322 214 340 210 368 C 206 396 214 410 196 430 C 176 452 156 460 140 480 C 120 504 96 496 98 466 C 100 442 124 430 126 402 C 129 360 116 332 120 290 C 123 248 104 212 102 172 C 100 140 88 96 96 64 Z" />
          </clipPath>
        </defs>

        {/* water */}
        <rect x="0" y="0" width="320" height="560" fill="#dbe7e6" />
        {/* faint graticule */}
        {[80, 160, 240, 320, 400, 480].map((y) => (
          <line key={"h" + y} x1="0" y1={y} x2="320" y2={y} stroke="#c8d6d4" strokeWidth="1" />
        ))}
        {[80, 160, 240].map((x) => (
          <line key={"v" + x} x1={x} y1="0" x2={x} y2="560" stroke="#c8d6d4" strokeWidth="1" />
        ))}

        {/* land */}
        <path d="M 96 64 C 104 44 150 38 178 52 C 198 62 196 84 214 100 C 236 120 250 128 246 150 C 242 172 220 186 220 214 C 220 244 238 262 236 292 C 234 322 214 340 210 368 C 206 396 214 410 196 430 C 176 452 156 460 140 480 C 120 504 96 496 98 466 C 100 442 124 430 126 402 C 129 360 116 332 120 290 C 123 248 104 212 102 172 C 100 140 88 96 96 64 Z"
          fill="#f4efe2" stroke="#d8cfba" strokeWidth="1.5" />
        {/* subtle inland texture */}
        <g clipPath="url(#jm-land)" opacity="0.5">
          <path d="M120 120 Q160 160 150 220 T180 340 T150 440" fill="none" stroke="#e6dfca" strokeWidth="6" />
          <circle cx="160" cy="150" r="3" fill="#e3dcc6" />
          <circle cx="180" cy="300" r="3" fill="#e3dcc6" />
        </g>

        {/* route line (only when there's more than one stop) */}
        {pins.length > 1 && (
          <polyline points={route} fill="none" stroke="#eaa300" strokeWidth="2.5"
            strokeDasharray="2 7" strokeLinecap="round" />
        )}

        {/* connectors photo → pin */}
        {photos.map((ph, i) => {
          const s = slots[i]; if (!s) return null;
          return <line key={"c" + i} x1={s.cx} y1={s.cy} x2={s.to.x} y2={s.to.y - 8}
            stroke="#9aa5a3" strokeWidth="1" strokeDasharray="1.5 3" />;
        })}

        {/* pins */}
        {pins.map((p) => (
          <g key={p.id} transform={`translate(${p.x} ${p.y})`}>
            <ellipse cx="0" cy="1" rx="6" ry="2.4" fill="rgba(0,0,0,0.18)" />
            <path d="M0 0 C0 0 -12 -16 -12 -25 C-12 -32 -6 -38 0 -38 C6 -38 12 -32 12 -25 C12 -16 0 0 0 0 Z"
              fill={accent.trim() || "#038387"} stroke="#fff" strokeWidth="1.5" />
            <circle cx="0" cy="-25" r="5" fill="#fff" />
            <text x="0" y="-23" textAnchor="middle" fontSize="7" fontWeight="700" fill={accent.trim() || "#038387"} fontFamily="var(--fontFamilyBase)">{p.n}</text>
            <text x="0" y="14" textAnchor="middle" fontSize="11" fontWeight="700" fill="#3a4644"
              fontFamily="var(--fontFamilyBase)" style={{ paintOrder: "stroke", stroke: "#dbe7e6", strokeWidth: 3, strokeLinejoin: "round" }}>{p.name}</text>
          </g>
        ))}

        {/* photo polaroids */}
        {photos.map((ph, i) => {
          const s = slots[i]; if (!s) return null;
          const w = 74, h = 60;
          const cap = (ph.caption || ph.place || "").slice(0, 16);
          return (
            <g key={ph.id} transform={`translate(${s.cx} ${s.cy}) rotate(${s.rot})`}>
              <rect x={-w / 2} y={-h / 2} width={w} height={h + 16} rx="2.5" fill="#fff" stroke="rgba(0,0,0,0.12)" strokeWidth="0.75" />
              <rect x={-w / 2} y={-h / 2} width={w} height={h + 16} rx="2.5" fill="none" stroke="rgba(0,0,0,0.04)" strokeWidth="0.75" filter="url(#none)" />
              <image href={ph.src} x={-w / 2 + 4} y={-h / 2 + 4} width={w - 8} height={h - 8} preserveAspectRatio="xMidYMid slice" />
              {cap && <text x="0" y={h / 2 + 9} textAnchor="middle" fontSize="7" fill="#5a5a5a" fontFamily="var(--fontFamilySerif)" fontStyle="italic">{cap}</text>}
            </g>
          );
        })}

        {/* compass */}
        <g transform="translate(290 40)" opacity="0.7">
          <circle r="13" fill="#fff" stroke="#c2cfcd" strokeWidth="1" />
          <path d="M0 -9 L4 2 L0 -1 L-4 2 Z" fill="#ca5010" />
          <text x="0" y="-14" textAnchor="middle" fontSize="7" fontWeight="700" fill="#5a5a5a">N</text>
        </g>

        {/* start / end flags (multi-stop trips only) */}
        {pins.length > 1 && (
          <>
            <text x={pins[0].x + 16} y={pins[0].y - 30} fontSize="8" fontWeight="700" fill="#0a7d54" fontFamily="var(--fontFamilyBase)"
              style={{ paintOrder: "stroke", stroke: "#dbe7e6", strokeWidth: 3 }}>START</text>
            <text x={pins[pins.length - 1].x + 16} y={pins[pins.length - 1].y - 2} fontSize="8" fontWeight="700" fill="#ca5010" fontFamily="var(--fontFamilyBase)"
              style={{ paintOrder: "stroke", stroke: "#dbe7e6", strokeWidth: 3 }}>END</text>
          </>
        )}
      </svg>

      {photos.length === 0 && (
        <div style={{ position: "absolute", left: 0, right: 0, bottom: 0, padding: "10px 14px",
          background: "linear-gradient(0deg, rgba(255,255,255,0.95), rgba(255,255,255,0))",
          display: "flex", alignItems: "center", gap: 8 }}>
          <Icon name="camera" size={15} color="var(--color-pumpkin)" />
          <span style={{ fontSize: 11.5, color: "var(--colorNeutralForeground3)" }}>Add photos and they'll pin to the map here.</span>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { JourneyMap });