/* ============================================================
   Certificate creation wizard — 3 steps
   ① Bilgiler  ②  DNS Doğrulama  ③  İndir
   ============================================================ */

const STEPS = [
  { k: "1", t: () => t("wiz.step1") },
  { k: "2", t: () => t("wiz.step2") },
  { k: "3", t: () => t("wiz.step3") },
];

function Stepper({ step }) {
  return (
    <div className="stepper">
      {STEPS.map((s, i) => (
        <React.Fragment key={i}>
          <div className={`step ${i === step ? "active" : ""} ${i < step ? "done" : ""}`}>
            <div className="step-num">{i < step ? Ic.check({ s: 16 }) : i + 1}</div>
            <div className="step-text">
              <span className="k">{t("wiz.stepLabel")} {i + 1}</span>
              <span className="t">{s.t()}</span>
            </div>
          </div>
          {i < STEPS.length - 1 && <div className={`step-bar ${i < step ? "fill" : ""}`}><i /></div>}
        </React.Fragment>
      ))}
    </div>
  );
}

/* ----------------------------- STEP 1 ----------------------------- */
function StepInfo({ data, setData, onNext }) {
  const [adv, setAdv] = useState(false);
  const [showPfx, setShowPfx] = useState(false);
  const [touched, setTouched] = useState(false);
  const domainOk = /^([a-z0-9-]+\.)+[a-z]{2,}$/i.test(data.domain.trim());
  const emailOk = /^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(data.email.trim());
  const pfxOk = !data.pfxEnabled || data.pfx.length >= 8;
  const canGo = domainOk && emailOk && pfxOk && data.agree && data.agreeTerms;

  const genPwd = () => {
    const chars = "ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnpqrstuvwxyz23456789!@#$";
    let p = ""; for (let i = 0; i < 16; i++) p += chars[Math.floor(Math.random() * chars.length)];
    setData({ ...data, pfxEnabled: true, pfx: p }); setShowPfx(true);
  };

  const next = () => { setTouched(true); if (canGo) onNext(); };

  return (
    <div className="fade-up" style={{ display: "grid", gridTemplateColumns: "1fr", gap: 18 }}>
      <div className="card card-pad" style={{ display: "grid", gap: 18 }}>
        <Field label={t("wiz.domain")} error={touched && !domainOk ? t("wiz.domainErr") : null}
               hint={!touched || domainOk ? t("wiz.domainHint") : null}>
          <input className="input mono" placeholder="example.com" value={data.domain}
                 onChange={e => setData({ ...data, domain: e.target.value.toLowerCase() })} />
        </Field>

        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 14,
                      padding: "13px 16px", background: "var(--surface-2)", border: "1px solid var(--border)", borderRadius: "var(--r)" }}>
          <div>
            <div style={{ fontWeight: 600, fontSize: 14.5 }}>{t("wiz.wwwInc")}</div>
            <div className="hint">{data.www ? t("wiz.www2rec") : t("wiz.www1rec")}</div>
          </div>
          <Toggle checked={data.www} onChange={v => setData({ ...data, www: v })} />
        </div>

        <Field label={t("wiz.email")} error={touched && !emailOk ? t("wiz.emailErr") : null}
               hint={!touched || emailOk ? t("wiz.emailHint") : null}>
          <div className="input-affix">
            <span className="prefix">{Ic.mail({ s: 17 })}</span>
            <input className="input" style={{ paddingLeft: 42 }} placeholder={t("wiz.emailPlaceholder")} value={data.email}
                   onChange={e => setData({ ...data, email: e.target.value })} />
          </div>
        </Field>

        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 14,
                      padding: "13px 16px", background: "var(--primary-soft)", borderRadius: "var(--r)" }}>
          <div style={{ display: "flex", gap: 11, alignItems: "flex-start" }}>
            <span style={{ color: "var(--primary)", marginTop: 1 }}>{Ic.bell({ s: 18 })}</span>
            <div>
              <div style={{ fontWeight: 600, fontSize: 14.5, color: "var(--primary-800)" }}>{t("wiz.remindTitle")}</div>
              <div className="hint" style={{ color: "var(--primary-700)" }}>{t("wiz.remindSub")}</div>
            </div>
          </div>
          <Toggle checked={data.reminder} onChange={v => setData({ ...data, reminder: v })} />
        </div>

        <hr className="divider" />

        {/* PFX password — optional, only for IIS / Windows */}
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 14,
                      padding: "13px 16px", background: "var(--surface-2)", border: "1px solid var(--border)", borderRadius: "var(--r)" }}>
          <div style={{ display: "flex", gap: 11, alignItems: "flex-start" }}>
            <span style={{ color: "var(--text-2)", marginTop: 1 }}>{Ic.lock({ s: 18 })}</span>
            <div>
              <div style={{ fontWeight: 600, fontSize: 14.5 }}>{t("wiz.pfxTitle")}</div>
              <div className="hint">{t("wiz.pfxSub")}</div>
            </div>
          </div>
          <Toggle checked={data.pfxEnabled} onChange={v => setData({ ...data, pfxEnabled: v, pfx: v ? data.pfx : "" })} />
        </div>

        {data.pfxEnabled && (
          <div className="field fade-up">
            <div className="hint" style={{ marginBottom: 2 }}>
              {t("wiz.pfxHint1")} <span className="code">certificate.pfx</span> {t("wiz.pfxHint2")}
            </div>
            <div style={{ display: "flex", gap: 10, alignItems: "flex-start", flexWrap: "wrap" }}>
              <div style={{ flex: "1 1 240px" }}>
                <div className="input-affix">
                  <input className="input" type={showPfx ? "text" : "password"} placeholder={t("wiz.pfxPlaceholder")} value={data.pfx}
                         onChange={e => setData({ ...data, pfx: e.target.value })} style={{ paddingRight: 44 }} />
                  <button type="button" onClick={() => setShowPfx(!showPfx)} style={{ position: "absolute", right: 10, background: "none", border: "none", color: "var(--text-3)", display: "inline-flex" }}>
                    {showPfx ? Ic.eyeoff({ s: 18 }) : Ic.eye({ s: 18 })}
                  </button>
                </div>
              </div>
              <Btn kind="ghost" onClick={genPwd} icon={Ic.zap({ s: 16 })}>{t("wiz.autoGen")}</Btn>
            </div>
            {touched && !pfxOk
              ? <span className="hint err">{t("wiz.pfxErr")}</span>
              : data.pfx
                ? <span className="hint" style={{ color: data.pfx.length >= 8 ? "var(--green)" : "var(--amber)" }}>{data.pfx.length >= 8 ? t("wiz.pfxStrong") : t("wiz.pfxShort")}</span>
                : null}
          </div>
        )}

        {/* Advanced */}
        <div>
          <button className="nav-link" style={{ padding: "6px 0", color: "var(--text-2)", display: "flex", alignItems: "center", gap: 6 }}
                  onClick={() => setAdv(!adv)}>
            <span style={{ transform: adv ? "rotate(180deg)" : "none", transition: ".2s", display: "inline-flex" }}>{Ic.chevron({ s: 16 })}</span>
            {t("wiz.ownerInfo")}
          </button>
          {adv && (
            <div className="fade-up grid grid-2" style={{ gap: 14, marginTop: 12 }}>
              <Field label={t("wiz.country")} optional>
                <Select value={data.country} onChange={v => setData({ ...data, country: v })} options={COUNTRIES} placeholder={t("wiz.countryPlaceholder")} />
              </Field>
              <Field label={t("wiz.city")} optional><input className="input" placeholder={t("wiz.cityPlaceholder")} value={data.city} onChange={e => setData({ ...data, city: e.target.value })} /></Field>
              <Field label={t("wiz.org")} optional><input className="input" placeholder={t("wiz.orgPlaceholder")} value={data.org} onChange={e => setData({ ...data, org: e.target.value })} /></Field>
              <Field label={t("wiz.unit")} optional><input className="input" placeholder={t("wiz.unitPlaceholder")} value={data.unit} onChange={e => setData({ ...data, unit: e.target.value })} /></Field>
            </div>
          )}
        </div>

        <hr className="divider" />
        <Check checked={data.agree} onChange={v => setData({ ...data, agree: v })}>
          <a href="https://letsencrypt.org/documents/LE-SA-v1.3-September-21-2022.pdf" target="_blank" rel="noopener noreferrer"
             style={{ color: "var(--primary)", fontWeight: 600 }}>{t("wiz.agreeLink")}</a>{t("wiz.agreeText")}
        </Check>
        {touched && !data.agree && <span className="hint err" style={{ marginTop: -8 }}>{t("wiz.agreeErr")}</span>}
        <Check checked={data.agreeTerms} onChange={v => setData({ ...data, agreeTerms: v })}>
          {t("terms.consent")}{" "}
          <a href={(window.PAGES && window.PAGES.terms) || "/kosullar"} target="_blank" rel="noopener noreferrer"
             style={{ color: "var(--primary)", fontWeight: 600 }}>{t("terms.title")}</a>
        </Check>
        {touched && !data.agreeTerms && <span className="hint err" style={{ marginTop: -8 }}>{t("terms.mustAccept")}</span>}
      </div>

      <Btn kind="primary" size="lg" block onClick={next} iconRight={Ic.arrow({ s: 18 })}>
        {t("wiz.toVerify")}
      </Btn>
    </div>
  );
}

