const { Button, Badge, Card, Stat, Input, Select, StatusPill, DataTable, Callout } = window.MIS;

function Kpis({items,cols}){
  return (
    <div style={{display:'grid',gridTemplateColumns:'repeat('+(cols||4)+',1fr)',gap:'var(--space-4)',marginBottom:'var(--space-6)'}}>
      {items.map(function(it,i){ return (<Card key={i} tone={it.tone}><Stat inverse={it.tone==='ink'} size="sm" value={it.value} label={it.label} note={it.note}/></Card>); })}
    </div>
  );
}
function Note({children}){ return (<p style={{font:'var(--type-small)',color:'var(--text-muted)',marginTop:'var(--space-4)',maxWidth:'var(--measure)'}}>{children}</p>); }
function Tabs({tabs,value,onChange}){
  return (
    <div style={{display:'flex',gap:'var(--space-2)',marginBottom:'var(--space-6)',flexWrap:'wrap'}}>
      {tabs.map(function(tb){ return (<Button key={tb[0]} size="sm" variant={value===tb[0]?'primary':'secondary'} onClick={function(){onChange(tb[0]);}}>{tb[1]}</Button>); })}
    </div>
  );
}

/* INICIO */
function Inicio({go}){
  const { t, fmt } = useUI();
  return (<>
    <ViewHeader title={t('ini.title')} lede={t('ini.lede')}
      actions={<><Button size="sm" variant="secondary" onClick={function(){go('planilla');}}>{t('ini.correr')}</Button><Button size="sm" variant="accent" onClick={function(){go('factura');}}>{t('ini.facturar')}</Button></>}/>
    <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:'var(--space-4)',marginBottom:'var(--space-6)'}}>
      <Card padding="var(--space-6)">
        <Stat size="sm" value={fmt(2480000)} label={t('ini.cobrar')} note={t('ini.cobrarNota')+fmt(1560000)}/>
        <div style={{marginTop:'var(--space-4)'}}><Button size="sm" variant="secondary" onClick={function(){go('cobros');}}>{t('ini.verCxc')}</Button></div>
      </Card>
      <Card padding="var(--space-6)">
        <Stat size="sm" value={fmt(1284560)} label={t('ini.pagar')} note={t('ini.pagarNota')}/>
        <div style={{marginTop:'var(--space-4)'}}><Button size="sm" variant="secondary" onClick={function(){go('planilla');}}>{t('ini.verPlanilla')}</Button></div>
      </Card>
      <Card padding="var(--space-6)" tone="ink">
        <Stat inverse size="sm" value={fmt(222260)} label={t('ini.iva')} note={t('ini.ivaNota')}/>
        <div style={{marginTop:'var(--space-4)'}}><Button size="sm" variant="primary" onClick={function(){go('impuestos');}}>{t('ini.verBorrador')}</Button></div>
      </Card>
    </div>
    <Card padding="var(--space-6)">
      <h3 style={{font:'var(--type-h3)',marginBottom:'var(--space-4)'}}>{t('ini.vig')}</h3>
      <div style={{display:'flex',flexDirection:'column',gap:'var(--space-3)'}}>
        {[['warn','15 feb','ini.vig1','ini.vig1d'],['warn','5 feb','ini.vig2','ini.vig2d'],['late','15 mar','ini.vig3','ini.vig3d']].map(function(r){
          return (<div key={r[2]} style={{display:'flex',gap:'var(--space-4)',alignItems:'flex-start',paddingBottom:'var(--space-3)',borderBottom:'1px solid var(--border-subtle)'}}>
            <div style={{flexShrink:0,paddingTop:2}}><StatusPill state={r[0]}>{r[1]}</StatusPill></div>
            <div><strong style={{display:'block',font:'var(--type-body)',fontWeight:'var(--weight-bold)',color:'var(--text-strong)'}}>{t(r[2])}</strong>
            <span style={{font:'var(--type-small)',color:'var(--text-muted)'}}>{t(r[3])}</span></div>
          </div>);
        })}
      </div>
    </Card>
  </>);
}

/* MOVIMIENTOS */
const MOV_DEMO=[
  {fecha:'03/01',nombre:'Hospedaje Las Olas',monto:35900,cat:'hoteles',medio:'BCR'},
  {fecha:'04/01',nombre:'Hotel Vista Verde',monto:123000,cat:'hoteles',medio:'BCR'},
  {fecha:'09/01',nombre:'SINPE Servicios M.',monto:193000,cat:'reciclable',medio:'BCR'},
];
function Movimientos(){
  const { t, fmt } = useUI();
  const [modo,setModo]=React.useState('escribir');
  const [libro,setLibro]=React.useState(null);   // null = aun no responde el api
  React.useEffect(function(){
    var cancel=false;
    fetch('/api/movimientos',{headers:{Authorization:'Bearer demo-token'}})
      .then(function(r){ return r.ok?r.json():Promise.reject(r.status); })
      .then(function(d){ if(cancel)return; setLibro((d.movimientos||[]).map(function(m){
        return {fecha:(m.fecha||'').slice(5),nombre:m.descripcion,monto:(m.signo==='debe'?-1:1)*m.monto,medio:m.fuente,vivo:true}; })); })
      .catch(function(){ if(!cancel) setLibro(null); });
    return function(){ cancel=true; };
  },[]);
  var esVivo = Array.isArray(libro) && libro.length>0;
  var filas = esVivo ? libro : MOV_DEMO;
  return (<>
    <ViewHeader title={t('nav.mov')} lede={t('mov.lede')}
      actions={<Tabs tabs={[['escribir',t('mov.tabEscribir')],['banco',t('mov.tabBanco')]]} value={modo} onChange={setModo}/>}/>
    {modo==='escribir'&&(<>
      {esVivo && <div style={{marginBottom:'var(--space-3)'}}><StatusPill state="ok">{t('mov.enVivo')}</StatusPill></div>}
      <Card style={{marginBottom:'var(--space-4)'}}>
        <DataTable columns={[{key:'fecha',label:t('col.fecha'),mono:true},{key:'nombre',label:t('mov.nombre')},{key:'monto',label:t('col.monto'),mono:true,align:'right'},{key:'cat',label:t('mov.cat')},{key:'medio',label:t('mov.medio')}]}
          rows={filas.map(function(m){ return {fecha:m.fecha,nombre:m.nombre,monto:fmt(m.monto),
            cat:<Badge tone={m.cat==='reciclable'?'accent':'outline'}>{m.cat?(t('cat.'+m.cat)||m.cat):'-'}</Badge>,medio:m.medio}; })}/>
      </Card>
      <Note>{t('mov.notaEscribir')}</Note>
    </>)}
    {modo==='banco'&&(<>
      <div style={{marginBottom:'var(--space-4)'}}><Callout tone="info" label={t('mov.saldoLabel')}>{t('mov.saldoText')}</Callout></div>
      <Card>
        <DataTable columns={[{key:'fecha',label:t('col.fecha'),mono:true},{key:'con',label:t('mov.concepto')},{key:'monto',label:t('col.monto'),mono:true,align:'right'},{key:'cat',label:t('mov.catIA')},{key:'conf',label:t('mov.conf'),align:'right'},{key:'acc',label:'',align:'right'}]}
          rows={[
            {fecha:'05/05',con:'ND CC CCSS BANCOBCR',monto:fmt(-1069555),cat:<Badge tone="accent">{t('cat.cargas')}</Badge>,conf:'98%',acc:<StatusPill state="ok">{t('st.confirmado')}</StatusPill>},
            {fecha:'05/05',con:'ND CC ICEELE BANCOBC',monto:fmt(-16090),cat:<Badge tone="accent">{t('cat.luz')}</Badge>,conf:'95%',acc:<StatusPill state="ok">{t('st.confirmado')}</StatusPill>},
            {fecha:'01/05',con:'TRANSFERENC BANCOBCR',monto:fmt(100000),cat:<Badge tone="outline">{t('cat.porClasificar')}</Badge>,conf:'61%',acc:<StatusPill state="warn">{t('st.revisar')}</StatusPill>}
          ]}/>
      </Card>
      <Note>{t('mov.notaBanco')}</Note>
    </>)}
  </>);
}

/* FACTURACION */
function Facturacion(){
  const { t, fmt } = useUI();
  const [modo,setModo]=React.useState('emitir');
  const [abierto,setAbierto]=React.useState(false);
  const [feEstado,setFeEstado]=React.useState(null); // null | 'emitiendo' | {clave,haciendaStatus,ambiente}
  function emitirFE(){
    setFeEstado('emitiendo');
    fetch('/api/facturas',{method:'POST',headers:{Authorization:'Bearer demo-token','Content-Type':'application/json'},
      body:JSON.stringify({tipo:'factura',emisorLegalId:'3-101-747882',comprobante:{
        condicionVenta:'01',medioPago:['01'],
        receptor:{tipoIdentificacion:'02',numeroIdentificacion:'3101000000',nombre:'Cliente de Prueba S.A.'},
        detalle:[{codigoCabys:'8393100000600',cantidad:1,unidadMedida:'Sp',detalle:'Consultoria de gestion de residuos',precioUnitario:50000,impuesto:[{codigo:'01',codigoTarifa:'08',tarifa:13}]}]}})})
      .then(function(r){ return r.ok?r.json():Promise.reject(); })
      .then(function(d){ setFeEstado({clave:d.clave,haciendaStatus:d.haciendaStatus,ambiente:d.ambiente}); })
      .catch(function(){ setFeEstado(null); });
  }
  if(abierto) return <FacturaDetalle onBack={function(){setAbierto(false);}}/>;
  return (<>
    <ViewHeader title={t('nav.factura')} lede={t('fac.lede')}
      actions={<Tabs tabs={[['emitir',t('fac.tabEmitir')],['recibidos',t('fac.tabRecibidos')]]} value={modo} onChange={setModo}/>}/>
    {modo==='emitir'&&(<>
      <Card style={{marginBottom:'var(--space-4)'}}>
        <DataTable columns={[{key:'det',label:t('col.detalle')},{key:'cabys',label:'CABYS',mono:true},{key:'precio',label:t('fac.precio'),mono:true,align:'right'},{key:'iva',label:t('fac.det.iva'),align:'right'},{key:'monto',label:t('col.monto'),mono:true,align:'right'}]}
          rows={[{det:'Consultoria de gestion de residuos',cabys:'8393100000600',precio:fmt(50000),iva:'13%',monto:fmt(50000)}]}/>
        <div style={{display:'flex',justifyContent:'flex-end',alignItems:'center',gap:'var(--space-5)',padding:'var(--space-4)',borderTop:'1px solid var(--border-subtle)'}}>
          <span style={{font:'var(--type-small)',color:'var(--text-muted)'}}>{t('fac.det.ivaLinea')}{fmt(6500)} - Total: <strong style={{color:'var(--text-strong)'}}>{fmt(56500)}</strong></span>
          <Button size="sm" variant="primary" disabled={feEstado==='emitiendo'} onClick={emitirFE}>{feEstado==='emitiendo'?t('fac.emitiendo'):t('fac.emitir')}</Button>
        </div>
        {feEstado && feEstado!=='emitiendo' && (
          <div style={{padding:'0 var(--space-4) var(--space-4)'}}>
            <Callout tone="ink" label={t('fac.aceptadoHacienda')}>
              {t('fac.clave')}: <span style={{fontFamily:'var(--font-mono)'}}>{feEstado.clave}</span> · {feEstado.ambiente}
            </Callout>
          </div>
        )}
      </Card>
      <Card>
        <DataTable onRowClick={function(){setAbierto(true);}}
          columns={[{key:'cons',label:t('fac.consecutivo'),mono:true},{key:'receptor',label:t('fac.receptor')},{key:'fecha',label:t('col.fecha'),mono:true},{key:'total',label:t('col.total'),mono:true,align:'right'},{key:'estado',label:t('fac.hacienda')}]}
          rows={[
            {cons:'05001001010000000001',receptor:'Cliente de Prueba S.A.',fecha:'09/08',total:fmt(56500),estado:<StatusPill state="ok">{t('st.aceptado')}</StatusPill>},
            {cons:'05001001010000000002',receptor:'Hotel Vista Verde',fecha:'07/08',total:fmt(339000),estado:<StatusPill state="ok">{t('st.aceptado')}</StatusPill>}
          ]}/>
      </Card>
      <Note>{t('fac.notaEmitidas')}</Note>
    </>)}
    {modo==='recibidos'&&(<>
      <Card>
        <DataTable columns={[{key:'prov',label:t('col.proveedor')},{key:'total',label:t('col.total'),mono:true,align:'right'},{key:'iva',label:t('fac.det.iva'),mono:true,align:'right'},{key:'estado',label:t('col.estado')},{key:'acc',label:'',align:'right'}]}
          rows={[
            {prov:'Estacion de Servicio Central',total:fmt(33900),iva:fmt(3900),estado:<StatusPill state="warn">{t('st.porAceptar')}</StatusPill>,acc:<Button size="sm" variant="secondary">{t('st.aceptar')}</Button>},
            {prov:'Grupo ICE',total:fmt(26600),iva:fmt(3060),estado:<StatusPill state="warn">{t('st.porAceptar')}</StatusPill>,acc:<Button size="sm" variant="secondary">{t('st.aceptar')}</Button>}
          ]}/>
      </Card>
      <Note>{t('fac.notaRecibidos')}</Note>
    </>)}
  </>);
}

