function AdminBundles() {
  const { user } = window.AuthContext.useAuth();
  const toast = window.Toast.useToast();
  const [bundles, setBundles] = React.useState([]);
  const [products, setProducts] = React.useState([]); // catalogue pour sélectionner des produits
  const [categories, setCategories] = React.useState([]);
  const [form, setForm] = React.useState({ name: '', description: '', active: true, discount_type: 'percent', discount_value: 10, discount_value_euros: '10.00', groups: [ { conditions: [] } ] });
  const [editing, setEditing] = React.useState(null);

  async function load() {
    try {
      const res = await window.BundlesAPI.list();
      setBundles(res.items || []);
    } catch {}
    // Charge le catalogue de produits disponibles
    try {
      const pr = await window.ProductsAPI.list({ page: 1, limit: 50 });
      // Inclut aussi les produits sans stock et archivés pour préparer les lots à l'avance
      const items = pr.items || [];
      setProducts(items);
    } catch {}
    try {
      const cr = await window.ProductsAPI.categories();
      setCategories(cr.items || cr.categories || []);
    } catch {}
  }
  React.useEffect(() => { load(); }, []);

  if (!user || user.role !== 'admin') return <div className="container"><p>Accès réservé à l'admin.</p></div>;

  function addGroup() { setForm({ ...form, groups: [...form.groups, { conditions: [] }] }); }
  function removeGroup(i) { setForm({ ...form, groups: form.groups.filter((_, idx)=>idx!==i) }); }
  function addCondition(i) {
    const groups = form.groups.slice();
    groups[i] = { ...groups[i], conditions: [...(groups[i].conditions||[]), { mode: 'product', product_id: null, category: '', min_qty: 1 }] };
    setForm({ ...form, groups });
  }
  function updateCondition(i, j, patch) {
    const groups = form.groups.slice();
    const conds = (groups[i].conditions || []).slice();
    conds[j] = { ...conds[j], ...patch };
    groups[i] = { ...groups[i], conditions: conds };
    setForm({ ...form, groups });
  }
  function removeCondition(i, j) {
    const groups = form.groups.slice();
    const conds = (groups[i].conditions || []).filter((_, idx)=>idx!==j);
    groups[i] = { ...groups[i], conditions: conds };
    setForm({ ...form, groups });
  }

  // Helper: parse "xx.xx" euros string to integer cents
  function eurosToCents(val) {
    let s = String(val ?? '').trim();
    if (!s) return 0;
    s = s.replace(',', '.');
    const n = Number.parseFloat(s);
    if (Number.isNaN(n)) return 0;
    return Math.round(n * 100);
  }

  async function submit(e) {
    e.preventDefault();
    try {
      // Nettoyage: ne garde que les conditions valides (produit OU catégorie défini)
      const cleanedGroups = (form.groups || []).map(g => ({
        conditions: (g.conditions || []).filter(c => (c.mode === 'product' && c.product_id) || (c.mode === 'category' && (c.category||'').trim() !== ''))
      }));
      const payload = {
        name: form.name,
        description: form.description || '',
        active: !!form.active,
        discount_type: form.discount_type,
        discount_value: form.discount_type === 'fixed' ? eurosToCents(form.discount_value_euros) : Number(form.discount_value) || 0,
        groups: cleanedGroups.map(g => ({ conditions: (g.conditions || []).map(c => ({
          product_id: c.mode === 'product' ? (c.product_id || null) : null,
          category: c.mode === 'category' ? (c.category || '').toLowerCase() || null : null,
          min_qty: Number(c.min_qty) || 1,
        })) })),
      };
      if (editing) {
        await window.BundlesAPI.update(editing.id, payload);
        toast.success('Lot mis à jour');
      } else {
        await window.BundlesAPI.create(payload);
        toast.success('Lot créé');
      }
      setForm({ name: '', description: '', active: true, discount_type: 'percent', discount_value: 10, discount_value_euros: '10.00', groups: [ { conditions: [] } ] });
      setEditing(null);
      load();
    } catch (e) {
      toast.error(e?.error?.message || 'Erreur enregistrement');
    }
  }

  async function del(id) {
    if (!confirm('Supprimer ce lot ?')) return;
    try { await window.BundlesAPI.remove(id); toast.success('Lot supprimé'); load(); } catch (e) { toast.error('Suppression impossible'); }
  }

  function edit(b) {
    setEditing(b);
    setForm({
      name: b.name,
      description: b.description || '',
      active: !!b.active,
      discount_type: b.discount_type,
      discount_value: b.discount_type === 'percent' ? b.discount_value : undefined,
      discount_value_euros: b.discount_type === 'fixed' ? (Number(b.discount_value || 0) / 100).toFixed(2) : '10.00',
      groups: (b.groups || []).map(g => ({ conditions: (g.conditions || []).map(c => ({
        mode: c.product_id ? 'product' : 'category',
        product_id: c.product_id || null,
        category: c.category || '',
        min_qty: c.min_qty || 1,
      })) })),
    });
  }

  return (
    <div className="container">
      <h1>Lots (Bundles)</h1>
      <form onSubmit={submit} style={{ display:'grid', gap:8, gridTemplateColumns:'repeat(3, 1fr)' }}>
        <label>Nom<br/><input value={form.name} onChange={e=>setForm({...form, name:e.target.value})} required /></label>
        <label>Description<br/><input value={form.description} onChange={e=>setForm({...form, description:e.target.value})} /></label>
        <label>Actif<br/><input type="checkbox" checked={!!form.active} onChange={e=>setForm({...form, active:e.target.checked})} /></label>
        <label>Type de remise<br/>
          <select value={form.discount_type} onChange={e=>setForm({...form, discount_type:e.target.value})}>
            <option value="percent">Pourcentage</option>
            <option value="fixed">Montant fixe (centimes)</option>
          </select>
        </label>
        {form.discount_type === 'percent' ? (
          <label>Valeur (%)<br/>
            <input type="number" step="0.01" value={form.discount_value} onChange={e=>setForm({...form, discount_value:Number(e.target.value)})} min="0" max="100" />
          </label>
        ) : (
          <label>Montant (euros)<br/>
            <input type="number" step="0.01" min="0" value={form.discount_value_euros}
                   onChange={e=>setForm({...form, discount_value_euros:e.target.value})} placeholder="ex: 10.00" />
          </label>
        )}
        <div style={{ gridColumn: '1 / -1' }}>
          <h3>Groupes (OU)</h3>
          {form.groups.map((g, i) => (
            <div key={i} style={{ border:'1px solid var(--brand-border)', borderRadius:8, padding:8, marginBottom:8 }}>
              <div style={{ display:'flex', justifyContent:'space-between' }}>
                <b>Groupe {i+1} (AND entre conditions)</b>
                <button type="button" onClick={()=>removeGroup(i)}>Retirer</button>
              </div>
              <div>
                {(g.conditions||[]).map((c, j) => (
                  <div key={j} style={{ display:'flex', gap:8, alignItems:'end', marginTop:8 }}>
                    <label>Type de condition<br/>
                      <select value={c.mode || 'product'} onChange={e=>updateCondition(i, j, { mode: e.target.value })}>
                        <option value="product">Produit</option>
                        <option value="category">Catégorie</option>
                      </select>
                    </label>
                    {c.mode === 'category' ? (
                      <label>Catégorie<br/>
                        <select value={c.category || ''} onChange={e=>updateCondition(i, j, { category: e.target.value })}>
                          <option value="">— Sélectionner une catégorie —</option>
                          {categories.map(cat => <option key={cat} value={cat}>{cat}</option>)}
                        </select>
                      </label>
                    ) : (
                      <label>Produit (catalogue)<br/>
                        <select value={c.product_id || ''} onChange={e=>updateCondition(i, j, { product_id: e.target.value ? Number(e.target.value) : null })}>
                          <option value="">— Sélectionner un produit —</option>
                          {products.map(p => {
                            const rupture = (p.stock ?? 0) <= 0;
                            const archived = !!p.archived;
                            const flags = [rupture ? 'RUPTURE' : null, archived ? 'ARCHIVÉ' : null].filter(Boolean).join(' · ');
                            const label = `#${p.id} — ${p.name} (${(p.price_cents/100).toFixed(2)}€)${flags ? ' — ' + flags : ''}`;
                            return (
                              <option key={p.id} value={p.id}>{label}</option>
                            );
                          })}
                        </select>
                      </label>
                    )}
                    <label>Quantité min<br/><input type="number" min="1" value={c.min_qty || 1} onChange={e=>updateCondition(i, j, { min_qty: Number(e.target.value) })} /></label>
                    <button type="button" onClick={()=>removeCondition(i, j)}>Supprimer</button>
                  </div>
                ))}
                <button type="button" onClick={()=>addCondition(i)} style={{ marginTop:8 }}>+ Ajouter une condition</button>
              </div>
            </div>
          ))}
          <button type="button" onClick={addGroup}>+ Ajouter un groupe (OU)</button>
        </div>
        <div style={{ gridColumn: '1 / -1', marginTop:8 }}>
          <button type="submit">{editing ? 'Mettre à jour' : 'Créer'} le lot</button>
          {editing && <button type="button" onClick={()=>{ setEditing(null); setForm({ name: '', description: '', active: true, discount_type: 'percent', discount_value: 10, discount_value_euros: '10.00', groups: [ { conditions: [] } ] }); }} style={{ marginLeft:8 }}>Annuler</button>}
        </div>
      </form>

      <h3>Liste des lots</h3>
      <ul>
        {bundles.map(b => (
          <li key={b.id}>
            <b>#{b.id} {b.name}</b> — {b.discount_type}:{b.discount_value} — {b.active ? 'Actif' : 'Inactif'}
            <button style={{ marginLeft:8 }} onClick={()=>edit(b)}>Éditer</button>
            <button style={{ marginLeft:8 }} onClick={()=>del(b.id)}>Supprimer</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

window.Pages = window.Pages || {};
window.Pages.AdminBundles = AdminBundles;