/* mSamex Card — screens 10–13: Send, Sent, Add money, Swap */
const { Icon, MeshMark, Avatar, Pill, Chip, Bar, Sect, Area, eur, money, signed, fmtNum } = window.CardKit;
const D3 = window.CARD_DATA;

/* ============ 10 · Send money ============ */
function ScrSend({ app }) {
  const { t, go } = app;
  const [amt, setAmt] = React.useState(250);
  const [note, setNote] = React.useState("");
  const [holding, setHolding] = React.useState(false);
  const timer = React.useRef(null);
  const start = () => {
    setHolding(true);
    timer.current = setTimeout(() => { setHolding(false); go("sentok"); }, 950);
  };
  const stop = () => { setHolding(false); clearTimeout(timer.current); };
  const methods = [
    { ic: "contact", n: t("contacts"), s: t("contactsSub") },
    { ic: "at", n: t("username"), s: t("usernameSub"), hot: true },
    { ic: "bank", n: t("bankAcct"), s: t("bankSub") },
    { ic: "chain", n: t("onchain"), s: t("onchainSub") },
  ];
  return (
    <div className="scr">
      <SH app={app} title={t("sendMoney")} backTo="home"
        right={<button className="icbtn" aria-label="QR"><Icon name="qr" size={17} /></button>} />

      <div className="k" style={{ margin: "0 2px 10px" }}>{t("recent")}</div>
      <div className="chiprow" style={{ gap: 14 }}>
        {D3.recipients.map((r) => (
          <button key={r.h} style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 6, flexShrink: 0 }}>
            <Avatar name={r.name} size={48} tone={r.h === "@karl" ? "mint" : "el"} />
            <span style={{ fontSize: 11 }}>{r.name}</span>
          </button>
        ))}
        <button style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 6, flexShrink: 0 }}>
          <span className="avatar av-el" style={{ width: 48, height: 48, borderStyle: "dashed" }}><Icon name="plus" size={17} /></span>
          <span style={{ fontSize: 11 }} className="mute">{t("addBtn")}</span>
        </button>
      </div>

      <Sect title={t("sendTo")} />
      <div className="list card-blk" style={{ padding: "2px 16px" }}>
        {methods.map((m) => (
          <button className="lrow" key={m.n}>
            <span className="lrow-ic" style={m.hot ? { background: "rgba(0,214,143,.12)", color: "var(--m3-mint)" } : null}>
              <Icon name={m.ic} size={17} /></span>
            <span className="lrow-main">
              <span className="lrow-label">{m.n}</span>
              <span className="lrow-sub">{m.s}</span>
            </span>
            <Icon name="chev" size={15} style={{ opacity: 0.35 }} />
          </button>
        ))}
      </div>

      <div className="card-blk" style={{ marginTop: 20, textAlign: "center", padding: "22px 16px 16px" }}>
        <div className="amt-display mono">€{fmtNum(amt, 0)}<span className="cur">.00</span></div>
        <div className="mono mute" style={{ fontSize: 12, marginTop: 4 }}>≈ ${fmtNum(amt / 0.9196)} · 1 EUR = 1.0874 USD</div>
        <div style={{ display: "flex", gap: 8, justifyContent: "center", marginTop: 16 }}>
          {[50, 100, 250, 500].map((v) => (
            <Chip key={v} on={amt === v} onClick={() => setAmt(v)}><span className="mono">€{v}</span></Chip>
          ))}
        </div>
      </div>

      <button className="lrow card-blk" style={{ marginTop: 12, padding: "12px 16px" }}>
        <span className="flagchip">EU</span>
        <span className="lrow-main">
          <span className="lrow-sub">{t("from")}</span>
          <span className="lrow-label">EUR · Main</span>
        </span>
        <span className="lrow-r1 mono mute">€12,480.52</span>
        <Icon name="chevD" size={15} style={{ opacity: 0.35 }} />
      </button>

      <div className="searchbar" style={{ marginTop: 12 }}>
        <Icon name="doc" size={15} style={{ opacity: 0.4 }} />
        <input value={note} onChange={(e) => setNote(e.target.value)} placeholder={t("note")} />
      </div>

      <div className="card-blk" style={{ marginTop: 12, padding: "2px 16px" }}>
        <div className="kv"><span className="kk">{t("method")}</span><span className="vv">@karl · mSamex</span></div>
        <div className="kv"><span className="kk">{t("speed")}</span><span className="vv" style={{ color: "var(--m3-mint)" }}>{t("instant")}</span></div>
        <div className="kv"><span className="kk">{t("fee")}</span><span className="vv mono">{t("free")}</span></div>
      </div>

      <button className="btn hold-btn" style={{ margin: "16px 0 6px" }}
        onPointerDown={start} onPointerUp={stop} onPointerLeave={stop}>
        <span className="fill" style={{ transform: holding ? "scaleX(1)" : "scaleX(0)", transition: holding ? "transform 0.95s linear" : "transform 0.15s" }}></span>
        <Icon name="face" size={19} /> {t("holdToSend")}
      </button>
    </div>
  );
}