function FacturaDetalle({onBack}){
  const { t, fmt } = useUI();
  return (<>
    <ViewHeader title={t('fac.det.title')} lede={t('fac.det.lede')}
      actions={<><Button size="sm" variant="secondary" onClick={onBack}>{t('btn.volver')}</Button><Button size="sm" variant="primary">{t('fac.det.reenviar')}</Button></>}/>
    <div style={{display:'grid',gridTemplateColumns:'minmax(0,1.4fr) minmax(0,1fr)',gap:'var(--space-5)'}}>
      <Card>
        <DataTable columns={[{key:'det',label:t('col.detalle')},{key:'cabys',label:'CABYS',mono:true},{key:'cant',label:t('fac.det.cant'),mono:true,align:'right'},{key:'precio',label:t('fac.precio'),mono:true,align:'right'},{key:'iva',label:t('fac.det.iva'),mono:true,align:'right'},{key:'monto',label:t('col.monto'),mono:true,align:'right'}]}
          rows={[{det:'Consultoria de gestion de residuos',cabys:'8393100000600',cant:'1',precio:fmt(50000),iva:fmt(6500),monto:fmt(56500)}]}/>
        <div style={{padding:'var(--space-4)',borderTop:'1px solid var(--border-subtle)',display:'flex',flexDirection:'column',gap:'var(--space-2)',alignItems:'flex-end',font:'var(--type-small)'}}>
          <span style={{color:'var(--text-muted)'}}>{t('fac.det.subtotal')}{fmt(50000)}</span>
          <span style={{color:'var(--text-muted)'}}>{t('fac.det.ivaLinea')}{fmt(6500)}</span>
          <span style={{font:'var(--type-body)',fontWeight:'var(--weight-bold)',color:'var(--text-strong)'}}>Total: {fmt(56500)}</span>
        </div>
      </Card>
      <div style={{display:'flex',flexDirection:'column',gap:'var(--space-5)'}}>
        <Card padding="var(--space-6)">
          <h3 style={{font:'var(--type-h3)',marginBottom:'var(--space-3)'}}>{t('fac.det.estadoHacienda')}</h3>
          <StatusPill state="ok">{t('st.aceptado')}</StatusPill>
          <div style={{marginTop:'var(--space-4)',display:'flex',flexDirection:'column',gap:'var(--space-2)',font:'var(--type-small)'}}>
            <div style={{display:'flex',justifyContent:'space-between'}}><span style={{color:'var(--text-muted)'}}>{t('fac.det.clave')}</span><span style={{fontFamily:'var(--font-mono)',fontSize:'var(--text-2xs)'}}>5060 9082 6003 ... 3090988</span></div>
            <div style={{display:'flex',justifyContent:'space-between'}}><span style={{color:'var(--text-muted)'}}>{t('fac.consecutivo')}</span><span style={{fontFamily:'var(--font-mono)'}}>05001001010000000001</span></div>
            <div style={{display:'flex',justifyContent:'space-between'}}><span style={{color:'var(--text-muted)'}}>{t('fac.det.ambiente')}</span><Badge tone="neutral">sandbox</Badge></div>
          </div>
        </Card>
        <Card padding="var(--space-6)">
          <h3 style={{font:'var(--type-h3)',marginBottom:'var(--space-3)'}}>{t('fac.det.docs')}</h3>
          <div style={{display:'flex',flexDirection:'column',gap:'var(--space-2)'}}>
            <Button size="sm" variant="secondary" fullWidth>{t('fac.det.pdf')}</Button>
            <Button size="sm" variant="secondary" fullWidth>{t('fac.det.xml')}</Button>
            <Button size="sm" variant="secondary" fullWidth>{t('fac.det.xmlResp')}</Button>
          </div>
        </Card>
      </div>
    </div>
    <Note>{t('fac.det.nota')}</Note>
  </>);
}

/* INVENTARIO */
function Inventario(){
  const { t, fmt } = useUI();
  const [modo,setModo]=React.useState('pos');
  const [carrito,setCarrito]=React.useState([]);
  const productos=[['Aluminio (kg)',650],['PET (kg)',180],['Vidrio (kg)',40],['Compostera',18000]];
  const agregar=function(n,p){setCarrito(function(c){return c.concat([[n,p]]);});};
  const sub=carrito.reduce(function(a,x){return a+x[1];},0);
  return (<>
    <ViewHeader title={t('nav.inv')} lede={t('inv.lede')}
      actions={<Tabs tabs={[['pos',t('inv.tabPos')],['prod',t('inv.tabProd')]]} value={modo} onChange={setModo}/>}/>
    {modo==='pos'&&(<>
      <div style={{display:'grid',gridTemplateColumns:'minmax(0,1fr) 320px',gap:'var(--space-5)'}}>
        <Card padding="var(--space-6)">
          <h3 style={{font:'var(--type-h3)',marginBottom:'var(--space-4)'}}>{t('inv.venta')}</h3>
          <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fill,minmax(150px,1fr))',gap:'var(--space-3)'}}>
            {productos.map(function(p){return (<Button key={p[0]} variant="secondary" onClick={function(){agregar(p[0],p[1]);}}>{p[0]} - {fmt(p[1])}</Button>);})}
          </div>
        </Card>
        <Card padding="var(--space-6)">
          <h3 style={{font:'var(--type-h3)',marginBottom:'var(--space-3)'}}>{t('inv.carrito')}</h3>
          {carrito.length===0
            ? <p style={{font:'var(--type-small)',color:'var(--text-faint)'}}>{t('inv.vacio')}</p>
            : <div style={{display:'flex',flexDirection:'column',gap:'var(--space-1)',font:'var(--type-small)'}}>{carrito.map(function(x,i){return (<div key={i} style={{display:'flex',justifyContent:'space-between'}}><span>{x[0]}</span><span style={{fontFamily:'var(--font-mono)'}}>{fmt(x[1])}</span></div>);})}</div>}
          <div style={{marginTop:'var(--space-4)',paddingTop:'var(--space-3)',borderTop:'1px solid var(--border-subtle)'}}>
            <Stat size="sm" value={fmt(Math.round(sub*1.13))} label={t('inv.totalIva')} note={carrito.length+t('inv.articulos')}/>
          </div>
          <div style={{marginTop:'var(--space-4)'}}><Button variant="accent" fullWidth disabled={carrito.length===0}>{t('inv.cobrar')}</Button></div>
        </Card>
      </div>
      <Note>{t('inv.notaPos')}</Note>
    </>)}
    {modo==='prod'&&(<>
      <Card>
        <DataTable columns={[{key:'prod',label:t('inv.producto')},{key:'precio',label:t('fac.precio'),mono:true,align:'right'},{key:'iva',label:t('fac.det.iva'),align:'right'},{key:'stock',label:t('inv.existencias'),align:'right'},{key:'acc',label:t('inv.pedir')}]}
          rows={[
            {prod:'Aluminio (kg)',precio:fmt(650),iva:'13%',stock:<StatusPill state="ok">420</StatusPill>,acc:'-'},
            {prod:'Vidrio (kg)',precio:fmt(40),iva:'13%',stock:<StatusPill state="warn">{'85'+t('inv.bajo')}</StatusPill>,acc:<PedirBtn producto="Vidrio (kg)" proveedor="Recuperadora Nosara"/>},
            {prod:'Compostera',precio:fmt(18000),iva:'13%',stock:<StatusPill state="ok">12</StatusPill>,acc:'-'}
          ]}/>
      </Card>
      <Note>{t('inv.notaProd')}</Note>
    </>)}
  </>);
}

/* PLANILLA */
function Planilla(){
  const { t, fmt } = useUI();
  return (<>
    <ViewHeader title={t('nav.planilla')} lede={t('pla.lede')}
      actions={<Button size="sm" variant="primary">{t('pla.sicere')}</Button>}/>
    <Kpis items={[
      {value:fmt(1098149),label:t('pla.bruto'),note:t('pla.brutoNota')},
      {value:fmt(206966),label:t('pla.deduc'),note:t('pla.deducNota')},
      {value:fmt(891183),label:t('pla.neto'),note:t('pla.netoNota')},
      {value:fmt(1409195),label:t('pla.costo'),note:t('pla.costoNota'),tone:'ink'}
    ]}/>
    <Card>
      <DataTable columns={[{key:'emp',label:t('pla.empleado')},{key:'base',label:t('pla.base')},{key:'bruto',label:'Bruto',mono:true,align:'right'},{key:'ccss',label:'CCSS',mono:true,align:'right'},{key:'otros',label:t('pla.otros'),align:'right'},{key:'neto',label:t('pla.neto'),mono:true,align:'right'}]}
        rows={[
          {emp:'Sofia Ramirez',base:<Badge tone="outline">{t('pla.mensual')}</Badge>,bruto:fmt(237899),ccss:fmt(-25764),otros:'-',neto:fmt(212134)},
          {emp:'Andres Ruiz',base:<Badge tone="outline">{t('pla.porHora')}</Badge>,bruto:fmt(192000),ccss:fmt(-20794),otros:<StatusPill state="neutral">{t('pla.prestamo')}</StatusPill>,neto:fmt(151206)},
          {emp:'Operario recuperados',base:<Badge tone="outline">{t('pla.porProducto')}</Badge>,bruto:fmt(113820),ccss:fmt(-12327),otros:'-',neto:fmt(101493)},
          {emp:'Diego Nunez',base:<Badge tone="outline">{t('pla.quincenal')}</Badge>,bruto:fmt(190000),ccss:fmt(-20577),otros:<StatusPill state="warn">{t('pla.pension')}</StatusPill>,neto:fmt(109423)}
        ]}/>
    </Card>
    <Note>{t('pla.nota')}</Note>
  </>);
}

