// === Escena 02 — Presupuestos: dónde están y cómo se crea uno ===
// /App/Pymes/Budget: ReportTabsU «Presupuestos» (+ las dos de notas), la barra con un botón verde por
// tipo de venta (ToolBarPresupuestosU: Icon add, ButtonStyle.Success) y la lista (importe, estado, fecha).
// El botón abre la ventana de venta en modo presupuesto (AbrirTPV_PresupuestoVenta: título «Presupuesto»).

const FILAS_PRES = [
  ['P-2026-0030', 'Hostal Ribera', 'Enviado', '#085786', '02/10/2026', '2.480,00 €'],
  ['P-2026-0029', 'Cafetería Lis', 'Aceptado', '#3a8707', '28/09/2026', '865,00 €'],
  ['P-2026-0028', 'Ana Gil Pardo', 'Rechazado', '#c62828', '25/09/2026', '410,00 €'],
  ['P-2026-0027', 'Bodegas Ordás', 'Aceptado', '#3a8707', '21/09/2026', '3.150,00 €'],
];

// Lista de un informe de play (ReportU): cabecera + filas. cols = anchos; foco = índice de columna resaltada.
function Lista({ x, y, w, cab, filas, anchos, foco = [], nueva, eNueva = 0 }){
  const fila = (f, i, extra = {}) => (
    <div key={i} style={{ display:'flex', alignItems:'center', height:62, borderBottom:`1px solid #eef0f2`, padding:'0 14px', ...extra }}>
      {f.map((c, j) => (
        <div key={j} style={{ width:anchos[j], textAlign: j === anchos.length - 1 ? 'right' : 'left', background: foco[j] ? `rgba(29,115,226,${0.10 * foco[j]})` : 'transparent', borderRadius:6, padding:'4px 6px' }}>
          {c}
        </div>
      ))}
    </div>
  );
  return (
    <div style={{ position:'absolute', left:x, top:y, width:w, background:'#fff', border:`1px solid ${P.borde}`, borderRadius:10, overflow:'hidden' }}>
      <div style={{ display:'flex', alignItems:'center', height:48, padding:'0 14px', background:'#fafbfc', borderBottom:`1px solid ${P.borde}` }}>
        {cab.map((c, j) => <div key={j} style={{ width:anchos[j], padding:'0 6px', textAlign: j === anchos.length - 1 ? 'right' : 'left' }}><R s={15} w={600} c={P.gris} style={{ textTransform:'uppercase', letterSpacing:'0.05em' }}>{c}</R></div>)}
      </div>
      {nueva && eNueva > 0 && fila(nueva, 'n', { opacity:eNueva, background:`rgba(29,115,226,${0.06 * eNueva})` })}
      {filas.map((f, i) => fila(f, i))}
    </div>
  );
}
const celdasPres = (f, estado) => [<R s={18} w={600}>{f[0]}</R>, <R s={18}>{f[1]}</R>, estado || <Estado txt={f[2]} color={f[3]}/>, <R s={18} c={P.gris}>{f[4]}</R>, <R s={18} w={600}>{f[5]}</R>];

