// === Escena 04 — Parámetros: lo que vale para todas las líneas (valle antes del clímax) ===
// TPVParametrosU.razor, tarjetas en su orden real para una venta: «Número» (Serie y Número bloqueados con
// numeración automática), «Impuestos [Todos los Conceptos]» («* Se aplicará a todos los conceptos.»,
// «Impuesto», «Retención»), «Inventario», «Descuentos» («DTO general %») y «Avanzado» («Fecha operación»,
// que «decide el trimestre del IVA»). Lo que no se toca viene del cliente o, si no, del tipo (su ayuda).
function EscenaFV04({ t }){
  const G = GUION[3];
  const T = {
    pestana:B(G,'pestaña Parámetros'),     // "Para eso está la pestaña Parámetros"
    todas:B(G,'se aplica a todas'),        // "se aplica a todas las líneas a la vez"
    impuestos:B(G,'En Impuestos'),         // "En Impuestos eliges el impuesto"
    retencion:B(G,'la retención'),         // "y, si toca, la retención"
    descuentos:B(G,'En Descuentos'),       // "En Descuentos"
    general:B(G,'el descuento general'),   // "el descuento general, en porcentaje"
    avanzado:B(G,'en Avanzado'),           // "Y en Avanzado"
    operacion:B(G,'la fecha de operación'),// "la fecha de operación"
    trimestre:B(G,'decide el trimestre'),  // "la que decide el trimestre en que se declara"
    nada:B(G,'Si no tocas nada'),          // "Si no tocas nada, se queda lo que traen..."
    listo:B(G,'Todo listo'),               // "Todo listo"
    antes:B(G,'Antes de aceptar'),         // "Antes de aceptar, mira dos cosas"
  };
  const tab = t >= T.pestana + 0.2 ? 'Parámetros' : 'Agregar';
  const scroll = 300 * Easing.easeInOutCubic(clamp((t - (T.descuentos - 0.9)) / 0.9, 0, 1));
  const W = FV.der.w - 24;

  const Tarjeta = ({ y, h, icon, titulo, children }) => (
    <div style={{ position:'absolute', left:12, top:y - scroll, width:W, height:h, borderRadius:8, border:`1px solid ${UI.hb}`, background:'#fff', boxShadow:'0 1px 3px rgba(0,0,0,.06)' }}>
      <div style={{ position:'absolute', left:12, top:9, display:'flex', alignItems:'center', gap:6, fontSize:13.5, fontWeight:600 }}>
        <Ico n={icon} s={17} c={UI.primary}/>{titulo}<Ico n="help_outline" s={14} c={UI.faint} style={{ marginLeft:2 }}/>
      </div>
      {children}
    </div>
  );
  const Check = ({ x, y, txt }) => (
    <div style={{ position:'absolute', left:x, top:y, display:'flex', alignItems:'center', gap:7, fontSize:12 }}>
      <span style={{ width:15, height:15, borderRadius:3, border:'2px solid #9ca3af', boxSizing:'border-box' }}/>{txt}
    </div>
  );
  const params = (
    <div style={{ position:'absolute', inset:0 }}>
      <Tarjeta y={10} h={104} icon="description" titulo="Número">
        <Campo x={12} y={34} w={140} label="Serie" value="" drop={false} disabled/>
        <Campo x={162} y={34} w={140} label="Número" value="" drop={false} disabled/>
        <Check x={12} y={82} txt="Número de factura editable"/>
      </Tarjeta>
      <Tarjeta y={126} h={150} icon="attach_money" titulo="Impuestos [Todos los Conceptos]">
        <div style={{ position:'absolute', left:12, top:36, fontSize:12, fontStyle:'italic', color:'#45494f' }}><b>*</b> Se aplicará a todos los conceptos.</div>
        <Campo x={12} y={60} w={232} label="Impuesto" value="IVA 21%"/>
        <Campo x={256} y={60} w={232} label="Retención" value=""/>
        <div style={{ position:'absolute', left:12, right:12, top:112, height:1, background:UI.hb }}/>
        <Check x={12} y={122} txt="Recargo de Equivalencia"/>
        <Check x={200} y={122} txt="Precio con Impuesto Incluidos"/>
      </Tarjeta>
      <Tarjeta y={288} h={92} icon="inventory_2" titulo="Inventario">
        <Campo x={12} y={36} w={200} label="Almacén (Operación)" value="Almacén central"/>
        <Campo x={222} y={36} w={266} label="Salida de inventario" value="Manual (sin salida automática)"/>
      </Tarjeta>
      <Tarjeta y={392} h={86} icon="savings" titulo="Descuentos">
        {['DTO entidad %', 'DTO general %', 'DTO VIP %', 'DTO tipo entidad %'].map((l, i) => <Campo key={l} x={12 + i * 120} y={36} w={112} label={l} value="0 %" drop={false}/>)}
      </Tarjeta>
      <Tarjeta y={490} h={150} icon="settings" titulo="Avanzado">
        <Campo x={12} y={36} w={170} label="Fecha contable" value="" drop={false} icon="calendar_today"/>
        <Campo x={192} y={36} w={170} label="Fecha operación" value="" drop={false} icon="calendar_today"/>
        <div style={{ position:'absolute', left:12, top:92, right:12, fontSize:11.5, color:'#45494f', lineHeight:1.45 }}>
          <b>Fecha de Operación:</b><br/>No se ha seleccionado una fecha. Se guardará con la <b>fecha actual</b>.
        </div>
      </Tarjeta>
    </div>
  );
  // Posiciones (pantalla lógica) de lo que se señala: contenido del panel en (FV.der.x, 168)
  const px = FV.der.x + 12, py = 168 - scroll;

  return (
    <Escena t={t} eyebrow="2 · A LA DERECHA" titulo="Lo que vale para todas las líneas"
      fuera={<>
        <Nota x={1300} y={878} p={entre(t, T.trimestre, T.nada, 0.4)}>Decide el trimestre</Nota>
        <Nota x={150} y={760} p={entre(t, T.nada, T.antes, 0.4)}>Sin tocar: lo del cliente o del tipo</Nota>
      </>}>
      <VentanaVenta cliente="Talleres Ebro, S.L." df="Talleres Ebro, S.L." envio="" fecha="" lineaDF={1} tab={tab}
        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={tab === 'Parámetros' ? params : <PanelAgregar productos={[{ nombre:'Mantenimiento mensual', precio:'180,00 €' }, { nombre:'Hora de soporte', precio:'45,00 €' }]}/>}
        encima={<>
          <Marca x={tabX(2) - 2} y={130} w={102} h={34} p={entre(t, 0, T.todas, 0.3)} r={5}/>
          <Marca x={px + 8} y={py + 126 + 32} w={220} h={22} p={entre(t, T.todas, T.impuestos, 0.3)} r={5}/>
          <Marca x={px + 12} y={py + 126 + 60} w={232} h={48} p={entre(t, T.impuestos, T.retencion, 0.3)}/>
          <Marca x={px + 256} y={py + 126 + 60} w={232} h={48} p={entre(t, T.retencion, T.descuentos - 0.9, 0.3)}/>
          <Marca x={px + 132} y={py + 392 + 36} w={112} h={48} p={entre(t, T.general, T.avanzado, 0.3)}/>
          <Marca x={px + 192} y={py + 490 + 36} w={170} h={48} p={entre(t, T.operacion, T.nada, 0.3)}/>
          <Marca x={FV.cliente.x} y={FV.cliente.y} w={FV.tipo.x + FV.tipo.w - FV.cliente.x} h={48} p={entre(t, T.nada, T.listo + 0.5, 0.3)} color={UI.faint}/>
        </>}/>
    </Escena>
  );
}
Object.assign(window, { EscenaFV04 });