/* COBROS Y PAGOS */
function RecordarBtns({cliente,monto}){
  const msg=encodeURIComponent('Hola '+cliente+', le recordamos el saldo pendiente de '+monto+'. Gracias por su pago. - Beach Blend');
  return (<div style={{display:'flex',gap:6}}>
    <a href={'https://wa.me/?text='+msg} target="_blank" rel="noopener" style={{textDecoration:'none'}}><Button size="sm" variant="secondary">WhatsApp</Button></a>
    <a href={'mailto:?subject='+encodeURIComponent('Recordatorio de saldo')+'&body='+msg} style={{textDecoration:'none'}}><Button size="sm" variant="secondary">Email</Button></a>
  </div>);
}
function PedirBtn({producto,proveedor}){
  const msg=encodeURIComponent('Hola '+(proveedor||'proveedor')+', necesitamos reponer '+producto+'. Favor enviar cotizacion y disponibilidad. Gracias.');
  return (<a href={'https://wa.me/?text='+msg} target="_blank" rel="noopener" style={{textDecoration:'none'}}><Button size="sm" variant="accent">WhatsApp</Button></a>);
}
function CobrosPagos(){
  const { t, fmt } = useUI();
  const [tb,setTb]=React.useState('cxc');
  return (<>
    <ViewHeader title={t('nav.cobros')} lede={t('cxc.lede')}
      actions={<Tabs tabs={[['cxc',t('cxc.tabCobrar')],['cxp',t('cxc.tabPagar')]]} value={tb} onChange={setTb}/>}/>
    {tb==='cxc'&&(<>
      <Kpis items={[{value:fmt(920000),label:t('word.corriente'),note:t('cxc.alDia')},{value:fmt(540000),label:'1-30'+t('cxc.dias'),note:t('cxc.reciente')},{value:fmt(460000),label:'31-60'+t('cxc.dias'),note:t('cxc.atencion')},{value:fmt(560000),label:'+60'+t('cxc.dias'),note:t('cxc.gestion'),tone:'ink'}]}/>
      <Card>
        <DataTable columns={[{key:'cli',label:t('col.cliente')},{key:'total',label:t('col.total'),mono:true,align:'right'},{key:'cor',label:t('word.corriente'),mono:true,align:'right'},{key:'a',label:'1-30',mono:true,align:'right'},{key:'b',label:'31-60',mono:true,align:'right'},{key:'d',label:'+60',mono:true,align:'right'},{key:'acc',label:t('cxc.recordar')}]}
          rows={[
            {cli:'Hotel Vista Verde',total:fmt(780000),cor:fmt(320000),a:fmt(460000),b:'-',d:'-',acc:<RecordarBtns cliente="Hotel Vista Verde" monto={fmt(780000)}/>},
            {cli:'Hospedaje Las Olas',total:fmt(1140000),cor:fmt(600000),a:'-',b:fmt(460000),d:fmt(80000),acc:<RecordarBtns cliente="Hospedaje Las Olas" monto={fmt(1140000)}/>},
            {cli:'Municipalidad',total:fmt(560000),cor:'-',a:fmt(80000),b:'-',d:fmt(480000),acc:<RecordarBtns cliente="Municipalidad" monto={fmt(560000)}/>}
          ]}/>
      </Card>
      <Note>{t('cxc.notaCobrar')}</Note>
    </>)}
    {tb==='cxp'&&(<>
      <Kpis items={[{value:fmt(402521),label:t('word.corriente'),note:t('cxc.venceMes')},{value:fmt(60500),label:'1-30'+t('cxc.dias'),note:t('cxc.proximas')},{value:fmt(0),label:'31-60'+t('cxc.dias'),note:t('cxc.sinSaldo')},{value:fmt(0),label:'+60'+t('cxc.dias'),note:t('cxc.sinSaldo')}]}/>
      <Card>
        <DataTable columns={[{key:'prov',label:t('col.proveedor')},{key:'total',label:t('col.total'),mono:true,align:'right'},{key:'cor',label:t('word.corriente'),mono:true,align:'right'},{key:'a',label:'1-30',mono:true,align:'right'},{key:'vence',label:t('word.vence')}]}
          rows={[
            {prov:'CCSS',total:fmt(402521),cor:fmt(402521),a:'-',vence:<StatusPill state="warn">5 feb</StatusPill>},
            {prov:'Estacion de Servicio Central',total:fmt(33900),cor:'-',a:fmt(33900),vence:'20 feb'},
            {prov:'Grupo ICE',total:fmt(26600),cor:'-',a:fmt(26600),vence:'22 feb'}
          ]}/>
      </Card>
      <Note>{t('cxc.notaPagar')}</Note>
    </>)}
  </>);
}

/* ACTIVOS FIJOS */
function ActivosFijos(){
  const { t, fmt } = useUI();
  return (<>
    <ViewHeader title={t('nav.activos')} lede={t('act.lede')} actions={<Button size="sm" variant="accent">{t('act.alta')}</Button>}/>
    <Kpis items={[{value:fmt(65370000),label:t('act.costoTotal'),note:t('act.costoNota')},{value:fmt(31304000),label:t('act.depAcum'),note:t('act.depNota')},{value:fmt(34066000),label:t('act.neto'),note:t('act.netoNota'),tone:'ink'}]} cols={3}/>
    <Card>
      <DataTable columns={[{key:'act',label:t('act.activo')},{key:'adq',label:t('act.adq'),mono:true},{key:'costo',label:t('act.costo'),mono:true,align:'right'},{key:'vida',label:t('act.vida')},{key:'dep',label:t('act.depAcumCol'),mono:true,align:'right'},{key:'neto',label:t('act.netoCol'),mono:true,align:'right'}]}
        rows={[
          {act:'Camion recolector Hino',adq:'03/2021',costo:fmt(42000000),vida:'10'+t('act.anios'),dep:fmt(-20300000),neto:fmt(21700000)},
          {act:'Contenedores y prensa',adq:'06/2022',costo:fmt(15870000),vida:'7'+t('act.anios'),dep:fmt(-8320000),neto:fmt(7550000)},
          {act:'Mobiliario y equipo',adq:'01/2019',costo:fmt(7500000),vida:'5'+t('act.anios'),dep:fmt(-2684000),neto:fmt(4816000)}
        ]}/>
    </Card>
    <Note>{t('act.nota')}</Note>
  </>);
}

/* CONCILIACION */
function Conciliacion(){
  const { t, fmt } = useUI();
  return (<>
    <ViewHeader title={t('nav.concil')} lede={t('con.lede')}/>
    <Kpis items={[
      {value:fmt(9798647),label:t('con.saldoBanco'),note:t('con.saldoBancoNota')},
      {value:fmt(9798647),label:t('con.saldoLibros'),note:t('con.saldoLibrosNota')},
      {value:'18 / 18',label:t('con.partidas'),note:t('con.partidasNota')},
      {value:fmt(0),label:t('con.dif'),note:t('con.difNota'),tone:'ink'}
    ]}/>
    <Card>
      <DataTable columns={[{key:'fecha',label:t('col.fecha'),mono:true},{key:'con',label:t('con.concepto')},{key:'banco',label:t('con.banco'),mono:true,align:'right'},{key:'libros',label:t('con.libros'),mono:true,align:'right'},{key:'estado',label:t('col.estado')}]}
        rows={[
          {fecha:'05/05',con:'ND CC CCSS',banco:fmt(-1069555),libros:fmt(-1069555),estado:<StatusPill state="ok">{t('st.conciliado')}</StatusPill>},
          {fecha:'09/05',con:'PIN SINPE Servicios M.',banco:fmt(193000),libros:fmt(193000),estado:<StatusPill state="ok">{t('st.conciliado')}</StatusPill>},
          {fecha:'31/05',con:t('con.chequeGirado'),banco:'-',libros:fmt(-84000),estado:<StatusPill state="warn">{t('st.transito')}</StatusPill>}
        ]}/>
    </Card>
    <Note>{t('con.nota')}</Note>
  </>);
}

/* REPORTES */
function Reportes(){
  const { t, fmt } = useUI();
  const [tb,setTb]=React.useState('mayor');
  return (<>
    <ViewHeader title={t('nav.reportes')} lede={t('rep.lede')}/>
    <Tabs tabs={[['mayor',t('rep.tabMayor')],['antiguedad',t('rep.tabAntiguedad')],['costos',t('rep.tabCostos')],['ratios',t('rep.tabRatios')],['ppto',t('rep.tabPpto')],['flujo',t('rep.tabFlujo')]]} value={tb} onChange={setTb}/>
    {tb==='mayor'&&(<>
      <Card padding="var(--space-6)" style={{marginBottom:'var(--space-4)'}}>
        <div style={{display:'flex',gap:'var(--space-4)',flexWrap:'wrap'}}>
          <Stat size="sm" value="1-01-01 Bancos" label={t('rep.tabMayor')} note={'Naturaleza deudora'}/>
          <Stat size="sm" value={fmt(50000)} label={t('rep.saldoIni')}/>
          <Stat size="sm" value={fmt(120000)} label={t('rep.saldoFinC')}/>
        </div>
      </Card>
      <Card>
        <DataTable columns={[{key:'f',label:t('col.fecha'),mono:true},{key:'d',label:t('con.concepto')},{key:'debe',label:t('rep.debe'),mono:true,align:'right'},{key:'haber',label:t('rep.haber'),mono:true,align:'right'},{key:'saldo',label:t('rep.saldoC'),mono:true,align:'right'}]}
          rows={[
            {f:'05/01',d:'Deposito ventas',debe:fmt(100000),haber:'-',saldo:fmt(150000)},
            {f:'10/01',d:'Pago proveedor FRUTAS',debe:'-',haber:fmt(30000),saldo:fmt(120000)}
          ]}/>
      </Card>
      <Note>{t('rep.notaMayor')}</Note>
    </>)}
    {tb==='antiguedad'&&(<>
      <ImpExpBar nombre="antiguedad_cxc.csv" encabezados={['Cliente','Corriente','31-60','61-90','90+','Total']} filas={[['Hotel Vista Verde',320000,460000,0,0,780000],['Hospedaje Las Olas',600000,0,460000,80000,1140000],['Municipalidad',0,0,0,560000,560000]]}/>
      <Card>
        <DataTable columns={[{key:'cli',label:t('rep.entidad')},{key:'cor',label:t('word.corriente'),mono:true,align:'right'},{key:'a',label:'31-60',mono:true,align:'right'},{key:'b',label:'61-90',mono:true,align:'right'},{key:'c',label:'90+',mono:true,align:'right'},{key:'tot',label:t('col.total'),mono:true,align:'right'}]}
          rows={[
            {cli:'Hospedaje Las Olas',cor:fmt(600000),a:'-',b:fmt(460000),c:fmt(80000),tot:fmt(1140000)},
            {cli:'Hotel Vista Verde',cor:fmt(320000),a:fmt(460000),b:'-',c:'-',tot:fmt(780000)},
            {cli:'Municipalidad',cor:'-',a:'-',b:'-',c:<StatusPill state="late">{fmt(560000)}</StatusPill>,tot:fmt(560000)}
          ]}/>
      </Card>
      <Note>{t('rep.notaAntiguedad')}</Note>
    </>)}
    {tb==='ratios'&&(<>
      <Kpis items={[
        {value:'1,8',label:t('rep.liquidez'),note:t('rep.sector')+'1,5'},
        {value:'42%',label:t('rep.endeud'),note:t('rep.sector')+'55%'},
        {value:'9,0%',label:t('rep.margenNeto'),note:t('rep.sector')+'6%'},
        {value:'11%',label:t('rep.roa'),note:t('rep.sector')+'8%'}
      ]}/>
      <Card>
        <DataTable columns={[{key:'ind',label:t('rep.indicador')},{key:'emp',label:t('rep.tuEmpresa'),mono:true,align:'right'},{key:'sec',label:t('rep.sectorCol'),mono:true,align:'right'},{key:'lec',label:t('rep.lectura')}]}
          rows={[
            {ind:t('rep.rotacion'),emp:'42'+t('cxc.dias'),sec:'55'+t('cxc.dias'),lec:<StatusPill state="ok">{t('st.mejor')}</StatusPill>},
            {ind:t('rep.margenBruto'),emp:'38%',sec:'30%',lec:<StatusPill state="ok">{t('st.mejor')}</StatusPill>},
            {ind:t('rep.planillaIng'),emp:'61%',sec:'54%',lec:<StatusPill state="warn">{t('st.aVigilar')}</StatusPill>}
          ]}/>
      </Card>
      <Note>{t('rep.notaRatios')}</Note>
    </>)}
    {tb==='costos'&&(<>
      <Card>
        <DataTable columns={[{key:'cc',label:t('rep.centro')},{key:'ing',label:t('rep.ingresos'),mono:true,align:'right'},{key:'gas',label:t('rep.gastos'),mono:true,align:'right'},{key:'uti',label:t('rep.utilidad'),mono:true,align:'right'},{key:'mar',label:t('rep.margen'),align:'right'}]}
          rows={[
            {cc:t('rep.rutaHoteles'),ing:fmt(3180000),gas:fmt(-1910000),uti:fmt(1270000),mar:'40%'},
            {cc:t('rep.ventaMat'),ing:fmt(1240000),gas:fmt(-690000),uti:fmt(550000),mar:'44%'},
            {cc:t('rep.compostera'),ing:fmt(420000),gas:fmt(-360000),uti:fmt(60000),mar:<StatusPill state="warn">14%</StatusPill>}
          ]}/>
      </Card>
      <Note>{t('rep.notaCostos')}</Note>
    </>)}
    {tb==='ppto'&&(<>
      <Card>
        <DataTable columns={[{key:'rub',label:t('rep.rubro')},{key:'pre',label:t('rep.presupuesto'),mono:true,align:'right'},{key:'real',label:t('rep.real'),mono:true,align:'right'},{key:'var',label:t('rep.variacion'),align:'right'},{key:'est',label:''}]}
          rows={[
            {rub:t('rep.ingresos'),pre:fmt(4500000),real:fmt(4840000),var:'+7,6%',est:<StatusPill state="ok">{t('st.sobreMeta')}</StatusPill>},
            {rub:t('rep.dieselFlota'),pre:fmt(520000),real:fmt(611000),var:'+17,5%',est:<StatusPill state="warn">{t('st.excede')}</StatusPill>},
            {rub:t('nav.planilla'),pre:fmt(2800000),real:fmt(2750000),var:'-1,8%',est:<StatusPill state="ok">{t('st.enLinea')}</StatusPill>}
          ]}/>
      </Card>
      <Note>{t('rep.notaPpto')}</Note>
    </>)}
    {tb==='flujo'&&(<>
      <Kpis items={[{value:fmt(2480000),label:t('rep.cajaHoy'),note:t('rep.cajaHoyNota')},{value:fmt(310000),label:t('rep.proyMin'),note:t('rep.proyMinNota')},{value:fmt(6900000),label:t('rep.proy12'),note:t('rep.proy12Nota'),tone:'ink'}]} cols={3}/>
      <Card style={{marginBottom:'var(--space-4)'}}>
        <DataTable columns={[{key:'mes',label:t('rep.mes')},{key:'ent',label:t('rep.entradas'),mono:true,align:'right'},{key:'sal',label:t('rep.salidas'),mono:true,align:'right'},{key:'saldo',label:t('rep.saldoProy'),mono:true,align:'right'}]}
          rows={[
            {mes:t('rep.febrero'),ent:fmt(4900000),sal:fmt(-4600000),saldo:fmt(2780000)},
            {mes:t('rep.marzo'),ent:fmt(3200000),sal:fmt(-5670000),saldo:<StatusPill state="warn">{fmt(310000)}</StatusPill>},
            {mes:t('rep.abril'),ent:fmt(4700000),sal:fmt(-4500000),saldo:fmt(510000)}
          ]}/>
      </Card>
      <Callout tone="ink" label={t('rep.alertaLabel')}>{t('rep.alertaText')}</Callout>
    </>)}
  </>);
}

