// Pantalla de criterios — define la búsqueda y los pesos
function CriteriaScreen({ criteria, setCriteria, onClose }) {
  const T = useTheme();
  const set = (patch) => setCriteria({ ...criteria, ...patch });
  const setW = (k, v) => set({ weights: { ...criteria.weights, [k]: v } });
  const setT = (k, v) => set({ transit: { ...criteria.transit, [k]: v } });

  const sectorsByCity = {
    'Bogotá':    ['Cedritos','Usaquén','Chapinero Alto','Chicó Norte','Rosales','Santa Bárbara',
                  'Salitre','Modelia','La Candelaria','Quinta Camacho','Colina Campestre','Suba'],
    'Medellín':  ['El Poblado','Laureles','Envigado','Belén','Sabaneta','La Estrella'],
    'Cali':      ['Granada','San Fernando','Pance','Versalles','Ciudad Jardín','El Peñón'],
    'Chía':      ['Centro','Fagua','Fonquetá','La Balsa','Yerbabuena'],
    'Cajicá':    ['Centro','Capellanía','Calahorra','Río Grande','Chuntame'],
    'Cota':      ['Centro','El Abra','Cetime','Vuelta Grande','Pueblo Viejo'],
    'La Calera': ['Centro','El Salitre','Aurora Alta','San José','Márquez'],
    'Guasca':    ['Centro','Santa Bárbara','Santa Ana','Mariano Ospina','La Trinidad'],
    'Zipaquirá': ['Centro Histórico','Algarra','Algodonal','Bosques','San Juanito'],
    'Cogua':     ['Centro','Mortiño','Casa Blanca','Susagua','Quebrada Honda'],
  };
  const allSectors = sectorsByCity[criteria.city] || sectorsByCity['Bogotá'];

  const toggleSector = (s) => {
    const has = criteria.sectors.includes(s);
    set({ sectors: has ? criteria.sectors.filter(x => x !== s) : [...criteria.sectors, s] });
  };
  const toggleEstrato = (e) => {
    const has = criteria.estratos.includes(e);
    set({ estratos: has ? criteria.estratos.filter(x => x !== e) : [...criteria.estratos, e].sort() });
  };

  return (
    <div style={{ background: T.bg, minHeight: '100%', paddingBottom: 100 }}>
      {/* Header */}
      <div style={{
        padding: '60px 20px 14px',
        display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between',
      }}>
        <div>
          <div style={{ fontFamily: T.sans, fontSize: 11, color: T.ink2,
            letterSpacing: 1.4, textTransform: 'uppercase', marginBottom: 6 }}>
            Criterios
          </div>
          <div style={{ fontFamily: T.serif, fontSize: 32, color: T.ink, lineHeight: 1, fontWeight: 400 }}>
            Tu <span style={{ fontStyle: 'italic' }}>búsqueda</span>
          </div>
        </div>
        <button onClick={onClose} style={{
          appearance: 'none', cursor: 'pointer', padding: '8px 14px', borderRadius: 999,
          background: T.ink, color: T.bg, border: 'none',
          fontFamily: T.sans, fontSize: 13, fontWeight: 500,
        }}>Aplicar</button>
      </div>

      {/* Tipo transacción */}
      <Section title="Operación">
        <Segment
          options={[
            { value: 'compra',   label: 'Compra'  },
            { value: 'arriendo', label: 'Arriendo' },
          ]}
          value={criteria.transaction}
          onChange={(v) => set({ transaction: v })}
        />
      </Section>

      {/* Ciudad */}
      <Section title="Ciudad">
        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
          {['Bogotá','Medellín','Cali','Chía','Cajicá','Cota','La Calera','Guasca','Zipaquirá','Cogua'].map(c => (
            <SelectablePill key={c} active={criteria.city === c} onClick={() => set({ city: c, sectors: [] })}>
              {c}
            </SelectablePill>
          ))}
        </div>
      </Section>

      {/* Tipo de inmueble */}
      <Section title="Tipo de inmueble">
        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
          {['Apartamento','Apartaestudio','Casa','Casa campestre','Casa lote','Lote'].map(t => (
            <SelectablePill key={t} active={criteria.type === t} onClick={() => set({ type: t })}>
              {t}
            </SelectablePill>
          ))}
        </div>
      </Section>

      {/* Precio */}
      <Section title="Precio">
        {criteria.transaction === 'compra' ? (
          <>
            <MiniSlider label="Mínimo" min={100000000} max={2000000000} step={10000000}
              value={criteria.priceMin} onChange={(v) => set({ priceMin: Math.min(v, criteria.priceMax) })}
              format={fmt.cop} />
            <div style={{ height: 12 }} />
            <MiniSlider label="Máximo" min={100000000} max={3000000000} step={10000000}
              value={criteria.priceMax} onChange={(v) => set({ priceMax: Math.max(v, criteria.priceMin) })}
              format={fmt.cop} />
          </>
        ) : (
          <>
            <MiniSlider label="Mínimo /mes" min={500000} max={8000000} step={50000}
              value={criteria.priceMin} onChange={(v) => set({ priceMin: Math.min(v, criteria.priceMax) })}
              format={fmt.cop} />
            <div style={{ height: 12 }} />
            <MiniSlider label="Máximo /mes" min={500000} max={12000000} step={50000}
              value={criteria.priceMax} onChange={(v) => set({ priceMax: Math.max(v, criteria.priceMin) })}
              format={fmt.cop} />
          </>
        )}
      </Section>

      {/* Área */}
      <Section title="Área">
        <MiniSlider label="Mínima" min={20} max={200} step={5}
          value={criteria.areaMin} onChange={(v) => set({ areaMin: Math.min(v, criteria.areaMax) })}
          format={fmt.m2}/>
        <div style={{ height: 12 }}/>
        <MiniSlider label="Máxima" min={20} max={400} step={5}
          value={criteria.areaMax} onChange={(v) => set({ areaMax: Math.max(v, criteria.areaMin) })}
          format={fmt.m2}/>
      </Section>

      {/* Habitaciones / baños / parqueaderos */}
      <Section title="Distribución">
        <div style={{ display: 'flex', gap: 8 }}>
          <NumberStepper label="Hab." value={criteria.rooms} onChange={(v) => set({ rooms: v })} min={1} max={6}/>
          <NumberStepper label="Baños" value={criteria.baths} onChange={(v) => set({ baths: v })} min={1} max={5}/>
          <NumberStepper label="Parq." value={criteria.parking} onChange={(v) => set({ parking: v })} min={0} max={4}/>
        </div>
        <div style={{ height: 14 }}/>
        <MiniSlider label="Piso mínimo (apartamento)" min={0} max={20} step={1}
          value={criteria.floorMin} onChange={(v) => set({ floorMin: v })}/>
      </Section>

      {/* Estrato */}
      <Section title="Estrato">
        <div style={{ display: 'flex', gap: 8 }}>
          {[2,3,4,5,6].map(e => (
            <SelectablePill key={e} active={criteria.estratos.includes(e)} onClick={() => toggleEstrato(e)}>
              {e}
            </SelectablePill>
          ))}
        </div>
      </Section>

      {/* Zona geográfica */}
      <Section title="Sectores de interés">
        <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
          {allSectors.map(s => (
            <SelectablePill key={s} active={criteria.sectors.includes(s)} onClick={() => toggleSector(s)} small>
              {s}
            </SelectablePill>
          ))}
        </div>
        <div style={{
          marginTop: 14, padding: 14, borderRadius: 12,
          background: T.surf, border: `0.5px solid ${T.line}`,
        }}>
          <div style={{ fontFamily: T.sans, fontSize: 10.5, color: T.ink2,
            letterSpacing: 1, textTransform: 'uppercase', marginBottom: 10 }}>
            Rango por nomenclatura
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
            <NumberPair label="Carrera" minV={criteria.carreraMin} maxV={criteria.carreraMax}
              onChange={(min, max) => set({ carreraMin: min, carreraMax: max })}/>
            <NumberPair label="Calle"   minV={criteria.calleMin} maxV={criteria.calleMax}
              onChange={(min, max) => set({ calleMin: min, calleMax: max })}/>
          </div>
        </div>
      </Section>

      {/* Transporte */}
      <Section title="Transporte priorizado">
        <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
          <ToggleRow label="TransMilenio" hint="Cercanía a estaciones troncales"
            value={criteria.transit.transmilenio} onChange={(v) => setT('transmilenio', v)} />
          <ToggleRow label="SITP" hint="Paraderos zonales"
            value={criteria.transit.sitp} onChange={(v) => setT('sitp', v)} />
          <ToggleRow label="Metro de Bogotá" hint="Estaciones futura Línea 1"
            value={criteria.transit.metro} onChange={(v) => setT('metro', v)} />
          <ToggleRow label="Ciclorruta" hint="Acceso a red de bicicletas"
            value={criteria.transit.bike} onChange={(v) => setT('bike', v)} />
        </div>
      </Section>

      {/* Sostenibilidad */}
      <Section title="Sostenibilidad">
        <ToggleRow label="Carga para vehículos eléctricos" hint="Cargador en parqueadero o edificio"
          value={criteria.needsEV} onChange={(v) => set({ needsEV: v })} />
        <ToggleRow label="Sistemas de ahorro de servicios" hint="Solar, reuso de agua, gas natural"
          value={criteria.needsEcoUtilities} onChange={(v) => set({ needsEcoUtilities: v })} />
        <ToggleRow label="Pet friendly" hint="Permite mascotas"
          value={criteria.petFriendly} onChange={(v) => set({ petFriendly: v })} />
      </Section>

      {/* Pesos del ranking */}
      <Section title="Importancia de cada criterio"
        subtitle="Mueve los sliders para ajustar cómo se rankean los resultados">
        {[
          ['Precio',         'price'],
          ['Área',           'area'],
          ['Transporte',     'transit'],
          ['Amenidades',     'amenities'],
          ['Sostenibilidad', 'sustain'],
          ['Cercanías',      'nearby'],
          ['Estrato',        'estrato'],
          ['Piso',           'floor'],
        ].map(([label, key]) => (
          <React.Fragment key={key}>
            <MiniSlider label={label} min={0} max={100} step={5}
              value={criteria.weights[key]} onChange={(v) => setW(key, v)}/>
            <div style={{ height: 10 }}/>
          </React.Fragment>
        ))}
      </Section>

      <div style={{ padding: '8px 20px 28px' }}>
        <Pill primary full onClick={onClose}>Aplicar criterios</Pill>
      </div>
    </div>
  );
}