/* ----------------------------- STEP 2 ----------------------------- */
function DnsCard({ rec, index, status }) {
  return (
    <div className="dns-card">
      <div className="dns-head">
        <div className="ix">
          <span style={{ width: 22, height: 22, borderRadius: 6, background: "var(--primary-soft)", color: "var(--primary)", display: "grid", placeItems: "center", fontSize: 12, fontWeight: 700 }}>{index + 1}</span>
          {t("wiz.txtRecord")}
        </div>
        {status === "ok"
          ? <Badge tone="green">{Ic.check({ s: 12 })} {t("wiz.verified")}</Badge>
          : status === "checking"
            ? <Badge tone="blue" dot={false}><span style={{ display: "inline-flex" }}>{Ic.spinner({ s: 13 })}</span> {t("wiz.checking")}</Badge>
            : <Badge tone="gray">{t("wiz.waiting")}</Badge>}
      </div>
      <div className="dns-row">
        <span className="rk">{t("wiz.recType")}</span>
        <span className="dns-val">TXT</span>
        <span />
      </div>
      <div className="dns-row">
        <span className="rk">{t("wiz.recNameHost")}</span>
        <span className="dns-val">{rec.name}</span>
        <CopyBtn text={rec.name} />
      </div>
      <div className="dns-row">
        <span className="rk">{t("wiz.recValue")}</span>
        <span className="dns-val">{rec.value}</span>
        <CopyBtn text={rec.value} />
      </div>
      <div className="dns-row">
        <span className="rk">TTL</span>
        <span className="dns-val">3600</span>
        <span />
      </div>
    </div>
  );
}

