/* mSamex Card — screens 01–05: Splash, Onboarding, Home, All accounts, Account detail */
const { Icon, MeshMark, Wordmark, CardArt, SamFace, Spark, Area, Bars, Pill, Chip, Tgl, Bar,
  Row, Sect, Avatar, TxRow, eur, money, signed, fmtNum } = window.CardKit;
const D1 = window.CARD_DATA;

/* shared screen header */
function SH({ app, title, backTo, right }) {
  return (
    <div className="scr-head">
      <span className="sh-side">
        {backTo && (
          <button className="icbtn" onClick={() => app.go(backTo)} aria-label="Back">
            <span className="flipx" style={{ display: "flex" }}><Icon name="back" size={18} /></span>
          </button>
        )}
      </span>
      <span className="sh-title">{title}</span>
      <span className="sh-side" style={{ justifyContent: "flex-end" }}>{right}</span>
    </div>
  );
}

/* ============ 01 · Splash / Login ============ */
function ScrSplash({ app }) {
  const { t, go } = app;
  return (
    <div className="scr" style={{ display: "flex", flexDirection: "column", height: "100%", paddingTop: 40 }}>
      <div style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 18 }}>
        <MeshMark size={76} />
        <div style={{ fontSize: 34, fontWeight: 700, letterSpacing: "-0.04em" }}>
          m<span style={{ color: "var(--m3-mint)" }}>S</span>amex
        </div>
        <div className="mute" style={{ fontSize: 14.5 }}>{t("tagline")}</div>
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
        <button className="btn" onClick={() => go("home")}>
          <Icon name="face" size={19} /> {t("unlock")}
        </button>
        <button className="btn-ghost" onClick={() => go("home")}>{t("passcode")}</button>
        <button className="lrow" style={{ justifyContent: "center", gap: 8, padding: "10px 0" }}
          onClick={app.toggleLang}>
          <Icon name="globe" size={16} style={{ opacity: 0.6 }} />
          <span style={{ fontSize: 13.5, color: "var(--m3-snow-dim)" }}>{t("language")}</span>
          <Icon name="chevD" size={14} style={{ opacity: 0.4 }} />
        </button>
      </div>
      <div className="mono" style={{ textAlign: "center", fontSize: 10, color: "var(--m3-snow-mute)", padding: "14px 0 4px", lineHeight: 1.8 }}>
        {t("legal")}<br />{t("version")}
      </div>
    </div>
  );
}

