/* Santos OS — Almacén (inventory across branches) */
function Almacen({ onToast }) {
  const T = window.T;
  const [tab, setTab] = React.useState('inventario');
  const [loc, setLoc] = React.useState('all');
  const [query, setQuery] = React.useState('');
  const tabs = [['inventario','Inventario'],['compras','Compras'],['pedidos','Pedidos'],['narcoticos','* Narcóticos']];
  const locs = [['all','Todos'],['copan','Fcia. Copán'],['jordan','El Jordán'],['rita','Sta. Rita']];

  const stockColor = (q,d)=> q===0?T.danger : d<7?T.danger : d<14?T.warning : T.success;
  const stockBg = (q,d)=> q===0?T.dangerLight : d<7?T.dangerLight : d<14?T.warningLight : T.successLight;
  const expiryDot = {critical:T.danger, near:T.warning, normal:T.success};

  const list = window.PRODUCTS.filter(p=> !query || p.nombre.toLowerCase().includes(query.toLowerCase()) || p.sku.includes(query) || p.lab.toLowerCase().includes(query.toLowerCase()));

  return (
    <div style={{flex:1, display:'flex', flexDirection:'column', overflow:'hidden', background:T.bg}}>
      <div style={{background:T.primary, paddingTop:52, paddingBottom:14, padding:'52px 16px 14px'}}>
        <window.Wordmark size={20} sub="ALMACÉN" />
      </div>
      <div style={{background:T.bg, borderRadius:'24px 24px 0 0', marginTop:-12, flex:1, display:'flex', flexDirection:'column', overflow:'hidden'}}>
        {/* main tabs */}
        <div style={{display:'flex', gap:6, padding:'14px 16px 0', overflowX:'auto'}}>
          {tabs.map(([k,l])=>(
            <button key={k} onClick={()=>setTab(k)} style={{flexShrink:0, padding:'9px 13px', borderRadius:10, border:'none', background:tab===k?T.primary:T.surface, color:tab===k?'#fff':T.fg2, fontSize:12.5, fontWeight:700, cursor:'pointer', fontFamily:T.font, boxShadow:tab===k?'none':`inset 0 0 0 1px ${T.border}`}}>{l}</button>
          ))}
        </div>

        {tab==='inventario' && <>
          <div style={{display:'flex', alignItems:'center', gap:9, background:T.surface, border:`1px solid ${T.border}`, borderRadius:12, padding:'11px 13px', margin:'14px 16px 10px'}}>
            <span style={{fontSize:15}}>⌕</span>
            <input value={query} onChange={e=>setQuery(e.target.value)} placeholder="Producto, SKU o laboratorio…" style={{flex:1, border:'none', outline:'none', background:'transparent', fontSize:14, color:T.fg1, fontFamily:T.font}} />
            <span style={{fontSize:18, cursor:'pointer'}} onClick={()=>onToast('▣ Escáner de código de barras')}>▣</span>
          </div>
          <div style={{display:'flex', gap:8, padding:'0 16px 12px', overflowX:'auto'}}>
            {locs.map(([k,l])=>(
              <button key={k} onClick={()=>setLoc(k)} style={{flexShrink:0, padding:'6px 12px', borderRadius:20, border:`1px solid ${loc===k?T.primary:T.border}`, background:loc===k?T.primary:T.surface, color:loc===k?'#fff':T.fg2, fontSize:12, fontWeight:600, cursor:'pointer', fontFamily:T.font}}>{l}</button>
            ))}
          </div>
          <div style={{flex:1, overflowY:'auto', padding:'0 16px 24px'}}>
            {list.map(p=>{
              const cells = loc==='all' ? [['Copán',p.copan],['Jordán',p.jordan],['S.Rita',p.rita]] : [[locs.find(l=>l[0]===loc)[1], p[loc==='rita'?'rita':loc]]];
              return (
                <div key={p.sku} style={{background:T.surface, borderRadius:14, padding:14, marginBottom:10, boxShadow:'0 2px 8px rgba(8,54,47,0.07)'}}>
                  <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-start', marginBottom:10}}>
                    <div style={{flex:1}}>
                      <div style={{display:'flex', alignItems:'center', gap:7}}>
                        <span style={{width:8, height:8, borderRadius:4, background:expiryDot[p.expiry]}}></span>
                        <span style={{fontSize:14, fontWeight:700, color:T.fg1}}>{p.nombre}</span>
                      </div>
                      <div style={{fontSize:11, color:T.fg3, marginTop:2, fontFamily:T.mono}}>SKU {p.sku} · {p.lab} · {p.cat}</div>
                    </div>
                  </div>
                  <div style={{display:'flex', gap:8}}>
                    {cells.map(([name,v])=>(
                      <div key={name} style={{flex:1, background:stockBg(v.q,v.d), borderRadius:10, padding:'8px 10px', textAlign:'center'}}>
                        <div style={{fontSize:16, fontWeight:800, color:stockColor(v.q,v.d), fontFamily:T.mono}}>{v.q}</div>
                        <div style={{fontSize:10, color:T.fg2, marginTop:1}}>{name}</div>
                        <div style={{fontSize:10, color:stockColor(v.q,v.d), fontWeight:700, marginTop:2}}>{v.q===0?'Sin stock':`~${v.d}d`}</div>
                      </div>
                    ))}
                  </div>
                </div>
              );
            })}
          </div>
        </>}

        {tab==='compras' && (
          <div style={{flex:1, overflowY:'auto', padding:16}}>
            <div style={{background:T.surface, borderRadius:14, padding:16, boxShadow:'0 2px 8px rgba(8,54,47,0.07)', marginBottom:12}}>
              <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:10}}>
                <span style={{fontSize:14, fontWeight:700, color:T.fg1}}>PO-2026-0182</span>
                <window.Pill color={T.warning} bg={T.warningLight}>En tránsito</window.Pill>
              </div>
              <div style={{fontSize:12, color:T.fg2, marginBottom:4}}>Proveedor: Droguería Bonima · CEDI → Copán Ruinas</div>
              <div style={{fontSize:11, color:T.fg3, fontFamily:T.mono}}>14 SKUs · L. 18,420 · ETA 2 días</div>
            </div>
            <div style={{background:T.surface, borderRadius:14, padding:16, boxShadow:'0 2px 8px rgba(8,54,47,0.07)'}}>
              <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:10}}>
                <span style={{fontSize:14, fontWeight:700, color:T.fg1}}>PO-2026-0181</span>
                <window.Pill color={T.success} bg={T.successLight}>Recibido</window.Pill>
              </div>
              <div style={{fontSize:12, color:T.fg2, marginBottom:4}}>Proveedor: Lafage · entrega directa</div>
              <div style={{fontSize:11, color:T.fg3, fontFamily:T.mono}}>8 SKUs · L. 9,640 · recibido ayer</div>
            </div>
          </div>
        )}

        {tab==='pedidos' && (
          <div style={{flex:1, overflowY:'auto', padding:16}}>
            <div style={{background:T.surface, borderRadius:14, padding:16, boxShadow:'0 2px 8px rgba(8,54,47,0.07)', marginBottom:12}}>
              <div style={{fontSize:13, fontWeight:700, color:T.fg1, marginBottom:6}}>Traslado interno · Jordán → Copán</div>
              <div style={{fontSize:12, color:T.fg2}}>Metformina 850mg x10 · Ibuprofeno 400mg x12</div>
              <div style={{display:'flex', gap:8, marginTop:12}}>
                <window.Btn variant="outline" style={{flex:1, padding:'9px'}} onClick={()=>onToast('Traslado rechazado')}>Rechazar</window.Btn>
                <window.Btn variant="primary" style={{flex:1, padding:'9px'}} onClick={()=>onToast('✓ Traslado confirmado')}>Confirmar envío</window.Btn>
              </div>
            </div>
          </div>
        )}

        {tab==='narcoticos' && (
          <div style={{flex:1, overflowY:'auto', padding:16}}>
            <div style={{background:T.dangerLight, border:`1px solid ${T.danger}40`, borderRadius:12, padding:14, marginBottom:14}}>
              <div style={{fontSize:13, fontWeight:700, color:T.danger, marginBottom:3}}>* Acceso restringido — Regente</div>
              <div style={{fontSize:12, color:'#7F1D1D', lineHeight:1.45}}>Libro de control de sustancias controladas (ARSA). Cada entrada queda registrada con responsable y receta.</div>
            </div>
            {[['Tramadol 50mg','Receta #R-4421 · Dr. Ramírez','-3 unid','2026-05-30'],['Clonazepam 2mg','Receta #R-4419 · Dra. Fuentes','-1 unid','2026-05-29']].map(([m,r,q,d])=>(
              <div key={m} style={{background:T.surface, borderRadius:12, padding:14, marginBottom:10, boxShadow:'0 2px 8px rgba(8,54,47,0.07)', borderLeft:`3px solid ${T.terracota}`}}>
                <div style={{display:'flex', justifyContent:'space-between'}}><span style={{fontSize:13, fontWeight:700, color:T.fg1}}>{m}</span><span style={{fontSize:13, fontWeight:800, color:T.danger, fontFamily:T.mono}}>{q}</span></div>
                <div style={{fontSize:11, color:T.fg3, marginTop:3}}>{r} · {d}</div>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}
window.Almacen = Almacen;