// Daoob AI — Riyadh map component
// Stylized SVG representation of Riyadh with selectable parcels.

const { useState, useRef, useEffect, useMemo } = React;

// Major roads as SVG paths (in 1000x700 space)
const ROADS = {
  primary: [
    // Northern Ring
    { d: "M 40 80 L 960 80", name: { en: "Northern Ring", ar: "الطريق الدائري الشمالي" }, lblX: 500, lblY: 72 },
    // Eastern Ring
    { d: "M 880 60 L 880 640", name: { en: "Eastern Ring", ar: "الدائري الشرقي" }, lblX: 894, lblY: 350, rot: -90 },
    // Western Ring
    { d: "M 90 90 L 90 580", name: { en: "Western Ring", ar: "الدائري الغربي" }, lblX: 76, lblY: 340, rot: -90 },
    // Southern Ring
    { d: "M 80 580 L 900 580", name: { en: "Southern Ring", ar: "الدائري الجنوبي" }, lblX: 500, lblY: 596 },
    // King Fahd Rd (vertical, center)
    { d: "M 500 80 L 500 580", name: { en: "King Fahd Rd", ar: "طريق الملك فهد" }, lblX: 488, lblY: 500, rot: -90 },
    // King Abdullah Rd (horizontal mid-north)
    { d: "M 90 220 L 880 220", name: { en: "King Abdullah Rd", ar: "طريق الملك عبدالله" }, lblX: 200, lblY: 214 },
    // Makkah Rd (horizontal mid-south)
    { d: "M 90 460 L 880 460", name: { en: "Makkah Rd", ar: "طريق مكة" }, lblX: 200, lblY: 454 },
    // Khurais Rd
    { d: "M 500 380 L 880 380", name: { en: "Khurais Rd", ar: "طريق خريص" }, lblX: 760, lblY: 374 },
  ],
  secondary: [
    // Olaya St (parallel to King Fahd, west)
    "M 460 80 L 460 580",
    "M 440 80 L 440 580",
    // Tahlia / Prince Mohammed
    "M 90 320 L 500 320",
    // Prince Sultan Rd
    "M 90 380 L 500 380",
    // Imam Saud bin Faisal
    "M 90 160 L 880 160",
    // North-eastern grid
    "M 600 80 L 600 580",
    "M 700 80 L 700 580",
    "M 800 80 L 800 580",
    "M 200 80 L 200 580",
    "M 300 80 L 300 580",
    // East-west grid
    "M 90 280 L 880 280",
    "M 90 420 L 880 420",
    "M 90 520 L 880 520",
    "M 90 120 L 880 120",
  ],
  tertiary: [
    // Fine grid
    ...Array.from({ length: 20 }, (_, i) => `M ${110 + i * 40} 80 L ${110 + i * 40} 580`),
    ...Array.from({ length: 12 }, (_, i) => `M 90 ${100 + i * 40} L 880 ${100 + i * 40}`),
  ],
};

// District label positions
const DISTRICT_LABELS = [
  { id: "olaya",        x: 490, y: 296 },
  { id: "sulaymaniyah", x: 410, y: 258 },
  { id: "malaz",        x: 586, y: 428 },
  { id: "diplomatic",   x: 244, y: 250 },
  { id: "malqa",        x: 378, y: 148 },
  { id: "hittin",       x: 306, y: 164 },
  { id: "yasmin",       x: 598, y: 154 },
  { id: "kafd",         x: 492, y: 184 },
  { id: "naseem",       x: 778, y: 424 },
  { id: "rawdah",       x: 704, y: 364 },
  { id: "irqah",        x: 172, y: 328 },
  { id: "nakheel",      x: 450, y: 362 },
];

// Build a polygon path for a parcel rect with slight irregularity
function parcelPath(p) {
  const { x, y, w, h, id } = p;
  // deterministic jitter from id
  const seed = id.charCodeAt(id.length - 1);
  const j = (n) => ((seed * n) % 7) - 3;
  return [
    `M ${x + j(1)} ${y + j(2)}`,
    `L ${x + w + j(3)} ${y + j(4)}`,
    `L ${x + w + j(5)} ${y + h + j(6)}`,
    `L ${x + j(7)} ${y + h + j(8)}`,
    "Z",
  ].join(" ");
}