/* HTTP-01: a single challenge file shown per hostname */
function HttpCard({ ch, index, status }) {
  const url = ch.url || `http://${ch.host}${ACME_DIR}${ch.token}`;
  const content = ch.content || `${ch.token}.${ACME_THUMBPRINT}`;
  return (
    <div className="dns-card">
      <div className="dns-head">
        <div className="ix">
          <span style={{ width: 22, height: 22, borderRadius: 6, background: "var(--primary-soft)", color: "var(--primary)", display: "grid", placeItems: "center", fontSize: 12, fontWeight: 700 }}>{index + 1}</span>
          {t("wiz.verifyFile")} — <span className="mono" style={{ fontWeight: 600 }}>{ch.host}</span>
        </div>
        {status === "ok"
          ? <Badge tone="green">{Ic.check({ s: 12 })} {t("wiz.verified")}</Badge>
          : status === "checking"
            ? <Badge tone="blue" dot={false}><span style={{ display: "inline-flex" }}>{Ic.spinner({ s: 13 })}</span> {t("wiz.checking")}</Badge>
            : <Badge tone="gray">{t("wiz.waiting")}</Badge>}
      </div>
      <div className="dns-row">
        <span className="rk">{t("wiz.location")}</span>
        <span className="dns-val">{ACME_DIR}</span>
        <CopyBtn text={ACME_DIR} />
      </div>
      <div className="dns-row">
        <span className="rk">{t("wiz.fileName")}</span>
        <span className="dns-val">{ch.token}</span>
        <CopyBtn text={ch.token} />
      </div>
      <div className="dns-row">
        <span className="rk">{t("wiz.content")}</span>
        <span className="dns-val">{content}</span>
        <CopyBtn text={content} />
      </div>

      {/* Ready-made file preview the user can drop straight into the server */}
      <div className="http-file">
        <div className="hf-bar">
          <span className="hf-name">{Ic.file({ s: 14 })} {ch.token}</span>
          <CopyBtn text={content} label={t("wiz.copyContent")} />
        </div>
        <div className="hf-body">{content}</div>
      </div>

      <div className="dns-row" style={{ borderTop: "1px dashed var(--border)" }}>
        <span className="rk">{t("wiz.test")}</span>
        <a className="dns-val" href={url} target="_blank" rel="noopener" style={{ color: "var(--primary)", textDecoration: "none" }}>{url}</a>
        <CopyBtn text={url} label={t("wiz.copyUrl")} />
      </div>
    </div>
  );
}

