/* ============================================================
   EnrollForm — enrollment + payment for the author's course
   Monochrome, hairline-driven. Mock payment flow (prototype):
   on submit it transitions to a confirmation state.
   NOTE: price is a placeholder — confirm the real number.
   ============================================================ */

/* Тарифы и цены живут в SalesSections.jsx (SALES_TARIFFS) —
   этот файл только читает их. Правьте цены там. */
const CNY_RATE = 10.5831;            // ₽ за 1 ¥ — курс ЦБ РФ на 10.06.2026
const CNY_FEE = 0.02;                // +2% комиссия за оплату в юанях
const toCny = (rub) => Math.ceil((rub / CNY_RATE) * (1 + CNY_FEE));
const fmt = (n) => n.toLocaleString("ru-RU");
const fmtCny = (n) => "¥" + n.toLocaleString("zh-CN");

/* labelled text input */
function Field({ label, type = "text", value, onChange, placeholder, required, half }) {
  const [focus, setFocus] = React.useState(false);
  return (
    <label style={{ display: "block", gridColumn: half ? "auto" : "1 / -1" }}>
      <span style={{ display: "block", marginBottom: 10 }}>
        <Label tone="ink">{label}{required && <span style={{ color: "var(--down)" }}> *</span>}</Label>
      </span>
      <input type={type} value={value} onChange={(e) => onChange(e.target.value)} placeholder={placeholder}
        onFocus={() => setFocus(true)} onBlur={() => setFocus(false)}
        style={{ width: "100%", height: 52, padding: "0 16px", background: "var(--paper)",
          border: `1px solid ${focus ? "var(--ink)" : "var(--hairline-2)"}`, borderRadius: 6,
          fontFamily: "var(--font-sans)", fontSize: 15.5, color: "var(--ink)", outline: "none",
          transition: "border-color var(--dur) var(--ease)" }} />
    </label>
  );
}

/* selectable option tile (payment method) */
function OptionTile({ active, onClick, title, sub }) {
  const [h, setH] = React.useState(false);
  return (
    <button type="button" onClick={onClick} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{ textAlign: "left", padding: "16px 18px", borderRadius: 6, cursor: "pointer",
        background: active ? "var(--ink)" : "var(--paper)",
        border: `1px solid ${active ? "var(--ink)" : h ? "var(--ink)" : "var(--hairline-2)"}`,
        transition: "all var(--dur) var(--ease)", display: "flex", alignItems: "center", gap: 14 }}>
      <span style={{ width: 18, height: 18, borderRadius: 999, flexShrink: 0,
        border: `1px solid ${active ? "var(--paper-on-ink)" : "var(--hairline-2)"}`,
        display: "grid", placeItems: "center" }}>
        {active && <span style={{ width: 8, height: 8, borderRadius: 999, background: "var(--paper-on-ink)" }} />}
      </span>
      <span>
        <span style={{ display: "block", fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: 15,
          color: active ? "var(--paper-on-ink)" : "var(--ink)" }}>{title}</span>
        {sub && <span style={{ display: "block", marginTop: 3, fontFamily: "var(--font-sans)", fontSize: 12.5,
          color: active ? "var(--ink-on-ink-2)" : "var(--ink-3)" }}>{sub}</span>}
      </span>
    </button>
  );
}

function SummaryRow({ label, value, strong, muted }) {
  return (
    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 16,
      padding: "12px 0", borderBottom: "1px solid rgba(255,255,255,0.12)" }}>
      <span style={{ fontFamily: "var(--font-sans)", fontSize: strong ? 14 : 13.5,
        color: muted ? "var(--ink-on-ink-2)" : "var(--paper-on-ink)",
        fontWeight: strong ? 600 : 400 }}>{label}</span>
      <span style={{ fontFamily: strong ? "var(--font-mono)" : "var(--font-sans)",
        fontSize: strong ? 17 : 13.5, fontWeight: strong ? 500 : 400,
        color: muted ? "var(--ink-on-ink-2)" : "var(--paper-on-ink)",
        textDecoration: muted === "strike" ? "line-through" : "none", whiteSpace: "nowrap" }}>{value}</span>
    </div>
  );
}

