// Payment flow modal for internet offers
function PaymentModal({ offer, onClose }) {
  const [step, setStep] = React.useState("subscription"); // subscription | timing | method | details | processing | success | later
  const [timing, setTiming] = React.useState(null);
  const [method, setMethod] = React.useState(null);
  const [card, setCard] = React.useState({ number: "", name: "", exp: "", cvv: "" });
  const [mm, setMm] = React.useState({ phone: "", pin: "" });
  const [billingEmail, setBillingEmail] = React.useState("");
  const [txId, setTxId] = React.useState("");
  const [subscriber, setSubscriber] = React.useState({
    fullName: "", email: "", phone: "", address: "", userType: "Résidentiel",
    coords: null,
  });
  const [mapOpen, setMapOpen] = React.useState(false);
  const [mapZoom, setMapZoom] = React.useState(1);
  const [geoLoading, setGeoLoading] = React.useState(false);
  const [pendingCoords, setPendingCoords] = React.useState(null);

  // Reset on close
  React.useEffect(() => {
    if (!offer) {
      setStep("subscription"); setTiming(null); setMethod(null);
      setCard({ number: "", name: "", exp: "", cvv: "" });
      setMm({ phone: "", pin: "" });
      setBillingEmail(""); setTxId("");
      setSubscriber({ fullName: "", email: "", phone: "", address: "", userType: "Résidentiel", coords: null });
      setMapOpen(false); setMapZoom(1); setPendingCoords(null); setGeoLoading(false);
    }
  }, [offer]);

  React.useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape" && offer) onClose(); };
    document.addEventListener("keydown", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, [offer, onClose]);

  if (!offer) return null;

  const fmtCard = (v) => v.replace(/\D/g, "").slice(0, 16).replace(/(.{4})/g, "$1 ").trim();
  const fmtExp = (v) => {
    const d = v.replace(/\D/g, "").slice(0, 4);
    return d.length > 2 ? d.slice(0, 2) + "/" + d.slice(2) : d;
  };

  const cardValid = card.number.replace(/\s/g, "").length === 16 && card.name.trim() && /^\d{2}\/\d{2}$/.test(card.exp) && /^\d{3,4}$/.test(card.cvv);
  const mmValid = /^[+0-9 ]{8,}$/.test(mm.phone);

  const submitPayment = () => {
    setStep("processing");
    setTimeout(() => {
      const id = "TX-" + Math.floor(100000 + Math.random() * 899999);
      setTxId(id);
      setStep("success");
    }, 2200);
  };

  const submitLater = () => {
    setStep("processing");
    setTimeout(() => {
      const id = "INV-" + Math.floor(100000 + Math.random() * 899999);
      setTxId(id);
      setBillingEmail(subscriber.email);
      setStep("later");
    }, 1200);
  };

  const renderStep = () => {
    if (step === "subscription") {
      const emailOk = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(subscriber.email);
      const phoneOk = /^[+0-9 ]{8,}$/.test(subscriber.phone);
      const subValid = subscriber.fullName.trim() && emailOk && phoneOk && subscriber.address.trim() && subscriber.coords;

      // show errors only after user has typed something into the field
      const showEmailErr = subscriber.email.length > 0 && !emailOk;
      const showPhoneErr = subscriber.phone.length > 0 && !phoneOk;

      const openMap = () => {
        setPendingCoords(subscriber.coords || null);
        setMapZoom(1);
        setMapOpen(true);
      };

      const requestGPS = () => {
        if (!navigator.geolocation) {
          setPendingCoords({ lat: 9.5092, lng: -13.7122, accuracy: 30, x: 50, y: 50 });
          return;
        }
        setGeoLoading(true);
        navigator.geolocation.getCurrentPosition(
          (pos) => {
            const lat = pos.coords.latitude;
            const lng = pos.coords.longitude;
            const x = Math.max(0, Math.min(100, ((lng + 13.80) / 0.25) * 100));
            const y = Math.max(0, Math.min(100, ((9.65 - lat) / 0.20) * 100));
            setPendingCoords({ lat, lng, accuracy: Math.round(pos.coords.accuracy), x, y });
            setGeoLoading(false);
          },
          () => {
            setPendingCoords({ lat: 9.5092, lng: -13.7122, accuracy: 30, x: 50, y: 50 });
            setGeoLoading(false);
          },
          { enableHighAccuracy: true, timeout: 8000 }
        );
      };

      const confirmMap = () => {
        if (!pendingCoords) return;
        setSubscriber((s) => ({ ...s, coords: pendingCoords }));
        setMapOpen(false);
      };

      const mapClick = (e) => {
        if (e.target.closest("button") || e.target.closest(".pay-zoom-ctrl")) return;
        const rect = e.currentTarget.getBoundingClientRect();
        const vx = (e.clientX - rect.left) / rect.width;
        const vy = (e.clientY - rect.top) / rect.height;
        const wx = Math.max(0, Math.min(1, 0.5 + (vx - 0.5) / mapZoom));
        const wy = Math.max(0, Math.min(1, 0.5 + (vy - 0.5) / mapZoom));
        const lng = -13.80 + wx * 0.25;
        const lat = 9.65 - wy * 0.20;
        setPendingCoords({ lat, lng, accuracy: 50, x: wx * 100, y: wy * 100, picked: true });
      };

      const pinVx = pendingCoords ? 50 + (pendingCoords.x - 50) * mapZoom : 50;
      const pinVy = pendingCoords ? 50 + (pendingCoords.y - 50) * mapZoom : 50;
      const pinInView = pinVx >= 0 && pinVx <= 100 && pinVy >= 0 && pinVy <= 100;

      return (
        <React.Fragment>
          <h2>Abonnement</h2>
          <p className="pay-sub">Remplissez vos informations pour finaliser votre abonnement.</p>

          <div className="pay-field">
            <label>Nom complet</label>
            <input
              className="pay-input"
              placeholder="Entrez votre nom complet"
              value={subscriber.fullName}
              onChange={(e) => setSubscriber({ ...subscriber, fullName: e.target.value })}
            />
          </div>

          <div className="pay-field">
            <label>E-mail</label>
            <input
              className={"pay-input" + (showEmailErr ? " is-invalid" : "")}
              type="email"
              placeholder="Entrez votre e-mail"
              value={subscriber.email}
              onChange={(e) => setSubscriber({ ...subscriber, email: e.target.value })}
            />
            {showEmailErr && <div className="pay-err">Format d'e-mail invalide (ex. vous@exemple.com)</div>}
          </div>

          <div className="pay-field">
            <label>Numéro de téléphone</label>
            <input
              className={"pay-input" + (showPhoneErr ? " is-invalid" : "")}
              type="tel"
              placeholder="+224 6XX XX XX XX"
              value={subscriber.phone}
              onChange={(e) => setSubscriber({ ...subscriber, phone: e.target.value })}
            />
            {showPhoneErr && <div className="pay-err">Numéro invalide — utilisez uniquement chiffres et + (min. 8 caractères)</div>}
          </div>

          <div className="pay-field">
            <label>Adresse</label>
            <div className="pay-address-row">
              <input
                className="pay-input"
                placeholder="Entrez votre adresse"
                value={subscriber.address}
                onChange={(e) => setSubscriber({ ...subscriber, address: e.target.value })}
              />
              <button
                className="pay-verify-btn"
                onClick={openMap}
                disabled={!subscriber.address.trim()}
              >
                <Icons.MapPin />
                {subscriber.coords ? "Modifier" : "Vérifier"}
              </button>
            </div>
            {subscriber.coords && !mapOpen && (
              <div className="pay-verified-note">
                ✓ Position enregistrée — {subscriber.coords.lat.toFixed(5)}, {subscriber.coords.lng.toFixed(5)}
                {subscriber.coords.picked ? " (placée manuellement)" : ""}
              </div>
            )}
          </div>

          {mapOpen && (
            <div className="pay-map-overlay" onClick={() => setMapOpen(false)}>
              <div className="pay-map-sheet" onClick={(e) => e.stopPropagation()}>
                <div className="pay-map-head">
                  <div>
                    <div className="pay-map-eyebrow mono">CONFIRMEZ VOTRE EMPLACEMENT</div>
                    <h3>Touchez la carte ou utilisez votre GPS</h3>
                  </div>
                  <button className="pay-close" onClick={() => setMapOpen(false)} aria-label="Fermer">
                    <Icons.Close size={20} />
                  </button>
                </div>

                <div className="pay-map" onClick={mapClick}>
                  <div className="pay-map-inner" style={{ transform: `scale(${mapZoom})` }}>
                    <div className="pay-map-roads"></div>
                    <div className="pay-map-labels">
                      <span style={{ top: "18%", left: "12%" }}>Ratoma</span>
                      <span style={{ top: "42%", left: "30%" }}>Dixinn</span>
                      <span style={{ top: "62%", left: "52%" }}>Matam</span>
                      <span style={{ top: "80%", left: "70%" }}>Kaloum</span>
                      <span style={{ top: "30%", left: "62%" }}>Matoto</span>
                      <span style={{ top: "55%", left: "16%" }}>Camayenne</span>
                    </div>
                  </div>
                  <button
                    className="pay-geo-btn"
                    onClick={(e) => { e.stopPropagation(); requestGPS(); }}
                    disabled={geoLoading}
                  >
                    <Icons.MapPin /> {geoLoading ? "Localisation…" : "Utiliser ma position"}
                  </button>
                  <div className="pay-zoom-ctrl">
                    <button onClick={(e) => { e.stopPropagation(); setMapZoom((z) => Math.min(4, +(z + 0.5).toFixed(2))); }} disabled={mapZoom >= 4} aria-label="Zoom in">+</button>
                    <button onClick={(e) => { e.stopPropagation(); setMapZoom((z) => Math.max(1, +(z - 0.5).toFixed(2))); }} disabled={mapZoom <= 1} aria-label="Zoom out">−</button>
                  </div>
                  {pendingCoords && pinInView && (
                    <div className="pay-map-pin" style={{ top: pinVy + "%", left: pinVx + "%" }}>
                      <svg width="32" height="40" viewBox="0 0 24 30" fill="currentColor">
                        <path d="M12 0C5.4 0 0 5.4 0 12c0 9 12 18 12 18s12-9 12-18C24 5.4 18.6 0 12 0zm0 16.5c-2.5 0-4.5-2-4.5-4.5s2-4.5 4.5-4.5 4.5 2 4.5 4.5-2 4.5-4.5 4.5z"/>
                      </svg>
                    </div>
                  )}
                  {pendingCoords && (
                    <div className="pay-map-coords mono">
                      {pendingCoords.lat.toFixed(5)}, {pendingCoords.lng.toFixed(5)} · ±{pendingCoords.accuracy}m · {mapZoom}×
                    </div>
                  )}
                  {!pendingCoords && (
                    <div className="pay-map-hint">Cliquez sur la carte pour placer votre adresse</div>
                  )}
                </div>

                <div className="pay-map-foot">
                  <button className="btn btn-ghost" onClick={() => setMapOpen(false)}>Annuler</button>
                  <button className="btn btn-primary" disabled={!pendingCoords} onClick={confirmMap}>
                    ✓ Confirmer cette position
                  </button>
                </div>
              </div>
            </div>
          )}

          <div className="pay-field">
            <label>Type d'utilisateur</label>
            <select
              className="pay-input"
              value={subscriber.userType}
              onChange={(e) => setSubscriber({ ...subscriber, userType: e.target.value })}
            >
              <option>Résidentiel</option>
              <option>Professionnel</option>
              <option>Entreprise / PME</option>
              <option>Institution / Public</option>
            </select>
          </div>

          <div className="pay-summary-card">
            <div className="pay-summary-title">Résumé de l'offre</div>
            <div className="pay-summary-row">
              <span>Forfait</span>
              <b>{offer.name} · {offer.speed} {offer.unit}</b>
            </div>
            <div className="pay-summary-row">
              <span>Prix mensuel</span>
              <b className="pay-summary-price">{offer.price}</b>
            </div>
          </div>

          <button
            className="btn btn-primary pay-finalise"
            disabled={!subValid}
            onClick={() => setStep("timing")}
          >
            Procéder au paiement <Icons.Arrow size={14} />
          </button>
          {!subValid && (
            <div className="pay-validation-hint">
              {!subscriber.fullName.trim() && "• Nom complet requis  "}
              {!emailOk && "• E-mail valide requis  "}
              {!phoneOk && "• Téléphone valide requis  "}
              {!subscriber.address.trim() && "• Adresse requise  "}
              {!subscriber.coords && "• Position GPS requise (cliquez sur Vérifier)"}
            </div>
          )}
        </React.Fragment>
      );
    }

    if (step === "timing") {
      return (
        <React.Fragment>
          <h2>Comment souhaitez-vous régler ?</h2>
          <p className="pay-sub">Choisissez votre mode de règlement pour activer votre forfait <b>{offer.name}</b>.</p>
          <div className="pay-options">
            <button
              className={"pay-option" + (timing === "instant" ? " selected" : "")}
              onClick={() => setTiming("instant")}
            >
              <div className="pay-option-icon">⚡</div>
              <div className="pay-option-body">
                <h4>Payer maintenant</h4>
                <p>Activation immédiate après confirmation du paiement. Carte ou mobile money.</p>
              </div>
              <div className="pay-option-radio"></div>
            </button>
            <button
              className={"pay-option" + (timing === "later" ? " selected" : "")}
              onClick={() => setTiming("later")}
            >
              <div className="pay-option-icon">📅</div>
              <div className="pay-option-body">
                <h4>Payer plus tard</h4>
                <p>Activation après installation. Vous recevrez une facture par email à régler sous 7 jours.</p>
              </div>
              <div className="pay-option-radio"></div>
            </button>
          </div>
          <div className="pay-actions">
            <button className="btn btn-ghost" onClick={() => setStep("subscription")}>Retour</button>
            <button
              className="btn btn-primary"
              disabled={!timing}
              onClick={() => setStep(timing === "instant" ? "method" : "later-form")}
            >
              Continuer <Icons.Arrow size={14} />
            </button>
          </div>
        </React.Fragment>
      );
    }

    if (step === "method") {
      return (
        <React.Fragment>
          <h2>Choisissez votre moyen de paiement</h2>
          <p className="pay-sub">Toutes les transactions sont chiffrées (3D Secure / OTP).</p>
          <div className="pay-methods">
            <button
              className={"pay-method" + (method === "card" ? " selected" : "")}
              onClick={() => setMethod("card")}
            >
              <div className="pay-method-logo pay-card">
                <span className="pay-card-visa">VISA</span>
                <span className="pay-card-mc"></span>
              </div>
              <div>
                <h4>Carte bancaire</h4>
                <p>Visa, Mastercard, GIM-UEMOA</p>
              </div>
              <div className="pay-option-radio"></div>
            </button>
            <button
              className={"pay-method" + (method === "om" ? " selected" : "")}
              onClick={() => setMethod("om")}
            >
              <div className="pay-method-logo pay-om">OM</div>
              <div>
                <h4>Orange Money</h4>
                <p>Paiement via votre compte Orange Money Guinée</p>
              </div>
              <div className="pay-option-radio"></div>
            </button>
            <button
              className={"pay-method" + (method === "momo" ? " selected" : "")}
              onClick={() => setMethod("momo")}
            >
              <div className="pay-method-logo pay-momo">MoMo</div>
              <div>
                <h4>MTN Mobile Money</h4>
                <p>Paiement via votre compte MTN MoMo Guinée</p>
              </div>
              <div className="pay-option-radio"></div>
            </button>
          </div>
          <div className="pay-actions">
            <button className="btn btn-ghost" onClick={() => setStep("timing")}>Retour</button>
            <button className="btn btn-primary" disabled={!method} onClick={() => setStep("details")}>
              Continuer <Icons.Arrow size={14} />
            </button>
          </div>
        </React.Fragment>
      );
    }

    if (step === "details") {
      if (method === "card") {
        return (
          <React.Fragment>
            <h2>Détails de la carte</h2>
            <p className="pay-sub">Vos données sont chiffrées et conformes PCI-DSS.</p>

            <div className="pay-field">
              <label>Numéro de carte</label>
              <input
                className="pay-input"
                placeholder="1234 5678 9012 3456"
                value={card.number}
                onChange={(e) => setCard({ ...card, number: fmtCard(e.target.value) })}
                inputMode="numeric"
              />
            </div>

            <div className="pay-field">
              <label>Nom sur la carte</label>
              <input
                className="pay-input"
                placeholder="AMADOU DIALLO"
                value={card.name}
                onChange={(e) => setCard({ ...card, name: e.target.value.toUpperCase() })}
              />
            </div>

            <div className="pay-row">
              <div className="pay-field">
                <label>Expiration</label>
                <input
                  className="pay-input"
                  placeholder="MM/AA"
                  value={card.exp}
                  onChange={(e) => setCard({ ...card, exp: fmtExp(e.target.value) })}
                  inputMode="numeric"
                />
              </div>
              <div className="pay-field">
                <label>CVV</label>
                <input
                  className="pay-input"
                  placeholder="123"
                  value={card.cvv}
                  onChange={(e) => setCard({ ...card, cvv: e.target.value.replace(/\D/g, "").slice(0, 4) })}
                  inputMode="numeric"
                  type="password"
                />
              </div>
            </div>

            <div className="pay-actions">
              <button className="btn btn-ghost" onClick={() => setStep("method")}>Retour</button>
              <button className="btn btn-primary" disabled={!cardValid} onClick={submitPayment}>
                Payer {offer.price}
              </button>
            </div>
          </React.Fragment>
        );
      }
      // mobile money (om or momo)
      const mmLabel = method === "om" ? "Orange Money" : "MTN MoMo";
      const mmHint = method === "om" ? "Numéro Orange Money Guinée (+224 6XX…)" : "Numéro MTN MoMo Guinée (+224 6XX…)";
      return (
        <React.Fragment>
          <h2>Paiement par {mmLabel}</h2>
          <p className="pay-sub">Vous recevrez une notification USSD pour confirmer la transaction sur votre téléphone.</p>

          <div className="pay-field">
            <label>Numéro de téléphone</label>
            <input
              className="pay-input"
              placeholder="+224 6XX XX XX XX"
              value={mm.phone}
              onChange={(e) => setMm({ ...mm, phone: e.target.value })}
              type="tel"
            />
            <div className="pay-hint">{mmHint}</div>
          </div>

          <div className="pay-summary">
            <div><span>Forfait</span><b>{offer.name}</b></div>
            <div><span>Montant</span><b>{offer.price}</b></div>
            <div><span>Méthode</span><b>{mmLabel}</b></div>
          </div>

          <div className="pay-actions">
            <button className="btn btn-ghost" onClick={() => setStep("method")}>Retour</button>
            <button className="btn btn-primary" disabled={!mmValid} onClick={submitPayment}>
              Confirmer le paiement
            </button>
          </div>
        </React.Fragment>
      );
    }

    if (step === "later-form") {
      return (
        <React.Fragment>
          <h2>Paiement différé</h2>
          <p className="pay-sub">Nous activerons votre forfait après installation. Vous recevrez une facture détaillée à régler sous 7 jours par carte, virement, ou mobile money.</p>

          <div className="pay-summary">
            <div><span>Forfait</span><b>{offer.name}</b></div>
            <div><span>Montant à régler</span><b>{offer.price}</b></div>
            <div><span>Facture envoyée à</span><b>{subscriber.email}</b></div>
            <div><span>Délai</span><b>7 jours après installation</b></div>
          </div>

          <div className="pay-actions">
            <button className="btn btn-ghost" onClick={() => setStep("timing")}>Retour</button>
            <button className="btn btn-primary" onClick={submitLater}>
              Confirmer la commande
            </button>
          </div>
        </React.Fragment>
      );
    }

    if (step === "processing") {
      return (
        <div className="pay-processing">
          <div className="pay-spinner"></div>
          <h2>Traitement en cours…</h2>
          <p className="pay-sub">{method && method !== "card" ? "Validez la notification USSD sur votre téléphone." : "Veuillez patienter, ne fermez pas cette fenêtre."}</p>
        </div>
      );
    }

    if (step === "success") {
      return (
        <div className="pay-success">
          <div className="pay-success-icon"><Icons.Check size={36} /></div>
          <h2>Paiement confirmé 🎉</h2>
          <p className="pay-sub">Votre forfait <b>{offer.name}</b> est activé. Un technicien vous contactera sous 48h pour l'installation.</p>

          <div className="pay-receipt">
            <div className="row"><span>Transaction</span><b>{txId}</b></div>
            <div className="row"><span>Forfait</span><b>{offer.name}</b></div>
            <div className="row"><span>Montant débité</span><b>{offer.price}</b></div>
            <div className="row"><span>Méthode</span><b>{method === "card" ? "Carte bancaire" : method === "om" ? "Orange Money" : "MTN MoMo"}</b></div>
          </div>

          <a className="btn btn-primary" href="https://selfcare.mounagroup.com" target="_blank" rel="noopener" style={{ width: "100%" }}>
            Accéder à mon espace client <Icons.ArrowUpRight size={14} />
          </a>
          <button className="btn btn-ghost" onClick={onClose} style={{ width: "100%", marginTop: 10 }}>Fermer</button>
        </div>
      );
    }

    if (step === "later") {
      return (
        <div className="pay-success">
          <div className="pay-success-icon pay-later-icon">📅</div>
          <h2>Commande enregistrée</h2>
          <p className="pay-sub">Nous avons envoyé une confirmation à <b>{subscriber.email}</b>. La facture sera émise après installation.</p>

          <div className="pay-receipt">
            <div className="row"><span>Référence</span><b>{txId}</b></div>
            <div className="row"><span>Forfait</span><b>{offer.name}</b></div>
            <div className="row"><span>Montant à régler</span><b>{offer.price}</b></div>
            <div className="row"><span>Délai</span><b>7 jours après installation</b></div>
          </div>

          <button className="btn btn-primary" onClick={onClose} style={{ width: "100%" }}>D'accord, merci</button>
        </div>
      );
    }
  };

  return (
    <div className="pay-backdrop" onClick={onClose}>
      <div className="pay-modal" onClick={(e) => e.stopPropagation()}>
        <div className="pay-modal-head">
          <div>
            <div className="pay-eyebrow mono">FORFAIT · {offer.name}</div>
            <div className="pay-price">{offer.price}</div>
          </div>
          <button className="pay-close" onClick={onClose} aria-label="Fermer"><Icons.Close size={20} /></button>
        </div>
        <div className="pay-modal-body">
          {renderStep()}
        </div>
      </div>
    </div>
  );
}

window.PaymentModal = PaymentModal;