/* ESTADOS FINANCIEROS */
function Estados(){
  const { t, fmt, cur } = useUI();
  const [firma,setFirma]=React.useState(false);
  const cols=[{key:'cuenta',label:t('eeff.cuenta')}].concat(firma?[]:[{key:'nota',label:t('eeff.nota'),align:'center'}]).concat([{key:'y25',label:'2025',mono:true,align:'right'},{key:'y24',label:'2024',mono:true,align:'right'}]);
  const row=function(cuenta,nota,y25,y24){const r={cuenta:cuenta,y25:y25,y24:y24};if(!firma)r.nota=nota?<Badge tone="accent">{nota}</Badge>:'';return r;};
  return (<>
    <ViewHeader title={t('nav.eeff')} lede={t('eeff.lede')}
      actions={<><Button size="sm" variant="secondary" onClick={function(){setFirma(!firma);}}>{firma?t('eeff.verNotas'):t('eeff.modoFirma')}</Button><Button size="sm" variant="primary">{t('eeff.exportar')}</Button></>}/>
    <Card padding="var(--space-6)" style={{maxWidth:820}}>
      <h3 style={{font:'var(--type-h3)',textAlign:'center'}}>{t('eeff.tituloSF')}</h3>
      <p style={{font:'var(--type-small)',color:'var(--text-muted)',textAlign:'center',marginTop:'var(--space-1)'}}>{t('eeff.fecha')}{cur==='USD'?t('eeff.dolares'):t('eeff.colones')}</p>
      <div style={{marginTop:'var(--space-4)'}}>
        <DataTable columns={cols} rows={[
          row(t('eeff.efectivo'),'3',fmt(14597762),fmt(9812440)),
          row(t('eeff.inversiones'),'4',fmt(256558777),fmt(241030115)),
          row(t('eeff.ppe'),'5',fmt(34065890),fmt(35980112)),
          row(t('eeff.totalActivo'),'',fmt(305222429),fmt(286822667)),
          row(t('eeff.cxp'),'6',fmt(1284560),fmt(1010980)),
          row(t('eeff.patrimonio'),'7',fmt(303937869),fmt(285811687)),
          row(t('eeff.totalPasPat'),'',fmt(305222429),fmt(286822667))
        ]}/>
      </div>
      <div style={{display:'flex',gap:'var(--space-8)',justifyContent:'center',marginTop:'var(--space-8)'}}>
        <div style={{textAlign:'center'}}><div style={{borderTop:'1px solid var(--text-body)',paddingTop:'var(--space-2)',font:'var(--type-small)'}}>{t('eeff.repLegal')}</div></div>
        <div style={{textAlign:'center'}}><div style={{borderTop:'1px solid var(--text-body)',paddingTop:'var(--space-2)',font:'var(--type-small)'}}>Emmanuel Gutierrez Pizarro</div><div style={{font:'var(--type-2xs)',color:'var(--text-faint)'}}>{t('eeff.cpiLinea')}</div></div>
      </div>
    </Card>
    <Note>{t('eeff.notaFinal')}</Note>
  </>);
}

/* IMPUESTOS */
function Impuestos(){
  const { t, fmt } = useUI();
  return (<>
    <ViewHeader title={t('nav.impuestos')} lede={t('imp.lede')}/>
    <Kpis items={[
      {value:'150',label:t('imp.proxVenc'),note:t('imp.proxNota')},
      {value:fmt(222260),label:t('imp.aPagar'),note:t('imp.aPagarNota')},
      {value:'5',label:t('imp.formularios'),note:t('imp.formulariosNota'),tone:'ink'}
    ]} cols={3}/>
    <Card>
      <DataTable columns={[{key:'form',label:t('imp.formulario')},{key:'antes',label:t('imp.antes'),mono:true},{key:'estado',label:t('col.estado')},{key:'pagar',label:t('imp.aPagarBorrador'),mono:true,align:'right'},{key:'vence',label:t('word.vence')}]}
        rows={[
          {form:t('imp.f150'),antes:'D-104',estado:<StatusPill state="ok">{t('st.borrador')}</StatusPill>,pagar:fmt(222260),vence:<StatusPill state="warn">15 feb</StatusPill>},
          {form:t('imp.f131'),antes:'D-103',estado:<StatusPill state="ok">{t('st.borrador')}</StatusPill>,pagar:fmt(0),vence:<StatusPill state="warn">15 feb</StatusPill>},
          {form:t('imp.f270'),antes:'D-151',estado:<StatusPill state="ok">{t('st.borrador')}</StatusPill>,pagar:'-',vence:t('imp.porConfirmar')},
          {form:t('imp.f102'),antes:'D-101',estado:<StatusPill>{t('st.preparacion')}</StatusPill>,pagar:t('imp.estimado')+fmt(0),vence:'15 mar'}
        ]}/>
    </Card>
    <Card style={{ marginTop: 'var(--space-4)' }}><div style={{ padding: 'var(--space-5) var(--space-6)' }}>
      <h3 style={{ font: 'var(--type-h3)', marginBottom: 'var(--space-3)' }}>{t('iva.f150')}</h3>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-2)', font: 'var(--type-small)' }}>
        {[[t('iva.debito'), 0, false], [t('iva.credito'), -140003, false], [t('iva.saldoFavor'), 140003, true], [t('iva.aPagar'), 0, false]].map(function(r, i){
          return (<div key={i} style={{ display: 'flex', justifyContent: 'space-between', fontWeight: r[2] ? 700 : 400, color: r[2] ? 'var(--text-strong)' : 'var(--text-body)' }}><span style={{ color: r[2] ? 'var(--text-strong)' : 'var(--text-muted)' }}>{r[0]}</span><span style={{ fontFamily: 'var(--font-mono)' }}>{fmt(r[1])}</span></div>);
        })}
      </div>
    </div></Card>
    <Callout tone="ink" label="TRIBU-CR.">{t('iva.notaSaldo')}</Callout>
    <Note>{t('imp.nota')}</Note>
  </>);
}

/* BANDEJA DEL CPI */
function BandejaCPI(){
  const { t } = useUI();
  return (<>
    <ViewHeader title={t('nav.cpi')} lede={t('cpi.lede')} actions={<Badge tone="accent">Emmanuel Gutierrez - CPI 33127</Badge>}/>
    <Kpis items={[
      {value:'14',label:t('cpi.clientes'),note:t('cpi.clientesNota')},
      {value:'6',label:t('cpi.pendientes'),note:t('cpi.pendientesNota')},
      {value:'3',label:t('cpi.vencen'),note:t('cpi.vencenNota')},
      {value:'9',label:t('cpi.aprobadas'),note:t('cpi.aprobadasNota'),tone:'ink'}
    ]}/>
    <Card>
      <DataTable columns={[{key:'cli',label:t('col.cliente')},{key:'tarea',label:t('cpi.tarea')},{key:'tipo',label:t('cpi.tipo')},{key:'vence',label:t('word.vence')},{key:'acc',label:'',align:'right'}]}
        rows={[
          {cli:'Verde Ciclico S.A.',tarea:t('cpi.t1'),tipo:<Badge tone="outline">{t('cpi.tipoDecl')}</Badge>,vence:<StatusPill state="warn">15 feb</StatusPill>,acc:<Button size="sm" variant="secondary">{t('st.revisar')}</Button>},
          {cli:'Panaderia La Espiga',tarea:t('cpi.t2'),tipo:<Badge tone="outline">{t('cpi.tipoEstados')}</Badge>,vence:<StatusPill state="late">{t('cpi.manana')}</StatusPill>,acc:<Button size="sm" variant="secondary">{t('st.revisar')}</Button>},
          {cli:'Taller Mecanico Rodriguez',tarea:t('cpi.t3'),tipo:<Badge tone="outline">{t('cpi.tipoMov')}</Badge>,vence:'18 feb',acc:<Button size="sm" variant="secondary">{t('st.revisar')}</Button>}
        ]}/>
    </Card>
    <Note>{t('cpi.nota')}</Note>
  </>);
}

