/* ============================================================
   BLUEPRINTSENSES — PRO UNLOCK
   One-time unlock per concept slot. Every lock in the app calls
   askUnlock(reason) and lands on the same offer; after payment the
   user stays on the step they were on, with every lock open.
   Payment is simulated in this prototype (no card fields, no charge).
   No student promotion for now.
   ============================================================ */
const { useState: useStateP } = React;


const ProContext = React.createContext({ pro: false, askUnlock: () => {} });
const usePro = () => React.useContext(ProContext);

/* small "Pro" pill */
function ProBadge({ dark }) {
  return (
    <span className="mono" style={{
      fontSize: 9, letterSpacing: ".1em", fontWeight: 700, textTransform: "uppercase",
      padding: "2px 7px", borderRadius: 6, whiteSpace: "nowrap",
      background: dark ? "rgba(211,169,84,.18)" : "var(--amber-tint)", color: dark ? "var(--brass)" : "var(--brass-deep)",
    }}>Pro</span>
  );
}

const LockIcon = ({ size = 13, color = "currentColor" }) => (
  <svg width={size} height={size} viewBox="0 0 16 16" fill="none" stroke={color} strokeWidth="1.6" aria-hidden="true" style={{ flexShrink: 0 }}>
    <rect x="3" y="7" width="10" height="7" rx="2" /><path d="M5.5 7V5a2.5 2.5 0 0 1 5 0v2" />
  </svg>
);

/* a compact locked strip: "Pro · what it adds" — shown but not in the way */
function LockedStrip({ title, items, reason, compact }) {
  const { askUnlock } = usePro();
  const { t } = useLang();
  return (
    <button onClick={() => askUnlock(reason)} style={{
      display: "flex", alignItems: "center", gap: 12, width: "100%", textAlign: "left",
      marginTop: compact ? 10 : 16, padding: compact ? "10px 14px" : "13px 16px", borderRadius: 12,
      border: "1.5px dashed var(--border-strong)", background: "var(--surface-2)", cursor: "pointer", fontFamily: "inherit",
    }}>
      <span style={{ width: 28, height: 28, borderRadius: 8, background: "var(--amber-tint)", display: "grid", placeItems: "center", flexShrink: 0 }}>
        <LockIcon color="var(--brass-deep)" />
      </span>
      <span style={{ flex: 1, minWidth: 0 }}>
        <span style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 14, fontWeight: 700, color: "var(--ink)" }}>{title} <ProBadge /></span>
        {items && <span style={{ display: "block", fontSize: 12.5, color: "var(--muted)", marginTop: 2, lineHeight: 1.45 }}>{items}</span>}
      </span>
      <span style={{ fontSize: 12.5, fontWeight: 700, color: "var(--accent)", flexShrink: 0 }}>{t("pro.unlockShort")}</span>
    </button>
  );
}

/* blur a Pro preview and put the offer on top */
function LockedPreview({ children, title, sub, reason, height = 260 }) {
  const { askUnlock } = usePro();
  const { t } = useLang();
  return (
    <div style={{ position: "relative", borderRadius: "var(--radius)", overflow: "hidden", border: "1px solid var(--border)", background: "var(--surface)", boxShadow: "var(--shadow)" }}>
      <div aria-hidden="true" style={{ filter: "blur(5px)", opacity: .55, pointerEvents: "none", userSelect: "none", maxHeight: height, overflow: "hidden" }}>{children}</div>
      <div style={{ position: "absolute", inset: 0, display: "grid", placeItems: "center", padding: 20, background: "linear-gradient(180deg, rgba(244,246,249,.2), rgba(244,246,249,.85))" }}>
        <div style={{ textAlign: "center", maxWidth: 380 }}>
          <div style={{ display: "inline-flex", alignItems: "center", gap: 8 }}><LockIcon size={16} color="var(--brass-deep)" /><ProBadge /></div>
          <div className="serif" style={{ fontSize: 24, marginTop: 8, lineHeight: 1.2 }}>{title}</div>
          {sub && <div style={{ color: "var(--muted)", fontSize: 14, marginTop: 6, lineHeight: 1.5 }}>{sub}</div>}
          <button onClick={() => askUnlock(reason)} style={{ ...btnPrimary, marginTop: 16, padding: "12px 22px", fontSize: 14.5 }}>{t("pro.unlockThis")}</button>
        </div>
      </div>
    </div>
  );
}

