/* global React, Btn, Coin, WingDivider, CarSilhouette, GIFT_EMOJI, fmt */

function Modal({ title, onClose, children }) {
  return React.createElement("div", { className: "modal-mask" },
    React.createElement("div", { className: "modal pop-in" },
      React.createElement("button", { className: "modal-x", onClick: onClose }, "✕"),
      title && React.createElement("div", { className: "modal-title gold-text" }, title),
      children));
}

// S 級兌換成功 → 定制提示
function RefitPrompt({ onClose, onDirect, onGo }) {
  return React.createElement(Modal, { title: "🎉 恭喜獲得 S 級座駕", onClose },
    React.createElement("div", { style: { padding: "4px 22px 22px" } },
      React.createElement("div", { className: "hero", style: { height: 150, margin: "0 0 14px" } },
        React.createElement("div", { className: "glow-red" }),
        React.createElement("div", { style: { position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", paddingBottom: 18 } },
          React.createElement(CarSilhouette, { w: 170, color: "#e22320" })),
        React.createElement("div", { className: "halo" }), React.createElement("div", { className: "ring" })),
      React.createElement("div", { style: { textAlign: "center", fontSize: 13, color: "var(--txt-dim)", marginBottom: 4 } }, "焰金 S 級座駕 · 限時 7 天"),
      React.createElement("div", { style: { textAlign: "center", fontSize: 12, color: "var(--gold-300)", marginBottom: 16 } }, "該座駕支持定制（場景／噴漆）"),
      React.createElement("div", { style: { display: "flex", gap: 10 } },
        React.createElement(Btn, { kind: "ghost", size: "lg", onClick: onDirect, style: { flex: 1 } }, "直接領取"),
        React.createElement(Btn, { kind: "red", size: "lg", onClick: onGo, style: { flex: 1 } }, "去定制"))));
}

// 寶箱點亮
function BoxPrompt({ lv, onClose, onOpen, onContinue }) {
  return React.createElement(Modal, { title: lv + " 級寶箱已點亮", onClose },
    React.createElement("div", { style: { padding: "4px 22px 22px", textAlign: "center" } },
      React.createElement("div", { style: { fontSize: 60, margin: "6px 0 10px", filter: "drop-shadow(0 0 16px rgba(246,221,147,.7))" } }, "🎁"),
      React.createElement("div", { style: { fontSize: 12.5, color: "var(--txt-dim)", lineHeight: 1.7, marginBottom: 16, textWrap: "pretty" } },
        "開啟 = 領取本級獎勵，進度從 0 重新衝刺；繼續開車 = 放棄本箱（作廢），向下一級衝刺。"),
      React.createElement("div", { style: { display: "flex", gap: 10 } },
        React.createElement(Btn, { kind: "ghost", size: "lg", onClick: onContinue, style: { flex: 1 } }, "繼續開車"),
        React.createElement(Btn, { kind: "red", size: "lg", onClick: onOpen, style: { flex: 1 } }, "開啟寶箱"))));
}

// 開車結果（禮物盤）— 真實後端 drive 結果
const drawEmoji = (v) => v >= 100000 ? "🏎️" : v >= 10000 ? "💎" : v >= 1000 ? "🎁" : v >= 100 ? "🏆" : "⭐";
function DrawResult({ result, times, onClose, onAgain }) {
  const items = (result && result.results) || [];
  const sorted = [...items].sort((a, b) => Number(b.value) - Number(a.value));
  const best = sorted[0] || {};
  return React.createElement(Modal, { title: "開車結果", onClose },
    React.createElement("div", { style: { padding: "4px 22px 22px", textAlign: "center" } },
      React.createElement("div", { className: "rcard-art", style: { width: 110, height: 110, margin: "6px auto 12px", fontSize: 50 } }, drawEmoji(Number(best.value || 0))),
      React.createElement("div", { style: { fontSize: 17, fontWeight: 900, color: "var(--gold-100)" } }, "最高價值 " + fmt(Number(best.value || 0))),
      React.createElement("div", { className: "disp", style: { fontSize: 13, color: "var(--txt-dim)", margin: "4px 0 10px" } },
        times + " 次開車 · 共得 " + items.length + " 份" + (result && result.guaranteeHit ? " · 🎯 保底命中" : "")),
      React.createElement("div", { style: { maxHeight: 130, overflow: "auto", fontSize: 12, color: "var(--txt-dim)", marginBottom: 14, lineHeight: 1.9, textAlign: "left", padding: "0 8px" } },
        items.map((it, i) => {
          // 体感：展示礼物名（按价值映射 GIFT_POOL），而非内部 itemId（用户看不懂 + 像 ID 泄露）
          const nm = (window.GIFT_POOL.find(g => g.v === Number(it.value)) || {}).n;
          return React.createElement("div", { key: i, className: "row-in", style: { animationDelay: (i * 70) + "ms" } }, drawEmoji(Number(it.value)) + "　" + (nm ? nm + " · " : "") + "價值 " + fmt(Number(it.value)));
        })),
      React.createElement("div", { style: { display: "flex", gap: 10 } },
        React.createElement(Btn, { kind: "ghost", size: "lg", onClick: onClose, style: { flex: 1 } }, "查看背包"),
        React.createElement(Btn, { kind: "red", size: "lg", onClick: onAgain, style: { flex: 1 } }, "繼續開車"))));
}

// 車牌開獎結果（金幣盤）
function DiceResult({ res, onClose, onAgain }) {
  const win = res.payout > 0;
  return React.createElement(Modal, { title: win ? "🎊 命中車牌" : "開獎結果", onClose },
    React.createElement("div", { style: { padding: "4px 22px 22px", textAlign: "center" } },
      React.createElement("div", { style: { display: "flex", gap: 12, justifyContent: "center", margin: "8px 0 14px" } },
        res.dice.map((d, i) => React.createElement("div", { key: i, className: "row-in", style: { animationDelay: (i * 110) + "ms", width: 52, height: 52, borderRadius: 12, background: "linear-gradient(180deg,#fbf7ff,#dfd2f4)", display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--font-disp)", fontWeight: 700, fontSize: 30, color: "#5326c4", boxShadow: "0 4px 10px rgba(0,0,0,.4)" } }, d))),
      React.createElement("div", { className: "disp", style: { fontSize: 18, color: "var(--gold-100)", marginBottom: 6 } }, "車牌 " + res.dice.join(" · ")),
      win
        ? React.createElement("div", { style: { fontSize: 15, color: "var(--red-hi)", fontWeight: 900, marginBottom: 16, display: "flex", alignItems: "center", justifyContent: "center", gap: 5 } },
            "命中數字 " + res.wins.join("、") + "　派彩 ", React.createElement(Coin, { s: 14 }), fmt(res.payout))
        : React.createElement("div", { style: { fontSize: 13, color: "var(--txt-mute)", marginBottom: 16 } }, "本局未命中，再接再厲"),
      React.createElement(Btn, { kind: "red", size: "lg", full: true, onClick: onAgain }, "繼續開車")));
}

/* ---------------- Rules ---------------- */
const RULES = [
  { ico: "🏎️", h: "跑車兌換", p: "房間送出指定禮物，一次性送出 N 個有機會掉落車藍圖與車鑰匙；未觸發時概率向下次累加，至上限必出。集齊指定數量即可兌換限時座駕（S／A／B）。" },
  { ico: "🎨", h: "S 級定制", p: "兌換 S 級座駕時可選擇定制：用金幣購買「場景＋噴漆」組合（試點 2 台 × 4 種 = 8 種）。外形不隨定制改變，確認購買後發放定制款至背包。" },
  { ico: "🎁", h: "發財禮物（禮物盤）", p: "花金幣在 16 區寻寶抽礼。刷新可更換可抽禮物，刷新至第 5/10/15/20/25/30 次必得對應價值禮物，第 30 次必出全服級禮物。寶箱 5 級逐級博弈，按開車累計點亮，刷新不計入。" },
  { ico: "🎲", h: "發財車號（金幣盤）", p: "購買車票後對數字 1–6 下注，點擊開車即時開獎（3 顆骰子）。命中 1 次 ×2、同數字 2 次 ×4.1、3 次 ×6.2；單個數字下注上限 100,000 金幣。" },
  { ico: "🎉", h: "福利專區", p: "新用戶首充激活，累計儲值達檔每檔 3 選 1（座駕／頭像框／氣泡）；全民任務按累計送禮達標發獎。" },
];

function RulesScreen() {
  return React.createElement("div", { className: "fade-in", style: { padding: "8px 0 8px" } },
    React.createElement("div", { className: "panel-head", style: { paddingTop: 8 } },
      React.createElement(WingDivider, { w: 60 }),
      React.createElement("span", { className: "ph-title gold-text", style: { fontSize: 19 } }, "活動規則"),
      React.createElement(WingDivider, { w: 60 })),
    React.createElement("div", { className: "disp upper", style: { textAlign: "center", fontSize: 9, letterSpacing: ".3em", color: "var(--txt-mute)", marginTop: -4, marginBottom: 14 } }, "RULES"),
    RULES.map((r, i) => React.createElement("div", { key: i, className: "rule-sec" },
      React.createElement("div", { className: "rule-h" }, React.createElement("span", null, r.ico), r.h),
      React.createElement("div", { className: "rule-p" }, r.p))),
    React.createElement("div", { style: { margin: "0 16px", padding: 12, borderRadius: 10, background: "rgba(140,13,20,.18)", boxShadow: "inset 0 0 0 1px rgba(226,35,32,.3)", fontSize: 11.5, color: "var(--txt-dim)", lineHeight: 1.7, textWrap: "pretty" } },
      "⚠️ 如有作弊／系統故障，官方有權清除作弊者所得的全部獎勵。本活動最終解釋權歸主辦方所有。")
  );
}

Object.assign(window, { Modal, RefitPrompt, BoxPrompt, DrawResult, DiceResult, RulesScreen });