/* ONBOARDING: solo la cedula -> perfil de Hacienda + obligaciones + calendario */
function cronoVencimiento(vence, t){
  var hoy = new Date(); hoy.setHours(0,0,0,0);
  var d = new Date(vence + "T00:00:00");
  var dias = Math.round((d - hoy) / 86400000);
  var label, state;
  if (dias < 0)      { label = t('onb.vencido') + " " + (-dias) + " " + t('onb.dias'); state = "late"; }
  else if (dias === 0){ label = t('onb.hoy'); state = "late"; }
  else if (dias <= 7) { label = dias + " " + t('onb.dias'); state = "late"; }
  else if (dias <= 30){ label = dias + " " + t('onb.dias'); state = "warn"; }
  else                { label = dias + " " + t('onb.dias'); state = "ok"; }
  return React.createElement(StatusPill, { state: state }, label);
}
function Onboarding(){
  const { t } = useUI();
  const [ok, setOk] = React.useState(true); // demo: ya consultado
  const perfil = [["", "HEIDI CORDERO CASTILLO"], [t('onb.regimen'), "Regimen general"], [t('onb.actividad'), "5610 Restaurantes y servicios de comidas"]];
  const obligaciones = [
    { form: "150", nombre: "IVA", per: t('onb.mensual'), vence: "2026-08-15", faltan: cronoVencimiento("2026-08-15", t) },
    { form: "101", nombre: t('imp.f102').replace('102','101').replace('D-101',''), per: t('onb.anual'), vence: "2027-03-15", faltan: cronoVencimiento("2027-03-15", t) },
  ];
  return (<>
    <ViewHeader title={t('nav.onboarding')} lede={t('onb.lede')}/>
    <Card padding="var(--space-6)" style={{ marginBottom: 'var(--space-5)' }}>
      <div style={{ display: 'flex', gap: 'var(--space-3)', alignItems: 'flex-end', flexWrap: 'wrap' }}>
        <div style={{ flex: '1 1 240px' }}><Input label={t('onb.cedula')} defaultValue="7-0196-0815" /></div>
        <Button variant="accent" onClick={function(){ setOk(true); }}>{t('onb.consultar')}</Button>
      </div>
    </Card>
    {ok && (<>
      <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1fr) minmax(0,1.4fr)', gap: 'var(--space-5)' }}>
        <Card padding="var(--space-6)">
          <h3 style={{ font: 'var(--type-h3)', marginBottom: 'var(--space-4)' }}>{t('onb.perfil')}</h3>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-3)', font: 'var(--type-small)' }}>
            {perfil.map(function(p, i){ return (<div key={i} style={{ display: 'flex', justifyContent: 'space-between', gap: 8 }}><span style={{ color: 'var(--text-muted)' }}>{p[0]}</span><span style={{ fontWeight: p[0] ? 400 : 700, color: 'var(--text-strong)' }}>{p[1]}</span></div>); })}
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}><span style={{ color: 'var(--text-muted)' }}>{t('onb.estado')}</span><StatusPill state="warn">{t('onb.moroso')}</StatusPill></div>
          </div>
        </Card>
        <Card>
          <div style={{ padding: 'var(--space-5) var(--space-6) 0' }}><h3 style={{ font: 'var(--type-h3)' }}>{t('onb.obligaciones')}</h3></div>
          <DataTable columns={[{ key: 'form', label: t('onb.form'), mono: true }, { key: 'nombre', label: '' }, { key: 'per', label: t('onb.periodicidad') }, { key: 'vence', label: t('onb.proximo'), mono: true }, { key: 'faltan', label: t('onb.faltan') }]}
            rows={obligaciones} />
        </Card>
      </div>
      <Note>{t('onb.nota')}</Note>
    </>)}
  </>);
}

/* SERVICIOS CPI / CPA */
function Servicios(){
  const { t } = useUI();
  const cpi=['srv.consultas','srv.arrancar','srv.actualizacion','srv.emisionEEFF','srv.asesoria','srv.cierre'];
  const cpa=['srv.certificaciones','srv.auditoria','srv.controlInterno','srv.otros'];
  const card=function(k){return (
    <Card key={k} padding="var(--space-5)" style={{display:'flex',alignItems:'center',justifyContent:'space-between',gap:'var(--space-3)'}}>
      <span style={{font:'var(--type-body)',fontWeight:'var(--weight-bold)'}}>{t(k)}</span>
      <Button size="sm" variant="secondary">{t('srv.solicitar')}</Button>
    </Card>); };
  return (<>
    <ViewHeader title={t('nav.servicios')} lede={t('srv.lede')}/>
    <h3 style={{font:'var(--type-h3)',margin:'0 0 var(--space-3)'}}>{t('srv.grupoCpi')}</h3>
    <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fill,minmax(250px,1fr))',gap:'var(--space-3)',marginBottom:'var(--space-6)'}}>{cpi.map(card)}</div>
    <h3 style={{font:'var(--type-h3)',margin:'0 0 var(--space-3)'}}>{t('srv.grupoCpa')}</h3>
    <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fill,minmax(250px,1fr))',gap:'var(--space-3)'}}>{cpa.map(card)}</div>
    <Note>{t('srv.nota')}</Note>
  </>);
}

/* CONFIGURACION (ampliada) */
function CfgCard({titulo,texto,children}){
  return (<Card padding="var(--space-6)"><h3 style={{font:'var(--type-h3)',marginBottom:'var(--space-3)'}}>{titulo}</h3>
    <p style={{font:'var(--type-small)',color:'var(--text-muted)',margin:0}}>{texto}</p>{children}</Card>);
}
function Configuracion(){
  const { t } = useUI();
  const [tipo,setTipo]=React.useState('pyme');
  const perfiles={ pyme:['cfg.pymeP1','cfg.pymeP2','cfg.pymeP3'], ong:['cfg.ongP1','cfg.ongP2','cfg.ongP3'], asada:['cfg.asadaP1','cfg.asadaP2','cfg.asadaP3'] };
  const roles=['rol.facturador','rol.contador','rol.admin','rol.dueno','rol.auditor'];
  const mt={marginTop:'var(--space-4)'};
  return (<>
    <ViewHeader title={t('nav.config')} lede={t('cfg.lede')}/>
    <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fill,minmax(300px,1fr))',gap:'var(--space-5)'}}>
      <CfgCard titulo={t('cfg.tipoOrg')} texto="">
        <Select label={t('cfg.perfil')} value={tipo} onChange={function(e){setTipo(e.target.value);}}
          options={[{value:'pyme',label:t('cfg.orgPyme')},{value:'ong',label:t('cfg.orgOng')},{value:'asada',label:t('cfg.orgAsada')}]}/>
        <div style={{marginTop:'var(--space-4)',display:'flex',gap:'var(--space-2)',flexWrap:'wrap'}}>
          {(perfiles[tipo]||[]).map(function(k){return (<Badge key={k} tone="outline">{t(k)}</Badge>);})}
        </div>
      </CfgCard>
      <CfgCard titulo={t('cfg.datosCliente')} texto={t('cfg.datosClienteText')}/>
      <CfgCard titulo={t('cfg.docs')} texto={t('cfg.docsText')}><div style={mt}><Button size="sm" variant="secondary">{t('cfg.subir')}</Button></div></CfgCard>
      <CfgCard titulo={t('cfg.calendario')} texto={t('cfg.calendarioText')}/>
      <CfgCard titulo={t('cfg.catalogo')} texto={t('cfg.catalogoText')}><div style={mt}><Button size="sm" variant="secondary">{t('cfg.catalogoBtn')}</Button></div></CfgCard>
      <CfgCard titulo={t('cfg.importar')} texto={t('cfg.importarText')}><div style={mt}><Button size="sm" variant="secondary">{t('cfg.importarBtn')}</Button></div></CfgCard>
      <CfgCard titulo={t('cfg.roles')} texto={t('cfg.rolesText')}>
        <div style={{marginTop:'var(--space-4)',display:'flex',gap:'var(--space-2)',flexWrap:'wrap'}}>{roles.map(function(k){return (<Badge key={k} tone="neutral">{t(k)}</Badge>);})}</div>
      </CfgCard>
      <CfgCard titulo={t('cfg.moneda')} texto={t('cfg.monedaText')}/>
      <CfgCard titulo={t('cfg.datos')} texto={t('cfg.datosText')}><div style={mt}><Button size="sm" variant="secondary">{t('cfg.exportar')}</Button></div></CfgCard>
    </div>
    <Note>{t('cfg.nota')}</Note>
  </>);
}

