// === Escena 05 — El cierre de caja (clímax) ===
// /App/TPV/CashClosing (TPVPage.razor): «Abrir o cerrar caja» abre «Cierre de caja» con la caja de este
// navegador ya elegida. Tres tarjetas (CierreDeCajaDialog): «1 · Qué caja estás cuadrando» (Caja, Día que
// se cuadra, Empieza el día con), «2 · Lo que dicen las cuentas» (Ha entrado, Ha salido, Cobrado a
// clientes, Pagado a proveedores, En el cajón debería haber), «3 · Lo que hay en el cajón» (Dinero
// contado). Saldo final = 150,00 + 412,80 − 35,00 = 527,80 (CierreDeCajaService). Contado igual → «Cuadra».
function EscenaTPV05({ t }){
  const G = window.GUION[4];
  const T = {
    sal:        B(G, "Sal de la pantalla"),           // "Sal de la pantalla completa"
    entra:      B(G, "entra en cierres"),             // "y entra en cierres de caja"
    pulsa:      B(G, "Pulsa abrir"),                  // "Pulsa abrir o cerrar caja"
    ventana:    B(G, "Todo el cierre cabe"),          // "Todo el cierre cabe en una ventana"
    bloques:    B(G, "tres bloques"),                 // "con tres bloques"
    uno:        B(G, "Uno:"),                         // "Uno: qué caja estás cuadrando"
    elegida:    B(G, "Ya viene elegida"),             // "Ya viene elegida la de este navegador"
    empieza:    B(G, "Empieza el día"),               // "Empieza el día con ciento cincuenta euros"
    dos:        B(G, "Dos:"),                         // "Dos: lo que dicen las cuentas"
    cobrado:    B(G, "Cobrado a clientes"),           // "Cobrado a clientes, cuatrocientos doce con ochenta"
    pagado:     B(G, "Pagado a proveedores"),         // "Pagado a proveedores, treinta y cinco"
    deberia:    B(G, "en el cajón debería"),          // "En el cajón debería haber quinientos veintisiete con ochenta"
    tres:       B(G, "Tres:"),                        // "Tres: lo que hay en el cajón"
    cuentas:    B(G, "Cuentas el dinero"),            // "Cuentas el dinero"
    escribes:   B(G, "escribes el total"),            // "y escribes el total"
    cuadra:     B(G, "Cuadra."),                      // "Cuadra."
    siNo:       B(G, "Y si no cuadra"),               // "Y si no cuadra, también te lo dice"
  };
  const clicAbrir = T.pulsa + 0.6;
  const enApp = t >= T.entra;
  const dlgP = ent(t, clicAbrir + 0.3, 0.8);

  // Contado: se escribe en el campo, cifra a cifra
  const CIFRAS = '527,80';
  const n = Math.floor(clamp((t - (T.escribes + 0.3)) / 0.9, 0, 1) * CIFRAS.length);
  const contado = n > 0 ? CIFRAS.slice(0, n) + (n === CIFRAS.length ? ' €' : '') : null;

  // Un bloque protagonista cada vez: los otros se atenúan
  const fases = [['b1', T.uno, T.dos], ['b2', T.dos, T.tres], ['b3', T.tres, 99]];
  const dims = {};
  ['b1', 'b2', 'b3'].forEach(b => {
    let w = 0; fases.forEach(([k, s, e]) => { if (k !== b) w = Math.max(w, foco(t, s, e, 0.6)); });
    dims[b] = 1 - 0.6 * w;
  });
  const r = {
    b1: Math.max(foco(t, T.bloques, T.bloques + 0.9), foco(t, T.uno, T.dos)),
    b2: Math.max(foco(t, T.bloques + 0.45, T.bloques + 1.35), foco(t, T.dos, T.tres)),
    b3: Math.max(foco(t, T.bloques + 0.9, T.bloques + 1.8), foco(t, T.tres, 99)),
    caja:    foco(t, T.elegida, T.empieza),
    saldo:   foco(t, T.empieza, T.dos),
    cobrado: foco(t, T.cobrado, T.pagado),
    pagado:  foco(t, T.pagado, T.deberia),
    deberia: foco(t, T.deberia, T.tres + 0.4),
    contado: foco(t, T.cuentas, T.cuadra),
  };
  const d = { contado, banner: t >= T.cuadra - 0.1 ? 'cuadra' : null, bannerP: ent(t, T.cuadra - 0.1, 0.7) };

  const Fila = ({ y, dia, saldo, dif }) => (
    <div style={{ position:'absolute', left:0, right:0, top:y, height:50, display:'flex', alignItems:'center', borderBottom:`1px solid ${C.borde}`, fontSize:17, color:C.tinta }}>
      <span style={{ width:300, paddingLeft:20 }}>Mostrador</span><span style={{ width:260 }}>{dia}</span><span style={{ width:260 }}>{saldo}</span><span style={{ width:200 }}>{dif}</span>
    </div>
  );

  return (
    <Fondo>
      <Rotulo t={t} s={0} paso="PASO 5 · CERRAR LA CAJA" titulo={t < T.ventana ? 'Cierres de Caja' : 'Una ventana, tres bloques'}/>
      <Ventana url={enApp ? 'play.dinaup.com/App/TPV/CashClosing' : 'play.dinaup.com/App/TPV/POS'}>
        {!enApp && <PantallaVenta t={t} r={{ salir: foco(t, T.sal, T.entra) }}/>}
        {enApp && (
          <AppTPV activo="cierres" aMenu={{ cierres: foco(t, T.entra, T.pulsa) }}>
            <div style={{ position:'absolute', left:24, top:24, display:'flex', gap:12 }}>
              <Btn txt="Abrir o cerrar caja" ico="lock_open" tipo="success" h={46} fs={17} a={foco(t, T.pulsa, clicAbrir + 0.4)}/>
              <Btn txt="Guía Cierres de Caja" ico="info" variante="text" h={46} fs={17}/>
            </div>
            <div style={{ position:'absolute', left:24, right:24, top:90, height:1, background:C.bordeF }}/>
            <Tarjeta style={{ left:24, right:24, top:110, height:300, overflow:'hidden' }}>
              <div style={{ display:'flex', gap:6, alignItems:'center', height:52, padding:'0 20px', borderBottom:`3px solid ${C.azul}`, width:200, color:C.azul, fontSize:17, fontWeight:600 }}><Ico n="lock" s={20} c={C.azul}/>Cierres de Caja</div>
              <div style={{ position:'absolute', left:0, right:0, top:64, height:44, display:'flex', alignItems:'center', background:C.panel, fontSize:14, fontWeight:600, color:C.gris }}>
                <span style={{ width:300, paddingLeft:20 }}>Caja</span><span style={{ width:260 }}>Día</span><span style={{ width:260 }}>Saldo final</span><span style={{ width:200 }}>Diferencia</span>
              </div>
              <Fila y={108} dia="8 oct" saldo="150,00 €" dif="0,00 €"/>
              <Fila y={158} dia="7 oct" saldo="212,40 €" dif="0,00 €"/>
              <Fila y={208} dia="6 oct" saldo="180,00 €" dif="-2,00 €"/>
            </Tarjeta>
          </AppTPV>
        )}
        <Mascara op={dlgP}/>
        {dlgP > 0 && <DialogoCierre p={dlgP} d={d} r={r} dims={dims}/>}
        <Cursor t={t} op={sal(t, clicAbrir + 0.4)} kf={[[T.sal - 0.2, 1500, 160], [T.sal + 0.8, 1640, 26], [T.entra, 1640, 26], [T.pulsa - 0.2, 600, 300], [clicAbrir - 0.1, 440, 106]]} clics={[clicAbrir]}/>
      </Ventana>
    </Fondo>
  );
}
Object.assign(window, { EscenaTPV05 });