// screens/Inventaire.jsx — multi-warehouse stock, movements, alerts.

function Inventaire() {
  const [activeWh, setActiveWh] = React.useState('Tous');
  const moves = activeWh === 'Tous' ? STOCK_MOVES : STOCK_MOVES.filter(m=>m.warehouse.includes(activeWh));
  const products = activeWh === 'Tous' ? PRODUCTS : PRODUCTS.filter(p=>p.warehouse===activeWh);

  return (
    <div className="page">
      <div className="page-header">
        <div>
          <h1>Inventaire</h1>
          <div className="sub">Gestion de stock en temps réel · 4 entrepôts · {fmtNumber(WAREHOUSES.reduce((s,w)=>s+w.items,0))} unités</div>
        </div>
        <div className="spacer"></div>
        <button className="btn btn-ghost"><i data-lucide="download" style={{width:14,height:14}}></i> Export inventaire</button>
        <button className="btn btn-ghost"><i data-lucide="arrow-right-left" style={{width:14,height:14}}></i> Transférer</button>
        <button className="btn btn-warm"><i data-lucide="package-plus" style={{width:14,height:14}}></i> Mouvement</button>
      </div>

      {/* Warehouses */}
      <div style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:14 }}>
        {WAREHOUSES.map(w => {
          const fill = (w.items/w.capacity)*100;
          const active = activeWh === w.city;
          return (
            <button key={w.code} onClick={()=>setActiveWh(active?'Tous':w.city)}
              className="lift"
              style={{
                textAlign:'left', padding:18, borderRadius:12,
                background:'var(--app-surface)',
                border:'1px solid '+(active?'var(--app-warm)':'var(--app-border)'),
                boxShadow: active ? '0 0 0 3px var(--app-warm-soft)' : '0 3px 4px rgba(0,0,0,.03)',
              }}>
              <div style={{ display:'flex', alignItems:'flex-start', justifyContent:'space-between', marginBottom:14 }}>
                <div>
                  <div style={{ display:'flex', alignItems:'center', gap:8 }}>
                    <i data-lucide="map-pin" style={{ width:14, height:14, color:'#C2410C' }}></i>
                    <span style={{ font:'700 14px/1 var(--m-font-sans)', color:'var(--app-text)' }}>{w.city}</span>
                  </div>
                  <div style={{ font:'500 11px/1 var(--m-font-mono)', color:'var(--app-text-3)', marginTop:6 }}>{w.code}</div>
                </div>
                {w.lowStock > 0 && (
                  <span className="pill" style={{ background:'rgba(248,40,90,.10)', color:'#F8285A' }}>
                    <span className="pill-dot" style={{ background:'#F8285A' }}></span>
                    {w.lowStock} alertes
                  </span>
                )}
              </div>
              <div style={{ display:'flex', alignItems:'baseline', gap:6, marginBottom:10 }}>
                <span style={{ font:'700 22px/1 var(--m-font-sans)', color:'var(--app-text)', letterSpacing:'-.02em' }}>{fmtNumber(w.items)}</span>
                <span style={{ font:'500 11px/1 var(--m-font-sans)', color:'var(--app-text-3)' }}>/ {fmtNumber(w.capacity)} unités</span>
              </div>
              <div style={{ width:'100%', height:6, background:'var(--app-border)', borderRadius:99, overflow:'hidden' }}>
                <div style={{
                  width:`${fill}%`, height:'100%',
                  background: fill>85?'#F8285A': fill>70?'#FFA800':'#19C781'
                }}></div>
              </div>
              <div style={{ display:'flex', alignItems:'center', gap:6, marginTop:12, font:'500 11px/1 var(--m-font-sans)', color:'var(--app-text-3)' }}>
                <i data-lucide="user" style={{ width:11, height:11 }}></i>{w.manager}
              </div>
            </button>
          );
        })}
      </div>

      {/* Stock products */}
      <Widget title={`État du stock ${activeWh!=='Tous'?`· ${activeWh}`:''}`}
        action={
          <div style={{ display:'flex', gap:8 }}>
            {activeWh !== 'Tous' && (
              <button className="btn btn-ghost" onClick={()=>setActiveWh('Tous')}><i data-lucide="x" style={{width:12,height:12}}></i> {activeWh}</button>
            )}
            <button className="btn btn-soft" style={{ height:30, padding:'0 12px' }}>Tous</button>
            <button className="btn btn-ghost" style={{ height:30, padding:'0 12px' }}>Stock bas</button>
            <button className="btn btn-ghost" style={{ height:30, padding:'0 12px' }}>Rupture</button>
          </div>
        }>
        <table className="m-table">
          <thead><tr>
            <th>Produit</th><th>SKU</th><th>Catégorie</th><th>Entrepôt</th><th>Stock</th><th>Statut</th><th></th>
          </tr></thead>
          <tbody>
            {products.map(p => (
              <tr key={p.id}>
                <td style={{ color:'var(--app-text)', fontWeight:700 }}>{p.name}</td>
                <td style={{ font:'500 12px/1 var(--m-font-mono)', color:'var(--app-text-3)' }}>{p.sku}</td>
                <td>{p.cat}</td>
                <td>
                  <span style={{ display:'inline-flex', alignItems:'center', gap:6 }}>
                    <i data-lucide="warehouse" style={{ width:12, height:12, color:'var(--app-text-4)' }}></i>{p.warehouse}
                  </span>
                </td>
                <td style={{ width:200 }}>
                  <div style={{ display:'flex', alignItems:'center', gap:10 }}>
                    <div style={{ width:120, height:6, background:'var(--app-border)', borderRadius:99 }}>
                      <div style={{
                        width: `${Math.min(100, (p.stock/100)*100)}%`, height:'100%', borderRadius:99,
                        background: p.stock===0?'#F8285A': p.stock<30?'#FFA800':'#19C781'
                      }}></div>
                    </div>
                    <span style={{ font:'700 12px/1 var(--m-font-sans)', color:'var(--app-text)' }}>{p.stock>=999?'∞':p.stock}</span>
                  </div>
                </td>
                <td><StatusBadge status={p.status} /></td>
                <td style={{ textAlign:'right' }}>
                  <button className="btn btn-ghost btn-icon" style={{ height:30, width:30 }}><i data-lucide="more-horizontal" style={{width:14,height:14}}></i></button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </Widget>

      {/* Movements */}
      <Widget title="Entrées / Sorties récentes"
        action={<a href="#" style={{ font:'700 13px/1 var(--m-font-sans)', color:'var(--app-primary)' }}>Historique complet</a>}>
        <table className="m-table">
          <thead><tr>
            <th>Référence</th><th>Type</th><th>Produit</th><th>Quantité</th><th>Entrepôt</th><th>Date</th><th>Utilisateur</th>
          </tr></thead>
          <tbody>
            {moves.map(m => (
              <tr key={m.ref}>
                <td style={{ font:'500 12px/1 var(--m-font-mono)', color:'var(--app-text-2)' }}>{m.ref}</td>
                <td><StatusBadge status={m.kind} /></td>
                <td style={{ color:'var(--app-text)', fontWeight:600 }}>{m.product}</td>
                <td style={{ color: m.kind==='Sortie'?'#F8285A': m.kind==='Entrée'?'#19C781':'var(--app-text)', fontWeight:700 }}>
                  {m.kind==='Sortie'?'−':m.kind==='Entrée'?'+':'⇄'} {m.qty}
                </td>
                <td>{m.warehouse}</td>
                <td>{m.date}</td>
                <td>{m.user}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </Widget>

      {/* Alerts */}
      <Widget title="Alertes de rupture & stock bas">
        <div style={{ display:'grid', gridTemplateColumns:'repeat(2, 1fr)', gap:12 }}>
          {PRODUCTS.filter(p=>p.status==='Rupture' || p.status==='Stock bas').map(p => (
            <div key={p.id} style={{
              display:'flex', alignItems:'center', gap:14, padding:14,
              border:'1px solid '+(p.status==='Rupture'?'rgba(248,40,90,.3)':'rgba(255,168,0,.3)'),
              background: p.status==='Rupture'?'rgba(248,40,90,.04)':'rgba(255,168,0,.04)',
              borderRadius:10
            }}>
              <div style={{
                width:40, height:40, borderRadius:10, display:'grid', placeItems:'center',
                background: p.status==='Rupture'?'#F8285A':'#FFA800', color:'#fff'
              }}>
                <i data-lucide={p.status==='Rupture'?'package-x':'alert-triangle'} style={{ width:18, height:18 }}></i>
              </div>
              <div style={{ flex:1, minWidth:0 }}>
                <div style={{ font:'700 13px/1.2 var(--m-font-sans)', color:'var(--app-text)' }}>{p.name}</div>
                <div style={{ font:'500 11px/1.4 var(--m-font-sans)', color:'var(--app-text-3)', marginTop:4 }}>
                  {p.warehouse} · Stock actuel : {p.stock} unités
                </div>
              </div>
              <button className="btn btn-warm" style={{ height:30, padding:'0 12px', font:'600 11px/1 var(--m-font-sans)' }}>Réapprovisionner</button>
            </div>
          ))}
        </div>
      </Widget>
    </div>
  );
}

Object.assign(window, { Inventaire });