/* booking — real checkout: traveler validation, Tap-style card capture with
   Luhn + brand/mada detection + tokenization, saved-card 1-click, Apple Pay
   capability check, and a real persisted itinerary + downloadable receipt. */

const BRAND_LABEL = { mada: "Mada", visa: "Visa", mc: "Mastercard", amex: "Amex", discover: "Discover", apple: "Apple Pay", unknown: "Card" };

function BrandMark({ brand }) {
  const map = {
    mada: { bg: "#231F20", fg: "#84C342", label: "mada" },
    visa: { bg: "#1A1F71", fg: "#fff", label: "VISA" },
    mc: { bg: "#1A1714", fg: "#FF5F00", label: "MC" },
    amex: { bg: "#006FCF", fg: "#fff", label: "AMEX" },
    discover: { bg: "#E86C24", fg: "#fff", label: "DISC" },
    apple: { bg: "#000", fg: "#fff", label: "Pay" },
    unknown: { bg: "#847C6E", fg: "#fff", label: "••" },
  };
  const m = map[brand] || map.unknown;
  return <span style={{ display: "inline-grid", placeItems: "center", minWidth: 42, height: 27, borderRadius: 5, background: m.bg, color: m.fg, fontWeight: 800, fontSize: 11, letterSpacing: ".02em", padding: "0 7px" }}>{m.label}</span>;
}

function TapBadge() {
  const { t } = useLang();
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 9, fontSize: 12.5, color: "var(--ink-3)" }}>
      <Icon name="lock" size={14} color="var(--emerald)" />
      <span>{t("booking.secured")}</span>
    </div>
  );
}

function downloadReceipt(rec) {
  const lines = [
    "THIRDWING — Itinerary " + rec.id, "================================", rec.title,
    "Travelers/Nights: " + (rec.travelers || rec.nights || 1),
    "Date: " + (rec.date || ""), "",
    "Base fare:   SAR " + (rec.fare ? rec.fare.base : rec.amount).toLocaleString(),
    rec.fare ? "Service fee: SAR " + rec.fare.fees.toLocaleString() : "",
    rec.fare ? "VAT (15%):   SAR " + rec.fare.vat.toLocaleString() : "",
    "Total paid:  SAR " + rec.amount.toLocaleString(),
    "", "Paid with: " + (rec.paidWith || ""), "Payment ref: " + (rec.paymentRef || ""),
    "", "Thank you for booking with Thirdwing — Corporate Travel, Elevated.",
  ].filter(Boolean);
  const blob = new Blob([lines.join("\n")], { type: "text/plain;charset=utf-8" });
  const url = URL.createObjectURL(blob);
  const a = document.createElement("a"); a.href = url; a.download = rec.id + "-receipt.txt"; document.body.appendChild(a); a.click(); a.remove();
  setTimeout(() => URL.revokeObjectURL(url), 1000);
}

