// ── CONTABILIDAD v2 — localStorage ───────────────────

function Contabilidad() {
  const { useState } = React;
  const [tab, setTab] = useState('resumen');
  const [mes, setMes] = useState(new Date().toISOString().slice(0,7));
  const ventas = lsGet('ventas',[]);
  const [gastos, setGastos] = useState(()=>lsGet('gastos_contabilidad',[]));
  const [modalGasto, setModalGasto] = useState(false);
  const [nuevoGasto, setNuevoGasto] = useState({fecha:hoy(),categoria:'Arriendo',monto:0,descripcion:'',doc:'Boleta',proveedor:''});
  const CATS=['Arriendo','Remuneraciones','Insumos Taller','Materiales Metal','Marketing','Servicios básicos','Comisión MP','Transporte','Contabilidad','Otros'];
  const DOCS=['Boleta','Factura','Liquidación','Comprobante','Sin documento'];
  const ventasMes=ventas.filter(v=>v.fecha?.slice(0,7)===mes);
  const gastosMes=gastos.filter(g=>g.fecha?.slice(0,7)===mes);
  const totalIngresos=ventasMes.reduce((s,v)=>s+(v.total||0),0);
  const totalGastos=gastosMes.reduce((s,g)=>s+(g.monto||0),0);
  const utilidad=totalIngresos-totalGastos;
  const {neto:netoV,iva:ivaV}=desglosarIVA(totalIngresos);
  const creditoFiscal=gastosMes.filter(g=>g.doc==='Factura').reduce((s,g)=>s+Math.round((g.monto||0)*0.19/1.19),0);
  const saldoIVA=ivaV-creditoFiscal;
  const porCat={};
  gastosMes.forEach(g=>{ porCat[g.categoria]=(porCat[g.categoria]||0)+(g.monto||0); });
  function agregarGasto(){
    const updated=[...gastos,{...nuevoGasto,id:'G-'+Date.now()}];
    setGastos(updated); lsSet('gastos_contabilidad',updated); setModalGasto(false);
    setNuevoGasto({fecha:hoy(),categoria:'Arriendo',monto:0,descripcion:'',doc:'Boleta',proveedor:''});
  }
  const S=repStyles;
  return (
    <div style={{display:'flex',flexDirection:'column',height:'100%',overflow:'hidden'}}>
      <div style={{display:'flex',borderBottom:'1px solid var(--border)',background:'var(--bg-card)',flexShrink:0,alignItems:'center'}}>
        {[{id:'resumen',l:'Resumen'},{id:'gastos',l:'Gastos'},{id:'sii',l:'SII/IVA'},{id:'flujo',l:'Flujo'}].map(t=>(
          <button key={t.id} onClick={()=>setTab(t.id)}
            style={{padding:'10px 14px',background:'transparent',border:'none',color:tab===t.id?'var(--cream)':'var(--cream-3)',cursor:'pointer',fontSize:'12px',fontFamily:'Inter,sans-serif',borderBottom:tab===t.id?'2px solid var(--gold)':'2px solid transparent'}}>
            {t.l}
          </button>
        ))}
        <div style={{marginLeft:'auto',paddingRight:'14px'}}>
          <input type="month" style={{...calcStyles.input,padding:'4px 8px',fontSize:'11px',width:'135px'}} value={mes} onChange={e=>setMes(e.target.value)}/>
        </div>
      </div>
      <div style={{flex:1,overflowY:'auto',padding:'16px'}}>
        {tab==='resumen'&&(
          <div>
            <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:'9px',marginBottom:'14px'}}>
              {[{l:'Ingresos',v:clp(totalIngresos),c:'#27ae60'},{l:'Gastos',v:clp(totalGastos),c:'#c0392b'},{l:'Utilidad',v:clp(utilidad),c:utilidad>=0?'var(--gold)':'#c0392b'},{l:'IVA a pagar',v:clp(Math.max(0,saldoIVA)),c:saldoIVA>0?'#f39c12':'#27ae60'}].map(k=>(
                <div key={k.l} style={S.kpiCard}><div style={{color:k.c,fontWeight:700,fontSize:'18px'}}>{k.v}</div><div style={{color:'var(--cream-3)',fontSize:'10px',marginTop:'3px'}}>{k.l}</div></div>
              ))}
            </div>
            {totalIngresos===0&&totalGastos===0
              ? <div style={{textAlign:'center',padding:'36px',color:'var(--cream-3)'}}><div style={{fontSize:'28px',marginBottom:'8px'}}>💸</div>Sin movimientos en {mes}.</div>
              : <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:'10px'}}>
                  <div style={S.card}><div style={S.cardTitle}>Ingresos</div>
                    {[{l:'Ventas brutas',v:clp(totalIngresos)},{l:'Neto',v:clp(netoV)},{l:'IVA cobrado',v:clp(ivaV)}].map(r=>(
                      <div key={r.l} style={{display:'flex',justifyContent:'space-between',padding:'5px 0',borderBottom:'1px solid var(--border)',fontSize:'12px'}}>
                        <span style={{color:'var(--cream-3)'}}>{r.l}</span><span style={{color:'#27ae60',fontWeight:600}}>{r.v}</span>
                      </div>
                    ))}
                  </div>
                  <div style={S.card}><div style={S.cardTitle}>Gastos por categoría</div>
                    {Object.entries(porCat).sort((a,b)=>b[1]-a[1]).map(([c,v])=>(
                      <div key={c} style={{display:'flex',justifyContent:'space-between',padding:'4px 0',borderBottom:'1px solid var(--border)',fontSize:'12px'}}>
                        <span style={{color:'var(--cream)'}}>{c}</span><span style={{color:'#c0392b',fontWeight:600}}>{clp(v)}</span>
                      </div>
                    ))}
                    {Object.keys(porCat).length===0&&<div style={{color:'var(--cream-3)',fontSize:'12px'}}>Sin gastos registrados</div>}
                  </div>
                </div>
            }
          </div>
        )}
        {tab==='gastos'&&(
          <div style={{display:'flex',flexDirection:'column',gap:'12px'}}>
            <div style={{display:'flex',justifyContent:'space-between',alignItems:'center'}}>
              <span style={{color:'var(--cream-3)',fontSize:'12px'}}>Total: <span style={{color:'#c0392b',fontWeight:600}}>{clp(totalGastos)}</span></span>
              <button onClick={()=>setModalGasto(true)} style={inv2Styles.btnGold}>+ Agregar gasto</button>
            </div>
            {gastosMes.length===0
              ? <div style={{textAlign:'center',padding:'36px',color:'var(--cream-3)'}}><div style={{fontSize:'28px',marginBottom:'8px'}}>📋</div>Sin gastos en {mes}.</div>
              : <table style={{width:'100%',borderCollapse:'collapse'}}>
                  <thead><tr>{['Fecha','Categoría','Descripción','Proveedor','Doc','Monto'].map(h=><th key={h} style={inv2Styles.th}>{h}</th>)}</tr></thead>
                  <tbody>{gastosMes.map(g=>(
                    <tr key={g.id} style={inv2Styles.tr}>
                      <td style={inv2Styles.td}><span style={{fontSize:'11px',color:'var(--cream-3)'}}>{g.fecha}</span></td>
                      <td style={inv2Styles.td}><span style={{fontSize:'10px',padding:'1px 6px',background:'rgba(192,57,43,0.1)',color:'#e74c3c',borderRadius:'4px'}}>{g.categoria}</span></td>
                      <td style={inv2Styles.td}><span style={{color:'var(--cream)',fontSize:'12px'}}>{g.descripcion}</span></td>
                      <td style={inv2Styles.td}><span style={{color:'var(--cream-3)',fontSize:'11px'}}>{g.proveedor||'—'}</span></td>
                      <td style={inv2Styles.td}><span style={{color:'var(--cream-3)',fontSize:'11px'}}>{g.doc}</span></td>
                      <td style={inv2Styles.td}><span style={{color:'#c0392b',fontWeight:600}}>{clp(g.monto)}</span></td>
                    </tr>
                  ))}</tbody>
                </table>
            }
          </div>
        )}
        {tab==='sii'&&(
          <div style={{maxWidth:'580px'}}>
            <div style={{fontFamily:'Cormorant Garamond,serif',fontSize:'20px',fontWeight:600,color:'var(--cream)',marginBottom:'14px'}}>Declaración IVA — {mes}</div>
            <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:'10px',marginBottom:'14px'}}>
              <div style={S.card}><div style={{...S.cardTitle,color:'#c0392b'}}>Débito Fiscal</div>
                {[{l:'Ventas brutas',v:clp(totalIngresos)},{l:'Base neta',v:clp(netoV)},{l:'IVA 19%',v:clp(ivaV)}].map(r=>(
                  <div key={r.l} style={{display:'flex',justifyContent:'space-between',padding:'5px 0',borderBottom:'1px solid var(--border)',fontSize:'12px'}}>
                    <span style={{color:'var(--cream-3)'}}>{r.l}</span><span style={{color:r.l.includes('IVA')?'#c0392b':'var(--cream)',fontWeight:r.l.includes('IVA')?700:400}}>{r.v}</span>
                  </div>
                ))}
              </div>
              <div style={S.card}><div style={{...S.cardTitle,color:'#27ae60'}}>Crédito Fiscal (facturas)</div>
                {gastosMes.filter(g=>g.doc==='Factura').map(g=>(
                  <div key={g.id} style={{display:'flex',justifyContent:'space-between',padding:'4px 0',borderBottom:'1px solid var(--border)',fontSize:'11px'}}>
                    <span style={{color:'var(--cream-3)',overflow:'hidden',textOverflow:'ellipsis',maxWidth:'120px'}}>{g.descripcion}</span>
                    <span style={{color:'#27ae60',fontWeight:600}}>{clp(Math.round((g.monto||0)*0.19/1.19))}</span>
                  </div>
                ))}
                {gastosMes.filter(g=>g.doc==='Factura').length===0&&<span style={{color:'var(--cream-3)',fontSize:'11px'}}>Sin facturas este mes</span>}
              </div>
            </div>
            <div style={{background:saldoIVA>0?'rgba(192,57,43,0.08)':'rgba(39,174,96,0.08)',border:`1px solid ${saldoIVA>0?'rgba(192,57,43,0.3)':'rgba(39,174,96,0.3)'}`,borderRadius:'12px',padding:'16px'}}>
              <div style={{fontFamily:'Cormorant Garamond,serif',fontSize:'18px',fontWeight:600,color:'var(--cream)',marginBottom:'10px'}}>Resultado F29</div>
              {[{l:'Débito fiscal',v:clp(ivaV),c:'#c0392b'},{l:'Crédito fiscal',v:clp(creditoFiscal),c:'#27ae60'},{l:saldoIVA>0?'IVA A PAGAR':'IVA A FAVOR',v:clp(Math.abs(saldoIVA)),c:saldoIVA>0?'#c0392b':'#27ae60'}].map(r=>(
                <div key={r.l} style={{display:'flex',justifyContent:'space-between',padding:'7px 0',borderBottom:'1px solid var(--border)',fontSize:'13px'}}>
                  <span style={{color:'var(--cream-3)'}}>{r.l}</span>
                  <span style={{color:r.c,fontWeight:700,fontSize:r.l.includes('PAGAR')||r.l.includes('FAVOR')?'17px':'13px'}}>{r.v}</span>
                </div>
              ))}
              <div style={{marginTop:'10px',fontSize:'11px',color:'var(--cream-3)'}}>📅 Vencimiento F29: día 12 del mes siguiente</div>
            </div>
          </div>
        )}
        {tab==='flujo'&&(
          <div>
            <div style={{fontFamily:'Cormorant Garamond,serif',fontSize:'20px',fontWeight:600,color:'var(--cream)',marginBottom:'14px'}}>Flujo de Caja — {mes}</div>
            <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:'9px'}}>
              {[{l:'Ingresos',v:clp(totalIngresos),c:'#27ae60'},{l:'Egresos',v:clp(totalGastos),c:'#c0392b'},{l:'Resultado',v:clp(utilidad),c:utilidad>=0?'var(--gold)':'#c0392b'}].map(k=>(
                <div key={k.l} style={S.kpiCard}><div style={{color:k.c,fontWeight:700,fontSize:'18px'}}>{k.v}</div><div style={{color:'var(--cream-3)',fontSize:'10px',marginTop:'3px'}}>{k.l}</div></div>
              ))}
            </div>
            {totalIngresos===0&&totalGastos===0&&<div style={{textAlign:'center',padding:'36px',color:'var(--cream-3)'}}><div style={{fontSize:'28px',marginBottom:'8px'}}>📈</div>Registra ventas y gastos para ver el flujo.</div>}
          </div>
        )}
      </div>

      {modalGasto&&(
        <div style={posStyles.overlay} onClick={e=>e.target===e.currentTarget&&setModalGasto(false)}>
          <div style={{...posStyles.modalBox,maxWidth:'410px'}}>
            <div style={{...posStyles.modalHeader,marginBottom:'12px'}}>
              <span style={{fontFamily:'Cormorant Garamond,serif',fontSize:'20px',fontWeight:600}}>Registrar Gasto</span>
              <button onClick={()=>setModalGasto(false)} style={posStyles.clearBtn}>✕</button>
            </div>
            <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:'8px'}}>
              <div><div style={{fontSize:'11px',color:'var(--cream-3)',marginBottom:'3px'}}>Fecha</div><input type="date" style={calcStyles.input} value={nuevoGasto.fecha} onChange={e=>setNuevoGasto(n=>({...n,fecha:e.target.value}))}/></div>
              <div><div style={{fontSize:'11px',color:'var(--cream-3)',marginBottom:'3px'}}>Monto (CLP)</div><input type="number" style={calcStyles.input} value={nuevoGasto.monto} onChange={e=>setNuevoGasto(n=>({...n,monto:parseInt(e.target.value)||0}))}/></div>
              <div><div style={{fontSize:'11px',color:'var(--cream-3)',marginBottom:'3px'}}>Categoría</div>
                <select style={{...invStyles2.select,width:'100%'}} value={nuevoGasto.categoria} onChange={e=>setNuevoGasto(n=>({...n,categoria:e.target.value}))}>
                  {CATS.map(c=><option key={c}>{c}</option>)}</select></div>
              <div><div style={{fontSize:'11px',color:'var(--cream-3)',marginBottom:'3px'}}>Documento</div>
                <select style={{...invStyles2.select,width:'100%'}} value={nuevoGasto.doc} onChange={e=>setNuevoGasto(n=>({...n,doc:e.target.value}))}>
                  {DOCS.map(d=><option key={d}>{d}</option>)}</select></div>
              <div style={{gridColumn:'1/-1'}}><div style={{fontSize:'11px',color:'var(--cream-3)',marginBottom:'3px'}}>Descripción</div><input style={calcStyles.input} placeholder="¿Qué se pagó?" value={nuevoGasto.descripcion} onChange={e=>setNuevoGasto(n=>({...n,descripcion:e.target.value}))}/></div>
              <div style={{gridColumn:'1/-1'}}><div style={{fontSize:'11px',color:'var(--cream-3)',marginBottom:'3px'}}>Proveedor</div><input style={calcStyles.input} placeholder="Nombre proveedor" value={nuevoGasto.proveedor} onChange={e=>setNuevoGasto(n=>({...n,proveedor:e.target.value}))}/></div>
            </div>
            <button onClick={agregarGasto} style={{...posStyles.cobrarBtn,width:'100%',marginTop:'12px'}}>✦ Registrar</button>
          </div>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { Contabilidad });