// =============================================================================
// CARTES & RANGÉES — composants d'affichage spécifiques aux boissons
// =============================================================================

// === DrinkCard (carte de boisson sur l'écran Vente) ===
function DrinkCard({ drink, drinks, photo, inCart, onTap }) {
  const cat = CATEGORIES[drink.category];
  const stock = getEffectiveStock(drink, drinks);
  const isOut = stock !== null && stock <= 0;
  const isLow = stock !== null && stock > 0 && stock <= 5;
  return (
    <button onClick={onTap} className="relative bg-white rounded-2xl border border-stone-200 overflow-hidden flex flex-col text-left hover:shadow-md active:scale-[0.98] transition-all">
      {/* Photo region — full bleed top of card, slightly shorter than square */}
      <div className="relative aspect-[4/3] w-full bg-stone-50">
        {photo ? (
          <img src={photo} alt={drink.name} className="w-full h-full object-cover" loading="lazy" />
        ) : (
          <div className="w-full h-full flex items-center justify-center">
            <Icon name={drink.icon} className="w-12 h-12 text-stone-300" strokeWidth={1.2} />
          </div>
        )}
        {cat && (
          <div className={`absolute top-2 left-2 text-[10px] font-bold uppercase tracking-wider px-2.5 py-1 rounded-full ${cat.bg} ${cat.text} shadow-sm`}>
            {cat.label}
          </div>
        )}
      </div>
      {/* Footer with name + price */}
      <div className="px-3 pt-3 pb-3 flex-1 flex flex-col">
        <div className="font-bold text-stone-900 text-base leading-tight mb-2 line-clamp-2 min-h-[2.4em]">{drink.name}</div>
        <div className="flex items-baseline justify-between gap-2 mt-auto">
          <div className="font-mono text-stone-700 font-semibold text-sm tabular-nums">{formatPrice(drink.price)}</div>
          {stock !== null && (
            <div className={`text-[10px] font-bold tabular-nums shrink-0 ${
              isOut ? 'text-rose-600 line-through' : isLow ? 'text-orange-600' : 'text-stone-400'
            }`}>
              {stock} restants
            </div>
          )}
        </div>
      </div>
      {inCart > 0 && (
        <div className="absolute top-2 right-2 bg-orange-500 text-white font-mono font-bold text-xs w-7 h-7 rounded-full flex items-center justify-center pop-in shadow-md ring-2 ring-white z-10">{inCart}</div>
      )}
    </button>
  );
}

