// === Escena 06 — Dos controles: cada petición pasa por su clave y después por los generales
// (FrenoDeRitmoD.Consumir). Una clave con más ritmo que los generales choca con ellos: entra lo que
// ganan los generales y el resto recibe 429 en la segunda puerta. El soporte amplía los generales
// (de 2 a 8 por segundo): los errores paran y la reserva se recupera.
const RUTA_DE06 = [[550, 600], [820, 600], [1240, 600], [1560, 600]];
const CADENA_DE06 = { app: ['clave', 'generales'] };

// Una petición a mano: sale, se para en cada control mientras la voz lo nombra y sigue.
function PeticionDe06({ t, tramos }){
  let x = null;
  for (const [t0, t1, a, b] of tramos) {
    if (t >= t0 && t <= t1) { const k = Easing.easeInOutCubic((t - t0) / (t1 - t0)); x = lerp(RUTA_DE06[a][0], RUTA_DE06[b][0], k); }
  }
  const ultimo = tramos[tramos.length - 1];
  let op = 1;
  if (x === null) {
    if (t < tramos[0][0] || t > ultimo[1] + 0.4) return null;
    const parada = [...tramos].reverse().find(tr => t > tr[1]);
    x = RUTA_DE06[parada[3]][0];
    if (parada === ultimo) op = 1 - (t - ultimo[1]) / 0.4;
  }
  return <div style={{ position:'absolute', left:x - 11, top:RUTA_DE06[0][1] - 11, width:22, height:22, borderRadius:100, background:'#334155', opacity:op, boxShadow:'0 0 0 5px #33415522' }}/>;
}

function EscenaDE06({ t }){
  useVoz(5);
  const G = GUION[5];
  const T = {
    dos:B(G,'Cada petición pasa'),               // → sale una petición
    primero:B(G,'por su clave'),                 // → aparece la clave
    clave:B(G,'clave, y después'),               // → la petición gasta uno en ella
    despues:B(G,'después por los'),              // → aparecen los generales
    generales:B(G,'generales. Por eso'),         // → gasta uno en ellos
    nunca:B(G,'Por eso, si a una clave'),        // → la aplicación pide 5 por segundo con una clave de 5
    igualmente:B(G,'recibirá errores'),          // → rótulo: nunca más que los generales
    soporte:B(G,'escribe al soporte'),           // → aparece «Soporte de Dinaup»
    amplia:B(G,'y los ampliamos'),               // → los generales pasan a 8 por segundo; rótulo
  };
  const pasaClave = T.clave + 0.1, pasaGen = T.generales + 0.1;
  const amplia = T.amplia, sAmplia = amplia - llegada(RUTA_DE06, 2) - T.nunca;   // en la puerta de los generales justo en «y los ampliamos»
  const rel = React.useMemo(() => reloj([[T.nunca, 0], [T.nunca + 100, 100]]), []);
  const sim = React.useMemo(() => simular({
    reservas:{ clave:{ gana:5, max:10, nivel:3 }, generales:{ gana:(s) => s < sAmplia ? 2 : 8, max:10, nivel:5 } },
    apps:[{ id:'app', pide:() => 5, cadena:CADENA_DE06.app }], fin:100 }), []);

  const enSim = t >= T.nunca, ampliado = t >= amplia;
  const nivelClave = enSim ? sim.nivelEn('clave', rel.simAt(t - llegada(RUTA_DE06, 1))) : (t < pasaClave ? 4 : 3);
  const nivelGen = enSim ? sim.nivelEn('generales', rel.simAt(t - llegada(RUTA_DE06, 2))) : (t < pasaGen ? 6 : 5);
  const soporte = aparece(t, T.soporte, 0.6);
  const notaGen = ampliado && <span style={{ color:VERDE, opacity:aparece(t, amplia, 0.4) }}> · ampliado</span>;

  return (
    <SlideCanvas variant="light">
      <Cabecera t={t} eyebrow="4 · DOS CONTROLES" title="Primero la clave, después los generales"/>

      <Linea puntos={RUTA_DE06}/>
      <svg style={{ position:'absolute', inset:0 }} width="1920" height="1080">
        <path d="M820 560 L820 582" stroke={AZUL} strokeOpacity={0.35 * aparece(t, T.primero - 0.3)} strokeWidth="3" strokeDasharray="2 10" strokeLinecap="round"/>
        <path d="M1240 560 L1240 582" stroke={AZUL} strokeOpacity={0.35 * aparece(t, T.despues - 0.3)} strokeWidth="3" strokeDasharray="2 10" strokeLinecap="round"/>
      </svg>
      <Reserva x={655} y={410} cols={5} filas={2} sep={66} r={22} nivel={nivelClave} titulo="1 · Clave" gana={enSim ? 5 : null} opacidad={aparece(t, T.primero - 0.3)}/>
      <Reserva x={1075} y={410} cols={5} filas={2} sep={66} r={22} nivel={nivelGen} titulo="2 · Generales" gana={enSim ? (ampliado ? 8 : 2) : null} nota={notaGen}
        opacidad={aparece(t, T.despues - 0.3)} resalte={Math.sin(clamp((t - amplia) / 1.1, 0, 1) * Math.PI)}/>
      {soporte > 0 && (
        <div className="f-plex" style={{ position:'absolute', left:1075, width:330, top:256, textAlign:'center', padding:'10px 0', borderRadius:100, background:'#ECFDF5', border:`1px solid ${VERDE}66`,
          color:'#047857', fontSize:21, fontWeight:700, opacity:soporte, transform:`translateY(${(1 - soporte) * 12}px)` }}>Soporte de Dinaup</div>
      )}

      <NodoApp x={400} y={600} nombre="Tu aplicación" color="#334155" pide={enSim ? '5 por segundo' : '1 petición'}
        rechazos={enSim ? contar(t, sim, rel, { app:RUTA_DE06 }, CADENA_DE06, 'app', true) : 0}/>
      <NodoDinaup x={1650} y={600}/>
      {!enSim && <PeticionDe06 t={t} tramos={[[T.dos + 0.6, pasaClave - 0.1, 0, 1], [pasaClave + 0.3, pasaGen - 0.1, 1, 2], [pasaGen + 0.2, pasaGen + 0.8, 2, 3]]}/>}
      {enSim && <Peticiones t={t} sim={sim} rel={rel} rutas={{ app:RUTA_DE06 }} colores={{ app:'#334155' }} cadenas={CADENA_DE06}/>}

      <Rotulo t={t} desde={T.igualmente} hasta={T.soporte} top={920}>Una clave nunca pasa <span style={{ color:ROJO }}>de los generales.</span></Rotulo>
      <Rotulo t={t} desde={T.amplia} top={920}>El soporte de Dinaup <span style={{ color:VERDE }}>los amplía.</span></Rotulo>
    </SlideCanvas>
  );
}
Object.assign(window, { EscenaDE06 });