/* EMITIR FACTURA ELECTRONICA (formulario real -> /api/facturas) */
const EMI_CLIENTES=[
  {nombre:'GRUPO SUPERMERCADO NOSARA LIMITADA',tipoIdentificacion:'02',numeroIdentificacion:'3102852678',correoElectronico:'facturacion@supernosara.com'},
  {nombre:'MULTISERVICIOS BADILLA (Luis Badilla)',tipoIdentificacion:'01',numeroIdentificacion:'701770968',correoElectronico:'facturasmultiserviciosbadilla@gmail.com'},
  {nombre:'RENT NOSARA S.R.L.',tipoIdentificacion:'02',numeroIdentificacion:'3102682285',correoElectronico:'rentnosarafacturas@gmail.com'},
];
function inputStyle(){ return {width:'100%',padding:'8px 10px',border:'1px solid var(--border-default)',borderRadius:'var(--radius-sm)',font:'var(--type-small)',fontFamily:'var(--font-sans)'}; }
function EmitirFactura(){
  const { t, fmt } = useUI();
  const [ci,setCi]=React.useState(0);
  const rec=EMI_CLIENTES[ci];
  const [lineas,setLineas]=React.useState([{detalle:'',codigoCabys:'',cantidad:'1',precioUnitario:''}]);
  const [noSujeto,setNoSujeto]=React.useState(true);
  const [cc,setCc]=React.useState('klovato@jpasesorescr.com');
  const [prod,setProd]=React.useState(false); // false=sandbox, true=produccion
  const [estado,setEstado]=React.useState(null); // null | 'emitiendo' | {clave,...} | {error}
  const [leyendo,setLeyendo]=React.useState(false);
  const [adv,setAdv]=React.useState([]);
  const fotoRef=React.useRef(null);
  const [geminiKey,setGeminiKey]=React.useState(function(){ try{return localStorage.getItem('gemini_key')||'';}catch(e){return '';} });
  function guardarKey(v){ setGeminiKey(v); try{ localStorage.setItem('gemini_key',v); }catch(e){} }
  const [nvidiaKey,setNvidiaKey]=React.useState(function(){ try{return localStorage.getItem('nvidia_key')||'';}catch(e){return '';} });
  function guardarNvidia(v){ setNvidiaKey(v); try{ localStorage.setItem('nvidia_key',v); }catch(e){} }
  var CABYS_HINT="3899799010100=accesorios de cabello y bisuteria (colas, lazos, vinchas, pinzas, aretes); 2820799010100=vinchas para el cabello; 2791101019900=cintas y lazos de tela; 4299701019900=agujas y set de costura; 2635000009900=hilo de coser; 4291502000000=cortaunas y manicura; 3215301009900=carton; 3899901990100=velas; 2820404009900=ropa (tops, blusas); 2932003990000=calzado; 3856000009900=juguetes; 3532301009900=maquillaje; 3694000990600=plastico domestico";
  function promptFoto(){ return "Sos un asistente contable de Costa Rica. La imagen es una boleta MANUSCRITA de un bazar. Extrae CADA linea con cantidad, descripcion del articulo y precio unitario. IMPORTANTE: la persona suele multiplicar mal el valor total; confia en la CANTIDAD y el PRECIO UNITARIO, el valor lo calcula el sistema, NO copies el total escrito. Mapea cada articulo a un codigo CABYS de 13 digitos usando esta guia (si no hay uno claro, elegi el mas parecido y marca confianza baja): "+CABYS_HINT+". Devolve SOLO JSON valido, sin texto extra: {\"lineas\":[{\"detalle\":\"\",\"codigoCabys\":\"\",\"cantidad\":0,\"precioUnitario\":0,\"confianza\":\"alta|media|baja\"}],\"advertencias\":[]}"; }
  function parseJSON(txt){ var i=txt.indexOf('{'),j=txt.lastIndexOf('}'); return JSON.parse(txt.slice(i,j+1)); }
  function llamarGemini(b64,mt,modelo){
    return fetch('https://generativelanguage.googleapis.com/v1beta/models/'+modelo+':generateContent?key='+encodeURIComponent(geminiKey),
      {method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({contents:[{parts:[{inline_data:{mime_type:mt,data:b64}},{text:promptFoto()}]}]})})
      .then(function(res){ return res.json(); })
      .then(function(d){ if(d.error) throw new Error(d.error.message||('Gemini '+(d.error.code||''))); var parts=(((d.candidates||[])[0]||{}).content||{}).parts||[]; return parseJSON(parts[0]?parts[0].text:''); });
  }
  function llamarNvidia(b64,mt){
    return fetch('https://integrate.api.nvidia.com/v1/chat/completions',{method:'POST',headers:{'Authorization':'Bearer '+nvidiaKey,'Content-Type':'application/json','Accept':'application/json'},
      body:JSON.stringify({model:'meta/llama-3.2-90b-vision-instruct',max_tokens:4096,messages:[{role:'user',content:[{type:'text',text:promptFoto()},{type:'image_url',image_url:{url:'data:'+mt+';base64,'+b64}}]}]})})
      .then(function(res){ return res.json(); })
      .then(function(d){ if(d.error||d.detail) throw new Error((d.error&&d.error.message)||d.detail||'NVIDIA error'); var c=(((d.choices||[])[0]||{}).message||{}).content||''; return parseJSON(c); });
  }
  function geminiConReintentos(b64,mt){
    var modelos=['gemini-2.5-flash','gemini-2.0-flash','gemini-flash-latest']; var intento=0;
    function paso(){ var modelo=modelos[Math.min(intento,modelos.length-1)];
      return llamarGemini(b64,mt,modelo).catch(function(e){ var msg=(e&&(e.message||''))+'';
        var transitorio=/high demand|overload|unavailable|503|500|resource_exhausted|try again|temporarily/i.test(msg);
        intento++;
        if(transitorio && intento<4){ setAdv(['Gemini ocupado, reintentando ('+intento+')...']); return new Promise(function(r){ setTimeout(r,900*intento); }).then(paso); }
        throw e; }); }
    return paso();
  }
  function conReintentos(b64,mt){
    if(geminiKey && nvidiaKey) return geminiConReintentos(b64,mt).catch(function(e){ setAdv(['Gemini no pudo ('+(e.message||e)+'), probando con NVIDIA...']); return llamarNvidia(b64,mt); });
    if(geminiKey) return geminiConReintentos(b64,mt);
    if(nvidiaKey) return llamarNvidia(b64,mt);
    return Promise.reject(new Error('sin key de IA'));
  }
  function procesarBorrador(obj){
    var lin=(obj.lineas||[]).filter(function(l){ return l.detalle && Number(l.cantidad)>0 && Number(l.precioUnitario)>0; });
    if(lin.length) setLineas(lin.map(function(l){ return {detalle:String(l.detalle),codigoCabys:String(l.codigoCabys||'').replace(/\D/g,''),cantidad:String(l.cantidad),precioUnitario:String(l.precioUnitario),conf:l.confianza}; }));
    else setAdv((obj.advertencias||[]).concat(['La IA no encontro lineas; revisa la foto o carga a mano.']));
    if(lin.length) setAdv(obj.advertencias||[]);
  }
  function subirFoto(e){
    var f=e.target.files&&e.target.files[0]; if(!f)return; setLeyendo(true); setAdv([]); e.target.value='';
    var r=new FileReader();
    r.onload=function(){ var b64=String(r.result).split(',')[1]; var mt=f.type||'image/jpeg';
      function serverExtrae(){ return fetch('/api/extraer-factura',{method:'POST',headers:{Authorization:'Bearer elconta_marta','Content-Type':'application/json'},body:JSON.stringify({imagenBase64:b64,mediaType:mt,geminiKey:geminiKey,nvidiaKey:nvidiaKey})}).then(function(res){ return res.json().then(function(j){ if(!res.ok) throw new Error(j.error||'error'); return j; }); }); }
      var p;
      if(geminiKey||nvidiaKey){ // navegador -> IA directo con la key de Kevin; si CORS/red falla, cae al servidor
        p=conReintentos(b64,mt).catch(function(e){ setAdv(['IA directa no pudo ('+(e.message||e)+'), probando por el servidor...']); return serverExtrae(); });
      } else { p=serverExtrae(); }
      p.then(function(obj){ setLeyendo(false); procesarBorrador(obj); })
       .catch(function(err){ setLeyendo(false); setAdv(['No se pudo leer la foto: '+String(err.message||err)]); });
    };
    r.readAsDataURL(f);
  }
  function setL(i,k,v){ setLineas(lineas.map(function(l,j){ if(j!==i)return l; var n=Object.assign({},l); n[k]=v; return n; })); }
  function addL(){ setLineas(lineas.concat([{detalle:'',codigoCabys:'',cantidad:'1',precioUnitario:''}])); }
  function delL(i){ setLineas(lineas.filter(function(_,j){return j!==i;})); }
  var total=lineas.reduce(function(s,l){ return s+(Number(l.cantidad)||0)*(Number(l.precioUnitario)||0); },0);
  var validas=lineas.filter(function(l){ return l.detalle && /^\d{13}$/.test(l.codigoCabys) && Number(l.cantidad)>0 && Number(l.precioUnitario)>0; });
  function emitir(){
    setEstado('emitiendo');
    var detalle=validas.map(function(l){ return {codigoCabys:l.codigoCabys,cantidad:Number(l.cantidad),unidadMedida:'Unid',detalle:l.detalle,precioUnitario:Number(l.precioUnitario),
      impuesto:[{codigo:'01',codigoTarifa:noSujeto?'11':'08',tarifa:noSujeto?0:13}]}; });
    var body={tipo:'factura',emisorLegalId:'800830874',ambiente:prod?'production':'sandbox',confirmarProduccion:prod,cc:cc||undefined,idempotencyKey:'ui-'+Date.now(),
      comprobante:{codigoActividad:'4719.9',condicionVenta:'01',medioPago:['01'],currency:'CRC',receptor:rec,detalle:detalle,observaciones:noSujeto?'Regimen simplificado - operacion no sujeta a IVA':''}};
    fetch('/api/facturas',{method:'POST',headers:{Authorization:'Bearer elconta_marta','Content-Type':'application/json'},body:JSON.stringify(body)})
      .then(function(r){ return r.json().then(function(j){ return {ok:r.ok,j:j}; }); })
      .then(function(x){ setEstado(x.ok?{clave:x.j.clave,haciendaStatus:x.j.haciendaStatus,ambiente:x.j.ambiente,documentId:x.j.documentId,cc:x.j.ccEnviado}:{error:x.j.error||'error'}); })
      .catch(function(e){ setEstado({error:String(e)}); });
  }
  var th={textAlign:'left',font:'var(--type-2xs)',color:'var(--text-muted)',textTransform:'uppercase',letterSpacing:'var(--tracking-wide)',padding:'0 6px 6px'};
  return (<>
    <ViewHeader title={t('nav.emitir')} lede="Subi la foto de la boleta (WhatsApp) y el sistema arma el borrador. Revisa, corregi y emiti. Simplificado va sin IVA."/>
    <Card padding="var(--space-5)" style={{marginBottom:'var(--space-4)',background:'var(--surface-accent-soft)'}}>
      <div style={{marginBottom:'var(--space-3)'}}>
        <Input label="API key de Gemini (gratis con tu cuenta Google). Se guarda solo en ESTE navegador, no viaja a ningun servidor."
          value={geminiKey} onChange={function(e){ guardarKey(e.target.value); }} placeholder="pega tu key de Google AI Studio"/>
        {geminiKey ? <div style={{font:'var(--type-2xs)',color:'var(--mis-green-600)',marginTop:4}}>✓ key guardada en este navegador</div>
          : <div style={{font:'var(--type-2xs)',color:'var(--text-muted)',marginTop:4}}>Consegui una gratis en aistudio.google.com/apikey</div>}
      </div>
      <div style={{marginBottom:'var(--space-3)'}}>
        <Input label="API key de NVIDIA (respaldo, opcional). Si Gemini se satura, usa esta."
          value={nvidiaKey} onChange={function(e){ guardarNvidia(e.target.value); }} placeholder="nvapi-... (build.nvidia.com)"/>
      </div>
      <div style={{display:'flex',gap:'var(--space-3)',alignItems:'center',flexWrap:'wrap'}}>
        <Button variant="primary" disabled={leyendo||(!geminiKey&&!nvidiaKey)} onClick={function(){ fotoRef.current&&fotoRef.current.click(); }}>{leyendo?'Leyendo la foto...':'📷 Subir foto de la boleta'}</Button>
        <input ref={fotoRef} type="file" accept="image/*" capture="environment" style={{display:'none'}} onChange={subirFoto}/>
        <span style={{font:'var(--type-small)',color:'var(--text-muted)'}}>La IA lee la letra, arma las lineas y calcula el total. Vos confirmas.</span>
      </div>
      {adv.length>0 && <div style={{marginTop:'var(--space-3)',display:'flex',flexDirection:'column',gap:4}}>
        {adv.map(function(a,i){ return <div key={i} style={{font:'var(--type-2xs)',color:'var(--mis-amber-600)'}}>⚠ {a}</div>; })}</div>}
    </Card>
    <div style={{display:'grid',gridTemplateColumns:'minmax(0,1fr) 320px',gap:'var(--space-5)'}}>
      <div style={{display:'flex',flexDirection:'column',gap:'var(--space-4)'}}>
        <Card padding="var(--space-5)">
          <Select label="Cliente (receptor)" value={String(ci)} onChange={function(e){ setCi(Number(e.target.value)); }}
            options={EMI_CLIENTES.map(function(c,i){ return {value:String(i),label:c.nombre}; })}/>
          <div style={{font:'var(--type-2xs)',color:'var(--text-muted)',marginTop:6,fontFamily:'var(--font-mono)'}}>Ced. {rec.numeroIdentificacion} · {rec.correoElectronico}</div>
        </Card>
        <Card padding="var(--space-5)">
          <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:'var(--space-3)'}}>
            <h3 style={{font:'var(--type-h3)'}}>Lineas</h3>
            <Button size="sm" variant="secondary" onClick={addL}>+ Linea</Button>
          </div>
          <div style={{overflowX:'auto'}}>
            <table style={{width:'100%',borderCollapse:'collapse'}}>
              <thead><tr><th style={th}>Detalle</th><th style={th}>CABYS (13)</th><th style={{...th,width:70}}>Cant</th><th style={{...th,width:100}}>Precio</th><th style={{...th,width:90,textAlign:'right'}}>Subtotal</th><th style={{width:30}}></th></tr></thead>
              <tbody>
                {lineas.map(function(l,i){ var sub=(Number(l.cantidad)||0)*(Number(l.precioUnitario)||0); var badCab=l.codigoCabys && !/^\d{13}$/.test(l.codigoCabys);
                  return (<tr key={i}>
                    <td style={{padding:4}}><input style={inputStyle()} value={l.detalle} placeholder="Vela flor" onChange={function(e){setL(i,'detalle',e.target.value);}}/></td>
                    <td style={{padding:4}}><input style={Object.assign({},inputStyle(),{fontFamily:'var(--font-mono)',borderColor:badCab?'var(--mis-red-600)':'var(--border-default)'})} value={l.codigoCabys} placeholder="3899799010100" onChange={function(e){setL(i,'codigoCabys',e.target.value.replace(/\D/g,''));}}/></td>
                    <td style={{padding:4}}><input style={Object.assign({},inputStyle(),{textAlign:'right'})} value={l.cantidad} onChange={function(e){setL(i,'cantidad',e.target.value);}}/></td>
                    <td style={{padding:4}}><input style={Object.assign({},inputStyle(),{textAlign:'right'})} value={l.precioUnitario} placeholder="0" onChange={function(e){setL(i,'precioUnitario',e.target.value);}}/></td>
                    <td style={{padding:4,textAlign:'right',fontFamily:'var(--font-mono)',font:'var(--type-small)'}}>{fmt(sub)}</td>
                    <td style={{padding:4,textAlign:'center'}}>{lineas.length>1&&<button onClick={function(){delL(i);}} style={{border:'none',background:'none',cursor:'pointer',color:'var(--mis-red-600)',fontWeight:700}}>×</button>}</td>
                  </tr>); })}
              </tbody>
            </table>
          </div>
        </Card>
      </div>
      <div style={{display:'flex',flexDirection:'column',gap:'var(--space-4)'}}>
        <Card padding="var(--space-5)">
          <div style={{display:'flex',justifyContent:'space-between',alignItems:'baseline',marginBottom:'var(--space-3)'}}>
            <span style={{font:'var(--type-small)',color:'var(--text-muted)'}}>Total</span>
            <span style={{font:'var(--type-h2)',fontSize:'var(--text-2xl)',fontFamily:'var(--font-mono)'}}>{fmt(total)}</span>
          </div>
          <label style={{display:'flex',alignItems:'center',gap:8,font:'var(--type-small)',cursor:'pointer',marginBottom:'var(--space-2)'}}>
            <input type="checkbox" checked={noSujeto} onChange={function(e){setNoSujeto(e.target.checked);}}/> No sujeto (regimen simplificado, sin IVA)</label>
          <div style={{marginTop:'var(--space-3)'}}><Input label="Copia a (CC)" value={cc} onChange={function(e){setCc(e.target.value);}}/></div>
          <label style={{display:'flex',alignItems:'center',gap:8,font:'var(--type-small)',cursor:'pointer',marginTop:'var(--space-3)',color:prod?'var(--mis-red-600)':'var(--text-muted)'}}>
            <input type="checkbox" checked={prod} onChange={function(e){setProd(e.target.checked);}}/> Produccion (factura REAL a Hacienda)</label>
          <div style={{marginTop:'var(--space-4)'}}>
            <Button variant="accent" fullWidth disabled={validas.length===0||estado==='emitiendo'} onClick={emitir}>
              {estado==='emitiendo'?'Emitiendo...':(prod?'EMITIR REAL':'Emitir (prueba)')}</Button>
          </div>
          {validas.length===0 && <div style={{font:'var(--type-2xs)',color:'var(--text-muted)',marginTop:6}}>Completa detalle, CABYS de 13 digitos, cantidad y precio.</div>}
        </Card>
        {estado && estado!=='emitiendo' && (estado.error
          ? <Callout tone="demo" label="No salio">{estado.error}</Callout>
          : <Callout tone="ink" label={estado.haciendaStatus==='accepted'||estado.haciendaStatus==='aceptado'?'Aceptado por Hacienda':('Estado: '+(estado.haciendaStatus||'enviado'))}>
              <div style={{fontFamily:'var(--font-mono)',fontSize:'var(--text-2xs)',wordBreak:'break-all'}}>Clave: {estado.clave}</div>
              <div style={{fontSize:'var(--text-2xs)',marginTop:4}}>{estado.ambiente}{estado.cc?(' · copia a '+estado.cc):''}</div>
            </Callout>)}
      </div>
    </div>
  </>);
}

