// Bets — WCAX 認購＋併購（CEO 限定；App 只對 CEO 顯示）
(() => {
const { Panel, Badge, Button, SectionTitle } = window.WCATalentGameDesignSystem_377d00;

const inputStyle = {
  background: "var(--navy-950)", border: "1px solid rgba(212,175,55,.28)", borderRadius: 6,
  color: "var(--text-primary)", padding: "8px 10px", fontSize: 13, outline: "none", boxSizing: "border-box",
};

const MA_STATUS_LABEL  = { proposed: "待回覆", accepted: "待控台核准", approved: "已生效", rejected: "已拒絕" };
const MA_STATUS_TONE   = { proposed: "warning", accepted: "info", approved: "success", rejected: "neutral" };

// ─── WCAX 認購單 ───────────────────────────────────────────────
function BetsPanel({ data, onRefresh }) {
  const { balance, bets, targets, settings, phase } = data;
  const isOpen = phase === "bet_window";

  // 本地編輯狀態：[{target_team_id, amount}]
  const [entries, setEntries] = React.useState(() =>
    bets.map((b) => ({ target_team_id: b.target_team_id, amount: b.amount }))
  );
  const [saving, setSaving] = React.useState(false);
  const [saveErr, setSaveErr] = React.useState(null);
  const [saved, setSaved]   = React.useState(false);

  const unit = settings.unit || 500000;           // 50萬
  const unitWan = unit / 10000;
  const perCap  = settings.per_target_cap || 1000000;  // 100萬
  const totalMin = settings.total_min != null ? settings.total_min : 1000000; // 動態下限
  const totalMax = settings.total_max || 5000000;

  const total = entries.reduce((s, e) => s + (e.amount || 0), 0);
  const totalWan = (total / 10000).toFixed(0);
  const balanceWan = (balance / 10000).toLocaleString("zh-TW");

  const updateAmount = (i, delta) => {
    setEntries((prev) => {
      const next = [...prev];
      const cur  = next[i].amount || 0;
      const next_amt = Math.max(0, cur + delta);
      next[i] = { ...next[i], amount: Math.min(next_amt, perCap) };
      return next;
    });
  };
  const updateTarget = (i, target_team_id) => {
    setEntries((prev) => {
      const next = [...prev];
      next[i] = { ...next[i], target_team_id: Number(target_team_id) };
      return next;
    });
  };
  const addRow = () => {
    const available = targets.filter((t) => !entries.find((e) => e.target_team_id === t.id));
    if (!available.length) return;
    setEntries((prev) => [...prev, { target_team_id: available[0].id, amount: unit }]);
  };
  const removeRow = (i) => setEntries((prev) => prev.filter((_, j) => j !== i));

  const submit = async () => {
    setSaveErr(null); setSaved(false); setSaving(true);
    try {
      await api("/api/bets", {
        method: "PUT",
        body: { entries: entries.filter((e) => e.amount > 0).map((e) => ({ target_team_id: e.target_team_id, amount: e.amount })) },
      });
      setSaved(true); setTimeout(() => setSaved(false), 2500);
      onRefresh();
    } catch (e) {
      setSaveErr(e.message);
    } finally {
      setSaving(false);
    }
  };

  return (
    <Panel header={`WCAX 認購單（帳戶餘額：${balanceWan} 萬元）`}>
      {/* 規則卡 */}
      <div style={{ background: "rgba(212,175,55,.07)", border: "1px solid rgba(212,175,55,.2)", borderRadius: 8, padding: "10px 14px", marginBottom: 16, fontSize: 12, color: "var(--text-muted)", lineHeight: 1.8 }}>
        <span style={{ color: "var(--gold-300)", fontWeight: 700 }}>認購規則：</span>
        單位 {unitWan} 萬・每標的上限 {perCap / 10000} 萬・
        總額 {totalMin / 10000}–{totalMax / 10000} 萬（餘額 &lt; 300 萬時下限降 {settings.low_balance_min ? settings.low_balance_min / 10000 : 50} 萬）
      </div>

      {!isOpen && (
        <div style={{ background: "rgba(224,122,106,.12)", border: "1px solid rgba(224,122,106,.3)", borderRadius: 8, padding: "10px 14px", marginBottom: 14, fontSize: 13, color: "var(--danger,#e07a6a)" }}>
          目前非認購時段（{phase}），認購單僅供查看，無法編輯。
        </div>
      )}

      {/* 認購列表 */}
      {entries.length === 0 && isOpen && (
        <div style={{ color: "var(--text-muted)", fontSize: 13, padding: "8px 0" }}>尚無認購列——按下方按鈕新增。</div>
      )}
      {entries.map((e, i) => {
        const targetName = targets.find((t) => t.id === e.target_team_id)?.name || "（未知隊伍）";
        const amtWan = (e.amount / 10000).toFixed(0);
        return (
          <div key={i} style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 10, flexWrap: "wrap" }}>
            {isOpen ? (
              <select
                style={{ ...inputStyle, flex: "1 1 160px", minWidth: 130, maxWidth: 240 }}
                value={e.target_team_id}
                onChange={(ev) => updateTarget(i, ev.target.value)}
              >
                {targets.map((t) => (
                  <option key={t.id} value={t.id}>{t.name}</option>
                ))}
              </select>
            ) : (
              <span style={{ flex: "1 1 160px", fontSize: 13, color: "var(--text-secondary)" }}>{targetName}</span>
            )}
            <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
              {isOpen && (
                <Button size="sm" variant="ghost" onClick={() => updateAmount(i, -unit)}>−</Button>
              )}
              <span style={{ fontSize: 14, fontWeight: 700, color: "var(--gold-300)", minWidth: 56, textAlign: "center" }}>
                {amtWan} 萬
              </span>
              {isOpen && (
                <Button size="sm" variant="ghost" onClick={() => updateAmount(i, unit)}>＋</Button>
              )}
            </div>
            {isOpen && (
              <Button size="sm" variant="ghost" onClick={() => removeRow(i)} style={{ color: "var(--danger,#e07a6a)" }}>移除</Button>
            )}
          </div>
        );
      })}

      {/* 小計 */}
      {entries.length > 0 && (
        <div style={{ borderTop: "1px solid rgba(212,175,55,.2)", paddingTop: 10, marginTop: 4, display: "flex", justifyContent: "flex-end", fontSize: 13 }}>
          <span style={{ color: "var(--text-muted)" }}>合計&nbsp;</span>
          <span style={{ color: "var(--gold-300)", fontWeight: 700, marginLeft: 4 }}>{totalWan} 萬</span>
        </div>
      )}

      {isOpen && (
        <div style={{ display: "flex", gap: 10, marginTop: 14, alignItems: "center", flexWrap: "wrap" }}>
          <Button size="sm" variant="ghost" onClick={addRow} disabled={targets.length === 0}>＋ 新增標的</Button>
          <Button size="sm" onClick={submit} disabled={saving}>{saving ? "提交中…" : "儲存認購單"}</Button>
          {saved   && <span style={{ color: "var(--success,#7fc97f)", fontSize: 13 }}>已儲存 ✓</span>}
          {saveErr && <span style={{ color: "var(--danger,#e07a6a)", fontSize: 13 }}>錯誤：{saveErr}</span>}
        </div>
      )}
    </Panel>
  );
}

