// === Escena 01 — El reto: hasta hoy la API atendía todo, al ritmo que llegara. Una clave en bucle
// pide sin parar y, como todas comparten servidor, las peticiones de las demás se quedan esperando.
// Cobrar por uso habría convertido ese error en una factura que nadie espera. Cierra con los dos
// objetivos (Objetivos, en comun.jsx), que la escena 7 da por cumplidos.
const APPS_DE01 = [
  { id:'tienda', nombre:'Tienda online', color:VERDE, y:400, fase:0.2 },
  { id:'facturas', nombre:'Facturas', color:AZUL, y:580, fase:0.75 },
  { id:'sync', nombre:'Sincronización', color:NARANJA, y:760, fase:0.45 },
];
const DINAUP_DE01 = [1080, 580], SALIDA_DE01 = 480, VEL_DE01 = 420;   // px por segundo: sin prisa

// Cuándo sale cada petición: una cada 1,1 s; la sincronización, desde el bucle, siete por segundo.
function salidasDe01(app, bucle, hasta){
  const out = [];
  for (let s = app.fase; s <= hasta; s += (app.id === 'sync' && s >= bucle) ? 1 / 7 : 1.1) out.push(s);
  return out;
}

// Las peticiones de la tienda y las facturas que llegan con el bucle en marcha no entran: se paran
// en fila antes de Dinaup y se quedan en gris. Las del bucle entran todas.
function PuntosDe01({ t, T }){
  const out = [], x1 = DINAUP_DE01[0] - 90, y1 = DINAUP_DE01[1];
  APPS_DE01.forEach(a => {
    const L = Math.hypot(x1 - SALIDA_DE01, y1 - a.y);
    let fila = 0;
    salidasDe01(a, T.bucle, t).forEach((e, n) => {
      let d = (t - e) * VEL_DE01, op = 1, color = a.color;
      if (a.id !== 'sync' && e + L / VEL_DE01 >= T.frena) {
        const tope = Math.max(0, L - 34 - fila * 26); fila++;
        if (d >= tope) { d = tope; color = '#94A3B8'; }
      } else if (d > L) {
        op = 1 - (d - L) / (0.25 * VEL_DE01); d = L;
        if (op <= 0) return;
      }
      const k = d / L;
      out.push(<div key={a.id + n} style={{ position:'absolute', left:lerp(SALIDA_DE01, x1, k) - 9, top:lerp(a.y, y1, k) - 9, width:18, height:18, borderRadius:100,
        background:color, opacity:op, boxShadow:`0 0 0 4px ${color}22` }}/>);
    });
  });
  return out;
}

function EscenaDE01({ t }){
  useVoz(0);
  const G = GUION[0];
  const T = {
    bucle:B(G,'un bucle que repite'),          // → la sincronización entra en bucle y dispara sin parar
    frena:B(G,'esa clave frena'),              // → Dinaup se ocupa del bucle; las demás hacen fila
    cobrar:B(G,'Podríamos haberlo resuelto'),  // → la factura por uso, con el contador en marcha
    factura:B(G,'una factura que nadie'),      // → el importe se pone en rojo
    queriamos:B(G,'Queríamos otra cosa'),      // → todo se apaga y llegan los objetivos
    ninguna:B(G,'que ninguna clave'),
    sepas:B(G,'y que sepas'),
  };
  const diagrama = 1 - aparece(t, T.queriamos, 0.8);
  const ocupado = aparece(t, T.frena, 0.6), factura = aparece(t, T.cobrar, 0.7), rojo = t >= T.factura;
  const pulso = Math.sin(clamp((t - T.factura) / 1.0, 0, 1) * Math.PI);
  const peticiones = Math.max(0, Math.round((t - T.bucle) * 2917));
  const titulo = t < T.cobrar ? 'Una API sin freno' : (t < T.queriamos ? 'Cobrar por uso' : 'Lo que queríamos');

  return (
    <SlideCanvas variant="light">
      <Cabecera t={t} eyebrow="EL RETO" title={titulo}/>

      <div style={{ position:'absolute', inset:0, opacity:diagrama }}>
        <svg style={{ position:'absolute', inset:0 }} width="1920" height="1080">
          {APPS_DE01.map(a => <path key={a.id} d={`M${SALIDA_DE01} ${a.y} L${DINAUP_DE01[0] - 90} ${DINAUP_DE01[1]}`} fill="none" stroke={BORDE} strokeWidth="3" strokeDasharray="2 12" strokeLinecap="round"/>)}
        </svg>
        {APPS_DE01.map(a => (
          <NodoApp key={a.id} x={330} y={a.y} nombre={a.nombre} color={a.color}
            pide={a.id === 'sync' ? (t < T.bucle ? 'una cada segundo' : 'sin parar') : (t < T.frena + 1 ? 'una cada segundo' : 'esperando')}
            bucle={a.id === 'sync' ? aparece(t, T.bucle, 0.5) : 0}/>
        ))}
        <PuntosDe01 t={t} T={T}/>
        {ocupado > 0 && <div style={{ position:'absolute', left:DINAUP_DE01[0] - 100, top:DINAUP_DE01[1] - 62, width:200, height:124, borderRadius:24, border:`3px solid ${NARANJA}`, opacity:ocupado }}/>}
        <NodoDinaup x={DINAUP_DE01[0]} y={DINAUP_DE01[1]}/>
        {ocupado > 0 && <div className="f-plex" style={{ position:'absolute', left:DINAUP_DE01[0] - 160, width:320, top:DINAUP_DE01[1] + 78, textAlign:'center', fontSize:20, fontWeight:700, color:'#C2410C', opacity:ocupado }}>Atendiendo el bucle</div>}

        {factura > 0 && (
          <div style={{ position:'absolute', left:1300, top:380, width:460, boxSizing:'border-box', padding:'28px 32px', background:'#fff', borderRadius:20, border:`1px solid ${rojo ? ROJO + '55' : BORDE}`,
            boxShadow:'0 18px 44px rgba(15,23,42,0.08)', opacity:factura, transform:`translateY(${(1 - factura) * 20}px)` }}>
            <div className="f-plex" style={{ fontSize:24, fontWeight:700, color:TINTA }}>Factura por uso</div>
            <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline', marginTop:22 }}>
              <span className="f-plex" style={{ fontSize:20, color:GRIS }}>Peticiones</span>
              <span className="f-mono" style={{ fontSize:30, fontWeight:700, color:TINTA }}>{peticiones.toLocaleString('es-ES')}</span>
            </div>
            <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline', borderTop:`1px solid ${BORDE}`, marginTop:18, paddingTop:18 }}>
              <span className="f-plex" style={{ fontSize:20, color:GRIS }}>Importe</span>
              <span className="f-mono" style={{ fontSize:46, fontWeight:800, color: rojo ? ROJO : TINTA, transform:`scale(${1 + 0.12 * pulso})`, transformOrigin:'right center' }}>??? €</span>
            </div>
          </div>
        )}
      </div>

      <Rotulo t={t} desde={T.frena} hasta={T.cobrar} top={950}>Una clave frena <span style={{ color:ROJO }}>a las demás.</span></Rotulo>
      <Objetivos t={t} desde={[T.ninguna, T.sepas]} top={390}/>
    </SlideCanvas>
  );
}
Object.assign(window, { EscenaDE01 });
