// checkout.jsx — overlay de réservation/paiement
// Étapes : auth → confirm → pay → done

const { useState, useEffect, useRef } = React;

// ── Étape 0 : Auth ─────────────────────────────────────────────────
const AuthStep = ({ onSuccess }) => {
  const [mode, setMode]         = useState("login");
  const [name, setName]         = useState("");
  const [email, setEmail]       = useState("");
  const [password, setPassword] = useState("");
  const [loading, setLoading]   = useState(false);
  const [error, setError]       = useState(null);

  const submit = async (e) => {
    e.preventDefault();
    setLoading(true);
    setError(null);
    try {
      if (mode === "login")    await API.login(email, password);
      if (mode === "register") await API.register(name, email, password);
      if (mode === "guest")    await API.guest(name, email);
      const me = await API.me();
      onSuccess(me);
    } catch (err) {
      setError(err.message || "Erreur de connexion.");
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="co-step">
      <h2 className="co-title">Votre compte</h2>
      <p className="co-sub">Identifiez-vous pour recevoir vos billets par email.</p>

      <div className="co-tabs">
        <button className={mode === "login"    ? "on" : ""} onClick={() => setMode("login")}>Connexion</button>
        <button className={mode === "register" ? "on" : ""} onClick={() => setMode("register")}>Créer un compte</button>
        <button className={mode === "guest"    ? "on" : ""} onClick={() => setMode("guest")}>Invité</button>
      </div>

      <form onSubmit={submit}>
        {(mode === "register" || mode === "guest") && (
          <div className="co-field">
            <label>Prénom et nom</label>
            <input type="text" value={name} onChange={e => setName(e.target.value)}
              required minLength="2" maxLength="100" placeholder="Jean Dupont" />
          </div>
        )}
        <div className="co-field">
          <label>Adresse email</label>
          <input type="email" value={email} onChange={e => setEmail(e.target.value)}
            required placeholder="jean@exemple.fr" />
        </div>
        {mode !== "guest" && (
          <div className="co-field">
            <label>Mot de passe{mode === "register" && " (8 caractères min.)"}</label>
            <input type="password" value={password} onChange={e => setPassword(e.target.value)}
              required minLength={mode === "register" ? 8 : 1} />
          </div>
        )}
        {error && <div className="co-error">{error}</div>}
        <button type="submit" className="btn-hot btn-hot--block" disabled={loading}>
          {loading ? "Connexion…"
            : mode === "guest"    ? "Continuer sans compte"
            : mode === "register" ? "Créer mon compte"
            : "Se connecter"}
        </button>
      </form>
    </div>
  );
};

// ── Étape 1 : Récapitulatif + noms titulaires ──────────────────────
const ConfirmStep = ({ match, zone, quantities, user, onHold, onBack }) => {
  const totalQty = Object.values(quantities).reduce((s, q) => s + q, 0);
  const totalEUR = TICKET_TYPES.reduce((s, t) => {
    const q = quantities[t.id] || 0;
    return s + q * Math.round(zone.priceFrom * t.mult);
  }, 0);

  const [holders, setHolders] = useState(
    Array.from({ length: totalQty }, () => user ? user.name : "")
  );
  const [bestSeats, setBestSeats] = useState(undefined); // undefined=loading, null=n/a, []=found
  const [loading, setLoading]     = useState(false);
  const [error, setError]         = useState(null);

  useEffect(() => {
    if (zone.standing || !zone.apiId) { setBestSeats(null); return; }
    API.seats(match.id, zone.apiId).then(data => {
      if (data.standing) { setBestSeats(null); return; }
      const free = [];
      for (const row of (data.rows || [])) {
        for (const seat of (row.seats || [])) {
          if (seat.status === "free") free.push({ id: seat.id, label: row.row + seat.number });
        }
      }
      setBestSeats(free.slice(0, totalQty));
    }).catch(() => setBestSeats(null));
  }, [match.id, zone.apiId, zone.standing, totalQty]);

  const proceed = async () => {
    if (!zone.standing && bestSeats === undefined) return; // still loading seats
    setLoading(true);
    setError(null);
    try {
      const seatIds = (bestSeats || []).map(s => s.id);
      const hold    = await API.createHold(match.id, zone.apiId, seatIds, totalQty);
      onHold(hold, holders, totalEUR);
    } catch (err) {
      setError(err.message || "Erreur lors de la réservation.");
      setLoading(false);
    }
  };

  const seatedLoading = !zone.standing && bestSeats === undefined;
  const noSeatsAvail  = !zone.standing && bestSeats !== undefined && bestSeats !== null && bestSeats.length < totalQty;

  return (
    <div className="co-step">
      <button className="co-back" onClick={onBack}>
        <Icon name="back" size={12} /> Modifier ma sélection
      </button>

      <h2 className="co-title">Récapitulatif</h2>

      <div className="co-recap">
        <div className="co-recap-match">
          <b>FCSM · {match.awayLong || match.away}</b>
          <span>{match.date.day} {match.date.num} {match.date.month} · {match.date.time} · Stade Bonal</span>
        </div>

        <div className="co-recap-zone">
          <div className="co-rz-name">{zone.name}</div>
          {zone.standing
            ? <div className="co-rz-detail">Debout · {totalQty} place{totalQty > 1 ? "s" : ""}</div>
            : seatedLoading
              ? <div className="co-rz-detail">Sélection des meilleures places…</div>
              : bestSeats && bestSeats.length > 0
                ? <div className="co-rz-detail">Places : {bestSeats.map(s => s.label).join(", ")}</div>
                : <div className="co-rz-detail">{totalQty} place{totalQty > 1 ? "s" : ""}</div>
          }
        </div>

        <div className="co-recap-lines">
          {TICKET_TYPES.map(t => {
            const q = quantities[t.id] || 0;
            if (!q) return null;
            return (
              <div key={t.id} className="co-recap-line">
                <span>{t.label} × {q}</span>
                <b>{q * Math.round(zone.priceFrom * t.mult)}€</b>
              </div>
            );
          })}
          <div className="co-recap-total">
            <span>Total</span>
            <b className="num">{totalEUR}€</b>
          </div>
        </div>
      </div>

      <div className="co-holders">
        <div className="eyebrow" style={{marginBottom: 8}}>Nom des titulaires</div>
        {holders.map((h, i) => (
          <div key={i} className="co-field">
            <label>Billet {i + 1}</label>
            <input type="text" value={h} placeholder="Prénom Nom"
              onChange={e => { const n = [...holders]; n[i] = e.target.value; setHolders(n); }} />
          </div>
        ))}
      </div>

      {noSeatsAvail && (
        <div className="co-error">
          Pas assez de places disponibles dans cette tribune. Choisissez une autre tribune.
        </div>
      )}
      {error && <div className="co-error">{error}</div>}

      <button className="btn-hot btn-hot--block" onClick={proceed}
        disabled={loading || seatedLoading || noSeatsAvail}>
        {loading          ? "Réservation…"
          : seatedLoading ? "Chargement des places…"
          : `Payer ${totalEUR}€`}
      </button>

      <div className="cta-trust" style={{marginTop: 12}}>
        <span><Icon name="shield" size={12} /> Paiement sécurisé</span>
        <span><Icon name="phone" size={12} /> Billet envoyé par email</span>
        <span><Icon name="swap" size={12} /> Échangeable jusqu'à J-1</span>
      </div>
    </div>
  );
};

// ── Étape 2 : Paiement Stripe ──────────────────────────────────────
const PayStep = ({ hold, holderNames, totalEUR, onPaid, onBack }) => {
  const [order,   setOrder]   = useState(null);
  const [loading, setLoading] = useState(true);
  const [paying,  setPaying]  = useState(false);
  const [error,   setError]   = useState(null);
  const stripeRef   = useRef(null);
  const cardRef     = useRef(null);
  const mountRef    = useRef(null);

  useEffect(() => {
    API.createOrder(hold.hold_id, holderNames)
      .then(ord => {
        setOrder(ord);
        setLoading(false);

        if (!ord.stripe_publishable_key || ord.stripe_publishable_key.startsWith("pk_test_…")) {
          setError("Configuration Stripe non disponible sur ce serveur.");
          return;
        }

        const stripe   = Stripe(ord.stripe_publishable_key);
        stripeRef.current = stripe;
        const elements = stripe.elements();
        const card = elements.create("card", {
          style: {
            base: {
              fontFamily: '"Manrope", sans-serif',
              fontSize: "16px",
              color: "#0B2545",
              "::placeholder": { color: "#6B7591" },
            },
          },
        });
        card.mount(mountRef.current);
        cardRef.current = card;
      })
      .catch(err => {
        setError(err.message || "Impossible de préparer le paiement.");
        setLoading(false);
      });

    return () => { if (cardRef.current) cardRef.current.destroy(); };
  }, [hold.hold_id]);

  const pay = async (e) => {
    e.preventDefault();
    if (!stripeRef.current || !cardRef.current || !order) return;
    setPaying(true);
    setError(null);
    try {
      const { error: stripeErr, paymentIntent } = await stripeRef.current.confirmCardPayment(
        order.client_secret,
        { payment_method: { card: cardRef.current } }
      );
      if (stripeErr) {
        setError(stripeErr.message);
        setPaying(false);
      } else if (paymentIntent.status === "succeeded") {
        onPaid(order.order_id);
      }
    } catch (err) {
      setError(err.message || "Erreur de paiement.");
      setPaying(false);
    }
  };

  return (
    <div className="co-step">
      <button className="co-back" onClick={onBack}>
        <Icon name="back" size={12} /> Retour
      </button>
      <h2 className="co-title">Paiement</h2>

      <div className="co-recap co-recap--sm">
        <div className="co-recap-total">
          <span>Total à payer</span>
          <b className="num">{totalEUR}€</b>
        </div>
      </div>

      {loading && <div className="co-loading">Préparation du paiement…</div>}

      <form onSubmit={pay} style={{display: loading ? "none" : "block"}}>
        <div className="co-field">
          <label>Carte bancaire</label>
          <div ref={mountRef} className="stripe-element" />
        </div>
        {error && <div className="co-error">{error}</div>}
        <button type="submit" className="btn-hot btn-hot--block"
          disabled={paying || loading || !!error}>
          {paying ? "Paiement en cours…" : `Payer ${totalEUR}€`}
        </button>
      </form>

      <div className="cta-trust" style={{marginTop: 12}}>
        <span><Icon name="shield" size={12} /> 3D Secure</span>
        <span><Icon name="bolt" size={12} /> Billet immédiat par email</span>
      </div>
    </div>
  );
};

// ── Étape 3 : Confirmation ─────────────────────────────────────────
const DoneStep = ({ orderId, onClose }) => (
  <div className="co-step co-step--done">
    <div className="co-done-icon">
      <Icon name="check" size={28} />
    </div>
    <h2 className="co-title">Réservation confirmée !</h2>
    <p className="co-sub">
      Vos billets ont été envoyés par email.<br />
      Présentez votre QR code à l'entrée du stade.
    </p>
    <div className="co-order-ref">
      <small>N° de commande</small>
      <b className="num">{(orderId || "").slice(0, 8).toUpperCase()}</b>
    </div>
    <button className="btn-hot btn-hot--block" onClick={onClose}>
      Retour à l'accueil
    </button>
  </div>
);

// ── Overlay principal ──────────────────────────────────────────────
const CheckoutOverlay = ({ match, zone, quantities, onClose }) => {
  const [step, setStep]           = useState("auth");
  const [user, setUser]           = useState(null);
  const [hold, setHold]           = useState(null);
  const [holderNames, setHolderNames] = useState([]);
  const [totalEUR, setTotalEUR]   = useState(0);
  const [orderId, setOrderId]     = useState(null);

  // Vérifier si déjà connecté
  useEffect(() => {
    const token = API.getToken();
    if (!token) return;
    API.me().then(me => {
      setUser(me);
      setStep("confirm");
    }).catch(() => {
      API.setToken(null); // token expiré
    });
  }, []);

  const stepIndex = step === "auth" ? 0 : step === "confirm" ? 1 : step === "pay" ? 2 : 3;
  const stepLabels = ["Compte", "Récap.", "Paiement"];

  return (
    <div className="co-overlay" onClick={e => { if (e.target === e.currentTarget) onClose(); }}>
      <div className="co-panel">
        <div className="co-header">
          <div className="co-progress">
            {stepLabels.map((l, i) => (
              <React.Fragment key={l}>
                <div className={`co-prog-step ${i < stepIndex ? "done" : i === stepIndex ? "active" : ""}`}>
                  {i < stepIndex ? <Icon name="check" size={10} /> : i + 1}
                </div>
                {i < stepLabels.length - 1 && <div className="co-prog-line" />}
              </React.Fragment>
            ))}
          </div>
          <button className="co-close" onClick={onClose} aria-label="Fermer">✕</button>
        </div>

        <div className="co-body">
          {step === "auth" && (
            <AuthStep onSuccess={me => { setUser(me); setStep("confirm"); }} />
          )}
          {step === "confirm" && (
            <ConfirmStep
              match={match} zone={zone} quantities={quantities} user={user}
              onHold={(h, names, eur) => {
                setHold(h); setHolderNames(names); setTotalEUR(eur);
                setStep("pay");
              }}
              onBack={onClose}
            />
          )}
          {step === "pay" && hold && (
            <PayStep
              hold={hold} holderNames={holderNames} totalEUR={totalEUR}
              onPaid={oid => { setOrderId(oid); setStep("done"); }}
              onBack={() => setStep("confirm")}
            />
          )}
          {step === "done" && (
            <DoneStep orderId={orderId} onClose={onClose} />
          )}
        </div>
      </div>
    </div>
  );
};

window.CheckoutOverlay = CheckoutOverlay;