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

  const [tab, setTab]       = React.useState('liste');
  const [search, setSearch] = React.useState('');
  const [editProd, setEditProd] = React.useState(null);
  const [form, setForm] = React.useState({ barcode:'', name:'', cat:'Alimentation', price:'', tva:'A', stock:0, seuil:10 });

  const cats = [
    tr('cat_alimentation')||'Alimentation',
    tr('cat_boisson')||'Boisson',
    tr('cat_hygiene')||'Hygiène',
    tr('cat_menage')||'Ménage',
    'Textile','Électronique','Cosmétique',
    tr('cat_autre')||'Autre',
  ];

  const filtered = catalog.filter(p =>
    !search || p.name.toLowerCase().includes(search.toLowerCase()) || p.barcode.includes(search)
  );

  function resetForm() {
    setForm({ barcode:'', name:'', cat:'Alimentation', price:'', tva:'A', stock:0, seuil:10 });
    setEditProd(null);
  }

  function editProduct(p) {
    setForm({ barcode:p.barcode, name:p.name, cat:p.cat||'Alimentation', price:p.price, tva:p.tva||'A', stock:p.stock||0, seuil:p.seuil||10 });
    setEditProd(p);
    setTab('ajouter');
  }

  function saveProduct() {
    if (!form.name || !form.barcode || !form.price) { notify(tr('champs_obligatoires')||'Champs obligatoires', 'err'); return; }
    const price = parseFloat(form.price);
    if (isNaN(price) || price <= 0) { notify('Prix invalide', 'err'); return; }

    const bid = localStorage.getItem('pos_boutique_id');

    if (editProd) {
      dispatch({ type:'UPDATE_PRODUCT', payload:{ id:editProd.id, data:{ ...form, price } } });
      if (bid && window.SupaBase) window.SupaBase.saveProduit(bid, {...editProd,...form,price}).catch(()=>{});
      notify('✅ '+tr('produit_modifie')||'Produit modifié');
    } else {
      if (catalog.find(p=>p.barcode===form.barcode)) { notify('Code-barres déjà utilisé', 'err'); return; }
      const newProd = { id:'p_'+Date.now(), ...form, price };
      dispatch({ type:'ADD_PRODUCT', payload:newProd });
      if (bid && window.SupaBase) window.SupaBase.saveProduit(bid, newProd).catch(()=>{});
      notify('✅ '+tr('produit_ajoute')||'Produit ajouté');
    }
    resetForm();
    setTab('liste');
  }

  function deleteProduct(p) {
    if (!window.confirm(tr('confirm_supprimer')||'Supprimer ce produit ?')) return;
    dispatch({ type:'DELETE_PRODUCT', payload:p.id });
    if (p.supabase_id && window.SupaBase) window.SupaBase.deleteProduit(p.supabase_id).catch(()=>{});
    notify(tr('produit_supprime')||'Produit supprimé', 'err');
  }

  return (
    <div className="screen" style={{background:'#f0f4f8'}}>
      <div style={{flex:1,overflowY:'auto',padding:18}}>

        {/* Tabs */}
        <div style={{display:'flex',gap:4,marginBottom:18,background:'#fff',borderRadius:'12px 12px 0 0',padding:'0 8px',boxShadow:'0 1px 4px #0000000a',borderBottom:'2px solid #e2e8f0',alignItems:'center'}}>
          <div className={`tab${tab==='liste'?' active':''}`} onClick={()=>{setTab('liste');resetForm();}}>
            📦 {tr('produits_onglet')||'PRODUITS'}
          </div>
          <div className={`tab${tab==='ajouter'?' active':''}`} onClick={()=>{setTab('ajouter');resetForm();}}>
            + {editProd ? (tr('modifier')||'MODIFIER') : (tr('ajouter_produit')||'AJOUTER')}
          </div>
          <div style={{marginLeft:'auto',fontSize:12,color:'#94a3b8',padding:'0 8px'}}>
            {catalog.length} {tr('produits_label')||'produits'}
          </div>
          <button className="btn-primary btn-sm" onClick={()=>{setTab('ajouter');resetForm();}}>
            + {tr('nouveau')||'Nouveau'}
          </button>
        </div>

        {/* Liste */}
        {tab === 'liste' && (
          <div className="card">
            <input value={search} onChange={e=>setSearch(e.target.value)}
              placeholder={tr('rechercher_prod')||'Rechercher par nom ou code-barres...'}
              style={{marginBottom:14}}/>

            {filtered.length === 0 ? (
              <div style={{textAlign:'center',color:'#94a3b8',padding:'30px 0'}}>
                <div style={{fontSize:40,marginBottom:10}}>📦</div>
                {tr('aucun_produit')||'Aucun produit'}
              </div>
            ) : filtered.map(p => {
              const tv = TVA_RATES.find(r=>r.key===p.tva);
              return (
                <div key={p.id} style={{display:'flex',alignItems:'center',gap:14,padding:'12px 16px',borderRadius:11,marginBottom:8,background:'#f8fafc',border:'1.5px solid #e2e8f0'}}>
                  <div style={{flexShrink:0}}>
                    <Barcode value={p.barcode} width={80} height={30} showText={false}/>
                    <div style={{fontFamily:"'DM Mono',monospace",fontSize:8,color:'#94a3b8',textAlign:'center',marginTop:2}}>{p.barcode}</div>
                  </div>
                  <div style={{flex:1,minWidth:0}}>
                    <div style={{fontSize:13,color:'#1e293b',fontWeight:700,marginBottom:3}}>{p.name}</div>
                    <div style={{display:'flex',gap:8,alignItems:'center',flexWrap:'wrap'}}>
                      <span className="badge" style={{background:(tv?.color||'#888')+'18',borderColor:(tv?.color||'#888')+'44',color:tv?.color||'#888'}}>{p.tva} {tv?.rate}%</span>
                      <span style={{fontSize:11,color:'#94a3b8'}}>{p.cat}</span>
                      <span style={{fontSize:11,color:'#64748b',fontWeight:600}}>{tr('stock_label')||'Stock:'} {p.stock}</span>
                    </div>
                  </div>
                  <div style={{fontFamily:"'DM Mono',monospace",fontSize:15,color:'#2563eb',fontWeight:700,flexShrink:0}}>
                    {fmtN(p.price,currency)}
                  </div>
                  <div style={{display:'flex',gap:6,flexShrink:0}}>
                    <button className="btn-ghost btn-sm" onClick={()=>editProduct(p)}>✏️</button>
                    <button className="btn-danger btn-sm" onClick={()=>deleteProduct(p)}>✕</button>
                  </div>
                </div>
              );
            })}
          </div>
        )}

        {/* Formulaire */}
        {tab === 'ajouter' && (
          <div className="card" style={{maxWidth:560}}>
            <div className="stitle">{editProd ? (tr('modifier_produit')||'Modifier le produit') : (tr('nouveau_produit')||'Nouveau produit')}</div>

            <label>{tr('code_barres')||'Code-barres'} *</label>
            <input value={form.barcode} onChange={e=>setForm({...form,barcode:e.target.value})}
              placeholder="Ex: 6414102000000" style={{fontFamily:"'DM Mono',monospace"}}/>

            <label>{tr('nom_produit')||'Nom du produit'} *</label>
            <input value={form.name} onChange={e=>setForm({...form,name:e.target.value})} placeholder="Ex: COCA-COLA 1.5L"/>

            <div className="grid-2">
              <div>
                <label>{tr('categorie')||'Catégorie'}</label>
                <select value={form.cat} onChange={e=>setForm({...form,cat:e.target.value})}>
                  {cats.map(c=><option key={c}>{c}</option>)}
                </select>
              </div>
              <div>
                <label>TVA</label>
                <select value={form.tva} onChange={e=>setForm({...form,tva:e.target.value})}>
                  {TVA_RATES.map(r=><option key={r.key} value={r.key}>{r.key} — {r.rate}% — {r.label}</option>)}
                </select>
              </div>
            </div>

            <label>{tr('prix_ttc')||'Prix TTC'} ({currency.symbol}) *</label>
            <input type="number" value={form.price} onChange={e=>setForm({...form,price:e.target.value})}
              placeholder="Ex: 500" style={{fontFamily:"'DM Mono',monospace",fontSize:18,fontWeight:700}}/>

            <div className="grid-2">
              <div>
                <label>{tr('stock_initial')||'Stock initial'}</label>
                <input type="number" value={form.stock} onChange={e=>setForm({...form,stock:parseInt(e.target.value)||0})}/>
              </div>
              <div>
                <label>{tr('seuil_alerte')||'Seuil alerte'}</label>
                <input type="number" value={form.seuil} onChange={e=>setForm({...form,seuil:parseInt(e.target.value)||10})}/>
              </div>
            </div>

            <div style={{display:'flex',gap:10,marginTop:8}}>
              <button className="btn-primary" style={{flex:1,padding:'12px'}} onClick={saveProduct}>
                ✅ {tr('enregistrer')||'Enregistrer'}
              </button>
              <button className="btn-ghost" style={{padding:'12px 20px'}} onClick={()=>{setTab('liste');resetForm();}}>
                {tr('annuler_btn')||'Annuler'}
              </button>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}