/* global React, WingDivider, Coin, useGame, fmt */

function StatusBar() {
  return React.createElement("div", { className: "statusbar" },
    React.createElement("span", null, "9:41"),
    React.createElement("div", { className: "sb-r" },
      React.createElement("div", { className: "sb-bars" },
        [4, 6, 8, 10].map((h, i) => React.createElement("i", { key: i, style: { height: h } }))),
      React.createElement("svg", { width: 17, height: 12, viewBox: "0 0 17 12", fill: "#f4ead6" },
        React.createElement("path", { d: "M8.5 2.5c2.2 0 4.2.8 5.7 2.2l1-1.1A9.4 9.4 0 0 0 8.5 1 9.4 9.4 0 0 0 1.8 3.6l1 1.1A8 8 0 0 1 8.5 2.5Zm0 3c1.4 0 2.6.5 3.6 1.4l1-1.1a7 7 0 0 0-9.2 0l1 1.1A5 5 0 0 1 8.5 5.5Zm0 3c.7 0 1.3.3 1.8.7l-1.8 2-1.8-2c.5-.4 1.1-.7 1.8-.7Z" })),
      React.createElement("div", { className: "sb-batt" }, React.createElement("i")))
  );
}

function AppBar({ onBack, onNotebook }) {
  const g = useGame();
  const backBtn = React.createElement("button", { className: "iconbtn", onClick: onBack },
    React.createElement("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none" },
      React.createElement("path", { d: "M10 3 5 8l5 5", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" })));
  const noteBtn = React.createElement("button", { className: "iconbtn", onClick: onNotebook, title: "規則 / 記錄" },
    React.createElement("svg", { width: 17, height: 17, viewBox: "0 0 18 18", fill: "none" },
      React.createElement("rect", { x: 3, y: 2, width: 12, height: 14, rx: 2, stroke: "currentColor", strokeWidth: 1.5 }),
      React.createElement("path", { d: "M6 6h6M6 9h6M6 12h4", stroke: "currentColor", strokeWidth: 1.4, strokeLinecap: "round" }),
      React.createElement("path", { d: "M3 5h2M3 9h2M3 13h2", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round" })));
  return React.createElement("div", { style: { padding: "8px 14px 2px" } },
    // row 1: back | centered title | notebook
    React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 8 } },
      backBtn,
      React.createElement("div", { style: { flex: 1, textAlign: "center", overflow: "hidden" } },
        React.createElement("div", { className: "kv-title", style: { fontSize: 25, lineHeight: 1.15, whiteSpace: "nowrap" } }, "跑車盛宴"),
        React.createElement("div", { className: "kv-sub" }, "SPORTS CAR FEAST")),
      noteBtn),
    // row 2: coin chip | countdown
    React.createElement("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginTop: 8 } },
      React.createElement("div", { className: "coin-chip" },
        React.createElement(Coin, { s: 14 }),
        React.createElement("span", { key: g.coins, className: "coin-tick" }, fmt(g.coins)),
        React.createElement("span", { className: "cc-add", onClick: () => g.showToast("前往儲值中心") }, "+")),
      React.createElement("div", { className: "count-pill", style: { fontSize: 11, padding: "4px 8px" } },
        React.createElement("span", { className: "dot" }),
        React.createElement("span", null, "6天12:30")))
  );
}

function Wallet() {
  const g = useGame();
  return React.createElement("div", { className: "wallet" },
    React.createElement("div", { className: "wbox" },
      React.createElement(Coin, { s: 16 }),
      React.createElement("span", null, fmt(g.coins)),
      React.createElement("span", { className: "wadd", onClick: () => g.showToast("前往儲值中心") }, "+")),
    React.createElement("div", { className: "count-pill" },
      React.createElement("span", { className: "dot" }),
      React.createElement("span", null, "剩餘 6天 12:30"))
  );
}

function Marquee() {
  const msg = "　恭喜用戶 RacerKing(13502175) 抽中【限定座駕·焰金 S】　·　Leon(6986800) 押中車牌號獲得 8,200 金幣　·　禮物盤已更新，點擊【刷新】可見　";
  return React.createElement("div", { className: "marquee" },
    React.createElement("span", { className: "mq-ico" }, "📢"),
    React.createElement("div", { style: { overflow: "hidden", flex: 1 } },
      React.createElement("div", { className: "mq-track" }, msg + msg))
  );
}

Object.assign(window, { StatusBar, AppBar, Wallet, Marquee });