// ── Map + list combined view ─────────────────────────────────────
const { Icon, Photo, HeartBtn, DealTag, fmtPrice, fmtPriceShort, MAP_POS } = window;

function MapHorizCard({ l, saved, onOpen, onToggleSave, onOpenReel }) {
  return (
    <div onClick={() => onOpen(l.id)} style={{ cursor: 'pointer', width: 300, flexShrink: 0,
      background: 'var(--surface)', borderRadius: 18, overflow: 'hidden', display: 'flex',
      boxShadow: '0 8px 30px rgba(0,0,0,0.16)', scrollSnapAlign: 'center' }}>
      <div style={{ position: 'relative', width: 122, flexShrink: 0 }}>
        <Photo hue={l.hue} kind={l.type} label={false} />
        {l.video && (
          <button onClick={(e) => { e.stopPropagation(); onOpenReel(l.id); }} style={{ position: 'absolute',
            bottom: 8, left: 8, width: 28, height: 28, borderRadius: 999, border: 'none', cursor: 'pointer',
            background: 'rgba(20,20,18,0.6)', backdropFilter: 'blur(8px)', display: 'flex',
            alignItems: 'center', justifyContent: 'center' }}>
            <Icon name="play" size={12} s="#fff" fill="#fff" /></button>
        )}
      </div>
      <div style={{ flex: 1, padding: '12px 12px 12px 14px', minWidth: 0 }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <span style={{ fontFamily: 'var(--sans)', fontSize: 18, fontWeight: 700, letterSpacing: -0.4,
            color: 'var(--ink)' }}>{fmtPrice(l)}</span>
          <HeartBtn active={saved} onClick={() => onToggleSave(l.id)} size={30} />
        </div>
        <div style={{ marginTop: 6, fontFamily: 'var(--sans)', fontSize: 13.5, fontWeight: 500,
          color: 'var(--ink)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{l.address}</div>
        <div style={{ marginTop: 1, fontFamily: 'var(--sans)', fontSize: 12.5, color: 'var(--muted)' }}>
          {l.hood}</div>
        <div style={{ marginTop: 7, fontFamily: 'var(--sans)', fontSize: 12.5, color: 'var(--ink)' }}>
          {l.beds} bd · {l.baths} ba · {l.sqft.toLocaleString()} sqft</div>
      </div>
    </div>
  );
}

function MapView({ listings, saved, selected, setSelected, onOpen, onToggleSave, onOpenReel, onOpenFilters, deal }) {
  const railRef = React.useRef(null);

  const selectPin = (id) => {
    setSelected(id);
    const idx = listings.findIndex(l => l.id === id);
    const rail = railRef.current;
    if (rail && idx >= 0) {
      const card = rail.children[idx];
      if (card) rail.scrollTo({ left: card.offsetLeft - (rail.clientWidth - card.clientWidth) / 2, behavior: 'smooth' });
    }
  };

  return (
    <div style={{ position: 'relative', height: '100%', overflow: 'hidden', background: 'oklch(0.95 0.012 150)' }}>
      {/* faux map base */}
      <div style={{ position: 'absolute', inset: 0 }}>
        {/* parks */}
        <div style={{ position: 'absolute', left: '8%', top: '12%', width: '34%', height: '22%',
          borderRadius: 24, background: 'oklch(0.91 0.04 150)' }} />
        <div style={{ position: 'absolute', right: '6%', bottom: '20%', width: '30%', height: '26%',
          borderRadius: 24, background: 'oklch(0.91 0.04 150)' }} />
        {/* water */}
        <div style={{ position: 'absolute', right: '-10%', top: '-8%', width: '40%', height: '40%',
          borderRadius: '0 0 0 60%', background: 'oklch(0.9 0.045 230)' }} />
        {/* roads */}
        {[22, 44, 66, 82].map((t, i) => (
          <div key={'h' + i} style={{ position: 'absolute', left: 0, right: 0, top: t + '%', height: i % 2 ? 6 : 9,
            background: 'var(--surface)', opacity: 0.9 }} />
        ))}
        {[20, 40, 58, 76].map((lft, i) => (
          <div key={'v' + i} style={{ position: 'absolute', top: 0, bottom: 0, left: lft + '%', width: i % 2 ? 6 : 9,
            background: 'var(--surface)', opacity: 0.9 }} />
        ))}
      </div>

      {/* floating top controls */}
      <div style={{ position: 'absolute', top: 60, left: 16, right: 16, zIndex: 6, display: 'flex', gap: 10 }}>
        <div style={{ flex: 1, display: 'flex', alignItems: 'center', gap: 9, height: 46, padding: '0 15px',
          borderRadius: 13, background: 'var(--surface)', boxShadow: '0 4px 16px rgba(0,0,0,0.12)', minWidth: 0 }}>
          <Icon name="search" size={19} s="var(--muted)" />
          <span style={{ flex: 1, fontFamily: 'var(--sans)', fontSize: 14.5, color: 'var(--ink)', fontWeight: 600,
            whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>San Francisco</span>
          <span style={{ fontFamily: 'var(--mono)', fontSize: 10, color: 'var(--muted)', flexShrink: 0,
            textTransform: 'uppercase', letterSpacing: 0.4, whiteSpace: 'nowrap' }}>
            {deal === 'all' ? 'Buy · Rent' : deal}</span>
        </div>
        <button onClick={onOpenFilters} style={{ width: 46, height: 46, borderRadius: 13, border: 'none',
          background: 'var(--surface)', boxShadow: '0 4px 16px rgba(0,0,0,0.12)', cursor: 'pointer',
          display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <Icon name="sliders" size={21} s="var(--ink)" />
        </button>
      </div>

      {/* price pins */}
      {listings.map(l => {
        const pos = MAP_POS[l.id] || [50, 50];
        const isSel = selected === l.id;
        return (
          <button key={l.id} onClick={() => selectPin(l.id)} style={{ position: 'absolute',
            left: pos[0] + '%', top: pos[1] + '%', transform: 'translate(-50%,-50%)', zIndex: isSel ? 5 : 3,
            border: 'none', cursor: 'pointer', height: 32, padding: '0 11px', borderRadius: 999,
            fontFamily: 'var(--sans)', fontSize: 13, fontWeight: 700, letterSpacing: -0.2,
            background: isSel ? 'var(--accent)' : 'var(--ink)', color: '#fff',
            boxShadow: isSel ? '0 4px 14px oklch(0.52 0.08 165 / 0.5)' : '0 2px 8px rgba(0,0,0,0.3)',
            transition: 'all .16s ease', transformOrigin: 'center',
            scale: isSel ? '1.12' : '1' }}>
            {fmtPriceShort(l)}
          </button>
        );
      })}

      {/* my-location + zoom controls */}
      <div style={{ position: 'absolute', right: 16, bottom: 200, zIndex: 6, display: 'flex',
        flexDirection: 'column', gap: 10 }}>
        <div style={{ width: 46, borderRadius: 13, background: 'var(--surface)', overflow: 'hidden',
          boxShadow: '0 4px 16px rgba(0,0,0,0.12)' }}>
          {['plus', 'close'].map((ic, i) => (
            <div key={ic} style={{ height: 44, display: 'flex', alignItems: 'center', justifyContent: 'center',
              borderTop: i ? '1px solid var(--line)' : 'none' }}>
              <Icon name={ic === 'close' ? 'close' : 'plus'} size={ic === 'close' ? 16 : 20} s="var(--ink)" sw={2} />
            </div>
          ))}
        </div>
        <div style={{ width: 46, height: 46, borderRadius: 13, background: 'var(--surface)', display: 'flex',
          alignItems: 'center', justifyContent: 'center', boxShadow: '0 4px 16px rgba(0,0,0,0.12)' }}>
          <Icon name="pin" size={22} s="var(--accent)" />
        </div>
      </div>

      {/* bottom card rail */}
      <div ref={railRef} style={{ position: 'absolute', left: 0, right: 0, bottom: 96, zIndex: 6,
        display: 'flex', gap: 12, padding: '0 16px', overflowX: 'auto', scrollSnapType: 'x mandatory',
        WebkitOverflowScrolling: 'touch' }} className="no-scrollbar">
        {listings.map(l => (
          <MapHorizCard key={l.id} l={l} saved={saved.has(l.id)} onOpen={onOpen}
            onToggleSave={onToggleSave} onOpenReel={onOpenReel} />
        ))}
      </div>
    </div>
  );
}

window.MapView = MapView;