// === CartDrawer (panier en bas avec encaissement) ===
function CartDrawer({ cartItems, cartSubtotal, cartTotal, cartCount, cartOpen, setCartOpen, addToCart, decrementCart, clearCart, completeSale, discount, setDiscount }) {
  const [pendingPayment, setPendingPayment] = useState(null);
  // Si le panier change (ajout/retrait d'item) ou la réduction, on annule la confirmation en cours
  useEffect(() => { setPendingPayment(null); }, [cartTotal]);
  const pendingMethod = pendingPayment ? PAYMENT_BY_ID[pendingPayment] : null;
  const isOfferedPending = pendingPayment === 'offert';
  const hasDiscount = (discount || 0) > 0;
  // Total à afficher selon l'étape : si offert sélectionné → 0, sinon cartTotal (déjà avec remise)
  const displayedTotal = isOfferedPending ? 0 : cartTotal;

  return (
    <div className="fixed bottom-16 left-0 right-0 z-30 px-3 pb-2">
      <div className="max-w-md mx-auto bg-white border border-stone-200 rounded-2xl shadow-xl overflow-hidden">
        <button onClick={() => setCartOpen(!cartOpen)} className="w-full px-4 py-3 flex items-center justify-between gap-3 hover:bg-stone-50">
          <div className="flex items-center gap-3">
            <div className="bg-orange-500 text-white font-mono font-bold text-base w-10 h-10 rounded-full flex items-center justify-center">{cartCount}</div>
            <div className="text-left">
              <div className="text-xs uppercase tracking-widest text-stone-500 leading-none font-semibold flex items-center gap-1.5">
                À encaisser
                {hasDiscount && (
                  <span className="bg-emerald-100 text-emerald-700 text-[10px] font-bold px-1.5 py-0.5 rounded-full">-{Math.round(discount * 100)}%</span>
                )}
              </div>
              <div className="flex items-baseline gap-2 mt-0.5">
                {hasDiscount && (
                  <div className="font-mono text-base text-stone-400 tabular-nums line-through leading-tight">{formatPrice(cartSubtotal)}</div>
                )}
                <div className="font-mono text-2xl font-bold text-stone-900 tabular-nums leading-tight">{formatPrice(cartTotal)}</div>
              </div>
            </div>
          </div>
          <Icon name={cartOpen ? 'ChevronDown' : 'ChevronUp'} className="w-6 h-6 text-orange-500" strokeWidth={2} />
        </button>
        {cartOpen && (
          <div className="border-t border-stone-200 slide-up">
            <div className="max-h-64 overflow-y-auto scrollbar-thin px-4 py-3 space-y-2">
              {cartItems.map(item => (
                <div key={item.id} className="flex items-center justify-between gap-3">
                  <div className="flex-1 min-w-0 flex items-center gap-2">
                    <Icon name={item.icon} className="w-5 h-5 text-stone-500 shrink-0" />
                    <div className="min-w-0 flex-1">
                      <div className="text-base text-stone-900 font-semibold truncate">{item.name}</div>
                      <div className="text-sm text-stone-500 font-mono tabular-nums">
                        {formatPrice(item.price)} × {item.qty} = {formatPrice(item.price * item.qty)}
                      </div>
                    </div>
                  </div>
                  <div className="flex items-center gap-1.5">
                    <button onClick={() => decrementCart(item.id)} disabled={!!pendingMethod} className="w-9 h-9 rounded-full bg-stone-100 hover:bg-stone-200 disabled:opacity-30 flex items-center justify-center text-stone-700"><Icon name="Minus" className="w-4 h-4" strokeWidth={2.5} /></button>
                    <span className="font-mono font-bold text-lg w-7 text-center tabular-nums text-stone-900">{item.qty}</span>
                    <button onClick={() => addToCart(item.id)} disabled={!!pendingMethod} className="w-9 h-9 rounded-full bg-orange-500 hover:bg-orange-600 disabled:opacity-30 text-white flex items-center justify-center"><Icon name="Plus" className="w-4 h-4" strokeWidth={2.5} /></button>
                  </div>
                </div>
              ))}
            </div>
            {/* Toggle Réduction -20% */}
            {!pendingMethod && (
              <div className="px-4 pb-2 pt-1 border-t border-stone-200">
                <button
                  onClick={() => setDiscount(hasDiscount ? 0 : DISCOUNT_RATE)}
                  className={`w-full flex items-center justify-center gap-2 rounded-xl py-2.5 text-sm font-bold transition-all ${
                    hasDiscount ? 'bg-emerald-500 hover:bg-emerald-600 text-white' : 'bg-stone-100 hover:bg-stone-200 text-stone-700'
                  }`}>
                  <Icon name="Percent" className="w-4 h-4" strokeWidth={2.5} />
                  Réduction -{Math.round(DISCOUNT_RATE * 100)}%
                  {hasDiscount && <Icon name="Check" className="w-4 h-4" strokeWidth={2.5} />}
                </button>
              </div>
            )}
            <div className="px-4 pb-3 pt-2 border-t border-stone-200">
              {pendingMethod ? (
                /* === Étape de confirmation === */
                <div className="space-y-3 slide-up">
                  <div className={`text-center py-3 rounded-xl ${isOfferedPending ? 'bg-violet-50' : 'bg-stone-50'}`}>
                    <div className="text-xs uppercase tracking-widest text-stone-500 font-semibold mb-1">Confirmer la vente</div>
                    <div className={`flex items-center justify-center gap-2 mb-1 ${isOfferedPending ? 'text-violet-700' : 'text-stone-700'}`}>
                      <Icon name={pendingMethod.icon} className="w-5 h-5" />
                      <span className="font-bold text-base">{pendingMethod.label}</span>
                      {hasDiscount && !isOfferedPending && (
                        <span className="bg-emerald-100 text-emerald-700 text-[10px] font-bold px-1.5 py-0.5 rounded-full">-{Math.round(discount * 100)}%</span>
                      )}
                    </div>
                    {isOfferedPending ? (
                      <>
                        <div className="font-mono text-base text-stone-400 line-through tabular-nums">{formatPrice(cartSubtotal)}</div>
                        <div className="font-mono text-4xl font-bold text-violet-700 tabular-nums leading-none mt-1">OFFERT</div>
                      </>
                    ) : (
                      <>
                        {hasDiscount && (
                          <div className="font-mono text-sm text-stone-400 line-through tabular-nums">{formatPrice(cartSubtotal)}</div>
                        )}
                        <div className="font-mono text-4xl font-bold text-stone-900 tabular-nums leading-none">{formatPrice(displayedTotal)}</div>
                      </>
                    )}
                  </div>
                  <div className="grid grid-cols-[1fr_2fr] gap-2">
                    <button onClick={() => setPendingPayment(null)} className="bg-stone-100 hover:bg-stone-200 text-stone-700 active:scale-95 rounded-xl py-4 font-bold text-base transition-all">
                      Retour
                    </button>
                    <button onClick={() => { completeSale(pendingPayment); setPendingPayment(null); }} className={`active:scale-95 rounded-xl py-4 font-bold text-lg flex items-center justify-center gap-2 transition-all shadow-sm text-white ${
                      isOfferedPending ? 'bg-violet-600 hover:bg-violet-700' : 'bg-emerald-500 hover:bg-emerald-600'
                    }`}>
                      <Icon name="Check" className="w-6 h-6" strokeWidth={2.5} /> Confirmer
                    </button>
                  </div>
                </div>
              ) : (
                /* === Choix du mode de paiement === */
                <div className="space-y-2">
                  <div className="grid grid-cols-4 gap-1.5">
                    {PAYMENT_METHODS.map(pm => {
                      const isOffert = pm.id === 'offert';
                      return (
                        <button key={pm.id} onClick={() => setPendingPayment(pm.id)} className={`active:scale-95 rounded-xl py-3.5 px-1 flex flex-col items-center gap-1 font-bold text-xs transition-all ${
                          isOffert
                            ? 'bg-violet-600 hover:bg-violet-700 text-white'
                            : 'bg-stone-900 hover:bg-stone-700 text-white'
                        }`}>
                          <Icon name={pm.icon} className="w-5 h-5" /> {pm.label}
                        </button>
                      );
                    })}
                  </div>
                  <button onClick={clearCart} className="w-full text-sm text-stone-500 hover:text-rose-600 py-1.5 flex items-center justify-center gap-1 font-semibold">
                    <Icon name="X" className="w-4 h-4" /> Annuler la commande
                  </button>
                </div>
              )}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

// === DrinkRow (rangée d'édition dans Config) ===
function DrinkRow({ drink, drinks, photo, setDrinkPhoto, isEditing, onEdit, onCancel, onSave, onDelete }) {
  const [editName, setEditName] = useState(drink.name);
  const [editPrice, setEditPrice] = useState(String(drink.price));
  const [editIcon, setEditIcon] = useState(drink.icon || 'Wine');
  const [editCategory, setEditCategory] = useState(drink.category || 'biere');
  const [editStockEnabled, setEditStockEnabled] = useState(!!drink.stockEnabled);
  const [editStock, setEditStock] = useState(String(drink.stock || 0));
  const [editParentId, setEditParentId] = useState(drink.parentId || '');
  const [editParentRatio, setEditParentRatio] = useState(String(drink.parentRatio || 6));
  useEffect(() => {
    if (isEditing) {
      setEditName(drink.name); setEditPrice(String(drink.price));
      setEditIcon(drink.icon || 'Wine'); setEditCategory(drink.category || 'biere');
      setEditStockEnabled(!!drink.stockEnabled); setEditStock(String(drink.stock || 0));
      setEditParentId(drink.parentId || ''); setEditParentRatio(String(drink.parentRatio || 6));
    }
  }, [isEditing, drink]);

  const cat = CATEGORIES[drink.category];
  const effectiveStock = getEffectiveStock(drink, drinks);
  const possibleParents = drinks.filter(d => d.id !== drink.id && !d.parentId);

  if (isEditing) {
    return (
      <div className="px-3 py-3 bg-stone-50">
        <div className="grid grid-cols-[1fr_70px_auto] gap-2 items-center mb-2">
          <input type="text" value={editName} onChange={e => setEditName(e.target.value)} className="bg-white border border-stone-200 rounded-lg px-2 py-1.5 text-sm" />
          <input type="text" inputMode="decimal" value={editPrice} onChange={e => setEditPrice(e.target.value)} className="bg-white border border-stone-200 rounded-lg px-2 py-1.5 text-sm font-mono text-right" />
          <div className="flex gap-1">
            <button onClick={() => {
              const updates = {
                name: editName,
                price: parseFloat(editPrice.replace(',', '.')) || drink.price,
                icon: editIcon,
                category: editCategory,
                parentId: editParentId || null,
                parentRatio: editParentId ? (parseFloat(editParentRatio.replace(',', '.')) || 6) : null,
              };
              if (!editParentId) {
                updates.stockEnabled = editStockEnabled;
                updates.stock = parseFloat(editStock.replace(',', '.')) || 0;
              } else {
                updates.stockEnabled = false; updates.stock = 0;
              }
              onSave(updates);
            }} className="w-7 h-7 bg-orange-500 text-white rounded-md flex items-center justify-center"><Icon name="Check" className="w-3.5 h-3.5" /></button>
            <button onClick={onCancel} className="w-7 h-7 bg-stone-200 text-stone-700 rounded-md flex items-center justify-center"><Icon name="X" className="w-3.5 h-3.5" /></button>
          </div>
        </div>
        <div className="text-[10px] uppercase tracking-widest text-stone-500 mb-1.5 font-bold">Photo</div>
        <PhotoPicker value={photo} onChange={(p) => setDrinkPhoto(drink.id, p)} />
        <div className="text-[10px] uppercase tracking-widest text-stone-500 mb-1.5 font-bold mt-3">Catégorie</div>
        <CategoryPicker value={editCategory} onChange={setEditCategory} />
        <div className="text-[10px] uppercase tracking-widest text-stone-500 mb-1.5 font-bold mt-3">Icône (fallback si pas de photo)</div>
        <IconPicker value={editIcon} onChange={setEditIcon} />

        <div className="text-[10px] uppercase tracking-widest text-stone-500 mb-1.5 font-bold mt-3">Stock</div>
        <div className="bg-white border border-stone-200 rounded-lg p-2.5 space-y-2">
          <div className="text-[10px] text-stone-500 mb-1">Dérivé d'un autre item ?</div>
          <select value={editParentId} onChange={e => setEditParentId(e.target.value)} className="w-full bg-stone-50 border border-stone-200 rounded-md px-2 py-1.5 text-sm">
            <option value="">— Aucun (item indépendant)</option>
            {possibleParents.map(p => <option key={p.id} value={p.id}>{p.name}</option>)}
          </select>
          {editParentId ? (
            <div className="flex items-center gap-2">
              <span className="text-xs text-stone-600">Combien par parent :</span>
              <input type="text" inputMode="decimal" value={editParentRatio} onChange={e => setEditParentRatio(e.target.value)} className="bg-stone-50 border border-stone-200 rounded-md px-2 py-1.5 text-sm font-mono text-right w-16" />
            </div>
          ) : (
            <div className="space-y-2">
              <label className="flex items-center gap-2 text-sm cursor-pointer">
                <input type="checkbox" checked={editStockEnabled} onChange={e => setEditStockEnabled(e.target.checked)} className="w-4 h-4 accent-orange-500" />
                <span className="text-stone-700">Suivre le stock pour cet item</span>
              </label>
              {editStockEnabled && (
                <div className="flex items-center gap-2">
                  <span className="text-xs text-stone-600">Stock initial :</span>
                  <input type="text" inputMode="decimal" value={editStock} onChange={e => setEditStock(e.target.value)} className="bg-stone-50 border border-stone-200 rounded-md px-2 py-1.5 text-sm font-mono text-right w-20" />
                </div>
              )}
            </div>
          )}
        </div>

        <button onClick={onDelete} className="mt-3 text-xs text-rose-600 hover:text-rose-700 flex items-center gap-1 font-semibold">
          <Icon name="Trash2" className="w-3 h-3" /> Supprimer cette boisson
        </button>
      </div>
    );
  }
  return (
    <div className="px-3 py-2.5 flex items-center justify-between gap-2">
      <div className="flex items-center gap-3 min-w-0">
        {photo ? (
          <img src={photo} alt="" className="w-9 h-9 rounded-md object-cover shrink-0 border border-stone-200" loading="lazy" />
        ) : (
          <div className="w-9 h-9 rounded-md bg-stone-100 flex items-center justify-center shrink-0">
            <Icon name={drink.icon} className="w-5 h-5 text-stone-500" />
          </div>
        )}
        <div className="min-w-0">
          <div className="flex items-center gap-2 flex-wrap">
            <div className="text-sm text-stone-900 truncate font-semibold">{drink.name}</div>
            {cat && <div className={`text-[9px] font-bold uppercase tracking-wider px-1.5 py-0.5 rounded-full shrink-0 ${cat.bg} ${cat.text}`}>{cat.label}</div>}
            {drink.stockOnly && (() => {
              // Cocktails qui utilisent cet ingrédient (dérivé via ingredients[].parentId)
              const usedBy = drinks.filter(d => Array.isArray(d.ingredients) && d.ingredients.some(ing => ing.parentId === drink.id));
              if (usedBy.length === 0) return null;
              return (
                <div className="text-[9px] font-bold uppercase tracking-wider px-1.5 py-0.5 rounded-full shrink-0 bg-pink-100 text-pink-800">
                  → {usedBy.map(c => c.name).join(', ')}
                </div>
              );
            })()}
          </div>
          <div className="flex items-center gap-2">
            {drink.stockOnly ? (
              <div className="font-mono text-[10px] text-stone-500 italic">Ingrédient (non vendu)</div>
            ) : (
              <div className="font-mono text-xs text-stone-700 tabular-nums font-bold">{formatPrice(drink.price)}</div>
            )}
            {effectiveStock !== null && !drink.stockOnly && (
              <div className={`text-[10px] font-bold tabular-nums ${effectiveStock <= 0 ? 'text-rose-600' : effectiveStock <= 5 ? 'text-orange-600' : 'text-stone-500'}`}>
                · {effectiveStock} restants{drink.parentId ? ' (calculé)' : ''}
              </div>
            )}
            {drink.stockOnly && drink.stockEnabled && (
              <div className="text-[10px] font-mono text-stone-500 tabular-nums">
                · {parseFloat((drink.stock || 0).toFixed(2))}{drink.stockUnit || ''} en stock
              </div>
            )}
          </div>
        </div>
      </div>
      <button onClick={onEdit} className="text-stone-400 hover:text-orange-500 p-1.5"><Icon name="Edit3" className="w-3.5 h-3.5" /></button>
    </div>
  );
}