// === Escena 04 — El hilo (clímax): la venta sabe de dónde viene ===
// Cabecera de la venta: «Presupuesto P-…» con title «Abrir el presupuesto del que nace esta operación»
// (TPVHeader_QuickDatosFiscalesyEnvioBarU.razor:23). Pestaña «Flujo» de la columna derecha
// (TPVPanelDerechaU → InlineDataFlowU): «Flujo de la operación» / «De dónde viene, dónde está y qué ha
// salido», grupos «Origen», «Estás aquí» y «Destinos»; el cobro va como destino con su «x / y».

function NodoFlujo({ ico, tit, estado, sub, importe, actual = false, e = 1, foco = 0, abrir = false, num, colorNum = P.azul }){
  return (
    <div style={{ position:'relative', display:'flex', alignItems:'center', gap:10, padding:'10px 12px', borderRadius:8, minHeight:70, opacity:e,
      transform:`translateY(${(1 - e) * 10}px)`, background: actual ? 'rgba(0,111,255,0.13)' : (foco > 0 ? `rgba(29,115,226,${0.07 * foco})` : 'transparent'),
      border: actual ? `1px solid ${P.azulL}` : '1px solid transparent' }}>
      <div style={{ position:'absolute', left: actual ? -27 : -25, width: actual ? 14 : 10, height: actual ? 14 : 10, borderRadius:10, background: actual ? P.azul : P.gris2, boxShadow:'0 0 0 3px #fff' }}/>
      <Ico n={ico} s={24} c={P.gris}/>
      <div style={{ display:'flex', flexDirection:'column', gap:3, minWidth:0, flex:1 }}>
        <div style={{ display:'flex', alignItems:'center', gap:8 }}><R s={21} w={actual ? 700 : 600}>{tit}</R>{estado}</div>
        <div style={{ display:'flex', alignItems:'center', gap:10 }}>{sub}</div>
      </div>
      {importe && <R s={20} w={600}>{importe}</R>}
      {num && <R s={20} w={600} c={colorNum}>{num}</R>}
      {abrir && <Ico n="open_in_new" s={20} c={P.gris2}/>}
    </div>
  );
}

function PanelFlujo({ t, T }){
  const eT = pr(t, T.pestana, 0.6), eO = pr(t, T.origen, 0.6), eA = pr(t, T.aqui, 0.6), eD = pr(t, T.abajo, 0.6);
  const lab = (txt, e) => <div style={{ opacity:e, fontFamily:ROBOTO, fontSize:15, fontWeight:600, letterSpacing:'0.06em', textTransform:'uppercase', color:P.gris, margin:'10px 0 4px' }}>{txt}</div>;
  const avatar = <span style={{ width:24, height:24, borderRadius:20, background:'#dbe7f7', display:'inline-flex', alignItems:'center', justifyContent:'center' }}><R s={11} w={700} c={P.azul}>MR</R></span>;
  return (
    <div style={{ padding:14, opacity:eT }}>
      <div style={{ border:`1px solid ${P.borde}`, borderRadius:10, padding:'14px 16px' }}>
        <div style={{ display:'flex', alignItems:'center', gap:10 }}>
          <Ico n="account_tree" s={26} c={P.azul}/>
          <div style={{ display:'flex', flexDirection:'column' }}><R s={23} w={700}>Flujo de la operación</R><R s={17} c={P.gris}>De dónde viene, dónde está y qué ha salido</R></div>
        </div>
        <div style={{ position:'relative', marginTop:12, paddingLeft:30 }}>
          <div style={{ position:'absolute', left:9, top:12, bottom:12, width:2, background:P.borde, transform:`scaleY(${eD > 0 ? 1 : eA > 0 ? 0.62 : eO > 0 ? 0.3 : 0})`, transformOrigin:'0 0' }}/>
          {lab('Origen', eO)}
          <NodoFlujo e={eO} foco={pr(t, T.estado, 0.4)} ico="request_quote" tit="Presupuesto P-2026-0031" abrir
            estado={<span style={{ opacity:pr(t, T.estado, 0.5) }}><Estado txt="Aceptado"/></span>}
            sub={<React.Fragment>{avatar}<R s={16} c={P.gris}>06/10/2026</R><R s={16} w={600} c={P.gris} style={{ opacity:pr(t, T.estado + 1.0, 0.5) }}>1.210,00 €</R></React.Fragment>}/>
          {lab('Estás aquí', eA)}
          <NodoFlujo e={eA} actual ico="point_of_sale" tit="Venta F-2026-0142" importe="1.210,00 €"
            sub={<React.Fragment><R s={16} c={P.gris}>09/10/2026</R><R s={16} c={P.gris}>Guardada</R></React.Fragment>}/>
          {lab('Destinos', eD)}
          <NodoFlujo e={pr(t, T.cobro, 0.6)} ico="payments" tit="Cobro" num="0 / 1.210" abrir
            sub={<R s={16} c={P.gris}>Pendiente</R>}/>
        </div>
      </div>
    </div>
  );
}

