function euros(c) { return (c/100).toFixed(2) + '€'; }

function Cart() {
  const { items, setQuantity, removeItem, clear } = window.CartContext.useCart();
  const { user } = window.AuthContext.useAuth();
  const toast = window.Toast.useToast(); // Notifications utilisateur (succès/erreurs)
  const [preview, setPreview] = React.useState(null);
  const [message, setMessage] = React.useState('');

  const total = items.reduce((a,b)=>a+b.quantity*b.price_cents,0);

  // Prévisualisation serveur: vérifie le stock et calcule le total
  async function doPreview() {
    try {
  const res = await window.OrdersAPI.preview(items.map(i=>({ productId: i.productId, variationId: i.variationId, quantity: i.quantity, price_cents: i.price_cents, name: i.name, optionIds: Array.isArray(i.options)? i.options.map(o=>o.id): [] })));
      setPreview(res);
    } catch (e) {
      toast.error('Erreur lors de la prévisualisation');
    }
  }

  // Validation de la commande (nécessite connexion)
  async function doCheckout() {
    if (!user) { setMessage('Veuillez vous connecter.'); return; }
    if (!user.postal_address || String(user.postal_address).trim() === '') {
      setMessage("Veuillez renseigner votre adresse postale dans votre profil avant de valider la commande.");
      return;
    }
    try {
  const res = await window.OrdersAPI.checkout(items.map(i=>({ productId: i.productId, variationId: i.variationId, quantity: i.quantity, price_cents: i.price_cents, name: i.name, optionIds: Array.isArray(i.options)? i.options.map(o=>o.id): [] })));
      setMessage(`Commande validée (#${res.orderId}). Un email récapitulatif a été envoyé.`);
      toast.success(`Commande #${res.orderId} validée`);
      clear();
      setPreview(null);
    } catch (e) {
      const msg = e?.error?.message || 'Erreur lors de la commande';
      setMessage(msg);
      toast.error(msg);
    }
  }

  return (
    <div className="container">
      <h1>Panier</h1>
      {items.length === 0 ? <p>Votre panier est vide.</p> : (
        <table style={{ width: '100%', borderCollapse: 'collapse' }}>
          <thead>
            <tr><th align="left">Produit</th><th>Quantité</th><th>PU</th><th>Subtotal</th><th></th></tr>
          </thead>
          <tbody>
            {items.map(i => (
              <tr key={`${i.productId}-${i.variationId||''}-${i.optionsKey||''}`}>
                <td>
                  {i.name}
                  {Array.isArray(i.options) && i.options.length>0 && (
                    <div style={{ fontSize:12, color:'#666' }}>
                      {i.options.map(o=>`${o.name}${o.price_cents?` (+${euros(o.price_cents)})`:''}`).join(', ')}
                    </div>
                  )}
                </td>
                <td>
              <window.Components.QuantitySelector
                value={i.quantity}
                onChange={(q)=>{ setQuantity(i.productId,q,i.variationId,i.optionsKey); toast.info(`Quantité mise à jour: ${i.name} x${q}`); }}
              />
                </td>
                <td align="right">{euros(i.price_cents)}</td>
                <td align="right">{euros(i.price_cents*i.quantity)}</td>
                <td><button onClick={()=>{ removeItem(i.productId,i.variationId,i.optionsKey); toast.success(`${i.name} retiré du panier`); }}>Supprimer</button></td>
              </tr>
            ))}
            <tr>
              <td colSpan="3" align="right"><b>Total</b></td>
              <td align="right"><b>{euros(total)}</b></td>
              <td></td>
            </tr>
          </tbody>
        </table>
      )}
      <div style={{ marginTop: 12, display: 'flex', gap: 8, alignItems:'center' }}>
        <button onClick={doPreview} disabled={items.length===0}>Prévisualiser</button>
        <button onClick={doCheckout} disabled={!preview || !preview.stockOk || !user || !user.postal_address}>Valider la commande</button>
        {user && (!user.postal_address || String(user.postal_address).trim()==='') && (
          <span className="badge" style={{ background:'#fef3c7', color:'#92400e' }}>Adresse postale manquante</span>
        )}
      </div>
      {preview && (
        <div style={{ marginTop: 12 }}>
          <h3>Aperçu</h3>
          <p>Stock OK: {preview.stockOk ? 'Oui' : 'Non'}</p>
          <table style={{ width:'100%' }}>
            <thead><tr><th align="left">Article</th><th>Qté</th><th>PU</th><th>Sous-total</th></tr></thead>
            <tbody>
              {preview.items.map((it, idx) => (
                <tr key={idx}>
                  <td>
                    {it.name}{!it.inStock ? ' (stock insuffisant)' : ''}
                    {Array.isArray(it.options) && it.options.length>0 && (
                      <div style={{ fontSize:12, color:'#666' }}>
                        {it.options.map(o=>`${o.name}${o.price_cents?` (+${euros(o.price_cents)})`:''}`).join(', ')}
                      </div>
                    )}
                  </td>
                  <td align="center">{it.quantity}</td>
                  <td align="right">{euros(it.price_cents)}</td>
                  <td align="right">{euros(it.subtotal_cents)}</td>
                </tr>
              ))}
            </tbody>
          </table>
          {Array.isArray(preview.discounts) && preview.discounts.length > 0 && (
            <div style={{ marginTop: 8 }}>
              <b>Remises de lots:</b>
              <ul>
                {preview.discounts.map((d, i) => (
                  <li key={i}>{d.bundle.name}: -{euros(d.discount_cents)}</li>
                ))}
              </ul>
            </div>
          )}
          <p>Total: {euros(preview.total_cents)}</p>
        </div>
      )}
      {message && <p style={{ marginTop: 12 }}>{message}</p>}
    </div>
  );
}

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