function Section({ title, subtitle, children }) {
  const T = useTheme();
  return (
    <div style={{ padding: '14px 20px' }}>
      <div style={{ fontFamily: T.sans, fontSize: 11, color: T.ink2,
        letterSpacing: 1.2, textTransform: 'uppercase', marginBottom: subtitle ? 4 : 12,
        fontWeight: 500 }}>
        {title}
      </div>
      {subtitle && (
        <div style={{ fontFamily: T.sans, fontSize: 11.5, color: T.ink2,
          marginBottom: 12, fontStyle: 'italic' }}>{subtitle}</div>
      )}
      <div style={{
        padding: 14, borderRadius: T.radius,
        background: T.surf, border: `0.5px solid ${T.line}`,
      }}>
        {children}
      </div>
    </div>
  );
}

function SelectablePill({ active, onClick, children, small }) {
  const T = useTheme();
  return (
    <button onClick={onClick} style={{
      appearance: 'none', cursor: 'pointer',
      padding: small ? '6px 12px' : '8px 14px', borderRadius: 999,
      background: active ? T.ink : 'transparent',
      color: active ? T.bg : T.ink,
      border: `0.5px solid ${active ? T.ink : T.line}`,
      fontFamily: T.sans, fontSize: small ? 12 : 13, fontWeight: 500,
    }}>{children}</button>
  );
}