function EscenaPV04({ t }){
  useVoz(3);
  const G = GUION[3];
  const T = {
    cabecera:B(G,'Mira la cabecera'),
    junto:B(G,'Junto al cliente'),
    raton:B(G,'Si pasas el ratón'),
    dice:B(G,'abrir el presupuesto del que nace'),
    clic:B(G,'Un clic'),
    columna:B(G,'en la columna de la derecha'),
    pestana:B(G,'la pestaña Flujo'),
    origen:B(G,'el origen'),
    estado:B(G,'con su estado'),
    aqui:B(G,'estás aquí'),
    abajo:B(G,'Abajo, lo que ha salido'),
    cobro:B(G,'como el cobro'),
    parte:B(G,'Pero ¿y si'),
  };
  const pulso = (t0, d = 1.2) => (t >= t0 && t < t0 + d) ? Math.sin((t - t0) / d * Math.PI) : 0;
  const X = 120, Y = 160, W = 1680, H = 820;
  const fOrig = clamp(pr(t, T.junto, 0.5) * (1 - pr(t, T.columna, 0.6)), 0, 1);
  const eTip = pr(t, T.dice - 0.6, 0.4) * (1 - pr(t, T.clic + 0.3, 0.3));
  const eVuelve = pr(t, T.clic + 0.3, 0.5) * (1 - pr(t, T.columna - 0.2, 0.5));
  const enFlujo = t >= T.pestana;
  const chip = { x:X + 32, y:Y + 152 };            // la barra de origen en el canvas
  const tabFlujo = { x:X + W - 18 - 720 + 500, y:Y + 208 + 22 };
  const fin = pr(t, T.parte, 0.8);
  return (
    <SlideCanvas variant="light-soft" bg="#F8FAFC">
      <DemoHeader t={t} eyebrow="3 · DE DÓNDE VIENE" title="La venta guarda el enlace a su presupuesto"/>
      <div style={{ opacity:1 - fin * 0.5 }}>
        <VentanaTPV x={X} y={Y} w={W} h={H} e={pr(t, 0.1, 0.8)} titulo="Venta / Ingreso" esVenta numero="F-2026-0142" fecha="09/10/2026"
          origen={{ num:'P-2026-0031' }} focoOrigen={fOrig} lineas={LINEAS} total="1.210,00 €" aceptarLleno={false}
          pw={720} tabActiva={enFlujo ? 'Flujo' : 'Agregar'} focoFlujo={pulso(T.pestana, 1.4)}
          panel={enFlujo ? <PanelFlujo t={t} T={T}/> : <PanelAgregar/>}/>
      </div>
      {/* El title del enlace, como lo pinta el navegador */}
      {eTip > 0 && (
        <div style={{ position:'absolute', left:chip.x + 120, top:chip.y + 44, zIndex:50, opacity:eTip, background:'#fff', border:'1px solid #c9ccd1',
          boxShadow:'0 4px 14px rgba(0,0,0,0.14)', padding:'8px 14px', borderRadius:4 }}>
          <R s={19}>Abrir el presupuesto del que nace esta operación</R>
        </div>
      )}
      {eVuelve > 0 && (
        <div style={{ position:'absolute', left:chip.x + 60, top:chip.y + 60, zIndex:45, opacity:eVuelve, transform:`translateY(${(1 - eVuelve) * 16}px)` }}>
          <DocTarjeta x={0} y={0} w={420} ico="request_quote" tipo="Presupuesto" num="P-2026-0031" importe="1.210,00 €" chip={<Estado txt="Aceptado"/>}/>
        </div>
      )}
      <Cursor t={t} desde={T.cabecera}
        puntos={[[T.cabecera, 900, 700], [T.raton + 0.3, chip.x + 150, chip.y + 16], [T.columna - 0.3, chip.x + 150, chip.y + 16], [T.pestana, tabFlujo.x, tabFlujo.y], [T.origen, tabFlujo.x - 120, tabFlujo.y + 190]]}
        clics={[T.clic, T.pestana]}/>
    </SlideCanvas>
  );
}
Object.assign(window, { EscenaPV04, PanelFlujo, NodoFlujo });