// === Escena 03 — Flujo → Agregar venta: la venta nace con las líneas del presupuesto ===
// Flujo del pie del TPV (TPVFooterU, Icon account_tree) abre «Flujo Presupuesto»
// (DataFlowPresupuestoDeVentaDialog): título NPresupuesto · cliente, tarjeta «Importe» con «Total
// presupuesto», tarjeta «Ventas» con «Pendiente de facturar» y el botón de texto «Agregar venta».
// Agregar venta abre la venta («Venta / Ingreso») con cliente, descuentos y las unidades que quedan
// por vender de cada línea, con su precio (DataFlowInventarioBuilder: CantidadUnidades, ImportePrecioUnidad,
// DescuentoPorciento…).

// Las dos tarjetas del flujo del presupuesto. ventas = filas ya vendidas; agregable = muestra el botón.
function FlujoPresupuesto({ e, x = 460, y = 190, w = 1000, h = 740, focoTotal = 0, focoVentas = 0, focoBoton = 0, ePend = 1, ventas = [], completado = 0, agregable = true }){
  return (
    <Dialogo x={x} y={y} w={w} h={h} e={e} titulo="Flujo Presupuesto" cabecera={['P-2026-0031', 'Reformas Albar, S.L.']}>
      <Tarjeta titulo="Importe" ico="receipt_long" foco={focoTotal} style={{ flexShrink:0 }}>
        <div style={{ marginTop:14, background:'#ebebeb', borderRadius:8, padding:'14px 18px', display:'flex', flexDirection:'column', gap:2 }}>
          <R s={14} c={P.gris} style={{ textTransform:'uppercase', letterSpacing:'0.07em' }}>Total presupuesto</R>
          <R s={38} w={700}>1.210,00 €</R>
        </div>
      </Tarjeta>
      <Tarjeta titulo="Ventas" ico="show_chart" foco={focoVentas} style={{ flexShrink:0 }}
        derecha={completado > 0 ? <Insignia txt="Completado" ok e={completado}/> : <Insignia txt="Pendiente de facturar" e={ePend}/>}>
        {ventas.length > 0 && (
          <div style={{ marginTop:12, display:'flex', flexDirection:'column', gap:8 }}>
            {ventas.map((v, i) => (
              <div key={i} style={{ display:'flex', alignItems:'center', gap:18, padding:'10px 14px', border:`1px solid ${P.borde}`, borderRadius:8, opacity:v.e, transform:`translateY(${(1 - v.e) * 10}px)` }}>
                <R s={18} w={600}>{v.num}</R><R s={16} c={P.gris}>{v.fecha}</R><R s={16} c={P.gris2}>{v.uds} uds</R>
                <div style={{ flex:1 }}/><R s={18} w={600}>{v.imp}</R><Ico n="open_in_new" s={20} c={P.gris}/>
              </div>
            ))}
          </div>
        )}
        {agregable && (
          <div style={{ display:'flex', justifyContent:'center', marginTop:14 }}>
            <Boton txt="Agregar venta" ico="add" tipo="texto" tam={19} foco={focoBoton}/>
          </div>
        )}
      </Tarjeta>
    </Dialogo>
  );
}

function EscenaPV03({ t }){
  useVoz(2);
  const G = GUION[2];
  const T = {
    abre:B(G,'Abre el presupuesto'),
    flujo:B(G,'pulsa Flujo'),
    seabre:B(G,'Se abre su flujo'),
    total:B(G,'el total del presupuesto'),
    ventas:B(G,'el bloque Ventas'),
    pendiente:B(G,'pendiente de facturar'),
    boton:B(G,'Y un botón'),
    pulsarlo:B(G,'Al pulsarlo'),
    lineas:B(G,'todas las líneas'),
    unidades:B(G,'Las mismas unidades'),
    precios:B(G,'los mismos precios'),
    descuentos:B(G,'los mismos descuentos'),
    guardas:B(G,'la guardas'),
    nace:B(G,'La venta ya está'),
    teclea:B(G,'sin teclear'),
    olvida:B(G,'no olvida de dónde viene'),
  };
  const pulso = (t0, d = 1.2) => (t >= t0 && t < t0 + d) ? Math.sin((t - t0) / d * Math.PI) : 0;
  const ePres = pr(t, 0.1, 0.8);
  const eDlg = pr(t, T.seabre, 0.7) * (1 - pr(t, T.pulsarlo + 0.4, 0.6) * 0.75);
  const eVenta = pr(t, T.pulsarlo + 0.5, 0.8);
  const lineasV = LINEAS.map((l, i) => ({ ...l, op: pr(t, T.lineas + i * 0.35, 0.5) }));
  const focoCol = t >= T.descuentos && t < T.guardas ? 'd' : t >= T.precios ? (t < T.guardas ? 'p' : null) : t >= T.unidades ? 'u' : null;
  return (
    <SlideCanvas variant="light-soft" bg="#F8FAFC">
      <DemoHeader t={t} eyebrow="2 · DE PRESUPUESTO A VENTA" title="Flujo → Agregar venta"/>
      <VentanaTPV x={260} y={190} w={1400} h={780} e={ePres} titulo="Presupuesto" numero="P-2026-0031" fecha="06/10/2026"
        lineas={LINEAS} total="1.210,00 €" panel={<PanelAgregar/>} aceptarLleno={false} focoFlujo={pulso(T.flujo)}/>
      <FlujoPresupuesto e={eDlg} y={250} h={560} focoTotal={pulso(T.total, 1.6)} focoVentas={pulso(T.ventas, 1.6)} ePend={pr(t, T.pendiente, 0.5)}
        focoBoton={pulso(T.boton, 1.4) + pulso(T.pulsarlo, 0.8)}/>
      <VentanaTPV x={220} y={170} w={1480} h={800} e={eVenta} zIndex={30} titulo="Venta / Ingreso" esVenta numero="" fecha="09/10/2026"
        origen={{ num:'P-2026-0031' }} focoOrigen={pulso(T.olvida, 1.6)} lineas={lineasV} focoCol={focoCol}
        total={t >= T.lineas + 1.2 ? '1.210,00 €' : null} panel={<PanelAgregar/>} focoAceptar={pulso(T.guardas)}/>
      <Cursor t={t} desde={T.abre}
        puntos={[[T.abre, 1200, 760], [T.flujo, 460, 940], [T.seabre + 0.4, 460, 940], [T.boton, 965, 640], [T.pulsarlo + 0.6, 965, 640], [T.guardas - 0.2, 1625, 938], [T.nace, 1625, 938], [T.olvida, 410, 334]]}
        clics={[T.flujo, T.pulsarlo, T.guardas]}/>
      <Rotulo t={t} desde={T.nace} hasta={T.olvida}>La venta nace del presupuesto. <span style={{ color:P.azul }}>No se teclea dos veces.</span></Rotulo>
    </SlideCanvas>
  );
}
Object.assign(window, { EscenaPV03, FlujoPresupuesto });