/* ============ 11 · Sent confirmation ============ */
function ScrSentOk({ app }) {
  const { t, go } = app;
  return (
    <div className="scr" style={{ display: "flex", flexDirection: "column", height: "100%" }}>
      <div className="scr-head">
        <span className="sh-side">
          <button className="icbtn" onClick={() => go("home")} aria-label="Close"><Icon name="close" size={16} /></button>
        </span>
        <span className="sh-title"></span><span className="sh-side"></span>
      </div>
      <div style={{ flex: 1, display: "flex", flexDirection: "column", justifyContent: "center", textAlign: "center", gap: 8 }}>
        <div className="ok-orb"><Icon name="check" size={38} w={2} /></div>
        <div className="mono" style={{ fontSize: 38, fontWeight: 700, letterSpacing: "-0.02em", marginTop: 18 }}>€250.00</div>
        <div className="mute" style={{ fontSize: 14 }}>{t("sent")} {t("to")} Karl Tamm · @karl</div>
      </div>
      <div className="card-blk" style={{ padding: "4px 16px" }}>
        <div className="kv"><span className="kk">{t("recipient")}</span><span className="vv">Karl Tamm · @karl</span></div>
        <div className="kv"><span className="kk">{t("from")}</span><span className="vv">EUR · Main</span></div>
        <div className="kv"><span className="kk">{t("when")}</span><span className="vv mono">5 Jul 2026 · 14:03</span></div>
        <div className="kv"><span className="kk">{t("method")}</span><span className="vv">mSamex {t("instant").toLowerCase()}</span></div>
        <div className="kv"><span className="kk">{t("fee")}</span><span className="vv mono">{t("free")}</span></div>
        <div className="kv"><span className="kk">{t("reference")}</span><span className="vv mono">MSX-2607-05-8841</span></div>
      </div>
      <div style={{ display: "flex", gap: 10, margin: "14px 0 8px" }}>
        <button className="btn-ghost" onClick={() => app.toast(t("shareReceipt") + " · MSX-2607-05-8841")}>
          <Icon name="share" size={16} /> {t("shareReceipt")}
        </button>
        <button className="btn" onClick={() => go("send")}>{t("sendAnother")}</button>
      </div>
    </div>
  );
}

/* ============ 12 · Add money ============ */
function ScrAddMoney({ app }) {
  const { t, go } = app;
  const rows = [
    { ic: "swap", n: "USD → EUR", s: "Internal · from $4,215.08", fee: "0.1%", sp: t("instant") },
    { ic: "chain", n: "USDT → EUR", s: "Internal · from ₮3,120.00", fee: "0.1%", sp: t("instant") },
    { ic: "card", n: t("paymentCard"), s: "Visa · Mastercard", fee: "1.2%", sp: t("instant") },
    { ic: "bank", n: t("bankAcct"), s: "SEPA · " + t("yourIban"), fee: t("free"), sp: "≤ 1 day", hot: true },
    { ic: "chain", n: t("onchain"), s: "USDT · USDC · TRC-20 / Base", fee: t("free"), sp: "~2 min" },
  ];
  return (
    <div className="scr">
      <SH app={app} title={t("addMoney")} backTo="home" />
      <h1 style={{ fontSize: 26, fontWeight: 700, letterSpacing: "-0.03em", margin: "2px 2px 6px" }}>{t("addHead")}</h1>
      <p className="mute" style={{ fontSize: 13, margin: "0 2px 18px" }}>{t("addRec")}</p>

      <div className="list card-blk" style={{ padding: "2px 16px" }}>
        {rows.map((m) => (
          <button className="lrow" key={m.n} style={m.hot ? { position: "relative" } : null}>
            <span className="lrow-ic" style={m.hot ? { background: "rgba(0,214,143,.12)", color: "var(--m3-mint)" } : null}>
              <Icon name={m.ic} size={17} /></span>
            <span className="lrow-main">
              <span className="lrow-label" style={{ display: "flex", gap: 7, alignItems: "center" }}>
                {m.n}{m.hot && <Pill tone="mint">{t("recommended")}</Pill>}
              </span>
              <span className="lrow-sub">{m.s}</span>
            </span>
            <span className="lrow-right">
              <span className="lrow-r1 mono" style={{ fontSize: 12.5 }}>{m.fee}</span>
              <span className="lrow-r2">{m.sp}</span>
            </span>
          </button>
        ))}
      </div>

      <Sect title={t("yourIban")} />
      <div className="card-blk">
        <div className="mono" style={{ fontSize: 16.5, fontWeight: 600, letterSpacing: "0.02em" }}>EE47 7777 0011 2345 6789</div>
        <div className="mute" style={{ fontSize: 11.5, margin: "6px 0 14px" }}>mSamex Cryptocurrency Exchange OÜ · BIC MSAMEE2X · Kertu Laanemets</div>
        <div style={{ display: "flex", gap: 10 }}>
          <button className="btn-ghost btn-sm" onClick={() => app.toast(t("copied"))}><Icon name="copy" size={15} /> {t("copy")}</button>
          <button className="btn-ghost btn-sm" onClick={() => app.toast(t("share") + " · IBAN")}><Icon name="share" size={15} /> {t("share")}</button>
        </div>
      </div>
    </div>
  );
}

