// === Escena 06 — Cobrar + resumen + eco ===
// En una venta ya guardada, «Cobrar» (o F4) abre el flujo de la venta (TPVU.razor CobroRapidoAsync →
// AbrirFlujoAsync). DataFlowVentaDialog.razor: título «número · cliente», tarjeta «Cobro» con «Pendiente de
// cobro», «Total factura», «Cobrado», «Pendiente», «Importe a cobrar», «Caja / cuenta bancaria» y «Cobrar»;
// cobrada del todo pasa a «Completado». El cobro sale en la pestaña «Cobros» de Facturas emitidas.
function EscenaFV06({ t }){
  const G = GUION[5];
  const T = {
    abre:B(G,'abre la factura'),          // "abre la factura desde la lista"
    cobrar:B(G,'Pulsa Cobrar'),           // "Pulsa Cobrar"
    f4:B(G,'la tecla efe'),               // "o la tecla efe cuatro"
    cobrado:B(G,'lo cobrado'),            // "Verás lo cobrado"
    pendiente:B(G,'lo pendiente'),        // "y lo pendiente"
    importe:B(G,'el importe'),            // "Indica el importe"
    caja:B(G,'qué caja o cuenta'),        // "y en qué caja o cuenta entra"
    pulsa2:B(G,'y pulsa Cobrar'),         // "y pulsa Cobrar"
    cobros:B(G,'pestaña Cobros'),         // "El cobro aparece en la pestaña Cobros"
    resumen:B(G,'En resumen'),            // "En resumen"
    r1:B(G,'el botón verde'),             // "el botón verde abre la venta"
    r2:B(G,'Arriba, a quién'),            // "Arriba, a quién"
    r3:B(G,'A la derecha, qué'),          // "A la derecha, qué"
    r4:B(G,'Abajo, Aceptar'),             // "Abajo, Aceptar"
    eA:B(G,'Con eso'),                    // "Con eso, la factura está hecha y cobrada" (eco en pantalla)
    eB:B(G,'está hecha'),
    eC:B(G,'y cobrada'),
  };
  const NUEVA = { n:'F2026-0043', f:'09/10/2026', c:'Talleres Ebro, S.L.', tot:'199,65 €' };
  const clicFila = T.abre + 0.7, clicCobrar = T.cobrar + 0.6, clicCobrar2 = T.pulsa2 + 0.55;
  const ven = ap(t, clicFila + 0.2, 0.6);
  const dlg = ap(t, clicCobrar + 0.4, 0.6);
  const cuenta = t >= T.caja + 0.5 ? 'Cuenta corriente' : '';
  const cobrado = t >= clicCobrar2 + 0.3;
  const salir = ap(t, T.cobros - 1.0, 0.6);
  const tab = t >= T.cobros - 0.4 ? 'Cobros' : 'Facturas emitidas';
  const velo = ap(t, T.resumen - 0.2, 0.7) * 0.97;
  const eco = ap(t, T.eA - 0.2, 0.5);

  const cursor = [{ t:0, x:700, y:420 }, { t:T.abre, x:700, y:420 }, { t:clicFila, x:320, y:214 }, { t:T.cobrar, x:600, y:400 },
                  { t:clicCobrar, x:914, y:576 }, { t:T.importe, x:700, y:330 }, { t:clicCobrar2, x:905, y:316 }, { t:clicCobrar2 + 1.2, x:860, y:420 }];

  const Bloque = ({ label, val, hero, ok, p }) => (
    <div style={{ flex:1, padding:'10px 14px', borderRadius:8, background:hero ? '#fff7ed' : UI.raised, border:`1px solid ${p > 0 ? UI.primary : UI.hb}` }}>
      <div style={{ fontSize:11.5, color:UI.label }}>{label}</div>
      <div style={{ fontSize:hero ? 22 : 17, fontWeight:700, color:ok ? UI.ok : (hero ? '#c2410c' : UI.text), marginTop:2 }}>{val}</div>
    </div>
  );
  const flujo = dlg > 0 && (
    <div style={{ position:'absolute', inset:0, background:`rgba(0,0,0,${0.28 * dlg})`, zIndex:50 }}>
      <div style={{ position:'absolute', left:170, top:70, width:860, height:330, background:'#fff', borderRadius:8, boxShadow:'0 20px 60px rgba(0,0,0,.25)',
                    opacity:dlg, transform:`translateY(${(1 - dlg) * 10}px)` }}>
        <div style={{ height:44, borderBottom:`1px solid ${UI.hb}`, display:'flex', alignItems:'center', gap:8, padding:'0 18px', fontSize:15, fontWeight:600 }}>
          F2026-0043 <span style={{ color:UI.faint }}>·</span> <span style={{ fontWeight:400, color:'#45494f' }}>Talleres Ebro, S.L.</span>
          <div style={{ flex:1 }}/><Ico n="close" s={18}/>
        </div>
        <div style={{ position:'absolute', left:16, right:16, top:58, height:256, border:`1px solid ${UI.hb}`, borderRadius:8 }}>
          <div style={{ position:'absolute', left:14, top:12, display:'flex', alignItems:'center', gap:6, fontSize:14, fontWeight:600 }}><Ico n="payments" s={18} c={UI.primary}/>Cobro</div>
          <span style={{ position:'absolute', right:14, top:12, fontSize:11.5, fontWeight:600, padding:'3px 10px', borderRadius:20,
                         background:cobrado ? UI.okBg : '#fff7ed', color:cobrado ? UI.ok : '#c2410c', display:'flex', alignItems:'center', gap:4 }}>
            {cobrado && <Ico n="check_circle" s={13} c={UI.ok}/>}{cobrado ? 'Completado' : 'Pendiente de cobro'}
          </span>
          <div style={{ position:'absolute', left:14, right:14, top:50, display:'flex', gap:10 }}>
            <Bloque label="Total factura" val="199,65 €" p={0}/>
            <Bloque label="Cobrado" val={cobrado ? '199,65 €' : '0,00 €'} ok={cobrado} p={entre(t, T.cobrado, T.pendiente, 0.2)}/>
            <Bloque label="Pendiente" val={cobrado ? '0,00 €' : '199,65 €'} hero={!cobrado} p={entre(t, T.pendiente, T.importe, 0.2)}/>
          </div>
          {!cobrado && <>
            <Campo x={14} y={140} w={300} label="Importe a cobrar" value="199,65" drop={false} foco={entre(t, T.importe, T.caja, 0.2)}/>
            <Campo x={326} y={140} w={380} label="Caja / cuenta bancaria" value={cuenta} placeholder="Seleccionar..." foco={entre(t, T.caja, T.pulsa2, 0.2)} req/>
            <Boton x={718} y={150} h={40} fs={15} txt="Cobrar" icon="payments" tipo="success"/>
          </>}
          {cobrado && <div style={{ position:'absolute', left:14, top:150, fontSize:13, color:UI.label, display:'flex', alignItems:'center', gap:4 }}><Ico n="expand_more" s={16} c={UI.primary}/><span style={{ color:UI.primary }}>Ver cobros</span></div>}
        </div>
      </div>
    </div>
  );

  const cobrosLista = (
    <Tabla cols={[['Fecha', 16], ['Venta', 150], ['Caja / cuenta', 300], ['Importe', 600]]} filas={[['09/10/2026', 'F2026-0043', 'Cuenta corriente', '199,65 €']]}
           resalta={0} y0={56} pRes={ap(t, T.cobros, 0.5)}/>
  );

  const RECAP = [['add_circle', 'El botón verde abre la venta', T.r1], ['person', 'Arriba, a quién', T.r2], ['storefront', 'A la derecha, qué vendes', T.r3], ['check_circle', 'Aceptar la emite', T.r4]];

  return (
    <Escena t={t} eyebrow="DESPUÉS · COBRAR" titulo="Cuando te pagan"
      fuera={<>
        <Cursor t={t} frames={cursor} clicks={[clicFila, clicCobrar, clicCobrar2]} desde={T.abre - 0.3} hasta={T.cobros - 1.0}/>
        {velo > 0 && <div style={{ position:'absolute', inset:0, background:'#fff', opacity:velo, zIndex:65 }}/>}
        {velo > 0 && (
          <div style={{ position:'absolute', left:560, top:300, zIndex:70, opacity:1 - eco }}>
            <div className="f-mono" style={{ fontSize:18, fontWeight:600, letterSpacing:'2px', color:'#0085FF', marginBottom:26, opacity:ap(t, T.resumen, 0.5) }}>EN RESUMEN</div>
            {RECAP.map(([ic, txt, t0], i) => {
              const e = ap(t, t0, 0.6);
              return (
                <div key={i} className="f-plex" style={{ display:'flex', alignItems:'center', gap:22, height:92, opacity:e, transform:`translateY(${(1 - e) * 12}px)` }}>
                  <Ico n={ic} s={50} c={i === 3 ? UI.success : '#0085FF'}/>
                  <span style={{ fontSize:46, fontWeight:700, color:'#0F172A' }}>{txt}</span>
                </div>
              );
            })}
          </div>
        )}
        <UnicaCosa t={t} tA={T.eA} tB={T.eB} tC={T.eC} top={350}/>
      </>}>
      <PantallaFacturas nueva={NUEVA} tab={tab} cobros={cobrosLista}/>
      <Marca x={246} y={FILA0} w={938} h={36} p={entre(t, T.abre, clicFila + 0.3, 0.3)} r={4}/>
      {ven > 0 && salir < 1 && (
        <div style={{ position:'absolute', inset:0, opacity:ven * (1 - salir) }}>
          <VentanaVenta cliente="Talleres Ebro, S.L." df="Talleres Ebro, S.L." envio="" fecha="09/10/2026 10:32" estado="" numero="F2026-0043" emitida lineaDF={1} tab="Agregar"
            lineas={[{ nombre:'Hora de soporte', und:'3', precio:'45,00 €', total:'135,00 €' }, { nombre:'Desplazamiento', texto:true, und:'1', precio:'30,00 €', total:'30,00 €' }]}
            sub={165} iva={34.65} total={199.65}
            derecha={
              <div style={{ position:'absolute', left:14, right:14, top:12, padding:'12px 14px', borderRadius:6, background:'#e8f1fc', display:'flex', gap:10, fontSize:13, lineHeight:1.45 }}>
                <Ico n="verified" s={20} c={UI.primary}/>
                <div><b>Esta venta ya está facturada</b><br/>Una factura emitida no se puede editar, como exige la normativa.</div>
              </div>}
            encima={<>
              <Marca x={FV.cobrar.x} y={FV.cobrar.y} w={FV.cobrar.w} h={FV.cobrar.h} p={entre(t, T.cobrar, T.f4, 0.3)} r={6}/>
              <Marca x={966} y={566} w={26} h={20} p={entre(t, T.f4, clicCobrar + 1.2, 0.3)} r={5}/>
              {flujo}
            </>}/>
        </div>
      )}
    </Escena>
  );
}
Object.assign(window, { EscenaFV06 });