function EscenaPV02({ t }){
  useVoz(1);
  const G = GUION[1];
  const T = {
    pymes:B(G,'En la aplicación Pymes'),
    preventa:B(G,'llamado Preventa'),
    viven:B(G,'Ahí viven'),
    abre:B(G,'Abre Presupuestos'),
    importe:B(G,'su importe'),
    estado:B(G,'su estado'),
    fecha:B(G,'su fecha'),
    verde:B(G,'un botón verde'),
    pulsas:B(G,'Lo pulsas'),
    cliente:B(G,'eliges el cliente'),
    lineas:B(G,'añades las líneas'),
    aceptar:B(G,'Al aceptar'),
    numero:B(G,'recibe su número'),
    imprimir:B(G,'imprimirlo'),
    dias:B(G,'Pasan unos días'),
    acepta:B(G,'el cliente acepta'),
    ahora:B(G,'¿Y ahora qué?'),
  };
  const OX = 90, OY = 284;            // origen del lienzo de la app en el canvas
  const eWin = pr(t, 0.2, 0.9);
  const fSec = pr(t, T.preventa, 0.6);
  const abierto = t >= T.abre;
  const eCont = pr(t, T.abre, 0.7);
  const foco = [0, 0, pr(t, T.estado, 0.4) * (1 - pr(t, T.fecha, 0.4)), pr(t, T.fecha, 0.4) * (1 - pr(t, T.verde, 0.4)), pr(t, T.importe, 0.4) * (1 - pr(t, T.estado, 0.4))];
  const pulso = (t0) => (t >= t0 && t < t0 + 1.2) ? Math.sin((t - t0) / 1.2 * Math.PI) : 0;
  const fVerde = pulso(T.verde);
  // Ventana del presupuesto
  const eTPV = pr(t, T.pulsas + 0.25, 0.7) * (1 - pr(t, T.dias, 0.7));
  const lineas = LINEAS.map((l, i) => ({ ...l, op: pr(t, T.lineas + 0.3 + i * 0.5, 0.5) }));
  const numero = t >= T.numero ? 'P-2026-0031' : '';
  const cliente = t >= T.cliente + 0.3 ? 'Reformas Albar, S.L.' : '';
  // La lista, al volver: el presupuesto nuevo arriba, y cambia a Aceptado cuando el cliente acepta
  const eNueva = pr(t, T.dias + 0.4, 0.7);
  const aceptado = t >= T.acepta + 0.3;
  const nueva = celdasPres(['P-2026-0031', 'Reformas Albar, S.L.', '', '', '06/10/2026', '1.210,00 €'],
    aceptado ? <span style={{ display:'inline-block', transform:`scale(${1 + pulso(T.acepta + 0.3) * 0.12})` }}><Estado txt="Aceptado"/></span> : <Estado txt="Enviado" color={P.info}/>);
  const cursor = (
    <Cursor t={t} desde={T.verde}
      puntos={[[T.verde, 1300, 760], [T.pulsas - 0.1, OX + 575, OY + 112], [T.aceptar - 0.7, OX + 575, OY + 112], [T.aceptar, 1590, 940], [T.imprimir - 0.4, 1590, 940], [T.imprimir, 345, 940], [T.dias + 0.6, 345, 940], [T.ahora, 1500, 1130]]}
      clics={[T.pulsas, T.aceptar]}/>
  );
  return (
    <SlideCanvas variant="light-soft" bg="#F8FAFC">
      <DemoHeader t={t} eyebrow="1 · DÓNDE ESTÁN" title="Pymes → Preventa → Presupuestos"/>
      <Ventana url={abierto ? 'play.dinaup.com/App/Pymes/Budget' : 'play.dinaup.com/App/Pymes'} op={eWin} dy={(1 - eWin) * 18} atenuar={eTPV * 0.5}>
        <Menu activo={abierto ? 'Presupuestos' : 'Inicio'} focoSeccion={fSec} atenuarResto={pr(t, T.viven, 0.6) * (1 - pr(t, T.abre + 1.5, 0.8))}/>
        {abierto && (
          <div style={{ opacity:eCont }}>
            <div style={{ position:'absolute', left:324, top:16, width:1392 }}>
              <Pestanas tabs={[{ txt:'Presupuestos', ico:'view_list' }, { ico:'note_stack' }, { ico:'lock' }]}/>
            </div>
            <div style={{ position:'absolute', left:324, top:86, display:'flex', alignItems:'center', gap:14, height:52 }}>
              <R s={24} w={700}>Presupuestos</R>
              <div style={{ width:16 }}/>
              <Boton txt="Venta" ico="add" tam={17} foco={fVerde}/>
              <Boton txt="Instalación" ico="add" tam={17} foco={fVerde}/>
            </div>
            <div style={{ position:'absolute', left:1396, top:90, width:320, height:44, background:'#fff', border:`1px solid ${P.borde}`, borderRadius:8, display:'flex', alignItems:'center', gap:8, padding:'0 12px' }}>
              <Ico n="search" s={22} c={P.gris2}/><R s={16} c={P.gris2}>Buscar</R>
            </div>
            <Lista x={324} y={156} w={1392} cab={['Nº', 'Cliente', 'Estado', 'Fecha', 'Importe']} anchos={[230, 470, 230, 230, 200]} foco={foco}
              filas={FILAS_PRES.map(f => celdasPres(f))} nueva={nueva} eNueva={eNueva}/>
          </div>
        )}
      </Ventana>
      <VentanaTPV x={260} y={190} w={1400} h={780} e={eTPV} titulo="Presupuesto" numero={numero} fecha="06/10/2026" cliente={cliente}
        lineas={lineas} total={t >= T.lineas + 1.6 ? '1.210,00 €' : null} panel={<PanelAgregar/>}
        focoAceptar={pulso(T.aceptar)} focoImprimir={pulso(T.imprimir)}/>
      {cursor}
    </SlideCanvas>
  );
}
Object.assign(window, { EscenaPV02, Lista, celdasPres, FILAS_PRES });