// === Escena 03 — Cobrar en efectivo ===
// Ventana «Cobro» (CobroRapidoDialog + CobrarU): «Efectivo» / «Tarjeta», «A cobrar:», «Pago recibido:»
// con el teclado 1-9 0 , C; a la derecha «Falta por cobrar» (rojo) o «Devuelve». Pie: «Automático»,
// «Finalizar», «Cancelar». Al guardar, el ticket y «Nuevo» (Esc), que deja la venta vacía.
function EscenaTPV03({ t }){
  const G = window.GUION[2];
  const T = {
    abre:       B(G, "Se abre la ventana"),           // "Se abre la ventana de cobro"
    efectivo:   B(G, "efectivo o tarjeta"),           // "efectivo"
    tarjeta:    B(G, "tarjeta. Este"),                // "o tarjeta"
    veinte:     B(G, "billete de veinte"),            // "con un billete de veinte"
    tecleas:    B(G, "Lo tecleas"),                   // "Lo tecleas en pago recibido"
    botones:    B(G, "estos botones"),                // "o con estos botones"
    derecha:    B(G, "A la derecha, la cuenta"),      // "A la derecha, la cuenta ya está hecha"
    devuelve:   B(G, "devuelve seis"),                // "devuelve seis euros con cuarenta"
    menos:      B(G, "Si te dan de menos"),           // "Si te dan de menos"
    rojo:       B(G, "sale en rojo"),                 // "sale en rojo lo que falta por cobrar"
    finalizar:  B(G, "Pulsa finalizar"),              // "Pulsa finalizar"
    guarda:     B(G, "La venta se guarda"),           // "La venta se guarda con su cobro"
    ticket:     B(G, "sale el ticket"),               // "y sale el ticket"
    nuevo:      B(G, "Con nuevo"),                    // "Con nuevo"
    listo:      B(G, "queda listo"),                  // "el mostrador queda listo para el siguiente"
  };
  const k2 = T.botones - 0.3, k0 = T.botones + 0.25;
  const clicFin = T.finalizar + 0.5, clicNuevo = T.nuevo + 0.5;
  const [g, c] = PRODUCTOS;
  const total = g.precio + c.precio;

  const recibido = t >= k0 ? '20' : (t >= k2 ? '2' : '');
  const tecla = (t >= k2 && t < k2 + 0.25) ? '2' : ((t >= k0 && t < k0 + 0.25) ? '0' : null);
  const dlgP = ent(t, T.abre - 0.2, 0.7) * sal(t, clicNuevo + 0.3, 0.6);
  const vacia = t >= clicNuevo + 0.3;
  const vista = t >= T.guarda ? 'ticket' : 'cobro';

  const r = {
    efectivo:  foco(t, T.efectivo, T.tarjeta),
    tarjeta:   foco(t, T.tarjeta, T.tarjeta + 1.2),
    recibido:  foco(t, T.tecleas, T.derecha),
    derecha:   foco(t, T.derecha, T.menos),
    finalizar: foco(t, T.finalizar, T.guarda),
  };
  const billP = ent(t, T.veinte) * sal(t, T.derecha);
  const rojoP = ent(t, T.rojo - 0.4) * sal(t, T.finalizar - 0.2);

  return (
    <Fondo>
      <Rotulo t={t} s={0} paso="PASO 3 · COBRAR" titulo={vista === 'cobro' ? 'Cobrar en efectivo' : 'Venta guardada, con su cobro'}/>
      <Ventana url="play.dinaup.com/App/TPV/POS">
        <PantallaVenta t={t} lineas={vacia ? [] : [{ prod:g, p:1 }, { prod:c, p:1 }]}
          totales={vacia ? null : { sub: base(g.precio) + base(c.precio), iva: total - base(g.precio) - base(c.precio), total }}/>
        <Mascara op={dlgP}/>
        {dlgP > 0 && (
          <DialogoCobro p={dlgP} total={total} recibido={recibido} tecla={tecla} r={r} vista={vista} aNuevo={foco(t, T.nuevo, clicNuevo + 0.3)}
            ticket={<TicketPapel lineas={[[g.nombre, '7,50'], [c.nombre, '6,10']]} total="13,60 €" entregado="20,00 €" cambio="6,40 €"/>}/>
        )}
        {/* El billete del cliente, fuera del diálogo */}
        {billP > 0 && (
          <div style={{ position:'absolute', left:1400, top:250, width:200, height:104, borderRadius:10, background:'#E8F3EC', border:'2px solid #9CC7A9',
            display:'flex', alignItems:'center', justifyContent:'center', gap:10, opacity:billP, transform:`translateY(${(1 - billP) * 12}px)` }}>
            <Ico n="payments" s={34} c="#3F7D57"/>
            <span className="f-plex" style={{ fontSize:34, fontWeight:700, color:'#2F6145' }}>20 €</span>
          </div>
        )}
        {/* Si te dan de menos: el mismo recuadro, en rojo */}
        {rojoP > 0 && (
          <div style={{ position:'absolute', left:1386, top:250, width:250, opacity:rojoP, transform:`translateY(${(1 - rojoP) * 12}px)` }}>
            <div style={{ background:'#fff', borderRadius:10, border:`1px solid ${C.borde}`, padding:'16px 16px 20px', textAlign:'center', boxShadow:'0 14px 34px rgba(15,23,42,0.18)' }}>
              <div className="f-plex" style={{ fontSize:17, fontWeight:600, color:C.texto, marginBottom:12 }}>Si te dan 10 €</div>
              <Insignia txt="Falta por cobrar" color={C.rojo}/>
              <div style={{ fontSize:30, fontWeight:600, color:C.tinta, marginTop:10, fontFamily:ROBOTO }}>3,60 €</div>
            </div>
          </div>
        )}
        <Cursor t={t}
          kf={[[T.tecleas - 0.6, 800, 470], [k2 - 0.15, 718, 403], [k0 - 0.15, 592, 547], [T.finalizar, 592, 547], [clicFin - 0.1, 862, 661], [T.nuevo, 862, 661], [clicNuevo - 0.1, 850, 661]]}
          clics={[k2, k0, clicFin, clicNuevo]} op={sal(t, clicNuevo + 0.4)}/>
      </Ventana>
    </Fondo>
  );
}
Object.assign(window, { EscenaTPV03 });