/* ASISTENTE DE IMPORTACION DE ESTADOS (bancos y tarjetas) */
const IMEX_CUENTAS = [
  { id:'lafise-col', label:'Lafise Colones - CR22...531315', banco:'Lafise', tipo:'banco', ambiguo:true,  traeFinal:true  },
  { id:'bcr-col',    label:'BCR Colones (Excel)',              banco:'BCR',    tipo:'banco', ambiguo:false, traeFinal:false },
  { id:'lafise-tc',  label:'Lafise VISA Infinite - ***3777',  banco:'Lafise', tipo:'tarjeta', ambiguo:false, traeFinal:true, bimoneda:true },
];
// Movimientos demo tomados del estado real Lafise (dic-2025), reconstruidos por saldo.
const IMEX_SALDO_ANT = 2410540.83;
const IMEX_MOVS = [
  { fecha:'01/12/2025', desc:'Datafono Mes de December', ref:'', deb:14000,  cred:0 },
  { fecha:'01/12/2025', desc:'2CAFES',                   ref:'', deb:0,      cred:2800 },
  { fecha:'01/12/2025', desc:'PAGO FREHIMAN',            ref:'', deb:187500, cred:0 },
  { fecha:'02/12/2025', desc:'DEPOSITO EN CAJAS',        ref:'', deb:0,      cred:4500 },
  { fecha:'02/12/2025', desc:'FRUTAS FE 0017151',        ref:'0017151', deb:120000, cred:0 },
  { fecha:'03/12/2025', desc:'Ice Bear FE 0001454',      ref:'0001454', deb:90400,  cred:0 },
];
function ImportarEstado(){
  const { t, fmt } = useUI();
  const [paso,setPaso]=React.useState(1);
  const [cuentaId,setCuentaId]=React.useState('lafise-col');
  const [formato,setFormato]=React.useState('dd/mm/yyyy');
  const [confirmo,setConfirmo]=React.useState(false);
  const [saldoInput,setSaldoInput]=React.useState('');
  const [importado,setImportado]=React.useState(false);
  const cuenta = IMEX_CUENTAS.find(c=>c.id===cuentaId);
  const totDeb = IMEX_MOVS.reduce((s,m)=>s+m.deb,0);
  const totCred = IMEX_MOVS.reduce((s,m)=>s+m.cred,0);
  const saldoCalc = Math.round((IMEX_SALDO_ANT - totDeb + totCred)*100)/100;
  const saldoFinal = cuenta.traeFinal ? saldoCalc : (saldoInput===''? null : parseFloat(saldoInput));
  const cuadra = saldoFinal!==null && Math.abs(saldoCalc - saldoFinal) <= 0.01;
  const pasos=['imex.p1','imex.p2','imex.p3','imex.p4'];
  const puedeSeguir = paso===1 ? true : paso===2 ? confirmo : paso===3 ? cuadra : true;

  const Stepper = (
    <div style={{display:'flex',gap:'var(--space-2)',marginBottom:'var(--space-6)',flexWrap:'wrap'}}>
      {pasos.map(function(p,i){ var n=i+1, on=n===paso, done=n<paso;
        return (<div key={p} style={{display:'flex',alignItems:'center',gap:6,padding:'6px 12px',borderRadius:'var(--radius-pill)',
          fontFamily:'var(--font-mono)',fontSize:'var(--text-2xs)',fontWeight:700,
          background: on?'var(--mis-blue-600)':done?'var(--mis-green-50)':'var(--surface-muted)',
          color: on?'#fff':done?'var(--mis-green-600)':'var(--text-muted)'}}>{t(p)}</div>); })}
    </div>
  );

  return (<>
    <ViewHeader title={t('nav.importar')} lede={t('imex.lede')}/>
    {Stepper}

    {paso===1 && (
      <Card padding="var(--space-6)" style={{maxWidth:640}}>
        <div style={{display:'flex',flexDirection:'column',gap:'var(--space-4)'}}>
          <Select label={t('imex.cuenta')} value={cuentaId} onChange={function(e){ setCuentaId(e.target.value); setConfirmo(false); setSaldoInput(''); }}
            options={IMEX_CUENTAS.map(c=>({value:c.id,label:c.label}))}/>
          <div style={{display:'flex',gap:8,alignItems:'center'}}>
            <StatusPill state="neutral">{cuenta.tipo==='tarjeta'?'Tarjeta de credito':'Cuenta bancaria'}</StatusPill>
            {cuenta.bimoneda && <StatusPill state="warn">Bimoneda (colones + US$)</StatusPill>}
            {!cuenta.traeFinal && <StatusPill state="warn">No trae saldo final</StatusPill>}
          </div>
          <Input label={t('imex.archivo')} defaultValue={cuenta.banco==='BCR'?'estado_bcr_2026-07.xlsx':'Lafise December 2025.pdf'}/>
        </div>
      </Card>
    )}

    {paso===2 && (
      <Card style={{maxWidth:760}}>
        <div style={{padding:'var(--space-5) var(--space-6) 0'}}><h3 style={{font:'var(--type-h3)'}}>{t('imex.detectado')}</h3></div>
        <DataTable columns={[{key:'col',label:t('imex.columna'),mono:true},{key:'rol',label:t('imex.rol')},{key:'ej',label:t('imex.ejemplo'),mono:true}]}
          rows={[
            {col:'1', rol:<Badge tone="outline">fecha</Badge>, ej:'01/12/2025'},
            {col:'2', rol:<Badge tone="outline">descripcion</Badge>, ej:'Datafono Mes de December'},
            {col:'3', rol:<Badge tone="outline">debito</Badge>, ej:'14,000.00'},
            {col:'4', rol:<Badge tone="outline">credito</Badge>, ej:'2,800.00'},
            {col:'5', rol:<Badge tone="outline">saldo</Badge>, ej:'2,396,540.83'},
          ]}/>
        <div style={{padding:'var(--space-5) var(--space-6)',display:'flex',flexDirection:'column',gap:'var(--space-3)'}}>
          <span style={{font:'var(--type-small)',fontWeight:700}}>{t('imex.formato')}</span>
          <div style={{display:'flex',gap:'var(--space-4)'}}>
            {['dd/mm/yyyy','mm/dd/yyyy'].map(function(f){ return (
              <label key={f} style={{display:'flex',alignItems:'center',gap:6,font:'var(--type-small)',cursor:'pointer'}}>
                <input type="radio" name="fmt" checked={formato===f} onChange={function(){ setFormato(f); }}/>{f}</label>); })}
          </div>
          {cuenta.ambiguo && <Callout tone="demo" label="dd/mm vs mm/dd">{t('imex.ambiguo')}</Callout>}
          <label style={{display:'flex',alignItems:'center',gap:8,font:'var(--type-small)',cursor:'pointer',marginTop:'var(--space-2)'}}>
            <input type="checkbox" checked={confirmo} onChange={function(e){ setConfirmo(e.target.checked); }}/>{t('imex.confirmo')}</label>
        </div>
      </Card>
    )}

    {paso===3 && (
      <Card padding="var(--space-6)" style={{maxWidth:640}}>
        <div style={{display:'grid',gridTemplateColumns:'1fr auto',rowGap:'var(--space-3)',columnGap:'var(--space-6)',font:'var(--type-small)'}}>
          <span style={{color:'var(--text-muted)'}}>{t('imex.saldoAnt')}</span><span style={{fontFamily:'var(--font-mono)',textAlign:'right'}}>{fmt(IMEX_SALDO_ANT)}</span>
          <span style={{color:'var(--text-muted)'}}>{t('imex.totDeb')}</span><span style={{fontFamily:'var(--font-mono)',textAlign:'right',color:'var(--mis-red-600)'}}>- {fmt(totDeb)}</span>
          <span style={{color:'var(--text-muted)'}}>{t('imex.totCred')}</span><span style={{fontFamily:'var(--font-mono)',textAlign:'right',color:'var(--mis-green-600)'}}>+ {fmt(totCred)}</span>
          <span style={{fontWeight:700,borderTop:'1px solid var(--border-subtle)',paddingTop:'var(--space-2)'}}>{t('imex.saldoCalc')}</span>
          <span style={{fontFamily:'var(--font-mono)',textAlign:'right',fontWeight:700,borderTop:'1px solid var(--border-subtle)',paddingTop:'var(--space-2)'}}>{fmt(saldoCalc)}</span>
        </div>
        <div style={{marginTop:'var(--space-5)'}}>
          {cuenta.traeFinal ? (
            <div style={{display:'flex',justifyContent:'space-between',alignItems:'center'}}>
              <div><div style={{font:'var(--type-small)',color:'var(--text-muted)'}}>{t('imex.saldoFin')}</div>
                <div style={{fontFamily:'var(--font-mono)',fontWeight:700}}>{fmt(saldoFinal)}</div></div>
              <StatusPill state={cuadra?'ok':'late'}>{cuadra?t('imex.cuadra'):t('imex.noCuadra')}</StatusPill>
            </div>
          ) : (<>
            <Callout tone="demo" label="BCR">{t('imex.sinFinal')}</Callout>
            <div style={{marginTop:'var(--space-3)',display:'flex',gap:'var(--space-3)',alignItems:'flex-end'}}>
              <div style={{flex:'1 1 240px'}}><Input label={t('imex.saldoFin')} value={saldoInput} onChange={function(e){ setSaldoInput(e.target.value); }} placeholder={String(saldoCalc)}/></div>
              {saldoFinal!==null && <StatusPill state={cuadra?'ok':'late'}>{cuadra?t('imex.cuadra'):t('imex.noCuadra')}</StatusPill>}
            </div>
          </>)}
        </div>
        <Note>{t('imex.saldoManda')}</Note>
      </Card>
    )}

    {paso===4 && (
      importado ? (
        <Callout tone="ink" label={t('imex.cuadra')}>{IMEX_MOVS.length} {t('imex.nuevos').toLowerCase()} - {t('imex.importar').toLowerCase()} OK.</Callout>
      ) : (
      <Card style={{maxWidth:820}}>
        <div style={{padding:'var(--space-5) var(--space-6)',display:'flex',justifyContent:'space-between',alignItems:'center'}}>
          <h3 style={{font:'var(--type-h3)'}}>{t('imex.nuevos')} ({IMEX_MOVS.length})</h3>
          <span style={{font:'var(--type-small)',color:'var(--text-muted)'}}>0 {t('imex.dups')}</span>
        </div>
        <DataTable columns={[
            {key:'fecha',label:'FECHA',mono:true},{key:'desc',label:'DESCRIPCION'},{key:'ref',label:'REF',mono:true},
            {key:'deb',label:'DEBITO',mono:true,align:'right'},{key:'cred',label:'CREDITO',mono:true,align:'right'}]}
          rows={IMEX_MOVS.map(function(m){ return {fecha:m.fecha,desc:m.desc,ref:m.ref||'-',
            deb:m.deb?fmt(m.deb):'', cred:m.cred?fmt(m.cred):''}; })}/>
      </Card>)
    )}

    <div style={{display:'flex',gap:'var(--space-3)',marginTop:'var(--space-6)'}}>
      {paso>1 && !importado && <Button variant="secondary" onClick={function(){ setPaso(paso-1); }}>{t('imex.atras')}</Button>}
      {paso<4 && <Button variant="accent" disabled={!puedeSeguir} onClick={function(){ if(puedeSeguir) setPaso(paso+1); }}>{t('imex.siguiente')}</Button>}
      {paso===4 && !importado && <Button variant="accent" onClick={function(){ setImportado(true); }}>{t('imex.importar')} {IMEX_MOVS.length}</Button>}
    </div>
  </>);
}

