// === Escena 06 — "Límites + eco" ===
// Los tres límites que se dicen en voz alta, y el eco que rima con la escena 01.
// 1 · Lo hablado en la ventana no llega al historial de la aplicación: la tabla
//     `play.ai_chat_sessions` solo la escribe SaveSessionAsync, que sale antes si el agente no
//     tiene identificador (DiaAgentService.ChatHistory.cs:11-13 + DiaChat.razor:211).
// 2 · Con la inteligencia artificial bloqueada no se pinta el interruptor — y el motivo se calcula
//     y NO se renderiza en ningún punto (AgentDialogLayout.razor:97,101; _blockMessage).
// 3 · No hay modo de prueba: cero mocks en todo Dinaup0.Services/src/1-AI.
function EscenaYV06({ t }){
  // LOCUCIÓN (audio/escena-06.mp3): tres límites, y ninguno es un defecto → no llega al historial
  // de la aplicación → esa pantalla lee una tabla que solo se escribe con identificador → si la
  // inteligencia artificial está bloqueada, ni interruptor ni explicación → no hay modo de prueba →
  // ECO.
  const T = {
    tres:0.1,        // "Tres límites" → tres filas vacías, en cascada
    forma:1.1,       // "y ninguno es un defecto" → el subtítulo
    l1:5.1,          // "no llega al historial de la aplicación" → límite 1: el recorrido del guardado
    tabla:9.6,       // "solo se escribe si el agente tiene identificador" → el corte, con su condición
    l2:15.1,         // "si la inteligencia artificial está bloqueada" → límite 2: la barra sin interruptor
    seco:20.4,       // "Ni interruptor, ni explicación" → y tampoco hay aviso; remate seco
    l3:24.4,         // "no hay modo de prueba" → límite 3
    proveedor:26.4,  // "Cada turno llama al proveedor" → la llamada sale de verdad
    eco1:29.2,       // "Ese Yudo opera lo que tú ves" → ECO, mitad 1 (bookend con la escena 01)
    eco2:32.0,       // "al cerrar la ventana no queda nada" → ECO, mitad 2
    gasto:34.8,      // "Salvo el gasto" → cierre; la pantalla se queda fija hasta el corte
    filaStep:0.22,   // incremento de la cascada de las tres filas vacías
    gastoDelay:0.35, // retardo de la coletilla ámbar respecto a su frase
  };

  const FILAS = [
    { n:'1', tit:'No llega al historial\nde la aplicación', start:T.l1, top:240, alto:230 },
    { n:'2', tit:'Con la IA bloqueada,\nla ventana es normal', start:T.l2, top:490, alto:230 },
    { n:'3', tit:'No hay modo\nde prueba', start:T.l3, top:740, alto:210 },
  ];

  const cabP = clamp((t-T.tres)/0.6,0,1), cabE = Easing.easeOutCubic(cabP);
  const subP = clamp((t-T.forma)/0.6,0,1), subE = Easing.easeOutCubic(subP);

  // Límite 1
  const f1 = clamp((t-T.l1)/0.55,0,1), f1e = Easing.easeOutCubic(f1);
  const via = Easing.easeInOutCubic(clamp((t-T.l1-0.3)/0.9,0,1));
  const corte = clamp((t-T.tabla)/0.5,0,1), corteE = Easing.easeOutBack(corte);
  const corteGlow = t >= T.tabla && t < T.tabla+1.5 ? Math.sin((t-T.tabla)/1.5*Math.PI) : 0;

  // Límite 2
  const f2 = clamp((t-T.l2)/0.55,0,1), f2e = Easing.easeOutCubic(f2);
  const secoP = clamp((t-T.seco)/0.5,0,1), secoE = Easing.easeOutCubic(secoP);

  // Límite 3
  const f3 = clamp((t-T.l3)/0.55,0,1), f3e = Easing.easeOutCubic(f3);
  const prvP = clamp((t-T.proveedor)/0.55,0,1);
  const prvDraw = Easing.easeInOutCubic(clamp((t-T.proveedor)/0.8,0,1));

  // Eco
  const veloOp = t < T.eco1 ? 0 : clamp((t-T.eco1)/0.7,0,1)*0.90;
  const e1P = clamp((t-T.eco1)/0.6,0,1), e1E = Easing.easeOutCubic(e1P);
  const e2P = clamp((t-T.eco2)/0.6,0,1), e2E = Easing.easeOutCubic(e2P);
  const gaP = clamp((t-T.gasto-T.gastoDelay)/0.5,0,1), gaE = Easing.easeOutBack(gaP);

  const IconBot = ({ s=24, c='#0085FF' })=>(
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="1.8">
      <rect x="3.5" y="8" width="17" height="12" rx="3.4"/>
      <path d="M12 4.6 V8" strokeLinecap="round"/>
      <circle cx="12" cy="3.4" r="1.5" fill={c} stroke="none"/>
      <circle cx="9" cy="13.6" r="1.5" fill={c} stroke="none"/>
      <circle cx="15" cy="13.6" r="1.5" fill={c} stroke="none"/>
      <path d="M1.6 12.6 V15.6 M22.4 12.6 V15.6" strokeLinecap="round"/>
    </svg>
  );

  // ── Marco de una fila: entra vacía y se rellena en su beat ──
  const Fila = ({ f, i, children })=>{
    const vac = clamp((t-T.tres-0.2-i*T.filaStep)/0.5,0,1), vacE = Easing.easeOutCubic(vac);
    const lleno = clamp((t-f.start)/0.55,0,1);
    return (
      <div style={{position:'absolute', left:110, top:f.top, width:1700, height:f.alto, borderRadius:16,
                   background:0 < lleno ? '#fff' : 'rgba(255,255,255,0.55)',
                   border:`1px ${0 < lleno ? 'solid' : 'dashed'} ${0 < lleno ? '#E2E8F0' : '#D5DEEA'}`,
                   boxShadow:0 < lleno ? '0 16px 40px rgba(15,23,42,0.08)' : 'none',
                   opacity:vac*(1-veloOp/0.90*0.92), transform:`translateY(${(1-vacE)*14}px)`,
                   display:'flex', alignItems:'center', padding:'0 34px', gap:34}}>
        <span className="f-plex" style={{fontSize:64, fontWeight:800, lineHeight:1, width:56, flexShrink:0,
                      color:0 < lleno ? '#0085FF' : '#CBD5E1'}}>{f.n}</span>
        <div className="f-plex" style={{width:396, flexShrink:0, fontSize:32, fontWeight:700, lineHeight:1.22,
                     letterSpacing:'-0.02em', color:0 < lleno ? '#0F172A' : '#CBD5E1', whiteSpace:'pre-line',
                     opacity:0 < lleno ? 1 : 0.9}}>
          {f.tit}
        </div>
        <div style={{flex:1, minWidth:0, opacity:lleno}}>{children}</div>
      </div>
    );
  };

  const Caja = ({ titulo, sub, apagada, ancho })=>(
    <div style={{width:ancho, padding:'14px 18px', borderRadius:12,
                 background:apagada ? '#F4F6F9' : '#fff',
                 border:`1px solid ${apagada ? '#DCE4EE' : '#CBD9EA'}`}}>
      <div className={sub ? 'f-mono' : 'f-plex'} style={{fontSize:sub ? 19 : 21, fontWeight:700,
                   color:apagada ? '#94A3B8' : '#0F172A', whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis'}}>
        {titulo}
      </div>
      {sub && <div className="f-plex" style={{fontSize:16, color:'#94A3B8', marginTop:5}}>{sub}</div>}
    </div>
  );

  return (
    <SlideCanvas variant="light-soft">
      <div className="f-plex" style={{position:'absolute', top:40, left:0, right:0, textAlign:'center',
                                      fontSize:19, fontWeight:700, letterSpacing:'3.4px', color:'#94A3B8',
                                      opacity:clamp(t/0.6,0,1)*(1-veloOp/0.90)}}>
        LOS LÍMITES · Y LO QUE SÍ SE QUEDA
      </div>
      <div className="f-plex" style={{position:'absolute', top:96, left:0, right:0, textAlign:'center',
                                      fontSize:54, fontWeight:800, letterSpacing:'-0.03em', color:'#0F172A',
                                      opacity:cabP*(1-veloOp/0.90), transform:`translateY(${(1-cabE)*14}px)`}}>
        Tres límites
      </div>
      <div className="f-plex" style={{position:'absolute', top:172, left:0, right:0, textAlign:'center',
                                      fontSize:26, fontWeight:500, color:'#64748B',
                                      opacity:subP*(1-veloOp/0.90), transform:`translateY(${(1-subE)*10}px)`}}>
        Ninguno es un defecto: son su forma.
      </div>

      {/* ── Límite 1 · el guardado, cortado antes de la tabla ── */}
      <Fila f={FILAS[0]} i={0}>
        <div style={{display:'flex', alignItems:'center', gap:0, position:'relative',
                     transform:`translateY(${(1-f1e)*10}px)`}}>
          <div style={{display:'flex', alignItems:'center', gap:11, padding:'13px 16px', borderRadius:12,
                       background:'#fff', border:'2px solid #0085FF', width:268, flexShrink:0}}>
            <IconBot s={24}/>
            <div style={{lineHeight:1.2, minWidth:0}}>
              <div className="f-plex" style={{fontSize:19, fontWeight:700, color:'#0F172A'}}>Yudo - Entidad</div>
              <div className="f-plex" style={{fontSize:15, color:'#B45309'}}>sin identificador</div>
            </div>
          </div>

          {/* la vía de guardado, cortada */}
          <div style={{position:'relative', width:170, flexShrink:0, height:70}}>
            <svg width="170" height="70" viewBox="0 0 170 70" style={{position:'absolute', left:0, top:0}}>
              <path d="M6 35 H152" pathLength="100" stroke={0 < corte ? '#CBD5E1' : '#0085FF'} strokeWidth="4"
                    fill="none" strokeLinecap="round" strokeDasharray="100" strokeDashoffset={100*(1-via)}/>
              <path d="M140 25 L154 35 L140 45" stroke={0 < corte ? '#CBD5E1' : '#0085FF'} strokeWidth="4"
                    fill="none" strokeLinecap="round" strokeLinejoin="round" opacity={clamp((via-0.82)/0.18,0,1)}/>
            </svg>
            {0 < corte && (
              <div style={{position:'absolute', left:64, top:8, width:44, height:54,
                           transform:`scale(${lerp(0.5,1,corteE)})`, opacity:clamp(corte*1.4,0,1)}}>
                <svg width="44" height="54" viewBox="0 0 44 54">
                  <path d="M10 8 L34 46 M34 8 L10 46" stroke="#EF4444" strokeWidth="6" strokeLinecap="round"
                        style={{filter:0 < corteGlow ? `drop-shadow(0 0 ${corteGlow*14}px rgba(239,68,68,0.85))` : 'none'}}/>
                </svg>
              </div>
            )}
          </div>

          <Caja ancho={306} apagada={0 < corte} titulo="play.ai_chat_sessions" sub="la tabla que lee el historial"/>

          <svg width="96" height="70" viewBox="0 0 96 70" style={{flexShrink:0}}>
            <path d="M6 35 H78" stroke="#CBD5E1" strokeWidth="3" fill="none" strokeLinecap="round"
                  strokeDasharray="100" pathLength="100" strokeDashoffset={100*(1-via)}/>
            <path d="M68 27 L80 35 L68 43" stroke="#CBD5E1" strokeWidth="3" fill="none" strokeLinecap="round"
                  strokeLinejoin="round" opacity={clamp((via-0.82)/0.18,0,1)}/>
          </svg>

          <Caja ancho={262} apagada titulo="Historial de IA" sub="la pantalla de la aplicación"/>

          {/* la condición */}
          {0 < corte && (
            <div className="f-plex" style={{position:'absolute', left:270, top:82, fontSize:18, fontWeight:700,
                         color:'#B45309', background:'rgba(251,140,0,0.12)', border:'1px solid rgba(251,140,0,0.32)',
                         borderRadius:8, padding:'6px 14px', opacity:clamp(corte*1.3,0,1)}}>
              solo se escribe si el agente tiene identificador
            </div>
          )}
        </div>
      </Fila>

      {/* ── Límite 2 · la barra de título sin interruptor, y sin explicación ── */}
      <Fila f={FILAS[1]} i={1}>
        <div style={{transform:`translateY(${(1-f2e)*10}px)`}}>
          <div style={{height:76, borderRadius:12, border:'1px solid #E2E8F0', background:'#FBFCFE',
                       display:'flex', alignItems:'center', padding:'0 22px'}}>
            <span className="f-plex" style={{fontSize:25, fontWeight:700, color:'#0F172A'}}>Editar Entidad</span>
            <div style={{flex:1}}/>
            {/* el hueco donde estaría el grupo Yudo */}
            <div style={{width:230, height:44, borderRadius:10, border:'2px dashed #D5DEEA',
                         display:'flex', alignItems:'center', justifyContent:'center'}}>
              <span className="f-plex" style={{fontSize:17, color:'#B6C0CD'}}>nada aquí</span>
            </div>
          </div>
          {0 < secoP && (
            <div style={{display:'flex', alignItems:'center', gap:16, marginTop:16,
                         opacity:clamp(secoP*1.3,0,1), transform:`translateY(${(1-secoE)*8}px)`}}>
              <div style={{flex:1, height:52, borderRadius:10, border:'2px dashed #D5DEEA',
                           display:'flex', alignItems:'center', padding:'0 16px'}}>
                <span className="f-plex" style={{fontSize:18, color:'#B6C0CD'}}>ningún aviso, ningún motivo</span>
              </div>
              <span className="f-mono" style={{fontSize:16, color:'#94A3B8'}}>_blockMessage · nunca se pinta</span>
            </div>
          )}
        </div>
      </Fila>

      {/* ── Límite 3 · cada turno llama al proveedor de verdad ── */}
      <Fila f={FILAS[2]} i={2}>
        <div style={{display:'flex', alignItems:'center', gap:20, transform:`translateY(${(1-f3e)*10}px)`}}>
          <div style={{position:'relative', padding:'14px 22px', borderRadius:12, background:'#F1F5F9',
                       border:'1px solid #E2E8F0'}}>
            <span className="f-plex" style={{fontSize:23, fontWeight:700, color:'#94A3B8'}}>modo de prueba</span>
            <span style={{position:'absolute', left:12, right:12, top:'50%', height:3, borderRadius:2, background:'#EF4444',
                          transform:`scaleX(${Easing.easeInOutCubic(clamp((t-T.l3-0.25)/0.5,0,1))})`, transformOrigin:'left'}}/>
          </div>
          <div style={{flex:1}}/>
          {0 < prvP && (
            <div style={{display:'flex', alignItems:'center', gap:0, opacity:clamp(prvP*1.3,0,1)}}>
              <span className="f-plex" style={{fontSize:22, fontWeight:700, color:'#0F172A'}}>cada turno</span>
              <svg width="150" height="60" viewBox="0 0 150 60">
                <path d="M14 30 H128" pathLength="100" stroke="#0085FF" strokeWidth="4" fill="none" strokeLinecap="round"
                      strokeDasharray="100" strokeDashoffset={100*(1-prvDraw)}/>
                <path d="M116 20 L130 30 L116 40" stroke="#0085FF" strokeWidth="4" fill="none" strokeLinecap="round"
                      strokeLinejoin="round" opacity={clamp((prvDraw-0.82)/0.18,0,1)}/>
              </svg>
              <div style={{padding:'14px 22px', borderRadius:12, background:'#fff', border:'2px solid #0085FF'}}>
                <span className="f-plex" style={{fontSize:23, fontWeight:700, color:'#0085FF'}}>el proveedor, de verdad</span>
              </div>
            </div>
          )}
        </div>
      </Fila>

      {/* ═══════ ECO · bookend con la escena 01 ═══════ */}
      {0 < veloOp && <div style={{position:'absolute', inset:0, background:'#fff', opacity:veloOp}}/>}
      {0 < e1P && (
        <div className="f-plex" style={{position:'absolute', left:0, right:0, top:352, textAlign:'center', fontSize:74,
                                        fontWeight:800, letterSpacing:'-0.03em', color:'#0F172A',
                                        opacity:e1E, transform:`translateY(${(1-e1E)*18}px)`}}>
          Ese Yudo opera lo que tú ves.
        </div>
      )}
      {0 < e2P && (
        <div className="f-plex" style={{position:'absolute', left:0, right:0, top:462, textAlign:'center', fontSize:74,
                                        fontWeight:800, letterSpacing:'-0.03em',
                                        opacity:e2E, transform:`translateY(${(1-e2E)*18}px)`}}>
          <span className="grad-text">Y al cerrar no queda nada.</span>
        </div>
      )}
      {0 < gaP && (
        <div style={{position:'absolute', left:0, right:0, top:612, textAlign:'center',
                     opacity:clamp(gaP*1.3,0,1), transform:`scale(${lerp(0.88,1,gaE)})`}}>
          <span className="f-plex" style={{display:'inline-flex', alignItems:'center', gap:12, fontSize:44, fontWeight:800,
                        color:'#B45309', background:'rgba(251,140,0,0.12)', border:'1px solid rgba(251,140,0,0.35)',
                        borderRadius:16, padding:'14px 34px', letterSpacing:'-0.02em'}}>
            Salvo el gasto.
          </span>
        </div>
      )}
    </SlideCanvas>
  );
}
Object.assign(window, { EscenaYV06 });