/* ---------- the offer ---------- */
function UnlockModal({ reason, plan, account, slot, onClose, onPaid }) {
  const { t, lang } = useLang();
  const [stage, setStage] = useStateP("offer"); // offer → checkout → done
  const [name, setName] = useStateP((account && account.name) || "");
  const [email, setEmail] = useStateP((account && account.email) || "");

  const live = computeFin(plan.financials, t);
  const proj = computeProjection(plan.financials, t, "planned");
  const conceptName = plan.idea.conceptName || t("pro.thisConcept");
  const hasNumbers = (plan.financials.step || 0) > 0 && live.sales > 0 && live.investment > 0; // only real numbers, never untouched defaults

  const gains = [
    ["pro.gainConcept", "pro.gainConceptSub"],
    ["pro.gainFinancial", "pro.gainFinancialSub"],
    ["pro.gainOwnership", "pro.gainOwnershipSub"],
    ["pro.gainOutputs", "pro.gainOutputsSub"],
  ];

  const pay = () => {
    onPaid({ name: name.trim(), email: email.trim(), student: false, price: null });
    setStage("done");
  };

  const overlay = { position: "fixed", inset: 0, background: "rgba(17,32,58,.55)", zIndex: 120, display: "grid", placeItems: "center", padding: 16, animation: "fadeIn .2s" };
  const panel = { ...card, width: "min(600px, 100%)", maxHeight: "90vh", overflowY: "auto", padding: 0 };

  return (
    <div onClick={onClose} style={overlay}>
      <div onClick={(e) => e.stopPropagation()} style={panel} role="dialog" aria-modal="true" aria-label={t("pro.unlockThis")}>
        <div style={{ padding: "26px 28px 20px", background: "linear-gradient(150deg, var(--rail-top), var(--rail-bot))", color: "#fff", position: "relative" }}>
          <button onClick={onClose} aria-label="Close" style={{ position: "absolute", top: 14, right: 14, border: "none", background: "rgba(255,255,255,.1)", color: "#fff", borderRadius: 9, width: 32, height: 32, cursor: "pointer", fontSize: 16 }}>×</button>
          <div className="mono" style={{ fontSize: 10.5, letterSpacing: ".14em", textTransform: "uppercase", color: "var(--brass)" }}>
            {slot ? t("pro.slotKicker") : t("pro.kicker")}
          </div>
          <div className="serif" style={{ fontSize: 30, marginTop: 8, lineHeight: 1.15 }}>
            {slot ? t("pro.slotTitle") : t("pro.title", { name: conceptName })}
          </div>
          {reason && !slot && <div style={{ fontSize: 14, color: "var(--rail-soft)", marginTop: 8, lineHeight: 1.5 }}>{t("pro.reason." + reason)}</div>}
          {slot && <div style={{ fontSize: 14, color: "var(--rail-soft)", marginTop: 8, lineHeight: 1.5 }}>{t("pro.slotSub")}</div>}
        </div>

        {stage === "offer" && (
          <div style={{ padding: "22px 28px 26px" }}>
            {!slot && hasNumbers && (
              <div style={{ marginBottom: 18 }}>
                <div className="mono" style={{ fontSize: 10, letterSpacing: ".12em", textTransform: "uppercase", color: "var(--muted)", marginBottom: 10 }}>{t("pro.yourPreview")}</div>
                <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(150px, 1fr))", gap: 10 }}>
                  <PreviewTile label={t("pro.pvBreakEven")} value={fmtBaht(live.breakEvenDaily) + t("pro.perDay")} />
                  <PreviewTile label={t("pro.pvMoneyBack")} value={proj.moneyBackMonth ? t("proj.monthN", { n: proj.moneyBackMonth }) : t("proj.notIn36")} locked />
                  <PreviewTile label={t("pro.pvLowestCash")} value={fmtBaht(proj.lowestCash)} locked />
                </div>
              </div>
            )}
            <div className="mono" style={{ fontSize: 10, letterSpacing: ".12em", textTransform: "uppercase", color: "var(--muted)", marginBottom: 8 }}>{slot ? t("pro.slotGains") : t("pro.gains")}</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
              {gains.map(([k, sub]) => (
                <div key={k} style={{ display: "flex", gap: 12, alignItems: "flex-start" }}>
                  <span style={{ width: 22, height: 22, borderRadius: 7, background: "var(--green-tint)", color: "var(--green)", fontWeight: 800, display: "grid", placeItems: "center", flexShrink: 0, fontSize: 12, marginTop: 1 }}>✓</span>
                  <span style={{ fontSize: 14.5, lineHeight: 1.45 }}><strong>{t(k)}</strong><span style={{ color: "var(--muted)" }}> — {t(sub)}</span></span>
                </div>
              ))}
            </div>
            <div style={{ marginTop: 20, padding: "16px 18px", borderRadius: 14, background: "var(--surface-2)", border: "1px solid var(--border)", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 14, flexWrap: "wrap" }}>
              <div>
                <div style={{ fontSize: 14, fontWeight: 600, color: "var(--ink)" }}>{t("pro.priceTerms")}</div>
              </div>
              <button onClick={() => setStage("checkout")} style={btnPrimary}>{slot ? t("pro.buySlot") : t("pro.unlockThis")}</button>
            </div>
            <div style={{ fontSize: 12.5, color: "var(--muted)", marginTop: 12, textAlign: "center" }}>{t("pro.answersStay")}</div>
          </div>
        )}

        {stage === "checkout" && (
          <div style={{ padding: "22px 28px 26px" }}>
            <div style={{ fontWeight: 700, fontSize: 16 }}>{account ? t("pro.signedInAs", { email: account.email }) : t("pro.createAccount")}</div>
            {!account && <div style={{ color: "var(--muted)", fontSize: 13.5, marginTop: 3, lineHeight: 1.5 }}>{t("pro.accountWhy")}</div>}
            {!account && (
              <div style={{ display: "flex", flexDirection: "column", gap: 10, marginTop: 14 }}>
                <TextInput wide value={name} onChange={setName} placeholder={t("pro.namePh")} />
                <TextInput wide value={email} onChange={setEmail} placeholder={t("pro.emailPh")} />
              </div>
            )}
            <div style={{ marginTop: 20, paddingTop: 16, borderTop: "1px solid var(--border)", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 12, flexWrap: "wrap" }}>
              <div>
                <div style={{ fontSize: 13, color: "var(--muted)" }}>{slot ? t("pro.slotLine") : t("pro.lineItem", { name: conceptName })}</div>
                <div style={{ fontSize: 13, color: "var(--muted)", marginTop: 2 }}>{t("pro.priceTerms")}</div>
              </div>
              <div style={{ display: "flex", gap: 10 }}>
                <button onClick={() => setStage("offer")} style={{ ...btnGhost, padding: "12px 18px", fontSize: 14 }}>{t("common.back")}</button>
                <button onClick={pay} style={{ ...btnPrimary, padding: "12px 20px", fontSize: 14.5 }}>{t("pro.payDemo")}</button>
              </div>
            </div>
            <div style={{ fontSize: 12, color: "var(--faint)", marginTop: 10 }}>{t("pro.demoNote")}</div>
          </div>
        )}

        {stage === "done" && (
          <div style={{ padding: "30px 28px", textAlign: "center" }}>
            <div style={{ width: 52, height: 52, borderRadius: "50%", background: "var(--green-tint)", color: "var(--green)", display: "grid", placeItems: "center", margin: "0 auto", fontSize: 24, fontWeight: 800 }}>✓</div>
            <div className="serif" style={{ fontSize: 26, marginTop: 12 }}>{slot ? t("pro.slotDone") : t("pro.done")}</div>
            <div style={{ color: "var(--muted)", fontSize: 14.5, marginTop: 6, lineHeight: 1.5 }}>{slot ? t("pro.slotDoneSub") : t("pro.doneSub")}</div>
            <button onClick={onClose} style={{ ...btnPrimary, marginTop: 18 }}>{slot ? t("pro.startNew") : t("pro.backToStep")}</button>
          </div>
        )}
      </div>
    </div>
  );
}

function PreviewTile({ label, value, locked }) {
  return (
    <div style={{ padding: "12px 14px", borderRadius: 12, border: "1px solid var(--border)", background: "var(--surface)" }}>
      <div className="mono" style={{ fontSize: 9.5, letterSpacing: ".08em", textTransform: "uppercase", color: "var(--muted)", display: "flex", alignItems: "center", gap: 6 }}>{label}{locked && <LockIcon size={11} color="var(--brass-deep)" />}</div>
      <div className="serif-fig" style={{ fontSize: 21, marginTop: 5, filter: locked ? "blur(6px)" : "none", userSelect: locked ? "none" : "auto" }} aria-hidden={locked ? "true" : undefined}>{value}</div>
    </div>
  );
}

Object.assign(window, { ProContext, usePro, ProBadge, LockIcon, LockedStrip, LockedPreview, UnlockModal });