/* PORTABILIDAD: barra de import/export reusable (sin lock-in) */
function descargarCSV(nombre, encabezados, filas){
  var esc=function(v){ var s=String(v==null?'':v); return /[",\n;]/.test(s)?'"'+s.replace(/"/g,'""')+'"':s; };
  var txt=[encabezados.map(esc).join(',')].concat(filas.map(function(f){return f.map(esc).join(',');})).join('\r\n');
  var blob=new Blob(['﻿'+txt],{type:'text/csv;charset=utf-8'});
  var a=document.createElement('a'); a.href=URL.createObjectURL(blob); a.download=nombre; document.body.appendChild(a); a.click(); a.remove();
}
function ImpExpBar({nombre,encabezados,filas}){
  const { t } = useUI();
  const [msg,setMsg]=React.useState(null);
  const ref=React.useRef(null);
  function onFile(e){ var f=e.target.files&&e.target.files[0]; if(!f)return; var r=new FileReader();
    r.onload=function(){ var l1=(String(r.result).split(/\r?\n/)[0]||''); var sep=l1.split(';').length>l1.split(',').length?';':','; setMsg(l1.split(sep).length+' '+t('ie.detectado')); };
    r.readAsText(f); e.target.value=''; }
  return (<div style={{display:'flex',gap:'var(--space-2)',alignItems:'center',flexWrap:'wrap',marginBottom:'var(--space-4)'}}>
    <Button size="sm" variant="secondary" onClick={function(){descargarCSV(nombre,encabezados,filas);}}>{t('ie.exportar')}</Button>
    <Button size="sm" variant="secondary" onClick={function(){ref.current&&ref.current.click();}}>{t('ie.importar')}</Button>
    <input ref={ref} type="file" accept=".csv,text/csv" style={{display:'none'}} onChange={onFile}/>
    {msg&&<StatusPill state="ok">{msg}</StatusPill>}
    <span style={{font:'var(--type-small)',color:'var(--text-muted)',flex:'1 1 260px'}}>{t('ie.nota')}</span>
  </div>);
}

/* CATALOGO DE CUENTAS (preseleccionado por actividad de Hacienda) */
const CUENTAS_DEMO=[
  ['1-01-01','Bancos','activo','deudora','Base'],
  ['1-02-01','Cuentas por cobrar comerciales','activo','deudora','Base'],
  ['1-03-02','Inventario de alimentos','activo','deudora','Actividad'],
  ['1-03-03','Inventario de bebidas','activo','deudora','Actividad'],
  ['2-01-01','Cuentas por pagar proveedores','pasivo','acreedora','Base'],
  ['2-03-01','IVA por pagar (debito fiscal)','pasivo','acreedora','Base'],
  ['2-08-01','Propina de ley 10% por pagar','pasivo','acreedora','Actividad'],
  ['4-01-04','Prestacion de servicios','ingreso','acreedora','Base'],
  ['5-01-02','Costo de alimentos','gasto','deudora','Actividad'],
  ['5-01-03','Costo de bebidas','gasto','deudora','Actividad'],
];
function CatalogoCuentas(){
  const { t } = useUI();
  return (<>
    <ViewHeader title={t('nav.catalogo')} lede={t('cat2.lede')}/>
    <ImpExpBar nombre="catalogo_cuentas.csv" encabezados={['Codigo','Nombre','Tipo','Naturaleza','Origen']} filas={CUENTAS_DEMO}/>
    <Card>
      <DataTable columns={[{key:'cod',label:'Codigo',mono:true},{key:'nom',label:'Nombre'},{key:'tipo',label:'Tipo'},{key:'nat',label:t('cat2.natur')},{key:'org',label:t('cat2.origen')}]}
        rows={CUENTAS_DEMO.map(function(r){ return {cod:r[0],nom:r[1],tipo:r[2],nat:r[3],org:<Badge tone="outline">{r[4]==='Base'?t('cat2.base'):t('cat2.actividad2')}</Badge>}; })}/>
    </Card>
  </>);
}

/* PRODUCTOS con asistente CABYS (datos de ejemplo: banner de demo) */
const CABYS_DEMO=[
  ['2936001100000','Cafe y bebidas de cafe preparadas','13%'],
  ['1071200100000','Pan (canasta basica)','1%'],
  ['4722001000000','Comidas preparadas para consumo','13%'],
  ['8621000000000','Consulta y servicios de salud','4%'],
  ['8542001000000','Servicios de educacion privada','2%'],
  ['9629900000000','Servicios de consultoria','13%'],
];
function cabysDemo(q){ return CABYS_DEMO.filter(function(c){ return c[1].toLowerCase().indexOf(q.toLowerCase())>=0 || q.toLowerCase().split(' ').some(function(w){return w&&c[1].toLowerCase().indexOf(w)>=0;}); }).slice(0,5); }
function Productos(){
  const { t } = useUI();
  const [q,setQ]=React.useState('');
  const [sug,setSug]=React.useState([]);
  const [fuente,setFuente]=React.useState('demo');
  const [prods,setProds]=React.useState([{nombre:'Capuchino',cabys:'2936001100000',tarifa:'13%',precio:'2 500'}]);
  React.useEffect(function(){
    if(!q){ setSug([]); return; }
    var cancel=false;
    var id=setTimeout(function(){
      fetch('/api/cabys?q='+encodeURIComponent(q),{headers:{Authorization:'Bearer demo-token'}})
        .then(function(r){ return r.ok?r.json():Promise.reject(r.status); })
        .then(function(d){ if(cancel)return; var cs=(d.candidatos||[]).map(function(c){ return [c.codigo,c.descripcion,Math.round(c.tarifa*100)+'%']; });
          if(cs.length){ setSug(cs); setFuente('api'); } else { setSug(cabysDemo(q)); setFuente('demo'); } })
        .catch(function(){ if(cancel)return; setSug(cabysDemo(q)); setFuente('demo'); });
    },250);
    return function(){ cancel=true; clearTimeout(id); };
  },[q]);
  return (<>
    <ViewHeader title={t('nav.productos')} lede={t('prod.lede')}/>
    <Card padding="var(--space-6)" style={{marginBottom:'var(--space-5)'}}>
      <Input label={t('prod.buscarPh')} value={q} onChange={function(e){setQ(e.target.value);}} placeholder={t('prod.buscarPh')}/>
      {q && sug.length>0 && <div style={{marginTop:'var(--space-4)'}}>
        <div style={{display:'flex',alignItems:'center',gap:8,marginBottom:'var(--space-2)'}}>
          <span style={{font:'var(--type-small)',fontWeight:700}}>{t('prod.sugerencias')}</span>
          {fuente==='api' && <StatusPill state="ok">{t('prod.enVivo')}</StatusPill>}
        </div>
        <DataTable columns={[{key:'desc',label:''},{key:'cabys',label:'CABYS',mono:true},{key:'iva',label:t('prod.tarifa')},{key:'acc',label:''}]}
          rows={sug.map(function(c){ return {desc:c[1],cabys:c[0],iva:<Badge tone="outline">{c[2]}</Badge>,
            acc:<Button size="sm" variant="accent" onClick={function(){ setProds(prods.concat([{nombre:c[1],cabys:c[0],tarifa:c[2],precio:''}])); setQ(''); }}>{t('prod.usar')}</Button>}; })}/>
      </div>}
    </Card>
    <ImpExpBar nombre="productos.csv" encabezados={['Nombre','CABYS','Precio','IVA']} filas={prods.map(function(p){return [p.nombre,p.cabys,p.precio,p.tarifa];})}/>
    <Card>
      <div style={{padding:'var(--space-5) var(--space-6) 0'}}><h3 style={{font:'var(--type-h3)'}}>{t('prod.lista')}</h3></div>
      <DataTable columns={[{key:'nom',label:''},{key:'cabys',label:'CABYS',mono:true},{key:'iva',label:t('prod.tarifa')},{key:'precio',label:t('prod.precio'),align:'right',mono:true}]}
        rows={prods.map(function(p){ return {nom:p.nombre,cabys:p.cabys,iva:<Badge tone="outline">{p.tarifa}</Badge>,precio:p.precio||'-'}; })}/>
    </Card>
  </>);
}

/* MOVIMIENTOS HUB: la lista + conciliacion + importar como herramientas del mismo modulo */
function MovimientosHub(){
  const { t } = useUI();
  const [tab,setTab]=React.useState('lista');
  return (<>
    <Tabs tabs={[['lista',t('mh.lista')],['concil',t('nav.concil')],['importar',t('nav.importar')]]} value={tab} onChange={setTab}/>
    {tab==='lista'&&<Movimientos/>}
    {tab==='concil'&&<Conciliacion/>}
    {tab==='importar'&&<ImportarEstado/>}
  </>);
}

Object.assign(window,{Inicio,Onboarding,EmitirFactura,MovimientosHub,ImportarEstado,Movimientos,CatalogoCuentas,Productos,Facturacion,FacturaDetalle,Inventario,Planilla,CobrosPagos,ActivosFijos,Conciliacion,Reportes,Estados,Impuestos,BandejaCPI,Servicios,Configuracion});
