// Stylized monochrome Austin map for ECR property summary
// Pure SVG abstraction — no real geography, but evokes Austin's grid + river + highways

const ECR = {
  charcoal: '#3F4443',
  red: '#D6001C',
  grayMid: '#919D9D',
  grayLight: '#BEC6C4',
  orange: '#FF6720',
  cream: '#EFEADE',
  burgundy: '#651C32',
  white: '#FFFFFF',
  charcoal70: '#6b7170',
  charcoal20: '#d4d6d6',
  charcoal10: '#eaebeb',
  cream80: '#f5f2ec',
};

const TYPE_GLYPHS = {
  Office: 'O',
  Industrial: 'I',
  Medical: 'M',
  Land: 'L',
};

const TYPE_COLORS = {
  Office: ECR.charcoal,
  Industrial: ECR.charcoal70,
  Medical: ECR.burgundy,
  Land: ECR.grayMid,
};

// ── AustinMap ─────────────────────────────────────────────────────────────
function AustinMap({ properties, activeId, hoveredId, favoriteIds, onHover, onSelect }) {
  const VB_W = 1000;
  const VB_H = 700;

  return (
    <svg viewBox={`0 0 ${VB_W} ${VB_H}`} style={{ width: '100%', height: '100%', display: 'block', background: ECR.cream80 }} preserveAspectRatio="xMidYMid slice">
      <defs>
        <pattern id="mapGrid" width="40" height="40" patternUnits="userSpaceOnUse">
          <path d="M 40 0 L 0 0 0 40" fill="none" stroke={ECR.charcoal} strokeWidth="0.4" opacity="0.08" />
        </pattern>
        <pattern id="mapGridMajor" width="200" height="200" patternUnits="userSpaceOnUse">
          <path d="M 200 0 L 0 0 0 200" fill="none" stroke={ECR.charcoal} strokeWidth="0.8" opacity="0.10" />
        </pattern>
        <filter id="pinShadow" x="-50%" y="-50%" width="200%" height="200%">
          <feDropShadow dx="0" dy="2" stdDeviation="3" floodColor={ECR.charcoal} floodOpacity="0.35" />
        </filter>
      </defs>

      {/* Base */}
      <rect width={VB_W} height={VB_H} fill={ECR.cream80} />
      <rect width={VB_W} height={VB_H} fill="url(#mapGrid)" />
      <rect width={VB_W} height={VB_H} fill="url(#mapGridMajor)" />

      {/* Neighborhood blocks (light fill plates) */}
      <g opacity="0.55">
        <rect x="280" y="280" width="160" height="120" fill={ECR.charcoal10} />
        <rect x="440" y="280" width="180" height="120" fill={ECR.charcoal10} />
        <rect x="620" y="240" width="180" height="160" fill={ECR.charcoal10} />
        <rect x="280" y="400" width="160" height="140" fill={ECR.cream} />
        <rect x="440" y="400" width="180" height="140" fill={ECR.cream} />
      </g>

      {/* Lady Bird Lake / Colorado River — a curved horizontal band */}
      <g>
        <path
          d="M -20 470 C 120 460, 220 480, 320 462 S 520 440, 640 460 S 880 478, 1020 458 L 1020 510 C 880 528, 720 504, 600 520 S 380 540, 240 520 S 80 510, -20 526 Z"
          fill={ECR.grayMid}
          opacity="0.32"
        />
        <path
          d="M -20 480 C 120 472, 220 488, 320 472 S 520 452, 640 470 S 880 484, 1020 466"
          fill="none"
          stroke={ECR.charcoal70}
          strokeWidth="0.8"
          opacity="0.6"
        />
        <path
          d="M -20 510 C 120 524, 220 504, 320 514 S 520 532, 640 514 S 880 510, 1020 522"
          fill="none"
          stroke={ECR.charcoal70}
          strokeWidth="0.8"
          opacity="0.6"
        />
      </g>

      {/* Highways — major arterials. IH-35 (vertical east-side), Mopac (vertical west), 290 (horizontal south), 183 (diagonal NW) */}
      <g fill="none" strokeLinecap="round">
        {/* IH-35 */}
        <line x1="540" y1="0" x2="555" y2="700" stroke={ECR.charcoal} strokeWidth="3.5" opacity="0.55" />
        <line x1="540" y1="0" x2="555" y2="700" stroke={ECR.cream80} strokeWidth="1.2" strokeDasharray="2 8" opacity="0.7" />
        {/* Mopac */}
        <line x1="280" y1="0" x2="300" y2="700" stroke={ECR.charcoal} strokeWidth="2.5" opacity="0.45" />
        {/* 183 — diagonal NW to SE */}
        <path d="M 380 0 L 700 700" stroke={ECR.charcoal} strokeWidth="2.5" opacity="0.40" />
        {/* 290 east */}
        <line x1="0" y1="450" x2="1000" y2="430" stroke={ECR.charcoal} strokeWidth="2" opacity="0.30" />
        {/* SH-130 east loop */}
        <path d="M 820 0 Q 880 200, 840 400 T 820 700" stroke={ECR.charcoal} strokeWidth="2" opacity="0.35" />
        {/* Loop 360 west */}
        <path d="M 180 200 Q 100 380, 180 580" stroke={ECR.charcoal} strokeWidth="1.8" opacity="0.30" />
        {/* 71 SW */}
        <path d="M 0 600 Q 200 580, 360 540" stroke={ECR.charcoal} strokeWidth="1.8" opacity="0.30" />
      </g>

      {/* Minor street grid downtown */}
      <g stroke={ECR.charcoal} strokeWidth="0.6" opacity="0.18">
        {[330, 360, 390, 420].map(x => <line key={'v'+x} x1={x} y1="340" x2={x} y2="450" />)}
        {[360, 380, 400, 420, 440].map(y => <line key={'h'+y} x1="320" y1={y} x2="540" y2={y} />)}
      </g>
      {/* Minor grid east side */}
      <g stroke={ECR.charcoal} strokeWidth="0.5" opacity="0.13">
        {[580, 620, 660, 700, 740].map(x => <line key={'ev'+x} x1={x} y1="320" x2={x} y2="500" />)}
        {[340, 370, 400, 430, 460, 490].map(y => <line key={'eh'+y} x1="560" y1={y} x2="780" y2={y} />)}
      </g>

      {/* Landmark labels */}
      <g fontFamily="Montserrat, sans-serif" fontWeight="600" fontSize="9" letterSpacing="2.5" fill={ECR.charcoal70} opacity="0.55" textAnchor="middle">
        <text x="430" y="395">DOWNTOWN</text>
        <text x="430" y="500">SOCO</text>
        <text x="650" y="370">EAST</text>
        <text x="430" y="200">NORTH LOOP</text>
        <text x="430" y="225">/ HYDE PARK</text>
        <text x="700" y="120">TECH RIDGE</text>
        <text x="160" y="540">WESTLAKE</text>
        <text x="500" y="80">ROUND ROCK</text>
        <text x="800" y="240">MANOR</text>
        <text x="100" y="640">BEE CAVE</text>
        <text x="850" y="100">PFLUGERVILLE</text>
        <text x="430" y="498" fontSize="7" letterSpacing="2" fill={ECR.charcoal70} opacity="0.7"></text>
      </g>
      <g fontFamily="Montserrat, sans-serif" fontWeight="400" fontSize="7.5" letterSpacing="1.8" fill={ECR.charcoal70} opacity="0.5">
        {/* River label */}
        <text x="40" y="486" fontStyle="italic">LADY BIRD LAKE</text>
      </g>

      {/* Highway labels */}
      <g fontFamily="Montserrat, sans-serif" fontWeight="700" fontSize="8" letterSpacing="1.5" fill={ECR.charcoal} opacity="0.55" textAnchor="middle">
        <g>
          <rect x="540" y="640" width="34" height="14" fill={ECR.cream80} />
          <text x="557" y="650">IH-35</text>
        </g>
        <g>
          <rect x="278" y="640" width="40" height="14" fill={ECR.cream80} />
          <text x="298" y="650">MOPAC</text>
        </g>
        <g>
          <rect x="20" y="442" width="34" height="14" fill={ECR.cream80} />
          <text x="37" y="452">290</text>
        </g>
        <g>
          <rect x="945" y="350" width="34" height="14" fill={ECR.cream80} />
          <text x="962" y="360">SH-130</text>
        </g>
        <g>
          <rect x="668" y="640" width="34" height="14" fill={ECR.cream80} />
          <text x="685" y="650">183</text>
        </g>
      </g>

      {/* North arrow */}
      <g transform="translate(940, 50)">
        <circle r="22" fill={ECR.white} stroke={ECR.charcoal} strokeWidth="0.8" opacity="0.85" />
        <path d="M 0 -14 L 6 8 L 0 4 L -6 8 Z" fill={ECR.red} />
        <text textAnchor="middle" y="20" fontFamily="Montserrat" fontWeight="700" fontSize="9" letterSpacing="2" fill={ECR.charcoal}>N</text>
      </g>

      {/* Scale bar */}
      <g transform="translate(40, 640)">
        <rect x="0" y="0" width="40" height="4" fill={ECR.charcoal} />
        <rect x="40" y="0" width="40" height="4" fill={ECR.white} stroke={ECR.charcoal} strokeWidth="0.8" />
        <text x="0" y="-4" fontFamily="Montserrat" fontWeight="600" fontSize="7" letterSpacing="1.5" fill={ECR.charcoal70}>0</text>
        <text x="40" y="-4" fontFamily="Montserrat" fontWeight="600" fontSize="7" letterSpacing="1.5" fill={ECR.charcoal70}>2</text>
        <text x="80" y="-4" fontFamily="Montserrat" fontWeight="600" fontSize="7" letterSpacing="1.5" fill={ECR.charcoal70}>4 MI</text>
      </g>

      {/* Pins */}
      {properties.map((p, idx) => {
        const x = p.coord.x * VB_W;
        const y = p.coord.y * VB_H;
        const isActive = p.id === activeId;
        const isHover = p.id === hoveredId;
        const isFav = favoriteIds.has(p.id);
        const num = idx + 1;
        const pinColor = isActive ? ECR.red : TYPE_COLORS[p.type];
        const r = isActive ? 20 : (isHover ? 18 : 14);
        return (
          <g
            key={p.id}
            transform={`translate(${x} ${y})`}
            style={{ cursor: 'pointer', transition: 'all 200ms cubic-bezier(0.4, 0, 0.2, 1)' }}
            onMouseEnter={() => onHover(p.id)}
            onMouseLeave={() => onHover(null)}
            onClick={() => onSelect(p.id)}
          >
            {/* halo on active */}
            {isActive && (
              <>
                <circle r="34" fill={ECR.red} opacity="0.10">
                  <animate attributeName="r" values="28;38;28" dur="2.4s" repeatCount="indefinite" />
                  <animate attributeName="opacity" values="0.15;0.04;0.15" dur="2.4s" repeatCount="indefinite" />
                </circle>
                <circle r="28" fill="none" stroke={ECR.red} strokeWidth="1.2" opacity="0.5" />
              </>
            )}
            {/* drop pin shape — circle with stem */}
            <path
              d={`M 0 ${r + 8} L ${-r * 0.55} ${r * 0.55} A ${r} ${r} 0 1 1 ${r * 0.55} ${r * 0.55} Z`}
              fill={pinColor}
              filter="url(#pinShadow)"
            />
            <circle r={r - 2} cy={-r * 0.05} fill={pinColor} stroke={ECR.white} strokeWidth="1.5" />
            <text
              y={-r * 0.05 + 4}
              textAnchor="middle"
              fontFamily="Montserrat, sans-serif"
              fontWeight="700"
              fontSize={isActive ? 13 : 11}
              letterSpacing="0.5"
              fill={ECR.white}
            >
              {num}
            </text>
            {/* favorite indicator */}
            {isFav && (
              <g transform={`translate(${r * 0.85} ${-r * 0.95})`}>
                <circle r="6.5" fill={ECR.red} stroke={ECR.white} strokeWidth="1.2" />
                <path d="M 0 1.5 L -2 -0.5 A 1.4 1.4 0 1 1 0 -1.5 A 1.4 1.4 0 1 1 2 -0.5 Z" fill={ECR.white} transform="scale(1.1)" />
              </g>
            )}
          </g>
        );
      })}

      {/* Hover preview card (rendered last so it sits on top) */}
      {hoveredId && hoveredId !== activeId && (() => {
        const p = properties.find(pp => pp.id === hoveredId);
        if (!p) return null;
        const x = p.coord.x * VB_W;
        const y = p.coord.y * VB_H;
        const W = 220, H = 70;
        // flip side if too close to right edge
        const goLeft = x + W + 30 > VB_W;
        const cx = goLeft ? x - W - 24 : x + 24;
        const cy = Math.max(10, Math.min(VB_H - H - 10, y - H / 2));
        return (
          <g transform={`translate(${cx} ${cy})`} style={{ pointerEvents: 'none' }}>
            <rect width={W} height={H} fill={ECR.white} stroke={ECR.charcoal20} strokeWidth="1" filter="url(#pinShadow)" />
            <rect width="3" height={H} fill={TYPE_COLORS[p.type]} />
            <text x="14" y="20" fontFamily="Montserrat" fontWeight="700" fontSize="9" letterSpacing="1.8" fill={TYPE_COLORS[p.type]}>{p.type.toUpperCase()}</text>
            <text x="14" y="38" fontFamily="Montserrat" fontWeight="700" fontSize="11" letterSpacing="0.8" fill={ECR.charcoal}>{p.name.length > 26 ? p.name.slice(0, 25) + '…' : p.name}</text>
            <text x="14" y="54" fontFamily="Montserrat" fontWeight="400" fontSize="9" letterSpacing="0.5" fill={ECR.charcoal70}>{p.sf.toLocaleString()} SF · {p.status}</text>
            <text x={W - 12} y="62" textAnchor="end" fontFamily="Montserrat" fontWeight="600" fontSize="8" letterSpacing="1.5" fill={ECR.red}>{p.rate}</text>
          </g>
        );
      })()}
    </svg>
  );
}

Object.assign(window, { AustinMap, ECR, TYPE_COLORS, TYPE_GLYPHS });