/* ============ 13 · Swap / Convert ============ */
function ScrSwap({ app }) {
  const { t, go } = app;
  const [usd, setUsd] = React.useState(2000);
  const rate = 0.9187, mid = 0.9196, bank = 0.89;
  const out = usd * rate, save = usd * (rate - bank);
  return (
    <div className="scr">
      <SH app={app} title={t("swapTitle")} backTo="home" />

      <div className="card-blk">
        <div style={{ display: "flex", justifyContent: "space-between", fontSize: 11.5 }} className="mute">
          <span>{t("youPay")}</span>
          <span className="mono">{t("balance")} $4,215.08 · <button style={{ color: "var(--m3-mint)", fontWeight: 600 }} onClick={() => setUsd(4215)}>{t("max")}</button></span>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 12, marginTop: 10 }}>
          <span className="flagchip" style={{ width: 34, height: 34, fontSize: 10 }}>US</span>
          <span style={{ fontSize: 15, fontWeight: 600, display: "flex", alignItems: "center", gap: 5 }}>USD <Icon name="chevD" size={13} style={{ opacity: 0.4 }} /></span>
          <input className="mono" value={usd} onChange={(e) => setUsd(Number(e.target.value.replace(/[^0-9.]/g, "")) || 0)}
            style={{ flex: 1, minWidth: 0, background: "none", border: "none", outline: "none", textAlign: "end",
              fontSize: 26, fontWeight: 700, color: "var(--m3-snow)", fontFamily: "var(--m3-mono)" }} />
        </div>
      </div>

      <div style={{ display: "flex", justifyContent: "center", margin: "-9px 0" }}>
        <button className="icbtn" style={{ background: "var(--m3-elevated)", zIndex: 2 }} aria-label="Flip"><Icon name="swap" size={16} style={{ transform: "rotate(90deg)" }} /></button>
      </div>

      <div className="card-blk">
        <div style={{ display: "flex", justifyContent: "space-between", fontSize: 11.5 }} className="mute">
          <span>{t("youReceive")}</span>
          <span className="mono">{t("balance")} €12,480.52</span>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 12, marginTop: 10 }}>
          <span className="flagchip" style={{ width: 34, height: 34, fontSize: 10 }}>EU</span>
          <span style={{ fontSize: 15, fontWeight: 600, display: "flex", alignItems: "center", gap: 5 }}>EUR <Icon name="chevD" size={13} style={{ opacity: 0.4 }} /></span>
          <span className="mono" style={{ flex: 1, textAlign: "end", fontSize: 26, fontWeight: 700, color: "var(--m3-mint)" }}>
            {fmtNum(out)}
          </span>
        </div>
      </div>

      <div className="card-blk" style={{ marginTop: 12 }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
          <span className="mono" style={{ fontSize: 14, fontWeight: 600 }}>1 USD = {rate} EUR</span>
          <span className="mono up" style={{ fontSize: 12 }}>{eur(save)} {t("vsBank")}</span>
        </div>
        <div className="mute" style={{ fontSize: 11, margin: "5px 0 12px" }}>{t("midNote")} · {t("midMarket")} {mid}</div>
        <Area data={D3.fx.history} h={78} />
        <div className="mono mute" style={{ fontSize: 10, textAlign: "end", marginTop: 4 }}>USD → EUR · {t("rateHistory")}</div>
      </div>

      <div className="card-blk" style={{ marginTop: 12, padding: "2px 16px" }}>
        <div className="kv"><span className="kk">{t("youPay")}</span><span className="vv mono">${fmtNum(usd)}</span></div>
        <div className="kv"><span className="kk">{t("conversion")}</span><span className="vv mono">@ {rate}</span></div>
        <div className="kv"><span className="kk">{t("fee")} · Aurum</span><span className="vv mono" style={{ color: "var(--m3-mint)" }}>€0.00</span></div>
        <div className="kv"><span className="kk">{t("youReceive")}</span><span className="vv mono" style={{ fontWeight: 700 }}>€{fmtNum(out)}</span></div>
      </div>

      <button className="btn" style={{ margin: "16px 0 6px" }}
        onClick={() => app.toast(t("swapNow") + " · $" + fmtNum(usd) + " → €" + fmtNum(out))}>
        {t("swapNow")}
      </button>
    </div>
  );
}

Object.assign(window, { ScrSend, ScrSentOk, ScrAddMoney, ScrSwap });