/* Segmented chooser between the two verification methods */
function MethodPicker({ method, onPick }) {
  const opts = [
    { k: "dns",  ic: Ic.globe, title: t("wiz.dnsName"), tag: t("wiz.dnsTag"), sub: t("wiz.dnsDesc") },
    { k: "http", ic: Ic.file,  title: t("wiz.httpName"), tag: null, sub: t("wiz.httpDesc") },
  ];
  return (
    <div className="vmethods">
      {opts.map(o => {
        const on = method === o.k;
        return (
          <button type="button" key={o.k} className={`vmethod ${on ? "on" : ""}`} onClick={() => onPick(o.k)}>
            <span className="vm-radio">{on && Ic.check({ s: 11 })}</span>
            <span className="vm-ic">{o.ic({ s: 19 })}</span>
            <span style={{ minWidth: 0 }}>
              <span className="vm-title">{o.title}{o.tag && <span className="vm-tag">{o.tag}</span>}</span>
              <span className="vm-sub">{o.sub}</span>
            </span>
          </button>
        );
      })}
    </div>
  );
}

function StepVerify({ data, onNext, onBack, onOrder }) {
  const apiBase = (window.__BOOT__ && window.__BOOT__.apiBase) || "/api";
  const [method, setMethod] = useState("dns");
  const [orderId, setOrderId] = useState(null);
  const [orderToken, setOrderToken] = useState("");   // guest erişim jetonu (IDOR koruması)
  const [records, setRecords] = useState([]);     // gerçek challenge verisi (API identifiers)
  const [statuses, setStatuses] = useState([]);
  const [creating, setCreating] = useState(false);
  const [err, setErr] = useState(null);
  const [verifying, setVerifying] = useState(false);
  const [verified, setVerified] = useState(false);

  // Seçilen yöntem için ACME order'ı oluştur (yöntem değişince yeniden)
  const create = (m) => {
    setCreating(true); setErr(null); setVerified(false); setStatuses([]);
    fetch("/pub/orders", {
      method: "POST", headers: { "Content-Type": "application/json" }, credentials: "include",
      body: JSON.stringify({
        domain: data.domain, includeWww: data.www, email: data.email, reminder: data.reminder,
        verifyMethod: m, pfxEnabled: data.pfxEnabled, pfxPassword: data.pfx,
        owner: { country: data.country, city: data.city, org: data.org, unit: data.unit },
        agreeTerms: data.agreeTerms,
        lang: (window.sslLang || (window.__BOOT__ && window.__BOOT__.lang) || "tr")
      })
    }).then(r => r.json().then(j => ({ ok: r.ok, j })))
      .then(({ ok, j }) => {
        if (!ok) throw new Error((j && j.errorMessage && j.errorMessage[0]) || t("wiz.errCreate"));
        const d = j.data;
        setOrderId(d.orderId); setOrderToken(d.accessToken || "");
        if (onOrder) onOrder(d.orderId, d.accessToken || "");
        setRecords(d.identifiers || []);
        setStatuses(Array((d.identifiers || []).length).fill("wait"));
      })
      .catch(e => { setErr(e.message); setRecords([]); })
      .finally(() => setCreating(false));
  };

  useEffect(() => { create("dns"); }, []); // ilk açılışta önerilen yöntemle order aç

  const pick = (m) => { if (m === method) return; setMethod(m); setVerifying(false); setVerified(false); create(m); };

  const verify = () => {
    if (!orderId) return;
    setVerifying(true);
    setStatuses(records.map(() => "checking"));
    let attempt = 0;
    const poll = () => {
      fetch("/pub/orders/" + orderId + "/verify" + (orderToken ? "?token=" + encodeURIComponent(orderToken) : ""), { method: "POST", credentials: "include" })
        .then(r => r.json().then(j => ({ ok: r.ok, j })))
        .then(({ ok, j }) => {
          if (!ok) {
            setErr((j && j.errorMessage && j.errorMessage[0]) || t("wiz.errVerify"));
            setVerifying(false);
            return;
          }
          const ids = (j.data && j.data.identifiers) || [];
          setStatuses(records.map((r, i) => {
            const mm = ids.find(x => x.domain === r.domain) || ids[i];
            return mm && mm.status === "valid" ? "ok" : (mm && mm.status === "invalid" ? "fail" : "checking");
          }));
          const state = j.data && j.data.state;
          if (state === "issued") { setVerifying(false); setVerified(true); }
          else if (state === "failed" || ids.some(x => x.status === "invalid")) {
            setErr(t("wiz.errVerifyDns"));
            setVerifying(false);
          }
          else if (++attempt < 10) { setTimeout(poll, 3000); }
          else { setErr(t("wiz.errTimeout")); setVerifying(false); }
        })
        .catch(e => { setErr(e.message); setVerifying(false); });
    };
    poll();
  };

  const isDns = method === "dns";
  const dnsRecords  = records.map(r => ({ name: (r.dns && r.dns.name) || ("_acme-challenge." + r.domain), value: (r.dns && r.dns.value) || "" }));
  const httpRecords = records.map(r => ({ host: r.domain, token: (r.http && r.http.token) || "", content: (r.http && r.http.content) || "", url: "http://" + r.domain + ((r.http && r.http.path) || "") }));
  const count = records.length;

  return (
    <div className="fade-up" style={{ display: "grid", gap: 18 }}>
      <div className="card card-pad" style={{ display: "grid", gap: 16 }}>
        <div>
          <div style={{ fontWeight: 700, fontSize: 15, marginBottom: 4 }}>{t("wiz.chooseMethod")}</div>
          <div className="hint" style={{ marginBottom: 14 }}>{t("wiz.chooseMethodSub")}</div>
          <MethodPicker method={method} onPick={pick} />
        </div>

        <hr className="divider" />

        {err && (
          <div style={{ display: "flex", gap: 10, padding: 14, background: "var(--red-soft)", borderRadius: "var(--r)", color: "var(--red)", fontSize: 14, lineHeight: 1.5 }}>
            <span style={{ flex: "none", marginTop: 1 }}>{Ic.close({ s: 18 })}</span><div>{err}</div>
          </div>
        )}
        {creating && (
          <div style={{ display: "flex", gap: 10, padding: 14, background: "var(--surface-2)", border: "1px solid var(--border)", borderRadius: "var(--r)", color: "var(--text-2)", fontSize: 14 }}>
            <span style={{ display: "inline-flex" }}>{Ic.spinner({ s: 18 })}</span> {t("wiz.creating")}
          </div>
        )}

        {!creating && !err && (<>
        {/* Method-specific instructions */}
        <div style={{ display: "flex", gap: 12, padding: 14, background: "var(--surface-2)", border: "1px solid var(--border)", borderRadius: "var(--r)" }}>
          <span style={{ color: "var(--primary)", flex: "none", marginTop: 1 }}>{isDns ? Ic.globe({ s: 18 }) : Ic.file({ s: 18 })}</span>
          <div style={{ fontSize: 14, color: "var(--text-2)", lineHeight: 1.55 }}>
            {isDns ? (
              <>{t("wiz.dnsInstr1")} {count === 2 ? t("wiz.dnsInstrTwo") + " " : ""}<strong>{t("wiz.dnsInstrTxt")}</strong> {t("wiz.dnsInstr2")}
              {" "}{t("wiz.dnsInstr3")} <strong>{t("wiz.verifyDo")}</strong>{t("wiz.dnsInstr4")}</>
            ) : (
              <>{t("wiz.httpInstr1")} <span className="code">{ACME_DIR}</span> {t("wiz.httpInstr2")}
              {" "}{t("wiz.httpInstr3")} <strong>http</strong> {t("wiz.httpInstr4")} <strong>{t("wiz.verifyDo")}</strong>{t("wiz.httpInstr5")}</>
            )}
          </div>
        </div>

        {isDns
          ? dnsRecords.map((rec, i) => <DnsCard key={"d" + i} rec={rec} index={i} status={statuses[i]} />)
          : httpRecords.map((ch, i) => <HttpCard key={"h" + i} ch={ch} index={i} status={statuses[i]} />)}
        </>)}

        {verified && (
          <div className="fade-up" style={{ display: "flex", alignItems: "center", gap: 10, padding: 14, background: "var(--green-soft)", borderRadius: "var(--r)", color: "var(--green)", fontWeight: 600, fontSize: 14.5 }}>
            {Ic.check({ s: 18 })} {isDns ? t("wiz.allRecordsOk") : t("wiz.allFilesOk")} {t("wiz.certPreparing")}
          </div>
        )}
      </div>

      <div style={{ display: "flex", gap: 12 }}>
        <Btn kind="ghost" size="lg" onClick={onBack} icon={Ic.back({ s: 18 })}>{t("common.back")}</Btn>
        {!verified
          ? <Btn kind="primary" size="lg" block disabled={verifying} onClick={verify}
                 icon={verifying ? Ic.spinner({ s: 18 }) : null}>
              {verifying ? t("wiz.verifying") : t("wiz.verifyDo")}
            </Btn>
          : <Btn kind="primary" size="lg" block onClick={onNext} iconRight={Ic.arrow({ s: 18 })}>{t("wiz.toDownload")}</Btn>}
      </div>
    </div>
  );
}