/* ============ 02 · Onboarding ============ */
function ScrOnboarding({ app }) {
  const { t, go } = app;
  const [step, setStep] = React.useState(0);
  const [plan, setPlan] = React.useState("aurum");
  const slides = [
    { k: t("ob1k"), h: t("ob1h"), s: t("ob1s"), art: <CardArt finish="void" w={280} sheen={app.sheen} /> },
    { k: t("ob2k"), h: t("ob2h"), s: t("ob2s"), art: <div style={{ height: 176, display: "flex", alignItems: "center" }}><div style={{ width: 280 }}><Area data={D1.fx.history} w={280} h={140} /></div></div> },
    { k: t("ob3k"), h: t("ob3h"), s: t("ob3s"), art: <div style={{ height: 176, display: "flex", alignItems: "center", justifyContent: "center", gap: 26 }}>
        {D1.earn.products.slice(0, 3).map((p) => (
          <div key={p.asset} style={{ textAlign: "center" }}>
            <div className="mono" style={{ fontSize: 26, fontWeight: 600, color: "var(--m3-mint)" }}>{p.apy}%</div>
            <div className="k" style={{ marginTop: 4 }}>{p.asset}</div>
          </div>))}
      </div> },
  ];
  return (
    <div className="scr" style={{ display: "flex", flexDirection: "column", height: "100%", paddingTop: 8 }}>
      <div style={{ display: "flex", alignItems: "center", gap: 16, paddingBottom: 20 }}>
        <div className="ob-prog" style={{ flex: 1 }}>
          {[0, 1, 2, 3].map((i) => <i key={i} className={i <= Math.min(step, 3) ? "on" : ""}></i>)}
        </div>
        <button style={{ fontSize: 13, color: "var(--m3-mute)" }} onClick={() => go("home")}>{t("skip")}</button>
      </div>

      {step < 3 && (
        <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
          <div style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "center" }}>{slides[step].art}</div>
          <div className="k" style={{ color: "var(--m3-mint)" }}>{slides[step].k}</div>
          <h1 style={{ fontSize: 32, fontWeight: 700, letterSpacing: "-0.03em", margin: "10px 0 8px", lineHeight: 1.12 }}>{slides[step].h}</h1>
          <p className="mute" style={{ fontSize: 14.5, margin: "0 0 26px", lineHeight: 1.55 }}>{slides[step].s}</p>
          <button className="btn" onClick={() => setStep(step + 1)}>{t("continue")}</button>
        </div>
      )}

      {step === 3 && (
        <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
          <div className="k" style={{ color: "var(--m3-mint)" }}>{t("ob4k")}</div>
          <h1 style={{ fontSize: 28, fontWeight: 700, letterSpacing: "-0.03em", margin: "10px 0 18px" }}>{t("ob4h")}</h1>
          <div className="id-frame">
            <span className="corner c1"></span><span className="corner c2"></span>
            <span className="corner c3"></span><span className="corner c4"></span>
            <div className="id-doc"><i style={{ width: "45%" }}></i><i style={{ width: "70%" }}></i><i style={{ width: "58%" }}></i><i style={{ width: "36%", marginTop: "auto" }}></i></div>
            <div className="scanline"></div>
          </div>
          <div style={{ padding: "14px 4px" }}>
            <div className="checkrow"><span className="ok"><Icon name="check" size={12} /></span>{t("docDetected")}</div>
            <div className="checkrow"><span className="ok"><Icon name="check" size={12} /></span>{t("glareClear")}</div>
            <div className="checkrow"><span className="pend"></span><span className="mute">{t("holdSteady")}</span></div>
          </div>
          <button className="btn" style={{ marginTop: "auto" }} onClick={() => setStep(4)}>
            <Icon name="camera" size={18} /> {t("capture")}
          </button>
        </div>
      )}

      {step === 4 && (
        <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
          <h1 style={{ fontSize: 28, fontWeight: 700, letterSpacing: "-0.03em", margin: "4px 0 18px" }}>{t("choosePlan")}</h1>
          <div style={{ display: "flex", flexDirection: "column", gap: 9 }}>
            {D1.tiers.map((p) => (
              <button key={p.id} className={"plan" + (plan === p.id ? " on" : "")} onClick={() => setPlan(p.id)}>
                <span className="radio"></span>
                <span style={{ flex: 1 }}>
                  <span style={{ display: "flex", justifyContent: "space-between", fontSize: 15, fontWeight: 600 }}>
                    {p.name}<span className="mono" style={{ color: plan === p.id ? "var(--m3-mint)" : "var(--m3-mute)" }}>{p.fee}{p.fee.startsWith("€") ? t("perMonth") : ""}</span>
                  </span>
                  <span className="mute" style={{ display: "block", fontSize: 11.5, marginTop: 3 }}>{p.perks}</span>
                </span>
              </button>
            ))}
          </div>
          <button className="btn" style={{ marginTop: "auto" }} onClick={() => go("home")}>{t("openAccount")}</button>
        </div>
      )}
    </div>
  );
}

