// === Escena 04 — Los filtros ===
// Barra de PorCobrarSubpage.razor:66-104: «Buscar cliente...», «Antigüedad» y «Importe» (con sus
// opciones literales de agingOptions / importeOptions), una etiqueta por filtro que se quita al
// tocarla y el botón rojo «Limpiar filtros». Las cifras de arriba no filtran: salen de
// clientesOrdenados, no de filteredClientes.
function EscenaPC04({ t }){
  const G = GUION[3];
  const T = {
    tres:B(G,'tres filtros'),              // "hay tres filtros"
    buscar:B(G,'Buscar cliente'),          // "Buscar cliente"
    escribes:B(G,'escribes'),              // "escribes parte del nombre" -> se escribe «plaza»
    reduce:B(G,'se reduce'),               // "la lista se reduce"
    antig:B(G,'Antigüedad'),               // "Antigüedad" -> se abre el desplegable
    sesenta:B(G,'el tramo de sesenta'),          // "entre sesenta y ochenta y nueve días" -> se marca la opción
    importe:B(G,'Importe:'),               // "Importe" -> se abre el segundo desplegable
    menos:B(G,'menos de mil'),             // "menos de mil euros" -> se marca la opción
    etiqueta:B(G,'Cada filtro'),           // "Cada filtro deja una etiqueta debajo"
    tocala:B(G,'Tócala'),                  // "Tócala y ese filtro se quita"
    quita:B(G,'se quita'),                 // "se quita" -> desaparece la etiqueta «plaza»
    rojo:B(G,'El botón rojo'),             // "El botón rojo de la derecha"
    golpe:B(G,'todos de golpe'),           // "los quita todos de golpe"
    cifras:B(G,'las cifras de arriba'),    // "las cifras de arriba no cambian al filtrar"
    quien:B(G,'Ya sabes'),                 // "Ya sabes a quién"
  };

  // ── Estado de los filtros, derivado de t ──
  const texto = 'plaza';
  const escrito = t < T.escribes ? 0 : Math.min(texto.length, Math.floor((t - T.escribes) / 0.18) + 1);
  const quitaBusqueda = T.quita - 0.3;
  const quitaTodo = T.golpe;
  const busq = t >= quitaBusqueda ? '' : texto.slice(0, escrito);
  const antigOn = t >= T.sesenta + 1.4 && t < quitaTodo;
  const impOn = t >= T.menos + 1.0 && t < quitaTodo;
  const activos = busq.length === texto.length || antigOn || impOn;

  // ── Qué clientes quedan ──
  let visibles = CLIENTES;
  if (busq.length === texto.length) visibles = visibles.filter(c => c.nombre.toLowerCase().includes(texto));
  if (antigOn) visibles = visibles.filter(c => c.dias >= 60 && c.dias < 90);
  if (impOn) visibles = visibles.filter(c => c.total < 1000);

  const X = 40, W = 1620;
  const kpiOp = 0.5 + 0.5 * foco(t, T.cifras, T.quien + 1, 0.5);
  const kpiMarco = foco(t, T.cifras, T.quien, 0.5);
  const barra = ap(t, T.tres, 0.6);
  const ctl = (k) => foco(t, T.tres + k * 0.35, T.buscar, 0.35);

  // Desplegables abiertos
  const abreA = foco(t, T.antig + 0.4, T.sesenta + 1.3, 0.35);
  const abreI = foco(t, T.importe + 0.4, T.menos + 0.9, 0.35);
  const AG = ['Vencido +90 días', 'Vencido 60-89 días', 'Vencido 30-59 días', 'Vencido 1-29 días', 'Al día', 'Sin vencimiento'];
  const IM = ['Más de 10.000', '5.000 - 9.999', '1.000 - 4.999', 'Menos de 1.000'];
  const selA = ap(t, T.sesenta, 0.4), selI = ap(t, T.menos, 0.4);

  const chips = [];
  if (busq.length === texto.length) chips.push({ id:'b', txt:'"plaza"' });
  if (antigOn) chips.push({ id:'a', txt:'Vencido 60-89 días' });
  if (impOn) chips.push({ id:'i', txt:'Menos de 1.000' });
  const chipsFoco = foco(t, T.etiqueta, T.tocala, 0.5);

  const Desplegable = ({ x, w, valor, ph, realce }) => (
    <div style={{ position:'absolute', left:x, top:0, width:w, height:56, borderRadius:6, border:`1px solid ${realce > 0 ? PC.azul : '#c9d1db'}`, background:'#fff',
      boxShadow: realce > 0 ? `0 0 0 ${3 * realce}px rgba(29,115,226,0.18)` : 'none', display:'flex', alignItems:'center', padding:'0 14px', boxSizing:'border-box', gap:8 }}>
      <span style={{ flex:1, fontSize:19, color: valor ? PC.tinta : '#8a93a0', whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{valor || ph}</span>
      <Ico n="arrow_drop_down" s={28} c={PC.gris}/>
    </div>
  );

  return (
    <Fondo>
      <Cabecera t={t} eyebrow="3 · LOS FILTROS" titulo="Nombre, antigüedad e importe"/>
      <Ventana>
        <TituloPantalla op={0.6 * (1 - kpiMarco)}/>
        {/* Las cifras de arriba: no cambian */}
        <div style={{ position:'absolute', left:0, top:0, right:0, opacity:kpiOp }}>
          {KPIS.map((k, i) => <Kpi key={k.id} k={k} x={X + i * 330} y={96} w={300} h={104} valorSize={30}/>)}
        </div>
        {kpiMarco > 0 && (
          <div style={{ position:'absolute', left:X - 10, top:86, width:1640, height:124, borderRadius:16, border:`3px solid ${PC.azul}`, opacity:kpiMarco }}>
            <div className="f-plex" style={{ position:'absolute', right:0, top:-40, fontSize:20, fontWeight:600, color:PC.azul }}>Siempre cuentan todo</div>
          </div>
        )}

        {/* Barra de filtros */}
        <div style={{ position:'absolute', left:X, top:232, width:W, height:56, opacity:barra }}>
          <div style={{ position:'absolute', left:0, top:0, width:1020, height:56, borderRadius:6, border:`1px solid ${ctl(0) > 0 || (t >= T.buscar && t < T.antig) ? PC.azul : '#c9d1db'}`,
            boxShadow: ctl(0) > 0 ? `0 0 0 ${3 * ctl(0)}px rgba(29,115,226,0.18)` : 'none', display:'flex', alignItems:'center', gap:10, padding:'0 16px', boxSizing:'border-box', background:'#fff' }}>
            <Ico n="search" s={26} c={PC.gris}/>
            <span style={{ fontSize:20, color: busq ? PC.tinta : '#8a93a0' }}>{busq || 'Buscar cliente...'}</span>
            {t >= T.escribes && t < quitaBusqueda && escrito < texto.length && <span style={{ width:2, height:24, background:PC.tinta }}/>}
          </div>
          <Desplegable x={1040} w={250} ph="Antigüedad" valor={antigOn ? 'Vencido 60-89 días' : ''} realce={Math.max(ctl(1), abreA)}/>
          <Desplegable x={1306} w={250} ph="Importe" valor={impOn ? 'Menos de 1.000' : ''} realce={Math.max(ctl(2), abreI)}/>
          {activos && (
            <div style={{ position:'absolute', left:1572, top:4, width:48, height:48, borderRadius:6, display:'flex', alignItems:'center', justifyContent:'center',
              background: foco(t, T.rojo, T.golpe + 0.4, 0.4) > 0 ? `rgba(208,69,71,${0.12 * foco(t, T.rojo, T.golpe + 0.4, 0.4)})` : 'transparent' }}>
              <Ico n="filter_alt_off" s={28} c={PC.rojo}/>
            </div>
          )}
        </div>

        {/* Etiquetas de filtros activos */}
        <div style={{ position:'absolute', left:X, top:306, height:40, display:'flex', gap:10, padding:4, borderRadius:24,
          boxShadow: chipsFoco > 0 ? `0 0 0 ${3 * chipsFoco}px rgba(29,115,226,0.35)` : 'none' }}>
          {chips.map(c => (
            <span key={c.id} style={{ display:'inline-flex', alignItems:'center', gap:6, background:'rgba(170,218,255,0.5)', color:'#085786', borderRadius:16,
              padding:'5px 14px', fontSize:17, fontWeight:500, whiteSpace:'nowrap' }}>{c.txt}<Ico n="close" s={18} c="#085786"/></span>
          ))}
        </div>

        {/* La lista, ya filtrada (solo la cabecera de cada tarjeta) */}
        <div style={{ position:'absolute', left:0, right:0, top:366 }}>
          {visibles.slice(0, 4).map((c, i) => (
            <Cliente key={c.id} c={c} x={X} y={i * 98} w={W} op={ap(t, T.tres, 0.6) * (i === 0 && t >= T.quien ? 1 : 0.92)}
                     realceTotal={i === 0 ? foco(t, T.quien, 99, 0.5) : 0}/>
          ))}
        </div>

        {/* Desplegable de Antigüedad abierto */}
        {abreA > 0 && (
          <div style={{ position:'absolute', left:X + 1040, top:296, width:300, background:'#fff', borderRadius:6, boxShadow:'0 14px 34px rgba(15,23,42,0.18)',
            border:`1px solid ${PC.borde}`, opacity:abreA, transform:`translateY(${(1 - abreA) * -8}px)`, padding:'6px 0' }}>
            {AG.map((o, i) => (
              <div key={o} style={{ height:48, display:'flex', alignItems:'center', padding:'0 18px', fontSize:19,
                background: i === 1 ? `rgba(29,115,226,${0.12 * selA})` : 'transparent', color: i === 1 && selA > 0.5 ? PC.azul : PC.tinta }}>{o}</div>
            ))}
          </div>
        )}
        {/* Desplegable de Importe abierto */}
        {abreI > 0 && (
          <div style={{ position:'absolute', left:X + 1306, top:296, width:270, background:'#fff', borderRadius:6, boxShadow:'0 14px 34px rgba(15,23,42,0.18)',
            border:`1px solid ${PC.borde}`, opacity:abreI, transform:`translateY(${(1 - abreI) * -8}px)`, padding:'6px 0' }}>
            {IM.map((o, i) => (
              <div key={o} style={{ height:48, display:'flex', alignItems:'center', padding:'0 18px', fontSize:19,
                background: i === 3 ? `rgba(29,115,226,${0.12 * selI})` : 'transparent', color: i === 3 && selI > 0.5 ? PC.azul : PC.tinta }}>{o}</div>
            ))}
          </div>
        )}

        <Cursor t={t} puntos={[
          { t:T.antig, x:1200, y:262 }, { t:T.sesenta - 0.4, x:1200, y:262 }, { t:T.sesenta + 0.2, x:1220, y:374 },
          { t:T.importe + 0.1, x:1460, y:262 }, { t:T.menos - 0.4, x:1460, y:262 }, { t:T.menos + 0.2, x:1470, y:474 },
          { t:T.tocala, x:900, y:420 }, { t:T.tocala + 0.6, x:100, y:326 },
          { t:T.rojo, x:100, y:326 }, { t:T.rojo + 0.9, x:1636, y:262 },
        ]} clicks={[T.antig + 0.3, T.sesenta + 1.1, T.importe + 0.3, T.menos + 0.7, quitaBusqueda, quitaTodo - 0.1]}/>
      </Ventana>
    </Fondo>
  );
}
Object.assign(window, { EscenaPC04 });