// ─── 併購面板 ─────────────────────────────────────────────────
function MAPanel({ data, myTeamId, onRefresh }) {
  const { targets, phase } = data;
  const isOpen = phase === "ma_window";

  const [pending, setPending] = React.useState(null);
  const [propTarget, setPropTarget] = React.useState(targets[0]?.id || "");
  const [proposing, setProposing] = React.useState(false);
  const [propErr, setPropErr]   = React.useState(null);

  const loadPending = () => api("/api/ma/pending").then(setPending).catch(() => {});
  React.useEffect(() => { loadPending(); }, []);

  const propose = async () => {
    if (!propTarget) return;
    if (!confirm("確定要向這支隊伍發起併購提案？雙方 CEO 都需要確認，最後由控台核准。")) return;
    setPropErr(null); setProposing(true);
    try {
      await api("/api/ma/propose", { method: "POST", body: { target_team_id: Number(propTarget) } });
      loadPending(); onRefresh();
    } catch (e) {
      setPropErr(e.message);
    } finally {
      setProposing(false);
    }
  };

  const respond = async (deal_id, accept) => {
    const verb = accept ? "接受" : "拒絕";
    if (!confirm(`確定要${verb}這筆併購提案？`)) return;
    try {
      await api("/api/ma/respond", { method: "POST", body: { deal_id, accept } });
      loadPending(); onRefresh();
    } catch (e) { alert(e.message); }
  };

  return (
    <Panel header="併購（M&A）">
      {!isOpen && (
        <div style={{ background: "rgba(212,175,55,.08)", border: "1px solid rgba(212,175,55,.25)", borderRadius: 8, padding: "10px 14px", marginBottom: 14, fontSize: 13, color: "var(--text-muted)" }}>
          併購時段尚未開放（目前：{phase}）——此區塊進入 ma_window 階段後亮起。
        </div>
      )}

      {/* 發起提案 */}
      {isOpen && (
        <div style={{ marginBottom: 16 }}>
          <div style={{ fontSize: 12, color: "var(--text-muted)", marginBottom: 8 }}>發起併購提案</div>
          <div style={{ display: "flex", gap: 10, flexWrap: "wrap", alignItems: "center" }}>
            <select style={{ ...inputStyle, flex: "1 1 160px", minWidth: 130, maxWidth: 240 }}
              value={propTarget} onChange={(e) => setPropTarget(e.target.value)}>
              {targets.map((t) => <option key={t.id} value={t.id}>{t.name}</option>)}
            </select>
            <Button size="sm" onClick={propose} disabled={proposing || !propTarget}>
              {proposing ? "提交中…" : "發起提案"}
            </Button>
          </div>
          {propErr && <div style={{ color: "var(--danger,#e07a6a)", fontSize: 13, marginTop: 8 }}>錯誤：{propErr}</div>}
        </div>
      )}

      {/* 進行中案件 */}
      <div style={{ fontSize: 12, color: "var(--text-muted)", marginBottom: 8 }}>與本隊相關的案件</div>
      {!pending ? (
        <div style={{ color: "var(--text-muted)", fontSize: 13 }}>載入中…</div>
      ) : pending.filter((d) => d.proposer_team_id === myTeamId || d.target_team_id === myTeamId).length === 0 ? (
        <div style={{ color: "var(--text-muted)", fontSize: 13 }}>目前沒有相關案件。</div>
      ) : (
        <div>
          {pending
            .filter((d) => d.proposer_team_id === myTeamId || d.target_team_id === myTeamId)
            .map((d) => {
              const isTarget  = d.target_team_id === myTeamId;
              const canRespond = isOpen && isTarget && d.status === "proposed";
              return (
                <div key={d.id} style={{
                  padding: "10px 12px", marginBottom: 10, borderRadius: 8,
                  border: "1px solid rgba(212,175,55,.2)", background: "rgba(212,175,55,.05)",
                }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap" }}>
                    <span style={{ fontSize: 13, color: "var(--text-secondary)", flex: 1 }}>
                      <span style={{ color: "var(--gold-300)", fontWeight: 700 }}>{d.proposer_name}</span>
                      <span style={{ color: "var(--text-muted)", margin: "0 6px" }}>→</span>
                      <span style={{ color: "var(--gold-100,#f2ead2)", fontWeight: 700 }}>{d.target_name}</span>
                    </span>
                    <Badge tone={MA_STATUS_TONE[d.status] || "neutral"} size="sm">
                      {MA_STATUS_LABEL[d.status] || d.status}
                    </Badge>
                  </div>
                  {canRespond && (
                    <div style={{ display: "flex", gap: 8, marginTop: 10 }}>
                      <Button size="sm" onClick={() => respond(d.id, true)}>接受提案</Button>
                      <Button size="sm" variant="ghost" onClick={() => respond(d.id, false)}
                        style={{ color: "var(--danger,#e07a6a)" }}>拒絕提案</Button>
                    </div>
                  )}
                </div>
              );
            })}
        </div>
      )}
      <div style={{ marginTop: 8 }}>
        <Button size="sm" variant="ghost" onClick={() => { loadPending(); onRefresh(); }}>重新整理</Button>
      </div>
    </Panel>
  );
}

// ─── 頁面主體 ─────────────────────────────────────────────────
function Bets({ me }) {
  const [data, setData] = React.useState(null);
  const load = () => api("/api/bets").then(setData).catch(() => {});
  React.useEffect(() => { load(); }, []);

  if (!data) return <div style={{ color: "var(--text-muted)", padding: 40, textAlign: "center" }}>戰情資料載入中…</div>;

  return (
    <div>
      <SectionTitle eyebrow="WCAX" align="left" size="h2" subtitle="認購其他新創的股票＋發動或接受併購">
        投資決策台
      </SectionTitle>

      <div style={{ display: "flex", flexDirection: "column", gap: 20, marginTop: 18 }}>
        <BetsPanel data={data} onRefresh={load} />
        <MAPanel   data={data} myTeamId={me && me.team_id} onRefresh={load} />
      </div>
    </div>
  );
}

window.Bets = Bets;
})();