/* ============ 03 · Home ============ */
function ScrHome({ app }) {
  const { t, go } = app;
  const A = D1.accounts;
  const preview = [A[0], A[1], A[4], A[6]];
  return (
    <div className="scr">
      <div className="scr-head" style={{ paddingBottom: 10 }}>
        <button onClick={() => go("profile")}><Avatar name="Kertu Laanemets" size={40} tone="mint" /></button>
        <button style={{ flex: 1, padding: "0 12px" }} onClick={() => go("accounts")}>
          <span className="k" style={{ display: "block" }}>{t("goodMorning")}</span>
          <span style={{ fontSize: 15.5, fontWeight: 600, display: "inline-flex", alignItems: "center", gap: 5 }}>
            {D1.user.first} <Icon name="chevD" size={13} style={{ opacity: 0.45 }} />
          </span>
        </button>
        <button className="icbtn" onClick={() => app.toast(t("copied"))} aria-label="QR"><Icon name="qr" size={17} /></button>
        <button className="icbtn" onClick={() => go("notifs")} aria-label="Notifications">
          <Icon name="bell" size={17} /><span className="dot"></span>
        </button>
      </div>

      <div style={{ padding: "16px 2px 0" }}>
        <div className="k">{t("totalBalance")}</div>
        <div className="h-balance mono" style={{ margin: "6px 0 4px" }}>€31,398<span style={{ fontSize: 24, color: "var(--m3-snow-mute)" }}>.75</span></div>
        <div className="mono up" style={{ fontSize: 13 }}>+€412.30 · +1.3% {t("thisWeek")}</div>
      </div>

      <div className="qa-row">
        <button className="qa" onClick={() => go("addmoney")}><span className="qa-ic"><Icon name="plus" size={21} /></span>{t("add")}</button>
        <button className="qa primary" onClick={() => go("send")}><span className="qa-ic"><Icon name="up" size={21} /></span>{t("send")}</button>
        <button className="qa" onClick={() => go("swap")}><span className="qa-ic"><Icon name="swap" size={21} /></span>{t("swap")}</button>
        <button className="qa" onClick={() => app.toast("Sam: " + t("samLine").slice(0, 40) + "…")}><span className="qa-ic"><MeshMark size={22} /></span>{t("ask")}</button>
      </div>

      <button className="card-blk" style={{ display: "flex", gap: 13, alignItems: "center", width: "100%", marginTop: 22 }} onClick={() => go("swap")}>
        <SamFace size={40} />
        <span style={{ flex: 1 }}>
          <span className="k" style={{ color: "var(--m3-mint)" }}>{t("samInsight")}</span>
          <span style={{ display: "block", fontSize: 12.5, lineHeight: 1.5, marginTop: 4 }}>{t("samLine")}</span>
        </span>
        <Icon name="chev" size={15} style={{ opacity: 0.35, flexShrink: 0 }} />
      </button>

      <Sect title={t("accounts")} action={t("seeAll")} onAction={() => go("accounts")} />
      <div className="grid2">
        {preview.map((a) => (
          <button key={a.id} className="acct-card" onClick={() => go(a.id === "eur" ? "account" : "accounts")}>
            <span className="ac-top">
              <span className="flagchip">{a.flag}</span>
              <span style={{ fontSize: 13, fontWeight: 600 }}>{a.cur}</span>
              <span className={"mono " + (a.d7 >= 0 ? "up" : "down")} style={{ fontSize: 10.5, marginInlineStart: "auto" }}>
                {a.d7 >= 0 ? "+" : ""}{a.d7}%
              </span>
            </span>
            <span className="mono" style={{ fontSize: 16, fontWeight: 600 }}>
              {a.id === "xau" ? a.bal.toFixed(2) + " oz" : money(a.bal, a.sym, a.id === "aed" ? 0 : 2)}
            </span>
            <Spark data={a.spark} w={120} h={20} color={a.d7 >= 0 ? "var(--m3-mint)" : "var(--m3-down)"} />
          </button>
        ))}
      </div>

      <div className="card-blk" style={{ marginTop: 22 }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <span className="k">{t("spendingPace")}</span><Pill tone="mint">{t("onTrack")}</Pill>
        </div>
        <div style={{ display: "flex", alignItems: "baseline", gap: 8, margin: "12px 0 10px" }}>
          <span className="mono" style={{ fontSize: 22, fontWeight: 600 }}>€2,364.20</span>
          <span className="mute" style={{ fontSize: 12 }}>{t("ofBudget")}</span>
        </div>
        <Bar v={2364} max={3500} h={5} />
        <div style={{ display: "flex", justifyContent: "space-between", marginTop: 10, fontSize: 11.5 }} className="mute">
          <span>{t("day")} 5 / 31</span>
          <span className="mono">€3,180 {t("predicted")}</span>
        </div>
      </div>

      <Sect title={t("today")} action={t("activity")} onAction={() => go("activity")} />
      <div className="list card-blk" style={{ padding: "2px 16px" }}>
        {D1.txs.slice(0, 4).map((tx) => <TxRow key={tx.id} tx={tx} onClick={() => go("tx")} />)}
      </div>

      <button className="card-blk" style={{ display: "flex", gap: 14, alignItems: "center", width: "100%", margin: "14px 0 6px" }} onClick={() => go("cards")}>
        <CardArt finish="graphite" w={84} sheen={false} />
        <span style={{ flex: 1 }}>
          <span style={{ fontSize: 13, fontWeight: 600, display: "block" }}>{t("cardShipping")}</span>
          <span className="mute" style={{ fontSize: 11.5, marginTop: 3, display: "block" }}>{t("cards")} →</span>
        </span>
      </button>
    </div>
  );
}

/* ============ 04 · All accounts ============ */
function ScrAccounts({ app }) {
  const { t, go } = app;
  const [f, setF] = React.useState("all");
  const rows = D1.accounts.filter((a) => f === "all" || a.type === (f === "assets" ? "asset" : f));
  return (
    <div className="scr">
      <SH app={app} title={t("allAccounts")} backTo="home"
        right={<button className="icbtn" onClick={() => go("addmoney")} aria-label="Add"><Icon name="plus" size={17} /></button>} />
      <div style={{ padding: "2px 2px 16px" }}>
        <div className="k">{t("totalBalance")}</div>
        <div className="mono" style={{ fontSize: 30, fontWeight: 700, letterSpacing: "-0.02em", marginTop: 5 }}>€31,398.75</div>
      </div>
      <div className="chiprow">
        {[["all", t("all")], ["fiat", t("fiat")], ["crypto", t("crypto")], ["assets", t("assets")]].map(([id, l]) => (
          <Chip key={id} on={f === id} onClick={() => setF(id)}>{l}</Chip>
        ))}
      </div>
      <div className="list" style={{ marginTop: 8 }}>
        {rows.map((a) => (
          <button key={a.id} className="lrow" onClick={() => go("account")}>
            <span className="flagchip" style={{ width: 38, height: 38, borderRadius: 12, fontSize: 10 }}>{a.flag}</span>
            <span className="lrow-main">
              <span className="lrow-label" style={{ display: "flex", gap: 7, alignItems: "center" }}>
                {a.cur} <Pill tone="dim">{a.type === "fiat" ? t("fiat") : a.type === "crypto" ? t("crypto") : t("assets")}</Pill>
              </span>
              <span className="lrow-sub">{a.name}</span>
            </span>
            <Spark data={a.spark} w={54} h={18} color={a.d7 >= 0 ? "var(--m3-mint)" : "var(--m3-down)"} />
            <span className="lrow-right" style={{ minWidth: 86 }}>
              <span className="lrow-r1 mono">{a.id === "xau" ? a.bal.toFixed(2) + " oz" : money(a.bal, a.sym, a.id === "aed" ? 0 : 2)}</span>
              <span className={"lrow-r2 mono " + (a.d7 >= 0 ? "up" : "down")}>{a.d7 >= 0 ? "+" : ""}{a.d7}%</span>
            </span>
          </button>
        ))}
      </div>
    </div>
  );
}

/* ============ 05 · Account detail (EUR) ============ */
function ScrAccount({ app }) {
  const { t, go } = app;
  const [range, setRange] = React.useState("1W");
  const a = D1.accounts[0];
  const mine = D1.txs.filter((x) => !x.swap && x.cur === "EUR").slice(0, 5);
  return (
    <div className="scr">
      <SH app={app} title={"EUR · " + a.name} backTo="accounts"
        right={<button className="icbtn" aria-label="More"><Icon name="dots" size={17} /></button>} />
      <div style={{ padding: "0 2px" }}>
        <div className="mono" style={{ fontSize: 34, fontWeight: 700, letterSpacing: "-0.02em" }}>€12,480.52</div>
        <div className="mono up" style={{ fontSize: 12.5, marginTop: 4 }}>+€171.40 · +1.4% {t("thisWeek")}</div>
      </div>
      <div style={{ margin: "18px 0 6px" }}><Area data={a.spark} h={120} /></div>
      <div style={{ display: "flex", justifyContent: "space-between", padding: "0 4px" }}>
        {["1W", "1M", "3M", "1Y", "ALL"].map((r) => (
          <button key={r} className="mono" onClick={() => setRange(r)}
            style={{ fontSize: 11, padding: "5px 10px", borderRadius: 8, color: range === r ? "var(--m3-mint)" : "var(--m3-mute)", background: range === r ? "rgba(0,214,143,.1)" : "none" }}>{r}</button>
        ))}
      </div>

      <div className="qa-row" style={{ marginTop: 18 }}>
        <button className="qa" onClick={() => go("addmoney")}><span className="qa-ic"><Icon name="plus" size={20} /></span>{t("add")}</button>
        <button className="qa" onClick={() => go("send")}><span className="qa-ic"><Icon name="up" size={20} /></span>{t("send")}</button>
        <button className="qa" onClick={() => go("swap")}><span className="qa-ic"><Icon name="swap" size={20} /></span>{t("swap")}</button>
        <button className="qa" onClick={() => go("activity")}><span className="qa-ic"><Icon name="doc" size={20} /></span>{t("statements")}</button>
      </div>

      <Sect title={t("accountDetails")} />
      <div className="card-blk" style={{ padding: "4px 16px" }}>
        <div className="kv"><span className="kk">IBAN</span>
          <span className="vv mono" style={{ display: "flex", gap: 8, alignItems: "center" }}>{a.iban}
            <button onClick={() => app.toast(t("copied"))} style={{ color: "var(--m3-mint)", display: "flex" }}><Icon name="copy" size={14} /></button></span></div>
        <div className="kv"><span className="kk">SWIFT / BIC</span>
          <span className="vv mono" style={{ display: "flex", gap: 8, alignItems: "center" }}>{a.swift}
            <button onClick={() => app.toast(t("copied"))} style={{ color: "var(--m3-mint)", display: "flex" }}><Icon name="copy" size={14} /></button></span></div>
        <div className="kv"><span className="kk">{t("holder")}</span><span className="vv">Kertu Laanemets</span></div>
        <div className="kv"><span className="kk">{t("bank")}</span><span className="vv">mSamex Cryptocurrency Exchange OÜ</span></div>
      </div>

      <Sect title={t("recentTx")} action={t("seeAll")} onAction={() => go("activity")} />
      <div className="list card-blk" style={{ padding: "2px 16px" }}>
        {mine.map((tx) => <TxRow key={tx.id} tx={tx} onClick={() => go("tx")} />)}
      </div>
      <button className="btn-ghost" style={{ margin: "16px 0 6px" }} onClick={() => go("profile")}>
        <Icon name="gear" size={17} /> {t("accountSettings")}
      </button>
    </div>
  );
}

Object.assign(window, { SH, ScrSplash, ScrOnboarding, ScrHome, ScrAccounts, ScrAccount });