import { formatCoin, formatPercent } from "../utils/format.js";
import { FourMetricRow } from "./MiniStat.jsx";
import { Panel } from "./Panel.jsx";

export function GameEconomyPanel({ gameMetrics, gameRanking }) {
  return (
    <Panel title="游戏经济">
      <FourMetricRow items={gameMetrics} />
      <GameRankTable items={gameRanking} />
    </Panel>
  );
}

function GameRankTable({ items }) {
  const max = Math.max(...items.map((item) => item.turnover_coin), 1);
  const total = items.reduce((sum, item) => sum + item.turnover_coin, 0) || 1;
  return (
    <div className="game-table">
      <div className="game-table-head">
        <span>游戏流水排行</span>
        <span>流水 (USD)</span>
        <span>占比</span>
      </div>
      {items.map((item, index) => (
        <div className="game-row" key={`${item.platform_code || "game"}-${item.game_id}`}>
          <span>{index + 1}</span>
          <em>{item.game_label || item.game_id || "-"}</em>
          <div className="bar-track">
            <i style={{ width: `${Math.max(5, (item.turnover_coin / max) * 100)}%` }} />
          </div>
          <b>{formatCoin(item.turnover_coin)}</b>
          <strong>{formatPercent(item.turnover_coin / total)}</strong>
        </div>
      ))}
    </div>
  );
}