// Slovenia map — real GeoJSON boundary, hover-expand + select-to-label interaction
const { useMemo: useMapMemo, useState: useMapState } = React;

const SLO_PATH = "M 32.45,24.82 L 34.59,25.26 L 37.17,25.18 L 40.58,25.4 L 45.89,26.8 L 46.08,26.86 L 47.11,27.27 L 47.36,27.5 L 47.62,27.98 L 47.83,28.49 L 48.53,29.27 L 48.67,29.37 L 48.86,29.43 L 60.73,30.58 L 63.22,31.22 L 73.15,25.71 L 73.27,25.56 L 73.65,24.03 L 73.93,22.67 L 74.02,22.23 L 75.12,20.29 L 75.35,20.02 L 81.88,18.07 L 82.57,18.08 L 82.94,18.26 L 83.91,17.86 L 84.09,17.8 L 85.36,17.8 L 95.29,18.05 L 102.61,16.21 L 110.21,14.5 L 111.18,14.3 L 111.82,14.24 L 112.51,14.26 L 116.97,12.75 L 116.96,12.32 L 116.87,8.67 L 116.87,8.45 L 116.99,8.31 L 117.17,8.26 L 117.76,8.21 L 121.58,6.37 L 122.49,6.9 L 122.66,6.99 L 122.83,6.99 L 123.96,6.76 L 124.15,6.7 L 124.55,6.37 L 125.87,6.04 L 126.05,6.0 L 127.46,6.12 L 128.34,6.31 L 128.7,6.48 L 130.3,7.6 L 130.41,7.73 L 130.47,7.91 L 130.47,8.14 L 129.97,9.63 L 129.29,10.12 L 129.15,10.24 L 129.1,10.45 L 129.1,10.9 L 129.49,12.42 L 129.57,12.57 L 130.69,14.35 L 130.8,14.48 L 131.01,14.47 L 131.39,14.27 L 131.77,15.41 L 132.63,17.71 L 137.13,25.7 L 137.25,25.83 L 140.05,27.53 L 139.73,27.6 L 139.19,27.7 L 138.73,27.58 L 138.14,27.38 L 136.7,26.7 L 135.96,26.18 L 135.83,26.07 L 135.88,25.85 L 135.8,25.68 L 134.78,25.16 L 134.6,25.09 L 131.72,24.32 L 129.91,24.43 L 128.31,24.59 L 127.38,25.47 L 127.03,25.88 L 126.79,26.31 L 126.7,26.77 L 126.72,27.0 L 127.32,30.58 L 122.63,31.27 L 122.47,31.34 L 120.24,32.47 L 120.2,33.1 L 120.18,33.58 L 120.3,34.17 L 120.37,34.31 L 120.52,35.17 L 120.43,35.33 L 120.31,35.45 L 118.05,37.11 L 109.88,40.59 L 106.06,41.02 L 105.37,40.95 L 105.17,40.96 L 104.8,41.09 L 104.55,41.33 L 104.35,41.63 L 102.96,44.16 L 102.56,45.28 L 102.5,45.47 L 102.75,46.9 L 103.61,48.46 L 103.87,48.71 L 104.64,49.4 L 104.8,49.52 L 105.46,49.59 L 106.5,50.04 L 106.67,50.13 L 106.79,50.25 L 106.92,50.59 L 106.96,51.04 L 107.15,56.43 L 106.16,61.51 L 106.03,61.63 L 104.63,62.63 L 104.41,62.64 L 104.24,62.6 L 103.81,62.29 L 103.44,61.91 L 103.27,61.61 L 103.06,61.33 L 102.87,61.27 L 102.62,61.27 L 98.77,61.96 L 92.6,65.69 L 92.18,65.96 L 91.68,66.47 L 91.2,67.24 L 91.04,67.59 L 90.66,68.95 L 90.63,69.19 L 90.72,69.54 L 90.96,69.84 L 91.12,69.92 L 91.45,69.75 L 91.53,69.59 L 91.53,69.36 L 91.5,68.92 L 93.14,68.42 L 93.52,68.48 L 93.78,68.74 L 93.86,68.89 L 93.88,69.11 L 93.3,71.85 L 91.61,73.03 L 91.12,74.93 L 91.44,77.81 L 91.5,77.98 L 91.58,78.14 L 90.49,82.01 L 86.67,84.0 L 86.23,83.96 L 85.78,83.67 L 83.65,81.61 L 83.54,81.48 L 79.39,79.99 L 77.14,80.38 L 76.95,81.0 L 76.87,81.17 L 76.73,81.27 L 75.09,81.7 L 73.9,81.87 L 73.58,81.91 L 73.39,81.83 L 69.88,78.32 L 66.24,74.26 L 65.85,73.71 L 65.63,73.19 L 65.62,72.53 L 65.73,71.19 L 65.71,70.92 L 65.63,70.77 L 65.52,70.63 L 65.32,70.59 L 64.41,70.9 L 63.97,71.14 L 63.87,71.32 L 62.85,73.98 L 61.6,77.23 L 61.39,77.77 L 61.02,78.41 L 58.56,80.33 L 58.09,80.59 L 57.73,80.71 L 57.36,80.8 L 48.04,81.34 L 42.77,81.52 L 42.52,82.01 L 42.43,82.16 L 42.23,82.22 L 41.16,82.34 L 39.46,82.52 L 31.89,83.01 L 30.97,82.97 L 30.56,82.89 L 29.81,82.64 L 29.5,82.49 L 29.03,82.22 L 28.31,81.7 L 27.85,81.21 L 27.72,81.0 L 27.63,79.1 L 30.48,77.7 L 33.42,77.55 L 33.59,77.49 L 33.7,77.34 L 33.74,77.13 L 32.38,74.85 L 35.56,75.37 L 36.51,75.47 L 37.37,75.43 L 37.85,75.22 L 39.89,72.81 L 39.91,72.62 L 39.83,72.47 L 36.79,68.3 L 35.34,66.56 L 35.06,66.33 L 34.9,66.24 L 31.66,64.73 L 28.42,63.58 L 27.96,63.3 L 27.87,63.15 L 27.24,61.39 L 27.2,60.97 L 27.62,59.28 L 27.7,59.09 L 27.78,58.93 L 28.46,58.39 L 28.57,58.25 L 28.72,57.9 L 29.29,56.16 L 29.35,55.7 L 29.42,54.49 L 29.39,53.92 L 29.33,53.74 L 29.23,53.61 L 29.03,53.55 L 28.1,53.47 L 27.46,53.53 L 27.3,53.61 L 26.94,54.25 L 26.69,54.51 L 26.55,54.59 L 25.89,54.88 L 25.72,54.79 L 24.93,54.1 L 24.41,53.64 L 23.56,52.53 L 23.54,52.41 L 25.12,49.73 L 25.75,48.86 L 26.0,48.61 L 26.35,48.46 L 26.55,48.43 L 26.86,48.26 L 27.79,47.47 L 29.73,45.47 L 29.91,45.14 L 30.52,43.98 L 30.6,43.81 L 30.6,43.59 L 30.43,43.29 L 30.18,43.05 L 26.19,41.41 L 23.97,40.69 L 23.78,40.63 L 23.0,40.8 L 22.63,41.42 L 22.47,41.51 L 21.54,41.77 L 21.34,41.75 L 21.18,41.66 L 21.06,41.53 L 19.98,37.38 L 19.95,37.15 L 22.1,34.51 L 24.73,32.45 L 30.18,28.95 L 31.22,29.18 L 31.36,29.07 L 31.56,28.76 L 31.68,28.39 L 32.17,26.64 L 32.46,25.49 L 32.48,25.03 L 32.45,24.82 Z";