function EnrollForm() {
  const { t } = useT();
  const tariffs = window.SALES_TARIFFS || [];
  // подписка на закрытый Telegram-канал — как отдельный оформляемый пункт
  const channelOpt = { id: "channel", price: window.CHANNEL_PRICE || 4990, isChannel: true };
  const options = [...tariffs, channelOpt];
  const initialTariff = () => {
    try {
      const p = new URLSearchParams(window.location.search).get("tariff");
      if (p && options.some((x) => x.id === p)) return p;
    } catch (e) {}
    return "flagship";
  };
  const [tariff, setTariff] = React.useState(initialTariff);
  const [form, setForm] = React.useState({ name: "", phone: "", email: "", tg: "", comment: "" });
  const [pay, setPay] = React.useState(() => (getLang() === "zh" ? "cny" : "card"));
  const [promo, setPromo] = React.useState("");
  const [offerAccepted, setOfferAccepted] = React.useState(false);
  const [showAuth, setShowAuth] = React.useState(false);
  const [showOffer, setShowOffer] = React.useState(false);
  const [sent, setSent] = React.useState(false);
  const [paying, setPaying] = React.useState(false);
  const [payErr, setPayErr] = React.useState("");
  const { phone: authPhone, user, logout } = useAuth();
  const set = (k) => (v) => setForm((f) => ({ ...f, [k]: v }));

  // подставляем имя из аккаунта, если поле ещё пустое
  React.useEffect(() => {
    if (user && user.name) setForm((f) => (f.name ? f : { ...f, name: user.name }));
  }, [authPhone]);

  // оплата доступна только вошедшему пользователю, принявшему оферту
  const valid = form.name.trim() && authPhone && offerAccepted;

  const submit = async (e) => {
    e.preventDefault();
    if (!form.name.trim()) return;
    // цель «форма отправлена» — до всех гейтов: считаем намерение, а не только успех
    if (typeof alGoal === "function") alGoal("form_submit", { tariff: cur.id });
    // шаг 1 — авторизация: нужен РЕАЛЬНЫЙ токен бэкенда, а не кэш-сессия (иначе 401)
    if (!authPhone || (typeof getToken === "function" && !getToken())) { setShowAuth(true); return; }
    if (!offerAccepted) { setShowOffer(true); return; }   // шаг 2 — договор оферты
    // шаг 3 — реальная оплата через ЮKassa (чек 54-ФЗ → нужен e-mail)
    const email = (form.email || "").trim() || (user && user.email) || "";
    if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(email)) {
      setPayErr(t("enroll.needEmail", "Укажите e-mail — на него придёт чек")); return;
    }
    setPayErr(""); setPaying(true);
    try {
      const r = await authApi.startPayment(cur.id, email);
      if (r && r.confirmation_url) { window.location.href = r.confirmation_url; return; }
      setPayErr(t("enroll.payErr", "Не удалось создать платёж, попробуйте позже."));
    } catch (err) {
      if (err && err.status === 401) {   // токен истёк/сессия невалидна — на вход
        setShowAuth(true);
        setPayErr(t("enroll.reauth", "Войдите в аккаунт заново, чтобы оплатить."));
      } else if (err && err.code === "bad_email") {
        setPayErr(t("enroll.needEmail", "Укажите корректный e-mail для чека"));
      } else {
        setPayErr(t("enroll.payErr", "Оплата недоступна, попробуйте позже."));
      }
    } finally { setPaying(false); }
  };

  React.useEffect(() => { if (window.lucide) lucide.createIcons(); });

  const inCny = pay === "cny";
  const price = (rub) => (inCny ? fmtCny(toCny(rub)) : fmt(rub) + " ₽");
  const tierCopy = t("sales.pricing.tiers");
  const channelCopy = t("sales.pricing.channel");
  const curIdx = Math.max(0, options.findIndex((x) => x.id === tariff));
  const cur = options[curIdx] || options[0] || { id: "flagship", price: 0 };
  const isChannel = !!cur.isChannel;
  const curCopy = isChannel ? { name: channelCopy.name, tag: channelCopy.tag } : (tierCopy[curIdx] || {});
  const fromPfx = cur.from ? t("sales.pricing.from") + " " : "";

  if (sent) {
    return (
      <div style={{ background: "var(--ink)", borderRadius: 10, padding: "clamp(40px,6vw,72px)",
        textAlign: "center", maxWidth: 640, margin: "0 auto" }}>
        <div style={{ width: 56, height: 56, borderRadius: 999, border: "1px solid rgba(255,255,255,0.3)",
          display: "grid", placeItems: "center", margin: "0 auto 28px" }}>
          <Icon name="check" style={{ width: 24, height: 24, strokeWidth: 1.6, color: "var(--paper-on-ink)" }} />
        </div>
        <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 300, fontSize: "clamp(26px,3.4vw,38px)",
          color: "var(--paper-on-ink)", margin: "0 0 16px", letterSpacing: "-0.01em" }}>{t("enroll.sentTitle")}</h3>
        <p style={{ fontFamily: "var(--font-sans)", fontSize: 15.5, lineHeight: 1.6, color: "var(--ink-on-ink-2)",
          margin: "0 auto 32px", maxWidth: 420 }}>
          {(isChannel ? t("enroll.sentChannelBody") : t("enroll.sentBody")).replace("{name}", form.name.split(" ")[0] || t("enroll.trader"))}
        </p>
        <div style={{ display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap" }}>
          {isChannel
            ? <Pill variant="primary" icon="arrow" onClick={() => {
                if (typeof alGoal === "function") alGoal("click_bot", { place: "enroll_done" });
                const u = window.TG_SALES_BOT_URL || "https://t.me/Aleksey_Lobov_bot";
                window.open((typeof alBotUrl === "function") ? alBotUrl(u) : u, "_blank", "noopener");
              }}
                style={{ background: "var(--paper-on-ink)", color: "var(--ink)", boxShadow: "none" }}>{t("enroll.openChannel")}</Pill>
            : <Pill variant="primary" icon="arrow" onClick={() => { window.location.href = "learn.html"; }}
                style={{ background: "var(--paper-on-ink)", color: "var(--ink)", boxShadow: "none" }}>{t("learn.title")}</Pill>}
          <Pill variant="secondary" onClick={() => setSent(false)}
            style={{ color: "var(--paper-on-ink)", borderColor: "rgba(250,250,248,0.32)" }}>{t("enroll.editBtn")}</Pill>
        </div>
      </div>
    );
  }

  return (
   <React.Fragment>
    <form onSubmit={submit} style={{ display: "grid", gridTemplateColumns: "1.3fr 0.7fr",
      gap: "clamp(24px,4vw,48px)", alignItems: "start" }} className="enroll-grid">
      {/* ---- left: fields ---- */}
      <div>
        {/* ---- выбор тарифа ---- */}
        <div style={{ marginBottom: 22 }}><Label>{t("sales.enroll.yourTariff")}</Label></div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr", gap: 12, marginBottom: 34 }}>
          {options.map((op, i) => {
            const isCh = !!op.isChannel;
            const c = isCh ? channelCopy : (tierCopy[i] || {});
            const sub = (op.from ? t("sales.pricing.from") + " " : "") + price(op.price)
              + (isCh && channelCopy.priceNote ? " " + channelCopy.priceNote : "")
              + (c.tag ? " · " + c.tag : "");
            return (
              <OptionTile key={op.id} active={tariff === op.id} onClick={() => setTariff(op.id)}
                title={c.name || op.id} sub={sub} />
            );
          })}
        </div>

        <div style={{ marginBottom: 22 }}><Label>{t("enroll.yourData")}</Label></div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18 }}>
          <Field label={t("enroll.name")} value={form.name} onChange={set("name")} placeholder={t("enroll.namePh")} required />
          <Field label={t("enroll.phone")} type="tel" value={form.phone} onChange={set("phone")} placeholder="+7 ___ ___ __ __" half />
          <Field label={t("enroll.email")} type="email" value={form.email} onChange={set("email")} placeholder="you@mail.com" half />
          <Field label={t("enroll.tg")} value={form.tg} onChange={set("tg")} placeholder="@username" half />
          <Field label={t("enroll.comment")} value={form.comment} onChange={set("comment")} placeholder={t("enroll.commentPh")} />
        </div>

        <div style={{ margin: "34px 0 22px" }}><Label>{t("enroll.payMethod")}</Label></div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }} className="pay-grid">
          <OptionTile active={pay === "card"} onClick={() => setPay("card")} title={t("enroll.payCard")} sub={t("enroll.payCardSub")} />
          <OptionTile active={pay === "sbp"} onClick={() => setPay("sbp")} title={t("enroll.paySbp")} sub={t("enroll.paySbpSub")} />
          <OptionTile active={pay === "transfer"} onClick={() => setPay("transfer")} title={t("enroll.payTransfer")} sub={t("enroll.payTransferSub")} />
          <OptionTile active={pay === "cny"} onClick={() => setPay("cny")} title={t("enroll.payCny")} sub={t("enroll.payCnySub")} />
        </div>

        {/* ---- авторизация покупателя (телефон + пароль + 2FA) ---- */}
        <div style={{ margin: "34px 0 14px" }}><Label>{t("auth.account")}</Label></div>
        <div style={{ display: "flex", alignItems: "center", gap: 12, flexWrap: "wrap",
          padding: "14px 16px", border: `1px solid ${authPhone ? "var(--ink)" : "var(--hairline-2)"}`,
          borderRadius: 8, background: "var(--paper)" }}>
          <Icon name="lock" style={{ width: 16, height: 16, strokeWidth: 1.7,
            color: authPhone ? "var(--ink)" : "var(--ink-3)" }} />
          <span style={{ fontFamily: "var(--font-sans)", fontSize: 13.5, color: "var(--ink-2)" }}>
            {authPhone
              ? <React.Fragment>{t("auth.loggedInAs")} <b style={{ color: "var(--ink)" }}>{(user && (user.name || user.email)) || authPhone}</b></React.Fragment>
              : t("auth.authHint")}
          </span>
          <div style={{ marginLeft: "auto" }}>
            {authPhone
              ? <button type="button" onClick={logout} style={{ background: "none", border: "none", cursor: "pointer",
                  fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: 11, letterSpacing: "0.12em",
                  textTransform: "uppercase", color: "var(--ink-3)" }}>{t("auth.logout")}</button>
              : <Pill variant="secondary" onClick={() => setShowAuth(true)} style={{ height: 40 }}>{t("auth.loginRegister")}</Pill>}
          </div>
        </div>

        {/* ---- договор оферты: прочитать → «Согласен» ---- */}
        <button type="button" onClick={() => setShowOffer(true)}
          style={{ width: "100%", display: "flex", alignItems: "flex-start", gap: 12, marginTop: 14,
            padding: "14px 16px", borderRadius: 8, cursor: "pointer", textAlign: "left",
            background: "var(--paper)", border: `1px solid ${offerAccepted ? "var(--ink)" : "var(--hairline-2)"}` }}>
          <span style={{ width: 20, height: 20, borderRadius: 5, flexShrink: 0, marginTop: 1,
            display: "grid", placeItems: "center",
            background: offerAccepted ? "var(--ink)" : "var(--paper)",
            border: `1px solid ${offerAccepted ? "var(--ink)" : "var(--hairline-2)"}` }}>
            {offerAccepted && <Icon name="check" style={{ width: 13, height: 13, strokeWidth: 2.4, color: "var(--paper-on-ink)" }} />}
          </span>
          <span style={{ fontFamily: "var(--font-sans)", fontSize: 13, lineHeight: 1.6, color: "var(--ink-2)" }}>
            {offerAccepted
              ? t("auth.offerAccepted")
              : <React.Fragment>{t("auth.offerAgreePrefix")}{" "}
                  <span style={{ color: "var(--ink)", textDecoration: "underline", textUnderlineOffset: 3 }}>{t("auth.offerAgreeLink")}</span></React.Fragment>}
          </span>
        </button>
      </div>

      {/* ---- right: order summary (dark) ---- */}
      <aside style={{ position: "sticky", top: 92, background: "var(--ink)", borderRadius: 10,
        padding: "28px 26px" }}>
        <div style={{ marginBottom: 18 }}><Label tone="faint">{t("enroll.yourOrder")}</Label></div>
        <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 300, fontSize: 25, lineHeight: 1.15,
          color: "var(--paper-on-ink)", margin: "0 0 4px", letterSpacing: "-0.01em" }}>{curCopy.name || t("enroll.courseName")}</h3>
        <p style={{ fontFamily: "var(--font-sans)", fontSize: 13, color: "var(--ink-on-ink-2)", margin: "0 0 22px" }}>
          {t("sales.enroll.metas." + cur.id, t("enroll.courseMeta"))}
        </p>

        <SummaryRow label={t("enroll.courseName")} value={curCopy.tag || ""} muted />

        {/* promo */}
        <div style={{ display: "flex", gap: 8, margin: "16px 0 4px" }}>
          <input value={promo} onChange={(e) => setPromo(e.target.value)} placeholder={t("enroll.promoPh")}
            style={{ flex: 1, height: 42, padding: "0 14px", background: "transparent",
              border: "1px solid rgba(255,255,255,0.2)", borderRadius: 6, color: "var(--paper-on-ink)",
              fontFamily: "var(--font-sans)", fontSize: 14, outline: "none" }} />
          <button type="button" style={{ height: 42, padding: "0 16px", borderRadius: 6,
            border: "1px solid rgba(255,255,255,0.2)", background: "transparent", color: "var(--paper-on-ink)",
            fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: 11, letterSpacing: "0.12em",
            textTransform: "uppercase", cursor: "pointer" }}>OK</button>
        </div>

        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline",
          padding: "20px 0 4px", marginTop: 8 }}>
          <span style={{ fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: 14, color: "var(--paper-on-ink)" }}>{t("enroll.total")}</span>
          <span style={{ fontFamily: "var(--font-mono)", fontWeight: 500, fontSize: 30, letterSpacing: "0.01em",
            color: "var(--paper-on-ink)", fontVariantNumeric: "tabular-nums" }}>
            {fromPfx}{price(cur.price)}
            {isChannel && channelCopy.priceNote && (
              <span style={{ fontFamily: "var(--font-sans)", fontSize: 14, fontWeight: 400,
                color: "var(--ink-on-ink-2)" }}> {channelCopy.priceNote}</span>
            )}
          </span>
        </div>
        {cur.limited && (
          <p style={{ fontFamily: "var(--font-sans)", fontSize: 11.5, lineHeight: 1.5,
            color: "var(--ink-on-ink-2)", margin: "2px 0 0", textAlign: "right" }}>
            {t("sales.enroll.limitedNote")}
          </p>
        )}
        {inCny && (
          <p style={{ fontFamily: "var(--font-sans)", fontSize: 11.5, lineHeight: 1.5,
            color: "var(--ink-on-ink-2)", margin: "2px 0 0", textAlign: "right" }}>
            {t("enroll.rateNote")}
          </p>
        )}

        <button type="submit" disabled={!form.name.trim() || paying}
          style={{ width: "100%", height: 54, marginTop: 18, borderRadius: 999, border: "none",
            background: form.name.trim() ? "var(--paper-on-ink)" : "rgba(255,255,255,0.18)",
            color: form.name.trim() ? "var(--ink)" : "var(--ink-on-ink-2)",
            fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: 12, letterSpacing: "0.14em",
            textTransform: "uppercase", cursor: (form.name.trim() && !paying) ? "pointer" : "not-allowed",
            display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 10,
            transition: "background var(--dur) var(--ease)" }}>
          {paying ? t("enroll.paying", "Создаём платёж…")
            : !authPhone ? t("auth.loginToPay")
            : !offerAccepted ? t("auth.offerAgreeThenPay") : t("enroll.pay")}
          {!paying && <Icon name="arrow-right" style={{ width: 15, height: 15 }} />}
        </button>
        {payErr && (
          <p style={{ fontFamily: "var(--font-sans)", fontSize: 12.5, lineHeight: 1.5, color: "#ff9a9a",
            margin: "12px 0 0", textAlign: "center" }}>{payErr}</p>
        )}
        <p style={{ fontFamily: "var(--font-sans)", fontSize: 11.5, lineHeight: 1.5, color: "var(--ink-on-ink-2)",
          margin: "16px 0 0", textAlign: "center" }}>
          {t("enroll.secure")}
        </p>
      </aside>
    </form>

    <AuthModal open={showAuth} onClose={() => setShowAuth(false)} initialMode="login"
      onAuthed={() => setShowAuth(false)} />
    <OfferModal open={showOffer} onClose={() => setShowOffer(false)}
      onAccept={() => setOfferAccepted(true)} />
   </React.Fragment>
  );
}

Object.assign(window, { EnrollForm });