/* ----------------------------- STEP 3 ----------------------------- */
function StepDownload({ data, orderId, orderToken, isAuthed, goView, onMakeAccount }) {
  const apiBase = (window.__BOOT__ && window.__BOOT__.apiBase) || "/api";
  const [downloaded, setDownloaded] = useState(false);
  const expiry = addDays(TODAY, 90);
  const doDownload = () => {
    if (orderId) window.open("/pub/orders/" + orderId + "/bundle" + (orderToken ? "?token=" + encodeURIComponent(orderToken) : ""), "_blank");
    setDownloaded(true);
  };

  return (
    <div className="fade-up" style={{ display: "grid", gap: 18 }}>
      {/* success header */}
      <div className="card card-pad" style={{ textAlign: "center", padding: "34px 24px" }}>
        <div style={{ width: 64, height: 64, borderRadius: "50%", background: "var(--green-soft)", color: "var(--green)", display: "grid", placeItems: "center", margin: "0 auto 16px" }}>
          {Ic.check({ s: 34 })}
        </div>
        <h2 style={{ margin: "0 0 6px", fontSize: 24, letterSpacing: "-0.02em" }}>{t("wiz.readyTitle")}</h2>
        <p className="mut" style={{ margin: 0, fontSize: 15 }}>
          <span className="code">{data.domain}</span> {t("wiz.readyDesc")}
        </p>
        <div style={{ display: "flex", justifyContent: "center", gap: 22, marginTop: 20, flexWrap: "wrap" }}>
          <div><div className="hint">{t("wiz.validity")}</div><div style={{ fontWeight: 700 }}>{t("common.days90")}</div></div>
          <div style={{ width: 1, background: "var(--border)" }} />
          <div><div className="hint">{t("wiz.expiryDate")}</div><div style={{ fontWeight: 700 }}>{fmtDate(expiry)}</div></div>
          <div style={{ width: 1, background: "var(--border)" }} />
          <div><div className="hint">{t("wiz.reminder")}</div><div style={{ fontWeight: 700, color: data.reminder ? "var(--green)" : "var(--text-3)" }}>{data.reminder ? t("wiz.on") : t("wiz.off")}</div></div>
        </div>
      </div>

      {/* PFX confirmation — reflects step-1 choice */}
      <div className="card card-pad" style={{ display: "flex", alignItems: "center", gap: 12 }}>
        <span style={{ width: 38, height: 38, borderRadius: 10, background: data.pfxEnabled ? "var(--green-soft)" : "var(--bg-2)", color: data.pfxEnabled ? "var(--green)" : "var(--text-3)", display: "grid", placeItems: "center", flex: "none" }}>{Ic.lock({ s: 18 })}</span>
        <div style={{ flex: 1 }}>
          <div style={{ fontWeight: 700, fontSize: 15 }}>{data.pfxEnabled ? t("wiz.pfxDoneTitle") : t("wiz.pfxNoPwdTitle")}</div>
          <div className="hint">{data.pfxEnabled ? <>{t("wiz.pfxDoneHint1")} <span className="code">certificate.pfx</span> {t("wiz.pfxDoneHint2")}</> : <>{t("wiz.pfxNoPwdHint")}</>}</div>
        </div>
        {data.pfxEnabled && <Badge tone="green">{Ic.check({ s: 12 })} {t("wiz.ready")}</Badge>}
      </div>

      {/* bundle */}
      <div className="card" style={{ overflow: "hidden" }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "16px 20px", borderBottom: "1px solid var(--border)" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10, fontWeight: 700, fontSize: 15 }}>
            {Ic.layers({ s: 18 })} certificate-bundle.zip
          </div>
          <span className="hint">5 {t("wiz.files")} · 16.9 KB</span>
        </div>
        <div>
          {BUNDLE_FILES.map((f, i) => (
            <div key={i} style={{ display: "flex", alignItems: "center", gap: 12, padding: "12px 20px", borderTop: i ? "1px solid var(--border)" : "none" }}>
              <span style={{ color: f.secret ? "var(--amber)" : f.pfx ? "var(--primary)" : "var(--text-3)" }}>{Ic.file({ s: 17 })}</span>
              <div style={{ flex: 1 }}>
                <span style={{ fontFamily: "var(--mono)", fontSize: 13.5, fontWeight: 500 }}>{f.name}</span>
                <span className="hint" style={{ marginLeft: 10 }}>{f.desc}</span>
              </div>
              {f.pfx && data.pfx && <Badge tone="blue" dot={false}>{Ic.lock({ s: 11 })} {t("wiz.encrypted")}</Badge>}
              <span className="hint">{f.size}</span>
            </div>
          ))}
        </div>
      </div>

      <Btn kind="primary" size="lg" block onClick={doDownload} icon={Ic.download({ s: 19 })}>
        {downloaded ? t("wiz.downloadAgain") : t("wiz.downloadZip")}
      </Btn>

      {downloaded && (
        <div className="fade-up card card-pad" style={{ display: "flex", alignItems: "center", gap: 16, background: "var(--primary-soft)", border: "none", flexWrap: "wrap" }}>
          <span style={{ color: "var(--primary)" }}>{Ic.bell({ s: 22 })}</span>
          <div style={{ flex: "1 1 220px" }}>
            <div style={{ fontWeight: 700, color: "var(--primary-800)" }}>{isAuthed ? t("wiz.addedTitle") : t("wiz.trackTitle")}</div>
            <div className="hint" style={{ color: "var(--primary-700)" }}>
              {isAuthed ? t("wiz.addedSub") : t("wiz.trackSub")}
            </div>
          </div>
          {isAuthed
            ? <Btn kind="primary" onClick={() => goView("dashboard")} iconRight={Ic.arrow({ s: 16 })}>{t("wiz.goDashboard")}</Btn>
            : <Btn kind="primary" onClick={onMakeAccount} iconRight={Ic.arrow({ s: 16 })}>{t("wiz.signUpFree")}</Btn>}
        </div>
      )}
    </div>
  );
}