const SLOVENIAN_CITIES = [
  { name: "Ljubljana",   x: 61.8,  y: 50.4 },
  { name: "Maribor",     x: 104.2, y: 23.3 },
  { name: "Kranj",       x: 56.2,  y: 40.3 },
  { name: "Celje",       x: 90.1,  y: 40.7 },
  { name: "Koper",       x: 32.9,  y: 77.4 },
  { name: "Piran",       x: 26.9,  y: 78.5 },
  { name: "Nova Gorica", x: 29.9,  y: 55.5 },
  { name: "Bled",        x: 47.0,  y: 33.3 },
  { name: "Ptuj",        x: 112.6, y: 30.6 },
  { name: "Škofja Loka", x: 54.3,  y: 44.2 },
  { name: "Idrija",      x: 43.9,  y: 53.2 },
  { name: "Kamnik",      x: 65.6,  y: 41.0 },
];

function SloveniaMap({ workshops, activeCity, onCityClick, mini = false }) {
  const [hoveredCity, setHoveredCity] = useMapState(null);

  const cityCounts = useMapMemo(() => {
    const m = {};
    workshops.forEach(w => { m[w.city] = (m[w.city] || 0) + 1; });
    return m;
  }, [workshops]);

  return (
    <svg viewBox="0 0 160 90" className="slovenia-map" preserveAspectRatio="xMidYMid meet"
         style={{ overflow: "visible" }}>
      <defs>
        <pattern id="slo-hatch" patternUnits="userSpaceOnUse" width="3" height="3" patternTransform="rotate(45)">
          <line x1="0" y1="0" x2="0" y2="3" stroke="var(--ink)" strokeWidth="0.2" opacity="0.08"/>
        </pattern>
      </defs>

      {/* Slovenia fill + hatch */}
      <path d={SLO_PATH} fill="var(--paper-2)" stroke="var(--ink)" strokeWidth="0.5" strokeLinejoin="round" />
      <path d={SLO_PATH} fill="url(#slo-hatch)" />

      {/* City markers — dots first (all cities), then overlays so labels are never covered */}
      {SLOVENIAN_CITIES.map(city => {
        const count = cityCounts[city.name] || 0;
        const isActive = activeCity === city.name;
        const isHovered = hoveredCity === city.name;
        const isLjubljana = city.name === "Ljubljana";
        const hasWorkshops = count > 0;

        const rBase = hasWorkshops
          ? Math.min(0.72 + count * 0.2, 1.45)
          : (isLjubljana ? 0.52 : 0.38);
        const r = isHovered ? rBase * 1.32 : isActive ? rBase * 1.15 : rBase;

        const dotFill = isActive
          ? "var(--accent-cobalt)"
          : hasWorkshops
            ? "var(--accent-tomato)"
            : "var(--muted)";

        const dotOpacity = hasWorkshops || isLjubljana ? 1 : 0.5;

        return (
          <g key={city.name}
            onMouseEnter={() => setHoveredCity(city.name)}
            onMouseLeave={() => setHoveredCity(null)}
            onClick={() => onCityClick(city.name)}
            style={{ cursor: hasWorkshops || isLjubljana ? "pointer" : "default" }}>

            {isActive && (
              <circle cx={city.x} cy={city.y} r={r + 1.35}
                fill="var(--accent-cobalt)" opacity="0.22" />
            )}
            {isHovered && !isActive && hasWorkshops && (
              <circle cx={city.x} cy={city.y} r={r + 1.05}
                fill="var(--accent-tomato)" opacity="0.15" />
            )}

            <circle cx={city.x} cy={city.y} r={r}
              fill={dotFill}
              opacity={dotOpacity}
              stroke={isActive ? "var(--ink)" : "var(--paper)"}
              strokeWidth={isActive ? 0.42 : 0.32}
              style={{ transition: "r 0.15s" }} />
          </g>
        );
      })}

      {!mini && SLOVENIAN_CITIES.map(city => {
        const count = cityCounts[city.name] || 0;
        const isActive = activeCity === city.name;
        const isHovered = hoveredCity === city.name;
        const isLjubljana = city.name === "Ljubljana";
        const hasWorkshops = count > 0;
        const rBase = hasWorkshops
          ? Math.min(0.72 + count * 0.2, 1.45)
          : (isLjubljana ? 0.52 : 0.38);
        const r = isHovered ? rBase * 1.32 : isActive ? rBase * 1.15 : rBase;

        const showTooltip = isHovered && !isActive;
        const tip = `${city.name}${count ? ` · ${count}` : ""}`;
        const tipW = Math.max(12, tip.length * 1.85 + 3.5);
        const tipH = 6;
        const tipY = city.y - r - 9;

        return (
          <g key={`${city.name}-label`} pointerEvents="none">
            {showTooltip && (
              <g>
                <rect
                  x={city.x - tipW / 2}
                  y={tipY}
                  width={tipW}
                  height={tipH}
                  rx="1.3"
                  fill="var(--ink)"
                  opacity="0.94"
                />
                <text
                  x={city.x}
                  y={tipY + 4.25}
                  fontSize="2.5"
                  textAnchor="middle"
                  fill="var(--paper)"
                  fontFamily="var(--font-mono)"
                  fontWeight="600"
                >
                  {tip}
                </text>
              </g>
            )}
          </g>
        );
      })}

      {!mini && (
        <>
          <text x="10"  y="5"  fontSize="2.8" fontFamily="var(--font-mono)" fill="var(--muted)" opacity="0.65">AT</text>
          <text x="130" y="5"  fontSize="2.8" fontFamily="var(--font-mono)" fill="var(--muted)" opacity="0.65">HU</text>
          <text x="6"   y="60" fontSize="2.8" fontFamily="var(--font-mono)" fill="var(--muted)" opacity="0.65">IT</text>
          <text x="55"  y="88" fontSize="2.8" fontFamily="var(--font-mono)" fill="var(--muted)" opacity="0.65">HR</text>
          <text x="11" y="84" fontSize="2.4" fontFamily="var(--font-mono)" fill="var(--accent-cobalt)" opacity="0.55">Jadran</text>
          <g transform="translate(152,80)">
            <text x="0" y="0" fontSize="3" fontFamily="var(--font-mono)" fill="var(--muted)" textAnchor="middle">N</text>
            <line x1="0" y1="1" x2="0" y2="5" stroke="var(--ink)" strokeWidth="0.4" />
            <polygon points="0,0.5 -1,3 1,3" fill="var(--ink)" />
          </g>
        </>
      )}
    </svg>
  );
}

window.SloveniaMap = SloveniaMap;
window.SLOVENIAN_CITIES = SLOVENIAN_CITIES;