function NumberStepper({ label, value, onChange, min, max }) {
  const T = useTheme();
  return (
    <div style={{
      flex: 1, padding: 10, borderRadius: 12,
      border: `0.5px solid ${T.line}`,
    }}>
      <div style={{ fontFamily: T.sans, fontSize: 10.5, color: T.ink2,
        letterSpacing: 0.6, textTransform: 'uppercase', marginBottom: 6 }}>{label}</div>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <button onClick={() => onChange(Math.max(min, value - 1))} style={{
          appearance: 'none', border: 'none', cursor: 'pointer',
          width: 22, height: 22, borderRadius: 999, background: T.surf2,
          color: T.ink, fontFamily: T.mono, fontSize: 14,
        }}>−</button>
        <span style={{ fontFamily: T.mono, fontSize: 17, color: T.ink, fontWeight: 600 }}>
          {value}{value === max ? '+' : ''}
        </span>
        <button onClick={() => onChange(Math.min(max, value + 1))} style={{
          appearance: 'none', border: 'none', cursor: 'pointer',
          width: 22, height: 22, borderRadius: 999, background: T.surf2,
          color: T.ink, fontFamily: T.mono, fontSize: 14,
        }}>+</button>
      </div>
    </div>
  );
}

function NumberPair({ label, minV, maxV, onChange }) {
  const T = useTheme();
  return (
    <div>
      <div style={{ fontFamily: T.sans, fontSize: 10.5, color: T.ink2,
        marginBottom: 6 }}>{label}</div>
      <div style={{
        display: 'flex', alignItems: 'center', gap: 6,
        padding: '8px 10px', borderRadius: 10, border: `0.5px solid ${T.line}`,
      }}>
        <input type="number" value={minV}
          onChange={(e) => onChange(+e.target.value, maxV)}
          style={{
            width: '100%', border: 'none', outline: 'none', background: 'transparent',
            fontFamily: T.mono, fontSize: 13, color: T.ink, textAlign: 'center',
          }}/>
        <span style={{ fontFamily: T.mono, fontSize: 12, color: T.ink3 }}>—</span>
        <input type="number" value={maxV}
          onChange={(e) => onChange(minV, +e.target.value)}
          style={{
            width: '100%', border: 'none', outline: 'none', background: 'transparent',
            fontFamily: T.mono, fontSize: 13, color: T.ink, textAlign: 'center',
          }}/>
      </div>
    </div>
  );
}

function ToggleRow({ label, hint, value, onChange }) {
  const T = useTheme();
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 12, padding: '10px 0',
      borderBottom: `0.5px solid ${T.line}`,
    }}>
      <div style={{ flex: 1 }}>
        <div style={{ fontFamily: T.sans, fontSize: 13.5, color: T.ink, fontWeight: 500 }}>{label}</div>
        {hint && <div style={{ fontFamily: T.sans, fontSize: 11, color: T.ink2, marginTop: 2 }}>{hint}</div>}
      </div>
      <button onClick={() => onChange(!value)} style={{
        appearance: 'none', border: 'none', cursor: 'pointer',
        width: 42, height: 24, borderRadius: 999,
        background: value ? T.accent : T.line, position: 'relative',
        transition: 'background 0.2s',
      }}>
        <div style={{
          position: 'absolute', top: 2, left: value ? 20 : 2,
          width: 20, height: 20, borderRadius: 999, background: '#fff',
          transition: 'left 0.2s', boxShadow: '0 1px 3px rgba(0,0,0,0.18)',
        }} />
      </button>
    </div>
  );
}

Object.assign(window, { CriteriaScreen });