// Format prix en euros depuis des centimes
function euros(c) { return (c/100).toFixed(2) + '€'; }

function ProductCard({ product, onAdd, polaroid, onOpen }) {
  const [q, setQ] = React.useState(1);
  const [variationId, setVariationId] = React.useState(undefined);
  const toast = window.Toast?.useToast ? window.Toast.useToast() : { success: ()=>{}, error: ()=>{} };
  // Image produit (fallback sur un placeholder si URL absente ou invalide)
  const img = product.image_url && product.image_url.trim() ? product.image_url : '/images/placeholder.svg';
  // Petit effet "polaroid" avec une inclinaison aléatoire (CSS var --tilt)
  const [tilt, setTilt] = React.useState('0deg');
  React.useEffect(() => {
    if (polaroid) {
      const v = (Math.random() * 4 - 2).toFixed(2); // -2deg..2deg
      setTilt(v + 'deg');
    }
  }, [polaroid]);
  // Si des variantes existent, sélectionne automatiquement la première (pas de "Par défaut")
  React.useEffect(() => {
    if (Array.isArray(product.variations) && product.variations.length > 0 && (variationId === undefined || variationId === null)) {
      setVariationId(product.variations[0].id);
    }
  }, [product.variations]);
  const content = (
    <>
  <div className={polaroid ? 'polaroid-photo' : ''} onClick={onOpen} style={polaroid ? undefined : { width:'100%', aspectRatio:'1.4', background:'#fff', border:'1px solid var(--brand-border)', marginBottom:8, overflow:'hidden', display:'flex', alignItems:'center', justifyContent:'center', borderRadius:12, padding:'6px 6px 0 6px', cursor: onOpen? 'pointer': 'default' }}>
        {/* Performance: lazy loading + decoding async pour accélérer l'affichage */}
        <img src={img} alt={product.name} onError={(e)=>{ e.currentTarget.src='/images/placeholder.svg'; }} style={{ width:'100%', height:'100%', objectFit:'cover' }} loading="lazy" decoding="async" />
      </div>
      <div className={polaroid ? 'polaroid-info' : ''}>
  <h3 className={polaroid ? 'polaroid-title' : ''} onClick={onOpen} style={{ marginTop: polaroid ? 0 : undefined, cursor: onOpen? 'pointer': 'default' }}>{product.name}</h3>
        <p className={polaroid ? 'polaroid-desc' : ''} style={polaroid ? undefined : { color: 'var(--brand-muted)' }}>{product.description}</p>
        {(() => {
          const selected = Array.isArray(product.variations) ? product.variations.find(v => v.id === variationId) : undefined;
          const currentPrice = selected && selected.price_cents != null ? selected.price_cents : product.price_cents;
          const currentStock = selected && selected.stock != null ? selected.stock : product.stock;
          return (
            <div className={polaroid ? 'polaroid-meta' : ''}>
              <span><b>{euros(currentPrice)}</b></span>
              <span>Stock: {currentStock}</span>
            </div>
          );
        })()}
        {Array.isArray(product.variations) && product.variations.length > 0 && (
          <div style={{ margin: '8px 0' }}>
            <label>
              Variante
              <select value={variationId ?? ''} onChange={e=>setVariationId(e.target.value ? Number(e.target.value) : undefined)} style={{ marginLeft: 8 }}>
                {product.variations.map(v => (
                  <option key={v.id} value={v.id}>
                    {v.name} {v.price_cents != null ? `(${euros(v.price_cents)})` : ''}
                  </option>
                ))}
              </select>
            </label>
          </div>
        )}
        <div className={polaroid ? 'polaroid-actions' : ''}>
          <window.Components.QuantitySelector value={q} onChange={setQ} />
          {/* Ajoute au panier puis affiche un toast de confirmation */}
          <button
            onClick={(e) => {
              e.stopPropagation();
              const entry = variationId ? { ...product, id: product.id, price_cents: (product.variations.find(v=>v.id===variationId)?.price_cents ?? product.price_cents), name: product.name + ' - ' + (product.variations.find(v=>v.id===variationId)?.name || '') } : product;
              const add = (p, qty) => onAdd({ ...entry, variationId }, qty);
              add(entry, q);
              toast.success(`${entry.name} x${q} ajouté au panier`);
            }}
            disabled={(() => {
              const selected = Array.isArray(product.variations) ? product.variations.find(v => v.id === variationId) : undefined;
              const currentStock = selected && selected.stock != null ? selected.stock : product.stock;
              return currentStock <= 0;
            })()}
          >
            Ajouter
          </button>
        </div>
      </div>
    </>
  );
  return polaroid ? (
    <div className="polaroid-card" style={{ '--tilt': tilt }}>{content}</div>
  ) : (
    <div style={{ border: '1px solid var(--brand-border)', padding: 12, borderRadius: 12, background: 'var(--brand-card)', boxShadow: 'var(--brand-shadow)' }}>{content}</div>
  );
}

window.Components = window.Components || {};
window.Components.ProductCard = ProductCard;