const BASEMAP_STYLE = {
  street: { bg: "#0a3927", land: "#0b3f2c", roadPrimary: "rgba(232, 214, 168, 0.85)", roadSecondary: "rgba(232, 214, 168, 0.30)", roadTertiary: "rgba(232, 214, 168, 0.10)", label: "#E8D6A8" },
  satellite: { bg: "#1a1e16", land: "#1f2520", roadPrimary: "rgba(255, 247, 220, 0.55)", roadSecondary: "rgba(255, 247, 220, 0.20)", roadTertiary: "rgba(255, 247, 220, 0.06)", label: "#F2E6C8" },
  minimal: { bg: "#F6F2E8", land: "#EEEADD", roadPrimary: "rgba(11, 93, 59, 0.65)", roadSecondary: "rgba(11, 93, 59, 0.20)", roadTertiary: "rgba(11, 93, 59, 0.08)", label: "#063522" },
};

const RiyadhMap = ({
  parcels,
  zoning,
  districts,
  selectedId,
  onSelect,
  basemap = "street",
  showZoning = true,
  showLabels = true,
  filterZones = null, // array of zone keys or null
  lang = "en",
}) => {
  const [zoom, setZoom] = useState(1);
  const [pan, setPan] = useState({ x: 0, y: 0 });
  const [hover, setHover] = useState(null);
  const dragRef = useRef(null);
  const style = BASEMAP_STYLE[basemap];

  const filtered = useMemo(() => {
    if (!filterZones || filterZones.length === 0) return parcels;
    return parcels.filter(p => filterZones.includes(p.zone));
  }, [parcels, filterZones]);

  const onMouseDown = (e) => {
    dragRef.current = { x: e.clientX, y: e.clientY, panX: pan.x, panY: pan.y };
  };
  const onMouseMove = (e) => {
    if (!dragRef.current) return;
    const dx = e.clientX - dragRef.current.x;
    const dy = e.clientY - dragRef.current.y;
    setPan({ x: dragRef.current.panX + dx, y: dragRef.current.panY + dy });
  };
  const onMouseUp = () => { dragRef.current = null; };

  // viewBox stays fixed; we transform an inner group
  const viewW = 1000, viewH = 700;

  return (
    <div className="map-canvas" style={{ background: style.bg }}>
      <svg
        viewBox={`0 0 ${viewW} ${viewH}`}
        preserveAspectRatio="xMidYMid slice"
        width="100%" height="100%"
        onMouseDown={onMouseDown}
        onMouseMove={onMouseMove}
        onMouseUp={onMouseUp}
        onMouseLeave={onMouseUp}
        style={{ display: "block", cursor: dragRef.current ? "grabbing" : "grab", userSelect: "none" }}
      >
        <defs>
          <pattern id="sand" x="0" y="0" width="6" height="6" patternUnits="userSpaceOnUse">
            <rect width="6" height="6" fill={style.land}/>
            <circle cx="2" cy="3" r="0.4" fill={style.bg} opacity="0.4"/>
          </pattern>
          <pattern id="wadi" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse">
            <path d="M0 20 Q 10 10 20 20 T 40 20" fill="none" stroke={basemap === "minimal" ? "rgba(11,93,59,0.10)" : "rgba(58,111,176,0.18)"} strokeWidth="3"/>
          </pattern>
          <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
            <feGaussianBlur stdDeviation="3" result="blur"/>
            <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
          </filter>
        </defs>

        <g transform={`translate(${pan.x},${pan.y}) scale(${zoom})`} style={{ transformOrigin: "center" }}>
          {/* Land background */}
          <rect x="0" y="0" width={viewW} height={viewH} fill="url(#sand)"/>

          {/* Wadi Hanifa — diagonal river-park strip */}
          <path
            d="M 80 80 Q 220 240 280 360 T 380 620"
            fill="none"
            stroke="url(#wadi)"
            strokeWidth="34"
            opacity={basemap === "minimal" ? 0.6 : 0.9}
          />

          {/* Tertiary grid */}
          <g stroke={style.roadTertiary} strokeWidth="0.6">
            {ROADS.tertiary.map((d, i) => <path key={i} d={d}/>)}
          </g>

          {/* Secondary roads */}
          <g stroke={style.roadSecondary} strokeWidth="1.4" fill="none">
            {ROADS.secondary.map((d, i) => <path key={i} d={d}/>)}
          </g>

          {/* District subtle fills */}
          {showZoning && (
            <g opacity="0.10">
              {/* Just a few large shapes for atmospheric color */}
              <rect x="430" y="240" width="120" height="120" fill={zoning.mixed.color}/>
              <rect x="430" y="140" width="120" height="100" fill={zoning.commercial.color}/>
              <rect x="200" y="200" width="120" height="80"  fill={zoning.govt.color}/>
              <rect x="670" y="380" width="160" height="120" fill={zoning.industrial.color}/>
            </g>
          )}

          {/* Primary roads */}
          <g stroke={style.roadPrimary} strokeWidth="3.2" fill="none" strokeLinecap="round">
            {ROADS.primary.map((r, i) => <path key={i} d={r.d}/>)}
          </g>

          {/* Road name labels */}
          {showLabels && (
            <g fontFamily="var(--font-mono)" fontSize="9" fill={style.label} opacity="0.7">
              {ROADS.primary.map((r, i) => (
                <text
                  key={i}
                  x={r.lblX} y={r.lblY}
                  textAnchor="middle"
                  transform={r.rot ? `rotate(${r.rot} ${r.lblX} ${r.lblY})` : undefined}
                  style={{ letterSpacing: "0.04em" }}
                >
                  {r.name[lang]?.toUpperCase() || r.name.en.toUpperCase()}
                </text>
              ))}
            </g>
          )}

          {/* District labels */}
          {showLabels && (
            <g fontFamily="var(--font-sans)" fontWeight="500" fontSize="11" fill={style.label}>
              {DISTRICT_LABELS.map(d => (
                <text key={d.id} x={d.x} y={d.y} textAnchor="middle" opacity="0.85">
                  {districts[d.id]?.[lang] || districts[d.id]?.en}
                </text>
              ))}
            </g>
          )}

          {/* Parcels */}
          <g>
            {filtered.map(p => {
              const isSelected = selectedId === p.id;
              const isHover = hover === p.id;
              const color = zoning[p.zone].color;
              return (
                <g key={p.id}>
                  <path
                    d={parcelPath(p)}
                    fill={color}
                    fillOpacity={isSelected ? 0.85 : isHover ? 0.65 : 0.45}
                    stroke={isSelected ? "#fff" : color}
                    strokeWidth={isSelected ? 2 : 1}
                    style={{ cursor: "pointer", transition: "fill-opacity 0.15s" }}
                    onClick={(e) => { e.stopPropagation(); onSelect(p.id); }}
                    onMouseEnter={() => setHover(p.id)}
                    onMouseLeave={() => setHover(h => h === p.id ? null : h)}
                  />
                  {p.featured && !isSelected && (
                    <circle cx={p.x + p.w / 2} cy={p.y + p.h / 2} r="3" fill="#fff" filter="url(#glow)"/>
                  )}
                </g>
              );
            })}
          </g>

          {/* Selected parcel pin */}
          {(() => {
            const sel = filtered.find(p => p.id === selectedId);
            if (!sel) return null;
            const cx = sel.x + sel.w / 2;
            const cy = sel.y + sel.h / 2;
            return (
              <g style={{ pointerEvents: "none" }}>
                <circle cx={cx} cy={cy} r="14" fill="none" stroke="#C8A35A" strokeWidth="1.5" opacity="0.6">
                  <animate attributeName="r" values="14;22;14" dur="2s" repeatCount="indefinite"/>
                  <animate attributeName="opacity" values="0.6;0;0.6" dur="2s" repeatCount="indefinite"/>
                </circle>
                <circle cx={cx} cy={cy} r="5" fill="#C8A35A" stroke="#fff" strokeWidth="1.5"/>
                <text x={cx} y={cy - 16} textAnchor="middle" fontFamily="var(--font-mono)" fontSize="9" fill="#fff" style={{ paintOrder: "stroke", stroke: "#063522", strokeWidth: 3, strokeLinejoin: "round" }}>
                  {sel.id}
                </text>
              </g>
            );
          })()}

          {/* Compass rose */}
          <g transform="translate(56, 130)" opacity="0.55">
            <circle r="20" fill="none" stroke={style.label} strokeWidth="0.6"/>
            <path d="M 0 -16 L 4 0 L 0 16 L -4 0 Z" fill={style.label}/>
            <text y="-22" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="8" fill={style.label}>N</text>
          </g>
        </g>
      </svg>

      {/* Map controls */}
      <div className="map-zoom">
        <button onClick={() => setZoom(z => Math.min(2.5, z * 1.2))}><Icon name="plus" size={14}/></button>
        <button onClick={() => setZoom(z => Math.max(0.6, z / 1.2))}><Icon name="minus" size={14}/></button>
        <button onClick={() => { setZoom(1); setPan({ x: 0, y: 0 }); }}><Icon name="compass" size={14}/></button>
      </div>

      {/* Coordinate readout */}
      <div className="map-meta">
        24.7136° N · 46.6753° E · z{zoom.toFixed(2)}
      </div>
    </div>
  );
};

Object.assign(window, { RiyadhMap, BASEMAP_STYLE });