/* ----------------------------- WIZARD ----------------------------- */
function Wizard({ goView, isAuthed, onMakeAccount }) {
  const [step, setStep] = useState(0);
  const [orderId, setOrderId] = useState(null);
  const [orderToken, setOrderToken] = useState("");
  const [data, setData] = useState({ domain: "", email: "", www: true, reminder: true, agree: false, agreeTerms: false, pfxEnabled: false, pfx: "", country: "", city: "", org: "", unit: "" });
  const top = useRef(null);
  useEffect(() => { top.current?.scrollIntoView ? null : null; window.scrollTo({ top: 0, behavior: "smooth" }); }, [step]);

  return (
    <div className="wrap" style={{ padding: "40px 24px 120px", maxWidth: 780 }} ref={top}>
      <div style={{ textAlign: "center", marginBottom: 26 }}>
        <span className="eyebrow">{Ic.shield({ s: 14 })} {t("wiz.eyebrow")}</span>
        <h1 style={{ fontSize: 30, letterSpacing: "-0.03em", margin: "14px 0 0" }}>{t("wiz.title")}</h1>
      </div>

      <div className="card card-pad" style={{ marginBottom: 22, padding: "20px 26px" }}>
        <Stepper step={step} />
      </div>

      {/* Reklam (leaderboard) — sertifika sayfası */}
      <div style={{ marginBottom: 22 }}><AdSlot format="leaderboard" /></div>

      {step === 0 && <StepInfo data={data} setData={setData} onNext={() => setStep(1)} />}
      {step === 1 && <StepVerify data={data} onOrder={(id, tok) => { setOrderId(id); setOrderToken(tok || ""); }} onNext={() => setStep(2)} onBack={() => setStep(0)} />}
      {step === 2 && <StepDownload data={data} orderId={orderId} orderToken={orderToken} isAuthed={isAuthed} goView={goView} onMakeAccount={onMakeAccount} />}
    </div>
  );
}

Object.assign(window, { Wizard });