function StockScreen() {
  const { state, dispatch, notify } = useStore();
  const { catalog, currency } = state;
  const tr = (key) => typeof t !== 'undefined' ? t(key) : key;

  const [filter, setFilter]     = React.useState('all');
  const [search, setSearch]     = React.useState('');
  const [selected, setSelected] = React.useState(null);
  const [form, setForm]         = React.useState({ type:'entree', qte:1, note:'' });
  const [mouvements, setMouvements] = React.useState(() => {
    try { return JSON.parse(localStorage.getItem('pos_mouvements') || '[]'); }
    catch(e) { return []; }
  });

  const ruptures   = catalog.filter(p => p.stock === 0);
  const alertes    = catalog.filter(p => p.stock > 0 && p.stock <= (p.seuil||10));
  const ok         = catalog.filter(p => p.stock > (p.seuil||10));
  const valeurStock = catalog.reduce((s,p) => s + (p.stock||0) * (p.price||0), 0);

  const filtered = catalog.filter(p => {
    const matchSearch = !search || p.name.toLowerCase().includes(search.toLowerCase()) || p.barcode.includes(search);
    const matchFilter = filter==='all' || (filter==='rupture'&&p.stock===0) || (filter==='alerte'&&p.stock>0&&p.stock<=(p.seuil||10)) || (filter==='ok'&&p.stock>(p.seuil||10));
    return matchSearch && matchFilter;
  });

  function getStatut(p) {
    if (p.stock === 0) return { label:tr('rupture')||'Rupture', color:'#dc2626', bg:'#fff1f2' };
    if (p.stock <= (p.seuil||10)) return { label:tr('alerte')||'Alerte', color:'#f59e0b', bg:'#fffbf0' };
    return { label:'OK', color:'#16a34a', bg:'#f0fdf4' };
  }

  function appliquerMouvement() {
    if (!selected) return;
    const qte  = parseInt(form.qte) || 0;
    if (qte <= 0) { notify('Quantité invalide', 'err'); return; }
    const avant = selected.stock || 0;
    let apres   = avant;
    if (form.type === 'entree')      apres = avant + qte;
    else if (form.type === 'sortie') apres = Math.max(0, avant - qte);
    else                              apres = qte;

    dispatch({ type:'UPDATE_PRODUCT', payload:{ id:selected.id, data:{ stock:apres } } });

    const mouv = { id:'m'+Date.now(), produit:selected.name, produitId:selected.supabase_id||selected.id, type:form.type, qte, note:form.note, stockAvant:avant, stockApres:apres, date:new Date().toLocaleDateString('fr-FR'), heure:new Date().toLocaleTimeString('fr-FR',{hour:'2-digit',minute:'2-digit'}) };
    const list = [mouv, ...mouvements].slice(0, 200);
    setMouvements(list);
    localStorage.setItem('pos_mouvements', JSON.stringify(list));

    const bid = localStorage.getItem('pos_boutique_id');
    if (bid && window.SupaBase) window.SupaBase.saveMouvement(bid, mouv).catch(()=>{});
    if (selected.supabase_id) window.SupaBase?.saveProduit(bid, {...selected, stock:apres}).catch(()=>{});

    notify(`✅ ${selected.name} : ${avant} → ${apres}`);
    setSelected(null);
    setForm({ type:'entree', qte:1, note:'' });
  }

  return (
    <div className="screen" style={{background:'#f0f4f8'}}>
      <div style={{flex:1, display:'grid', gridTemplateColumns: selected ? '1fr 380px' : '1fr', overflow:'hidden', minHeight:0}}>

        {/* GAUCHE */}
        <div style={{display:'flex',flexDirection:'column',overflow:'hidden'}}>
          <div style={{flex:1,overflowY:'auto',padding:18}}>

            {/* KPIs */}
            <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:14,marginBottom:18}}>
              {[
                {label:tr('ruptures')||'RUPTURES',     val:ruptures.length,   color:'#dc2626', icon:'✗'},
                {label:tr('stock_faible')||'FAIBLE',   val:alertes.length,    color:'#f59e0b', icon:'⚠'},
                {label:tr('stock_ok')||'STOCK OK',     val:ok.length,         color:'#16a34a', icon:'✓'},
                {label:tr('valeur_stock')||'VALEUR',   val:fmtN(valeurStock,currency), color:'#2563eb', icon:'💰'},
              ].map((k,i) => (
                <div key={i} style={{background:'#fff',borderRadius:13,padding:16,borderTop:'4px solid '+k.color,boxShadow:'0 1px 4px #0000000a'}}>
                  <div style={{fontSize:10,color:'#94a3b8',fontWeight:700,textTransform:'uppercase',letterSpacing:.8,marginBottom:8}}>{k.label}</div>
                  <div style={{fontFamily:"'Playfair Display',serif",fontSize:22,color:k.color,fontWeight:700}}>{k.val}</div>
                </div>
              ))}
            </div>

            {/* Filtres */}
            <div style={{display:'flex',gap:10,marginBottom:14,flexWrap:'wrap'}}>
              <input value={search} onChange={e=>setSearch(e.target.value)}
                placeholder={tr('rechercher_produit')||'Rechercher un produit...'}
                style={{flex:1,minWidth:200}}/>
              {[['all',tr('tous')||'Tous'],['alerte','⚠ '+( tr('alerte')||'Alerte')],['rupture','✗ '+(tr('rupture')||'Rupture')],['ok','✓ OK']].map(([v,l])=>(
                <button key={v} onClick={()=>setFilter(v)}
                  className={filter===v?'btn-primary btn-sm':'btn-ghost btn-sm'}>
                  {l}
                </button>
              ))}
            </div>

            {/* Table */}
            <div className="card" style={{padding:0,overflow:'hidden'}}>
              <div style={{display:'grid',gridTemplateColumns:'1fr 80px 100px 80px 100px',gap:10,padding:'10px 16px',background:'#f8fafc',fontSize:10,fontWeight:700,textTransform:'uppercase',letterSpacing:.8,color:'#94a3b8'}}>
                <span>{tr('produit_col')||'PRODUIT'}</span>
                <span style={{textAlign:'center'}}>{tr('stock_col')||'STOCK'}</span>
                <span style={{textAlign:'center'}}>{tr('seuil_alerte_col')||'SEUIL'}</span>
                <span style={{textAlign:'center'}}>{tr('statut')||'STATUT'}</span>
                <span style={{textAlign:'center'}}>{tr('action')||'ACTION'}</span>
              </div>
              {filtered.length === 0 ? (
                <div style={{textAlign:'center',color:'#94a3b8',padding:'30px 0'}}>{tr('aucun_produit')||'Aucun produit'}</div>
              ) : filtered.map(p => {
                const st = getStatut(p);
                return (
                  <div key={p.id} style={{display:'grid',gridTemplateColumns:'1fr 80px 100px 80px 100px',gap:10,padding:'12px 16px',borderBottom:'1px solid #f1f5f9',alignItems:'center'}}>
                    <div>
                      <div style={{fontSize:13,color:'#1e293b',fontWeight:600}}>{p.name}</div>
                      <div style={{fontFamily:"'DM Mono',monospace",fontSize:10,color:'#94a3b8',marginTop:2}}>{p.barcode} · {fmtN(p.price,currency)}</div>
                    </div>
                    <div style={{fontFamily:"'DM Mono',monospace",fontSize:16,color:st.color,fontWeight:700,textAlign:'center'}}>{p.stock}</div>
                    <div style={{fontFamily:"'DM Mono',monospace",fontSize:13,color:'#94a3b8',textAlign:'center'}}>{p.seuil||10}</div>
                    <div style={{textAlign:'center'}}>
                      <span style={{background:st.bg,color:st.color,borderRadius:6,padding:'3px 8px',fontSize:11,fontWeight:700}}>{st.label}</span>
                    </div>
                    <div style={{textAlign:'center'}}>
                      <button className="btn-primary btn-sm" onClick={()=>{setSelected(p);setForm({type:'entree',qte:1,note:''});}}>
                        ⚙ {tr('gerer')||'Gérer'}
                      </button>
                    </div>
                  </div>
                );
              })}
            </div>

            {/* Mouvements récents */}
            {mouvements.length > 0 && (
              <div className="card" style={{marginTop:18}}>
                <div className="stitle">📋 {tr('mouvements_stock')||'Mouvements de stock'}</div>
                {mouvements.slice(0,10).map((m,i) => (
                  <div key={i} style={{display:'flex',justifyContent:'space-between',alignItems:'center',padding:'8px 0',borderBottom:'1px solid #f1f5f9',fontSize:12}}>
                    <div>
                      <span style={{fontWeight:600,color:'#1e293b'}}>{m.produit}</span>
                      <span style={{color:'#94a3b8',marginLeft:8}}>{m.date} {m.heure}</span>
                    </div>
                    <div style={{display:'flex',gap:8,alignItems:'center'}}>
                      <span style={{color:'#94a3b8',fontSize:11}}>{m.stockAvant} → {m.stockApres}</span>
                      <span style={{background:m.type==='entree'?'#f0fdf4':m.type==='sortie'?'#fff1f2':'#eff6ff',color:m.type==='entree'?'#16a34a':m.type==='sortie'?'#dc2626':'#2563eb',borderRadius:5,padding:'2px 8px',fontSize:10,fontWeight:700}}>
                        {m.type==='entree'?tr('entree'):m.type==='sortie'?tr('sortie'):tr('ajustement')}
                      </span>
                    </div>
                  </div>
                ))}
              </div>
            )}
          </div>
        </div>

        {/* DROITE */}
        {selected && (
          <div style={{background:'#fff',borderLeft:'1px solid #e2e8f0',display:'flex',flexDirection:'column',overflow:'hidden'}}>
            <div style={{padding:'16px',borderBottom:'1px solid #e2e8f0',flexShrink:0}}>
              <div style={{fontFamily:"'Playfair Display',serif",fontSize:16,color:'#1e293b',fontWeight:700,marginBottom:4}}>{selected.name}</div>
              <div style={{fontFamily:"'DM Mono',monospace",fontSize:11,color:'#94a3b8'}}>{selected.barcode}</div>
            </div>
            <div style={{flex:1,overflowY:'auto',padding:16}}>
              <div style={{background:'#f8fafc',borderRadius:12,padding:16,marginBottom:16,textAlign:'center'}}>
                <div style={{fontSize:11,color:'#94a3b8',fontWeight:700,textTransform:'uppercase',marginBottom:8}}>{tr('stock_col')||'STOCK'} {tr('actuel')||'ACTUEL'}</div>
                <div style={{fontFamily:"'Playfair Display',serif",fontSize:42,fontWeight:700,color:getStatut(selected).color}}>{selected.stock}</div>
              </div>
              <div className="card">
                <div className="stitle">{tr('mouvements_stock')||'Mouvement de stock'}</div>
                <div style={{marginBottom:12}}>
                  <label>{tr('type_mouvement')||'Type'}</label>
                  <div style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr',gap:8,marginTop:6}}>
                    {[['entree',tr('entree')||'Entrée','#16a34a'],['sortie',tr('sortie')||'Sortie','#dc2626'],['ajustement',tr('ajustement')||'Ajustement','#2563eb']].map(([v,l,c])=>(
                      <button key={v} onClick={()=>setForm({...form,type:v})}
                        style={{padding:'8px 4px',borderRadius:8,border:'2px solid '+(form.type===v?c:'#e2e8f0'),background:form.type===v?c+'18':'#f8fafc',color:form.type===v?c:'#64748b',fontSize:11,fontWeight:700,cursor:'pointer'}}>
                        {l}
                      </button>
                    ))}
                  </div>
                </div>
                <div style={{marginBottom:12}}>
                  <label>{tr('quantite')||'Quantité'}</label>
                  <input type="number" min="1" value={form.qte} onChange={e=>setForm({...form,qte:e.target.value})}
                    style={{fontFamily:"'DM Mono',monospace",fontSize:20,fontWeight:700,textAlign:'center'}}/>
                </div>
                <div style={{marginBottom:16}}>
                  <label>{tr('note')||'Note'}</label>
                  <input value={form.note} onChange={e=>setForm({...form,note:e.target.value})} placeholder="Optionnel"/>
                </div>
                <div style={{background:'#f8fafc',borderRadius:8,padding:'10px 14px',marginBottom:14,display:'flex',justifyContent:'space-between',fontSize:13}}>
                  <span style={{color:'#64748b'}}>{tr('nouveau_stock')||'Nouveau stock'}</span>
                  <span style={{fontFamily:"'DM Mono',monospace",fontWeight:700,color:'#1e293b'}}>
                    {form.type==='entree'?(selected.stock+parseInt(form.qte||0)):form.type==='sortie'?Math.max(0,selected.stock-parseInt(form.qte||0)):parseInt(form.qte||0)}
                  </span>
                </div>
                <button className="btn-success" style={{width:'100%',padding:'12px'}} onClick={appliquerMouvement}>
                  ✅ {tr('confirmer')||'Confirmer'}
                </button>
                <button className="btn-ghost" style={{width:'100%',padding:'10px',marginTop:8}} onClick={()=>setSelected(null)}>
                  {tr('annuler_btn')||'Annuler'}
                </button>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}