// Pantalla Mapa
function MapScreen({ criteria, onOpenProperty }) {
  const T = useTheme();
  const ranked = window.SCORING.rankProperties(window.PROPERTIES, criteria);
  const [selected, setSelected] = React.useState(ranked[0]?.p.id);
  const sel = ranked.find(r => r.p.id === selected);

  return (
    <div style={{ background: T.bg, minHeight: '100%', paddingBottom: 100 }}>
      <div style={{ padding: '60px 20px 14px' }}>
        <div style={{ fontFamily: T.sans, fontSize: 11, color: T.ink2,
          letterSpacing: 1.4, textTransform: 'uppercase', marginBottom: 6 }}>
          Mapa
        </div>
        <div style={{ fontFamily: T.serif, fontSize: 36, color: T.ink, lineHeight: 1, fontWeight: 400 }}>
          {ranked.length} <span style={{ fontStyle: 'italic' }}>resultados</span>
        </div>
      </div>

      <div style={{ padding: '0 20px 16px' }}>
        <MiniMap
          properties={ranked}
          current={selected}
          onSelect={setSelected}
          height={420}
        />
      </div>

      {sel && (
        <div style={{ padding: '0 20px 16px' }}>
          <div onClick={() => onOpenProperty(sel.p.id)} style={{
            display: 'flex', gap: 12, padding: 12, borderRadius: T.radius,
            background: T.surf, border: `0.5px solid ${T.line}`, cursor: 'pointer',
          }}>
            <div style={{ width: 80, flexShrink: 0 }}>
              <PropertyImage p={sel.p} height={80} showBadge={false} />
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 4 }}>
                <ScoreRing score={sel.score.total} size={28} stroke={2.5} label={false}/>
                <div style={{ fontFamily: T.mono, fontSize: 13, color: T.ink, fontWeight: 600 }}>
                  {sel.score.total}
                </div>
                {sel.p.transaction === 'compra' && sel.score.market &&
                  <MarketBadge market={sel.score.market} compact />
                }
              </div>
              <div style={{
                fontFamily: T.serif, fontSize: 17, color: T.ink, fontWeight: 400,
                lineHeight: 1.15, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
              }}>{sel.p.title}</div>
              <div style={{ fontFamily: T.sans, fontSize: 11, color: T.ink2, marginTop: 2 }}>
                {sel.p.address}
              </div>
              <div style={{ fontFamily: T.mono, fontSize: 12, color: T.ink, marginTop: 4 }}>
                {fmt.copFull(sel.p.price)} · {fmt.m2(sel.p.areaM2)}
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Lista horizontal */}
      <div style={{ padding: '4px 0 0' }}>
        <div style={{ padding: '0 20px 8px', fontFamily: T.sans, fontSize: 11,
          color: T.ink2, letterSpacing: 1.2, textTransform: 'uppercase' }}>
          Top 6 en el mapa
        </div>
        <div style={{
          display: 'flex', gap: 10, padding: '0 20px 16px',
          overflowX: 'auto', WebkitOverflowScrolling: 'touch',
        }}>
          {ranked.slice(0, 6).map((entry, i) => (
            <button key={entry.p.id} onClick={() => setSelected(entry.p.id)} style={{
              appearance: 'none', cursor: 'pointer', padding: 10, flexShrink: 0,
              width: 130, borderRadius: 14,
              background: T.surf,
              border: `0.5px solid ${selected === entry.p.id ? T.ink : T.line}`,
              textAlign: 'left',
            }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 6 }}>
                <span style={{ fontFamily: T.mono, fontSize: 9, color: T.ink2 }}>
                  #{String(i+1).padStart(2,'0')}
                </span>
                <span style={{ fontFamily: T.mono, fontSize: 12, color: T.ink, fontWeight: 600 }}>
                  {entry.score.total}
                </span>
              </div>
              <div style={{ fontFamily: T.serif, fontSize: 13, color: T.ink,
                lineHeight: 1.15, height: 30, overflow: 'hidden' }}>
                {entry.p.sector}
              </div>
              <div style={{ fontFamily: T.mono, fontSize: 10, color: T.ink2, marginTop: 4 }}>
                {fmt.cop(entry.p.price)}
              </div>
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { MapScreen });