function BookingPage() {
  const { t, lang } = useLang();
  const { pendingBooking, nav, cards, addCard, addBooking, searchCtx, user } = useStore();
  const [step, setStep] = React.useState("details");
  const [selCard, setSelCard] = React.useState(() => (cards.find(c => c.primary) || cards[0] || {}).id);
  const [method, setMethod] = React.useState("saved");
  const [saveCard, setSaveCard] = React.useState(true);
  const [processing, setProcessing] = React.useState(false);
  const [record, setRecord] = React.useState(null);
  const [pax, setPax] = React.useState({ name: "", email: "", org: "", phone: "" });
  const [paxErr, setPaxErr] = React.useState({});
  React.useEffect(() => { if (user) setPax(p => ({ name: p.name || user.name || "", email: p.email || user.email || "", org: p.org || user.org || "", phone: p.phone || user.phone || "" })); }, [user]);
  const [newCard, setNewCard] = React.useState({ number: "", exp: "", cvv: "", name: "" });
  const [cardErr, setCardErr] = React.useState({});
  const [payErr, setPayErr] = React.useState(null);
  const [tapLive, setTapLive] = React.useState(false);
  React.useEffect(() => {
    let alive = true;
    if (window.apiConfig) apiConfig().then(() => { if (alive) setTapLive(window.providerLive && providerLive("tap")); });
    return () => { alive = false; };
  }, []);

  if (!pendingBooking) {
    return <main style={{ paddingTop: 140, minHeight: "70vh" }} className="wrap"><div className="card card-pad center">{t("booking.empty")} <button className="btn btn-primary btn-sm" style={{ marginInlineStart: 12 }} onClick={() => nav("flights")}>{t("booking.searchFlights")}</button></div></main>;
  }
  const b = pendingBooking;
  const fees = Math.round(b.amount * 0.05);
  const vat = Math.round((b.amount + fees) * 0.15);
  const total = b.amount + fees + vat;
  const brand = window.detectBrand ? detectBrand(newCard.number) : "unknown";

  const continueToPay = () => {
    const errs = {};
    if (!(pax.name || "").trim()) errs.name = "pay.err.requiredName";
    if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(pax.email || "")) errs.email = "pay.err.email";
    setPaxErr(errs);
    if (Object.keys(errs).length) return;
    setStep("pay");
  };

  // live Tap path: create a charge and redirect to the hosted 3DS page; the
  // booking is finalized on return (handled in the store) after status verify.
  const startTapPay = async () => {
    setProcessing(true);
    try {
      localStorage.setItem("tw_pendingPay", JSON.stringify({
        at: Date.now(),
        b: { type: b.type, title: b.title, date: b.date || searchCtx.depart, travelers: b.travelers, nights: b.nights },
        who: pax.org || pax.name || "Guest booking", fare: { base: b.amount, fees, vat, total },
      }));
      const r = await window.apiPayCreate({ amount: total, currency: "SAR", name: pax.name || pax.org || "Guest", email: pax.email, bookingId: "tw_" + Date.now().toString(36) });
      if (r && r.redirectUrl) { window.location.href = r.redirectUrl; return; }
      if (r && (r.status === "CAPTURED" || r.status === "AUTHORIZED")) {
        const rec = addBooking({ type: b.type, title: b.title, who: pax.org || pax.name || "Guest booking", amount: total, channel: "Web", date: b.date || searchCtx.depart, paidWith: (r.brand || "Card") + " ••" + (r.last4 || ""), paymentRef: r.id, pax, travelers: b.travelers, nights: b.nights, fare: { base: b.amount, fees, vat, total } });
        localStorage.removeItem("tw_pendingPay"); setRecord(rec); setProcessing(false); setStep("done"); return;
      }
      setProcessing(false); setPayErr("pay.err.declined");
    } catch (e) { setProcessing(false); setPayErr("pay.err.declined"); }
  };

  const pay = () => {
    setPayErr(null);
    if (tapLive) { startTapPay(); return; }
    if (method === "new") {
      const v = window.validateCard ? validateCard(newCard) : { ok: true, errors: {} };
      if (!v.ok) { setCardErr(v.errors); return; }
    } else if (method === "saved") {
      if (!selCard) { setPayErr("pay.err.noCard"); return; }
    }
    setProcessing(true);
    setTimeout(() => {
      let paidWith;
      if (method === "new") {
        const tok = tokenize(newCard);
        if (saveCard) addCard({ brand: tok.brand, last4: tok.last4, exp: tok.exp, name: pax.org || (newCard.name || "Saved card"), token: tok.token });
        paidWith = (BRAND_LABEL[tok.brand] || "Card") + " ••" + tok.last4;
      } else {
        const c = cards.find(x => x.id === selCard) || cards[0];
        paidWith = (BRAND_LABEL[c.brand] || "Card") + " ••" + c.last4;
      }
      const ref = window.paymentRef ? paymentRef() : "PAY-" + Date.now().toString(36).toUpperCase();
      const rec = addBooking({
        type: b.type, title: b.title, who: pax.org || pax.name || "Guest booking", amount: total,
        channel: "Web", date: b.date || searchCtx.depart,
        paidWith, paymentRef: ref, pax, travelers: b.travelers, nights: b.nights,
        fare: { base: b.amount, fees, vat, total },
      });
      setRecord(rec); setProcessing(false); setStep("done");
    }, 700);
  };

  const err = (k) => k ? <div style={{ color: "var(--danger)", fontSize: 12.5, marginTop: 5 }}>{t(k)}</div> : null;

  return (
    <main style={{ paddingTop: 96, background: "var(--paper-2)", minHeight: "100vh" }}>
      <div className="wrap" style={{ paddingTop: 30, paddingBottom: 70 }}>
        <button className="btn btn-ghost btn-sm" onClick={() => nav(b.type === "hotel" ? "hotels" : b.type === "package" ? "packages" : "flights")} style={{ marginBottom: 22 }}><Icon name="arrowL" size={15} className="flip-rtl" /> {t("booking.back")}</button>

        <div style={{ display: "flex", gap: 8, marginBottom: 26, flexWrap: "wrap" }}>
          {[["details", t("booking.step.details")], ["pay", t("booking.step.pay")], ["done", t("booking.step.done")]].map(([s, l], i) => {
            const order = ["details", "pay", "done"];
            const active = order.indexOf(step) >= i;
            return (
              <div key={s} style={{ display: "flex", alignItems: "center", gap: 8 }}>
                <span style={{ width: 26, height: 26, borderRadius: "50%", display: "grid", placeItems: "center", fontSize: 13, fontWeight: 700, background: active ? "var(--emerald)" : "var(--paper-3)", color: active ? "#fff" : "var(--ink-3)" }}>{i + 1}</span>
                <span style={{ fontSize: 13.5, fontWeight: 600, color: active ? "var(--ink)" : "var(--ink-3)" }}>{l}</span>
                {i < 2 && <span style={{ width: 30, height: 1, background: "var(--line-2)" }}></span>}
              </div>
            );
          })}
        </div>

        <div className="split" style={{ display: "grid", gridTemplateColumns: "1fr 380px", gap: 26, alignItems: "start" }}>
          <div className="card card-pad">
            {step === "details" && (
              <div>
                <h2 style={{ fontFamily: "var(--serif)", fontSize: 26, fontWeight: 600, marginBottom: 4 }}>{t("booking.step.details")}</h2>
                <p className="muted" style={{ fontSize: 14, marginBottom: 22 }}>{t("booking.details.sub")}</p>
                <div className="rcol-2" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
                  <div className="field"><label>{t("booking.f.name")}</label><input className="input" value={pax.name} onChange={e => setPax({ ...pax, name: e.target.value })} placeholder={t("booking.ph.name")} aria-invalid={!!paxErr.name} />{err(paxErr.name)}</div>
                  <div className="field"><label>{t("booking.f.org")}</label><input className="input" value={pax.org} onChange={e => setPax({ ...pax, org: e.target.value })} placeholder={t("booking.ph.org")} /></div>
                  <div className="field"><label>{t("booking.f.email")}</label><input className="input" type="email" value={pax.email} onChange={e => setPax({ ...pax, email: e.target.value })} placeholder={t("booking.ph.email")} aria-invalid={!!paxErr.email} />{err(paxErr.email)}</div>
                  <div className="field"><label>{t("booking.f.phone")}</label><input className="input" value={pax.phone} onChange={e => setPax({ ...pax, phone: e.target.value })} placeholder={t("booking.ph.phone")} /></div>
                </div>
                <div className="card" style={{ marginTop: 20, padding: 16, background: "var(--emerald-wash)", border: "1px solid var(--emerald-tint)", display: "flex", gap: 12, alignItems: "flex-start" }}>
                  <Icon name="shield" size={20} color="var(--emerald)" />
                  <div style={{ fontSize: 13.5, color: "var(--emerald-d)" }}><strong>{t("booking.policyOk")}</strong> {t("booking.policyDetail")}</div>
                </div>
                <button className="btn btn-primary btn-lg btn-block" style={{ marginTop: 22 }} onClick={continueToPay}>{t("booking.continue")} <Icon name="arrow" size={17} className="flip-rtl" /></button>
              </div>
            )}

            {step === "pay" && (
              <div>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 4, flexWrap: "wrap", gap: 8 }}>
                  <h2 style={{ fontFamily: "var(--serif)", fontSize: 26, fontWeight: 600 }}>{t("booking.step.pay")}</h2>
                  <TapBadge />
                </div>
                <p className="muted" style={{ fontSize: 14, marginBottom: 20 }}>{t("booking.pay.sub")}</p>

                {tapLive && (
                  <div className="card" style={{ padding: 20, background: "var(--emerald-wash)", border: "1px solid var(--emerald-tint)", display: "flex", gap: 14, alignItems: "center", marginBottom: 18 }}>
                    <Icon name="lock" size={24} color="var(--emerald)" />
                    <div style={{ fontSize: 13.5, color: "var(--emerald-d)" }}>{lang === "ar" ? "ستُكمل الدفع بأمان على صفحة Tap (مدى · فيزا · ماستركارد · Apple Pay). لا نلمس بيانات بطاقتك." : "You'll complete payment securely on Tap's page (mada · Visa · Mastercard · Apple Pay). We never touch your card details."}</div>
                  </div>
                )}

                {!tapLive && (<>
                <div style={{ display: "flex", gap: 8, marginBottom: 18 }}>
                  {[["saved", t("booking.pay.saved")], ["new", t("booking.pay.new")]].map(([m, l]) => (
                    <button key={m} onClick={() => { setMethod(m); setPayErr(null); }} style={{ flex: 1, padding: "11px", borderRadius: 12, border: "1px solid " + (method === m ? "var(--emerald)" : "var(--line-2)"), background: method === m ? "var(--emerald-wash)" : "#fff", color: method === m ? "var(--emerald)" : "var(--ink-2)", fontWeight: 600, fontSize: 14, cursor: "pointer", fontFamily: "var(--sans)" }}>{l}</button>
                  ))}
                </div>

                {method === "saved" && (
                  <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
                    {cards.map(c => (
                      <label key={c.id} style={{ display: "flex", alignItems: "center", gap: 14, padding: 16, borderRadius: 14, border: "1px solid " + (selCard === c.id ? "var(--emerald)" : "var(--line-2)"), background: selCard === c.id ? "var(--emerald-wash)" : "#fff", cursor: "pointer" }}>
                        <input type="radio" checked={selCard === c.id} onChange={() => setSelCard(c.id)} style={{ accentColor: "var(--emerald)" }} />
                        <BrandMark brand={c.brand} />
                        <div style={{ flex: 1 }}>
                          <div style={{ fontWeight: 600, fontSize: 14.5 }}>{c.name} · •• {c.last4}</div>
                          <div className="muted" style={{ fontSize: 12.5 }}>{t("booking.f.exp")} {c.exp} · {c.token}</div>
                        </div>
                        {c.primary && <span className="chip chip-gold" style={{ fontSize: 11 }}>{t("booking.primary")}</span>}
                      </label>
                    ))}
                    <div className="chip chip-emerald" style={{ width: "fit-content", marginTop: 4 }}><Icon name="bolt" size={13} /> {t("booking.oneClick")}</div>
                  </div>
                )}

                {method === "new" && (
                  <div className="rcol-2" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
                    <div className="field" style={{ gridColumn: "1/3" }}>
                      <label>{t("booking.f.cardNo")}</label>
                      <div style={{ position: "relative" }}>
                        <input className="input" inputMode="numeric" value={newCard.number} onChange={e => setNewCard({ ...newCard, number: formatCardNumber(e.target.value) })} placeholder="•••• •••• •••• ••••" aria-invalid={!!cardErr.number} style={{ paddingInlineEnd: 56 }} />
                        {brand !== "unknown" && <span style={{ position: "absolute", insetInlineEnd: 10, top: "50%", transform: "translateY(-50%)" }}><BrandMark brand={brand} /></span>}
                      </div>{err(cardErr.number)}
                    </div>
                    <div className="field"><label>{t("booking.f.exp")}</label><input className="input" inputMode="numeric" value={newCard.exp} onChange={e => setNewCard({ ...newCard, exp: formatExpiry(e.target.value) })} placeholder="MM / YY" aria-invalid={!!cardErr.exp} />{err(cardErr.exp)}</div>
                    <div className="field"><label>{t("booking.f.cvv")}</label><input className="input" inputMode="numeric" maxLength={4} value={newCard.cvv} onChange={e => setNewCard({ ...newCard, cvv: e.target.value.replace(/\D/g, "") })} placeholder="•••" aria-invalid={!!cardErr.cvv} />{err(cardErr.cvv)}</div>
                    <div className="field" style={{ gridColumn: "1/3" }}><label>{t("booking.f.cardName")}</label><input className="input" value={newCard.name} onChange={e => setNewCard({ ...newCard, name: e.target.value })} placeholder={t("booking.ph.cardName")} aria-invalid={!!cardErr.name} />{err(cardErr.name)}</div>
                    <label style={{ gridColumn: "1/3", display: "flex", gap: 10, alignItems: "center", fontSize: 14, cursor: "pointer" }}>
                      <input type="checkbox" checked={saveCard} onChange={e => setSaveCard(e.target.checked)} style={{ accentColor: "var(--emerald)" }} />
                      {t("booking.saveCard")}
                    </label>
                  </div>
                )}

                </>)}

                {payErr && <div style={{ color: "var(--danger)", fontSize: 13.5, marginTop: 14, padding: "10px 14px", background: "var(--danger-wash)", borderRadius: 10 }}>{t(payErr)}</div>}

                <div style={{ display: "flex", gap: 12, marginTop: 24 }}>
                  <button className="btn btn-ghost" onClick={() => setStep("details")}><Icon name="arrowL" size={15} className="flip-rtl" /> {t("common.back")}</button>
                  <button className="btn btn-primary btn-block" disabled={processing} onClick={pay}>
                    {processing ? <><Spinner /> {t("booking.processing")}</> : <><Icon name="lock" size={16} /> {t("booking.pay")} <Money value={total} /></>}
                  </button>
                </div>
              </div>
            )}

            {step === "done" && record && (
              <div style={{ textAlign: "center", padding: "20px 10px" }}>
                <div style={{ width: 72, height: 72, borderRadius: "50%", background: "var(--emerald-wash)", display: "grid", placeItems: "center", margin: "0 auto 18px" }}>
                  <Icon name="check" size={36} color="var(--emerald)" stroke={2.2} />
                </div>
                <h2 style={{ fontFamily: "var(--serif)", fontSize: 30, fontWeight: 600 }}>{t("booking.confirmed")}</h2>
                <p className="muted" style={{ marginTop: 8 }}>{t("booking.confirmed.sub", { id: record.id })}</p>
                <div className="card" style={{ padding: 18, marginTop: 22, textAlign: "start", background: "var(--paper)" }}>
                  <div style={{ display: "flex", justifyContent: "space-between", fontWeight: 600 }}><span>{b.title}</span><span><Money value={total} /></span></div>
                  <div className="hr" style={{ margin: "12px 0" }}></div>
                  <Row label={t("booking.paidWith")} value={record.paidWith} />
                  <Row label={t("booking.ref")} value={<span style={{ fontFamily: "monospace", fontSize: 13 }}>{record.paymentRef}</span>} />
                </div>
                <button className="btn btn-ghost btn-sm" style={{ marginTop: 16 }} onClick={() => downloadReceipt(record)}><Icon name="doc" size={15} /> {t("booking.receipt")}</button>
                <div style={{ display: "flex", gap: 12, justifyContent: "center", marginTop: 18, flexWrap: "wrap" }}>
                  <button className="btn btn-ghost" onClick={() => nav("home")}>{t("booking.toHome")}</button>
                  <button className="btn btn-primary" onClick={() => nav("trips")}>{t("booking.toTrips")} <Icon name="arrow" size={16} className="flip-rtl" /></button>
                </div>
              </div>
            )}
          </div>

          <aside className="card card-pad sticky-aside" style={{ position: "sticky", top: 92 }}>
            <div style={{ fontSize: 12, letterSpacing: ".14em", textTransform: "uppercase", color: "var(--gold-d)", fontWeight: 700 }}>{t("booking.summary")}</div>
            <Placeholder slot={"trip_" + b.type} label={b.type === "hotel" ? "Hotel imagery" : b.type === "package" ? "Package imagery" : "Cabin imagery"} h={130} r="var(--r)" tone={b.type === "hotel" ? "sky" : "emerald"} style={{ marginTop: 14 }} />
            <h3 style={{ fontFamily: "var(--serif)", fontSize: 21, fontWeight: 600, marginTop: 16 }}>{b.title}</h3>
            {(b.travelers > 1 || b.nights > 1) && <div className="muted" style={{ fontSize: 13, marginTop: 4 }}>{b.travelers > 1 ? t("booking.travelersN", { n: b.travelers }) : t("pkg.includes", { nights: b.nights }).split("·")[0]}</div>}
            <div className="hr" style={{ margin: "16px 0" }}></div>
            <Row label={t("booking.baseFare")} value={<Money value={b.amount} />} />
            <Row label={t("booking.serviceFee")} value={<Money value={fees} />} />
            <Row label={t("booking.vat")} value={<Money value={vat} />} />
            <div className="hr" style={{ margin: "14px 0" }}></div>
            <Row label={<strong style={{ fontSize: 16 }}>{t("booking.total")}</strong>} value={<strong style={{ fontSize: 19 }}><Money value={total} /></strong>} />
            <div style={{ marginTop: 18 }}><TapBadge /></div>
          </aside>
        </div>
      </div>
    </main>
  );
}

function Row({ label, value }) {
  return <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "5px 0", fontSize: 14.5, color: "var(--ink-2)" }}><span>{label}</span><span>{value}</span></div>;
}

function Spinner({ size = 16, color = "#fff" }) {
  return <span style={{ width: size, height: size, border: `2px solid ${color}`, borderTopColor: "transparent", borderRadius: "50%", display: "inline-block", animation: "spin .7s linear infinite" }} />;
}

Object.assign(window, { BookingPage, BrandMark, TapBadge, Row, Spinner, downloadReceipt });