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 */
function Movimientos(){
  const { t, fmt } = useUI();
  const [modo,setModo]=React.useState('banco');
  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'&&(<>
      <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={[
            {fecha:'03/01',nombre:'Hospedaje Las Olas',monto:fmt(35900),cat:<Badge tone="outline">{t('cat.hoteles')}</Badge>,medio:'BCR'},
            {fecha:'04/01',nombre:'Hotel Vista Verde',monto:fmt(123000),cat:<Badge tone="outline">{t('cat.hoteles')}</Badge>,medio:'BCR'},
            {fecha:'09/01',nombre:'SINPE Servicios M.',monto:fmt(193000),cat:<Badge tone="accent">{t('cat.reciclable')}</Badge>,medio:'BCR'}
          ]}/>
      </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);
  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">{t('fac.emitir')}</Button>
        </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'}]}
          rows={[
            {prod:'Aluminio (kg)',precio:fmt(650),iva:'13%',stock:<StatusPill state="ok">420</StatusPill>},
            {prod:'Vidrio (kg)',precio:fmt(40),iva:'13%',stock:<StatusPill state="warn">{'85'+t('inv.bajo')}</StatusPill>},
            {prod:'Compostera',precio:fmt(18000),iva:'13%',stock:<StatusPill state="ok">12</StatusPill>}
          ]}/>
      </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 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'}]}
          rows={[
            {cli:'Hotel Vista Verde',total:fmt(780000),cor:fmt(320000),a:fmt(460000),b:'-',d:'-'},
            {cli:'Hospedaje Las Olas',total:fmt(1140000),cor:fmt(600000),a:'-',b:fmt(460000),d:fmt(80000)},
            {cli:'Municipalidad',total:fmt(560000),cor:'-',a:fmt(80000),b:'-',d:fmt(480000)}
          ]}/>
      </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('ratios');
  return (<>
    <ViewHeader title={t('nav.reportes')} lede={t('rep.lede')}/>
    <Tabs tabs={[['ratios',t('rep.tabRatios')],['costos',t('rep.tabCostos')],['ppto',t('rep.tabPpto')],['flujo',t('rep.tabFlujo')]]} value={tb} onChange={setTb}/>
    {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>
    <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>
  </>);
}

/* 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>
  </>);
}

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