// RIVA — Règlement de la commande
//
// À emporter et en livraison (décision RIVA, 11/10/2026) :
//  - en espèces, à la remise : la commande part directement en cuisine,
//    sans appel de confirmation ;
//  - par carte en ligne (Stripe) : affiché « bientôt » tant que
//    SHOP.paiementEnLigne vaut false.

function PaymentForm({ total, onSuccess, onCancel, mode }) {
  const livraison = mode === 'livraison';
  const carte = !!SHOP.paiementEnLigne;
  const [envoi, setEnvoi] = React.useState(false);

  return (
    <div className="p-6 space-y-4">
      <div className="bg-[var(--bg)] rounded-2xl p-5 flex items-center justify-between">
        <div>
          <div className="text-[10px] uppercase tracking-wider text-[var(--muted)] font-bold">Montant à régler</div>
          <div className="font-display text-3xl text-[var(--vert)]">{total.toFixed(2)}€</div>
        </div>
        <Icon.Cash className="w-9 h-9 text-[var(--vert)]"/>
      </div>

      {/* Carte bancaire : sera branchée sur Stripe */}
      {!carte && (
        <div className="rounded-2xl p-4 border border-[var(--line)] opacity-50 flex items-center gap-3" aria-disabled="true">
          <Icon.CreditCard className="w-6 h-6 shrink-0 text-[var(--muted)]"/>
          <div className="flex-1">
            <div className="font-semibold">Carte bancaire en ligne</div>
            <div className="text-xs text-[var(--muted)]">Bientôt disponible</div>
          </div>
        </div>
      )}

      {/* Espèces */}
      <div className="rounded-2xl p-4 border-2 border-[var(--vert)] bg-[var(--vert)]/10">
        <div className="flex items-center gap-3">
          <Icon.Cash className="w-6 h-6 shrink-0 text-[var(--vert)]"/>
          <div className="flex-1 font-semibold">Espèces {livraison ? 'à la livraison' : 'au retrait'}</div>
          <div className="w-5 h-5 rounded-full border-2 border-[var(--vert)] bg-[var(--vert)] flex items-center justify-center">
            <div className="w-2 h-2 rounded-full bg-[var(--bg)]"/>
          </div>
        </div>
        <p className="text-sm text-[var(--cream-2)] leading-relaxed mt-3">
          Vous réglez {livraison ? 'au livreur' : 'au comptoir'}, en espèces. Pensez à prévoir l'appoint si possible.
        </p>
      </div>

      <div className="flex items-center justify-between gap-3 pt-2">
        <button type="button" onClick={onCancel} className="btn btn-ghost !py-3 !px-5">Retour</button>
        <button type="button" disabled={envoi}
                onClick={() => { setEnvoi(true); Promise.resolve(onSuccess({ method: 'especes', paid: false })).finally(() => setEnvoi(false)); }}
                className="btn btn-primary !py-3 !px-6 disabled:opacity-40">
          {envoi ? 'Envoi…' : 'Confirmer la commande'} <Icon.ArrowRight className="w-4 h-4"/>
        </button>
      </div>
    </div>
  );
}

Object.assign(window, { PaymentForm });