// === 16:20 · Yudo (15s) — la IA dentro de cada ventana: PDF → asiento → follow-up ===
// Formulario de asiento a la izquierda, panel Yudo a la derecha. La factura
// rara se adjunta EN LA CASILLA de entrada, el mensaje se teclea ahí, se envía
// (la casilla se vacía) y ENTONCES aparece la burbuja (regla global de chat).
// Yudo rellena el asiento, el usuario pide la retención por la misma casilla
// y Yudo la añade. Cierre: Yudo vive en cada ventana de Dinaup.
// Sincronizado con CAPTIONS.slide_yudo:
//   0.4-2.8 factura rara · 2.8-5.2 se la das a Yudo · 5.2-7.6 lee y rellena ·
//   7.6-9.8 «Añade retención del 15%» · 9.8-11.8 la añade · 11.8-14.4 en cada ventana.

function SlideYudo({ t }){
  const formShow = clamp(t/0.6, 0, 1);
  const yudoShow = clamp((t-0.7)/0.6, 0, 1);

  // --- Timeline (sincronizada con los cues nuevos) ---
  const attachT    = 1.4;    // cue 1 · la factura rara aparece adjunta en la casilla
  const typeStart1 = 2.9;    // cue 2 · se teclea el mensaje en la casilla…
  const TXT1 = 'Crea el asiento de esta factura';
  const CPS1 = 21;           // 31 caracteres → tecleado ~4.38
  const sendT1     = 4.6;    // …se envía (pulso del botón, la casilla se vacía)…
  const bubble1T   = 4.65;   // …y ENTONCES aparece la burbuja en el hilo
  const processingStart = 4.95;
  const steps = [
    { t:5.15, label:'Leyendo factura.pdf…' },
    { t:5.5,  label:'Identificando proveedor · M. Vega Asesoría' },
    { t:5.85, label:'Extrayendo base, IVA, total' },
    { t:6.2,  label:'Proponiendo cuentas contables' },
    { t:6.5,  label:'Listo' },
  ];
  const asientoStart = 6.55; // cue 3 · el asiento se rellena solo
  const responseT1   = 6.95;
  const typeStart2   = 8.0;  // cue 4 · se teclea la retención en la casilla
  const TXT2 = 'Añade retención del 15%';
  const CPS2 = 15;           // 23 caracteres → tecleado ~9.53
  const sendT2       = 9.75;
  const bubble2T     = 9.8;  // cue 5 · burbuja + Yudo la añade
  const retencionStart = 10.15;
  const responseT2     = 10.7;
  const guardarPulse   = t >= 11.2 && t < 12.0; // el asiento ya cuadra → Guardar destaca
  const viveT      = 12.1;   // cue 6 · Yudo vive en cada ventana
  const viveChipTs = [12.55, 12.85, 13.15, 13.45];

  // Al añadir la retención, el haber del proveedor baja y el asiento vuelve a cuadrar.
  const retAdjusted = t >= retencionStart + 0.8;
  const lines1 = [
    { c:'6230000', n:'Serv. profesionales · Asesoría', deb:'238,40', hab:null },
    { c:'4720000', n:'HP IVA soportado (21%)',         deb:'50,07',  hab:null },
    { c:'4100000', n:'M. Vega Asesoría fiscal',        deb:null,     hab: retAdjusted ? '252,71' : '288,47' },
  ];

  const typedChars = (txt, start, cps) => txt.slice(0, clamp(Math.floor((t - start) * cps), 0, txt.length));

  return (
    <SlideCanvas variant="light">
      <TimeBadge t={t} hora="16:20" label="Un caso raro, a Yudo"/>
      <DemoHeader t={t} eyebrow="YUDO · IA EN CADA VENTANA" title={<>Pégale el PDF. <span className="grad-text">Te monta el asiento.</span></>}/>

      <div style={{position:'absolute',top:175,left:280,right:280,bottom:55,background:'#fff',borderRadius:12,boxShadow:'0 30px 80px rgba(0,133,255,0.15)',overflow:'hidden',border:'1px solid #E2E8F0',opacity:formShow,transform:`translateY(${(1-formShow)*20}px)`}}>
        <BrowserChrome url="play.dinaup.com/App/Pymes/AsientosContables/Nuevo"/>
        <DinaupAppHeader breadcrumb={["Contabilidad","Asientos","Nuevo"]}/>

        <div style={{display:'grid',gridTemplateColumns:'1fr 440px',height:'calc(100% - 142px)'}}>

          {/* IZQUIERDA — formulario */}
          <div style={{padding:'22px 28px',background:'#FAFBFC',borderRight:'1px solid #E2E8F0',overflow:'hidden'}}>
            <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',marginBottom:14}}>
              <div>
                <div className="f-plex" style={{fontSize:20,fontWeight:700,color:'#0F172A'}}>Asiento contable</div>
                <div className="f-mono" style={{fontSize:11,color:'#64748B',marginTop:2}}>
                  {t < asientoStart ? 'Borrador nuevo · AS-1125' : 'AS-1125 · 06/11/2025 · M. Vega'}
                </div>
              </div>
              <div style={{display:'flex',gap:8}}>
                <button className="dn-btn ghost" style={{padding:'7px 13px',fontSize:12}}>Cancelar</button>
                <button className="dn-btn" style={{padding:'7px 13px',fontSize:12,opacity: t >= asientoStart ? 1 : 0.5,boxShadow: guardarPulse ? '0 0 0 4px rgba(0,133,255,0.35)' : 'none',transform: guardarPulse ? 'scale(1.05)' : 'scale(1)'}}>Guardar</button>
              </div>
            </div>

            <div style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr',gap:10,marginBottom:14}}>
              {[
                { lbl:'FECHA',    val: t >= asientoStart ? '06/11/2025' : 'dd/mm/aaaa' },
                { lbl:'DIARIO',   val: t >= asientoStart ? 'Compras'    : '—' },
                { lbl:'CONCEPTO', val: t >= asientoStart ? 'Fra. asesoría nov' : '—' },
              ].map((f,i)=>{
                const filled = t >= asientoStart;
                const p = clamp((t-(asientoStart+i*0.15))/0.3, 0, 1);
                return (
                  <div key={i} style={{background:'#fff',borderRadius:8,border:`1px solid ${filled && p>0.5 ? 'rgba(0,133,255,0.35)' : '#E2E8F0'}`,padding:'9px 12px',transition:'border-color 300ms'}}>
                    <div className="f-mono" style={{fontSize:8.5,color:'#94A3B8',letterSpacing:1,textTransform:'uppercase',marginBottom:3}}>{f.lbl}</div>
                    <div style={{fontSize:12.5,color: filled ? '#0F172A' : '#CBD5E1', fontWeight: filled?600:400}}>{f.val}</div>
                  </div>
                );
              })}
            </div>

            <div style={{display:'grid',gridTemplateColumns:'88px 1fr 100px 100px',padding:'9px 12px',background:'#F1F5F9',borderRadius:'8px 8px 0 0',fontSize:9.5,color:'#64748B',letterSpacing:0.6,textTransform:'uppercase',fontWeight:600}}>
              <div>Cuenta</div><div>Descripción</div><div style={{textAlign:'right'}}>Debe</div><div style={{textAlign:'right'}}>Haber</div>
            </div>
            <div style={{background:'#fff',border:'1px solid #E2E8F0',borderTop:'none',borderRadius:'0 0 8px 8px',minHeight:198}}>
              {t < asientoStart && (
                <div style={{padding:'48px 20px',textAlign:'center',color:'#94A3B8',fontSize:12.5,fontStyle:'italic'}}>
                  Sin líneas. {t > processingStart ? 'Yudo las está generando…' : 'Añade manualmente o pide a Yudo.'}
                </div>
              )}
              {lines1.map((ln,i)=>{
                const p = clamp((t-(asientoStart+i*0.32))/0.4, 0, 1);
                const e = Easing.easeOutCubic(p);
                return (
                  <div key={i} style={{display:'grid',gridTemplateColumns:'88px 1fr 100px 100px',padding:'11px 12px',borderBottom:'1px solid #F1F5F9',alignItems:'center',fontSize:12.5,opacity:e,transform:`translateY(${(1-e)*8}px)`,background: p>0 && p<1 ? 'rgba(0,133,255,0.05)' : 'transparent'}}>
                    <span className="f-mono" style={{color:'var(--dn-primary)',fontWeight:600}}>{ln.c}</span>
                    <span style={{color:'#0F172A'}}>{ln.n}</span>
                    <span className="f-mono" style={{textAlign:'right',color:'#0F172A'}}>{ln.deb ? `${ln.deb} €` : ''}</span>
                    <span className="f-mono" style={{textAlign:'right',color:'#0F172A'}}>{ln.hab ? `${ln.hab} €` : ''}</span>
                  </div>
                );
              })}
              {t >= retencionStart && (()=>{
                const p = clamp((t-retencionStart)/0.5, 0, 1);
                const e = Easing.easeOutCubic(p);
                return (
                  <div style={{display:'grid',gridTemplateColumns:'88px 1fr 100px 100px',padding:'11px 12px 11px 9px',alignItems:'center',fontSize:12.5,opacity:e,transform:`translateY(${(1-e)*8}px)`,background:'rgba(16,185,129,0.06)',borderLeft:'3px solid #10B981'}}>
                    <span className="f-mono" style={{color:'var(--dn-primary)',fontWeight:600}}>4751000</span>
                    <span style={{color:'#0F172A'}}>HP Retenciones IRPF <span style={{fontSize:9.5,color:'#059669',marginLeft:6,padding:'1px 6px',background:'rgba(16,185,129,0.12)',borderRadius:100,fontWeight:600}}>+ Yudo</span></span>
                    <span className="f-mono" style={{textAlign:'right',color:'#0F172A'}}></span>
                    <span className="f-mono" style={{textAlign:'right',color:'#0F172A'}}>35,76 €</span>
                  </div>
                );
              })()}
            </div>

            {t >= asientoStart + 1.2 && (()=>{
              // Entre que entra la retención y se ajusta el proveedor, el asiento descuadra un instante.
              const bal = t >= retencionStart && !retAdjusted;
              return (
                <div style={{marginTop:12,display:'flex',justifyContent:'flex-end',gap:22,fontSize:12,opacity:clamp((t-asientoStart-1.2)/0.3,0,1)}}>
                  <div><span style={{color:'#64748B'}}>Debe: </span><span className="f-mono" style={{fontWeight:700,color:'#0F172A'}}>288,47 €</span></div>
                  <div><span style={{color:'#64748B'}}>Haber: </span><span className="f-mono" style={{fontWeight:700,color:'#0F172A'}}>{bal ? '324,23' : '288,47'} €</span></div>
                  <div style={{display:'flex',alignItems:'center',gap:6}}>
                    <span style={{color:'#64748B'}}>Cuadre:</span>
                    {bal
                      ? <span className="f-mono" style={{fontWeight:700,color:'#D97706'}}>⚠ 35,76 €</span>
                      : <span className="f-mono" style={{fontWeight:700,color:'#059669'}}>✓ 0,00 €</span>}
                  </div>
                </div>
              );
            })()}
          </div>

          {/* DERECHA — panel Yudo */}
          <div style={{background:'#0F172A',color:'#fff',display:'flex',flexDirection:'column',opacity:yudoShow,transform:`translateX(${(1-yudoShow)*40}px)`,position:'relative',overflow:'hidden'}}>
            <div style={{position:'absolute',inset:0,background:'radial-gradient(circle at 20% 20%, rgba(0,133,255,0.18), transparent 50%), radial-gradient(circle at 80% 80%, rgba(139,92,246,0.15), transparent 45%)',pointerEvents:'none'}}/>

            <div style={{padding:'14px 18px',borderBottom:'1px solid rgba(255,255,255,0.08)',display:'flex',alignItems:'center',gap:11,position:'relative'}}>
              <div style={{width:32,height:32,borderRadius:10,background:'linear-gradient(135deg,#0085FF,#8B5CF6)',display:'flex',alignItems:'center',justifyContent:'center',boxShadow:'0 0 24px rgba(0,133,255,0.4)'}}>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M12 2 L14 9 L21 11 L14 13 L12 20 L10 13 L3 11 L10 9 Z" fill="#fff"/></svg>
              </div>
              <div style={{flex:1}}>
                <div className="f-plex" style={{fontSize:14,fontWeight:700}}>Yudo <span style={{fontSize:9,color:'rgba(255,255,255,0.5)',fontWeight:500,marginLeft:6,padding:'2px 7px',background:'rgba(255,255,255,0.08)',borderRadius:100,letterSpacing:0.5}}>IA · ASIENTO</span></div>
                <div style={{fontSize:10.5,color:'rgba(255,255,255,0.5)',marginTop:2,display:'flex',alignItems:'center',gap:6}}>
                  <span style={{width:6,height:6,borderRadius:100,background:'#10B981',boxShadow:'0 0 6px #10B981'}}/>
                  {t >= processingStart && t < asientoStart ? 'Procesando…' : 'Conectado a este asiento'}
                </div>
              </div>
            </div>

            <div style={{flex:1,padding:'14px 18px',overflow:'hidden',display:'flex',flexDirection:'column',gap:11,position:'relative'}}>
              {/* Mensaje usuario con PDF — aparece al ENVIAR (se tecleó en la casilla) */}
              {t >= bubble1T && (()=>{
                const p = clamp((t-bubble1T)/0.4, 0, 1);
                return (
                  <div style={{alignSelf:'flex-end',maxWidth:'88%',opacity:p,transform:`translateY(${(1-Easing.easeOutCubic(p))*8}px)`}}>
                    <div style={{background:'rgba(0,133,255,0.18)',border:'1px solid rgba(0,133,255,0.35)',borderRadius:'14px 14px 4px 14px',padding:'9px 11px',fontSize:11.5,color:'#E0F2FE'}}>
                      <div style={{display:'flex',alignItems:'center',gap:8,padding:'7px 9px',background:'rgba(255,255,255,0.06)',borderRadius:8,marginBottom:7}}>
                        <div style={{width:24,height:28,background:'#EF4444',borderRadius:3,display:'flex',alignItems:'center',justifyContent:'center',color:'#fff',fontSize:7.5,fontWeight:700}}>PDF</div>
                        <div style={{flex:1,minWidth:0}}>
                          <div style={{fontSize:10.5,fontWeight:600,color:'#fff'}}>factura_asesoria_nov.pdf</div>
                          <div className="f-mono" style={{fontSize:8.5,color:'rgba(255,255,255,0.5)'}}>86 KB · adjuntado</div>
                        </div>
                        <span style={{color:'#10B981',fontSize:11}}>✓</span>
                      </div>
                      <div style={{color:'#fff'}}>{TXT1}</div>
                    </div>
                  </div>
                );
              })()}

              {/* Pasos de proceso */}
              {t >= processingStart && t < asientoStart + 0.35 && (
                <div style={{alignSelf:'flex-start',maxWidth:'92%',opacity:clamp((asientoStart+0.35-t)/0.3, 0, 1)}}>
                  <div style={{background:'rgba(255,255,255,0.06)',border:'1px solid rgba(255,255,255,0.1)',borderRadius:'14px 14px 14px 4px',padding:'11px 13px',fontSize:10.5,color:'rgba(255,255,255,0.85)',minWidth:240}}>
                    {steps.map((s,i)=>{
                      const done = t > s.t;
                      const active = t >= s.t - 0.3 && !done;
                      if (t < s.t - 0.3) return null;
                      return (
                        <div key={i} style={{display:'flex',alignItems:'center',gap:8,padding:'2.5px 0',opacity:clamp((t-(s.t-0.3))/0.3,0,1)}}>
                          <span style={{width:14,textAlign:'center',fontSize:9.5,color: done ? '#10B981' : '#62B4FF'}}>
                            {done ? '✓' : active ? '◉' : '○'}
                          </span>
                          <span style={{color: done ? 'rgba(255,255,255,0.6)' : '#fff'}}>{s.label}</span>
                        </div>
                      );
                    })}
                  </div>
                </div>
              )}

              {/* Respuesta Yudo */}
              {t >= responseT1 && (()=>{
                const p = clamp((t-responseT1)/0.5, 0, 1);
                return (
                  <div style={{alignSelf:'flex-start',maxWidth:'92%',opacity:p}}>
                    <div style={{background:'rgba(255,255,255,0.06)',border:'1px solid rgba(255,255,255,0.1)',borderRadius:'14px 14px 14px 4px',padding:'11px 13px',fontSize:11.5,color:'#fff',lineHeight:1.5}}>
                      <Typewriter text={"Hecho. M. Vega, 288,47 €. Revisa y guarda si te cuadra."} start={responseT1+0.05} cps={50} t={t}/>
                    </div>
                  </div>
                );
              })()}

              {/* Follow-up usuario — aparece al ENVIAR (se tecleó en la casilla) */}
              {t >= bubble2T && (()=>{
                const p = clamp((t-bubble2T)/0.4, 0, 1);
                return (
                  <div style={{alignSelf:'flex-end',maxWidth:'82%',opacity:p,transform:`translateY(${(1-Easing.easeOutCubic(p))*8}px)`}}>
                    <div style={{background:'rgba(0,133,255,0.18)',border:'1px solid rgba(0,133,255,0.35)',borderRadius:'14px 14px 4px 14px',padding:'9px 11px',fontSize:11.5,color:'#fff'}}>
                      {TXT2}
                    </div>
                  </div>
                );
              })()}

              {/* Respuesta retención */}
              {t >= responseT2 && (()=>{
                const p = clamp((t-responseT2)/0.5, 0, 1);
                return (
                  <div style={{alignSelf:'flex-start',maxWidth:'88%',opacity:p}}>
                    <div style={{background:'rgba(255,255,255,0.06)',border:'1px solid rgba(255,255,255,0.1)',borderRadius:'14px 14px 14px 4px',padding:'11px 13px',fontSize:11.5,color:'#fff',lineHeight:1.5}}>
                      <Typewriter text="Añadida: 15 % (35,76 €) en la 4751000. Ya cuadra." start={responseT2+0.05} cps={48} t={t}/>
                    </div>
                  </div>
                );
              })()}

              {/* Cierre — Yudo vive en cada ventana de Dinaup */}
              {t >= viveT && (()=>{
                const p = clamp((t-viveT)/0.5, 0, 1);
                const e = Easing.easeOutCubic(p);
                const wins = ['Facturas','Banco','TPV','Pipeline'];
                return (
                  <div style={{alignSelf:'stretch',marginTop:2,opacity:p,transform:`translateY(${(1-e)*10}px)`,background:'linear-gradient(135deg, rgba(0,133,255,0.12), rgba(139,92,246,0.10))',border:'1px solid rgba(0,133,255,0.35)',borderRadius:10,padding:'9px 11px'}}>
                    <div style={{display:'flex',alignItems:'center',gap:7,fontSize:10.5,fontWeight:700,color:'#BFE3FF',letterSpacing:0.3}}>
                      <svg width="12" height="12" viewBox="0 0 24 24" fill="none"><path d="M12 2 L14 9 L21 11 L14 13 L12 20 L10 13 L3 11 L10 9 Z" fill="#7CC4FF"/></svg>
                      Yudo vive en cada ventana
                    </div>
                    <div style={{display:'flex',gap:6,marginTop:8,flexWrap:'wrap'}}>
                      {wins.map((w,i)=>{
                        const cp = clamp((t-viveChipTs[i])/0.35, 0, 1);
                        const ce = Easing.easeOutBack(cp);
                        if (cp <= 0) return null;
                        return (
                          <span key={i} className="f-mono" style={{display:'inline-flex',alignItems:'center',gap:5,padding:'3px 9px',background:'rgba(255,255,255,0.07)',border:'1px solid rgba(255,255,255,0.16)',borderRadius:100,fontSize:9,fontWeight:600,color:'rgba(255,255,255,0.85)',opacity:clamp(cp*1.3,0,1),transform:`scale(${lerp(0.7,1,ce)})`}}>
                            <svg width="9" height="9" viewBox="0 0 24 24" fill="none"><rect x="3" y="5" width="18" height="15" rx="2.5" stroke="#7CC4FF" strokeWidth="2"/><path d="M3 9.5 H21" stroke="#7CC4FF" strokeWidth="2"/></svg>
                            {w}
                          </span>
                        );
                      })}
                    </div>
                  </div>
                );
              })()}
            </div>

            {/* Casilla de entrada — aquí se adjunta y se teclea (regla global de chat) */}
            {(()=>{
              const typing1 = t >= attachT && t < sendT1;     // adjuntar el PDF + teclear el primer mensaje
              const typing2 = t >= typeStart2 && t < sendT2;  // teclear la retención
              const focus = typing1 || typing2;
              const sendPulse = (t >= sendT1 && t < sendT1 + 0.35) || (t >= sendT2 && t < sendT2 + 0.35);
              return (
                <div style={{padding:'11px 14px',borderTop:'1px solid rgba(255,255,255,0.08)',background:'rgba(0,0,0,0.25)'}}>
                  <div style={{display:'flex',flexDirection:'column',gap:6,background: focus ? 'rgba(255,255,255,0.08)' : 'rgba(255,255,255,0.05)',border:`1px solid ${focus ? 'rgba(0,133,255,0.55)' : 'rgba(255,255,255,0.1)'}`,borderRadius:10,padding:'7px 10px',minHeight:36,justifyContent:'center'}}>
                    {typing1 && (()=>{
                      // El adjunto vive en su propia fila del composer, sobre el texto
                      const ap = clamp((t-attachT)/0.35, 0, 1);
                      const ae = Easing.easeOutBack(ap);
                      return (
                        <div style={{display:'flex'}}>
                          <span style={{display:'inline-flex',alignItems:'center',gap:6,padding:'3px 8px 3px 4px',background:'rgba(255,255,255,0.08)',border:'1px solid rgba(255,255,255,0.14)',borderRadius:7,transform:`scale(${lerp(0.7,1,ae)})`,opacity:clamp(ap*1.3,0,1)}}>
                            <span style={{width:15,height:18,background:'#EF4444',borderRadius:2,display:'inline-flex',alignItems:'center',justifyContent:'center',color:'#fff',fontSize:5.5,fontWeight:700}}>PDF</span>
                            <span className="f-mono" style={{fontSize:9,color:'rgba(255,255,255,0.85)'}}>factura_asesoria_nov.pdf</span>
                            <span style={{color:'rgba(255,255,255,0.45)',fontSize:10,marginLeft:2}}>×</span>
                          </span>
                        </div>
                      );
                    })()}
                    <div style={{display:'flex',alignItems:'center',gap:8}}>
                      <svg width="13" height="13" viewBox="0 0 24 24" fill="none" style={{opacity:0.55,flexShrink:0}}><path d="M20 11 L11.5 19.5 A5 5 0 0 1 4.5 12.5 L13 4 A3.5 3.5 0 0 1 18 9 L9.8 17.2 A2 2 0 0 1 7 14.4 L14.5 7" stroke="#fff" strokeWidth="1.6" strokeLinecap="round"/></svg>
                      <div style={{flex:1,minWidth:0,fontSize:11.5,whiteSpace:'nowrap',overflow:'hidden'}}>
                        {typing1 && <span style={{color:'#fff'}}>{typedChars(TXT1, typeStart1, CPS1)}<span className="caret"/></span>}
                        {typing2 && <span style={{color:'#fff'}}>{typedChars(TXT2, typeStart2, CPS2)}<span className="caret"/></span>}
                        {!typing1 && !typing2 && <span style={{color:'rgba(255,255,255,0.45)'}}>Pregunta a Yudo o arrastra un PDF…</span>}
                      </div>
                      <span style={{padding:'4px 9px',background:'var(--dn-primary)',borderRadius:6,color:'#fff',fontSize:10.5,fontWeight:600,flexShrink:0,transform: sendPulse ? 'scale(1.25)' : 'scale(1)',boxShadow: sendPulse ? '0 0 14px rgba(0,133,255,0.8)' : 'none'}}>↑</span>
                    </div>
                  </div>
                </div>
              );
            })()}
          </div>
        </div>
      </div>

      <SocialCaption t={t} cues={CAPTIONS.slide_yudo}/>
    </SlideCanvas>
  );
}

Object.assign(window, { SlideYudo });