import { EChart } from "../charts/EChart.jsx";
import { createDonutOption } from "../charts/options/createDonutOption.js";
import { formatCoin, formatPercent, formatWholeMoney } from "../utils/format.js";
import { FiveMetricRow } from "./MiniStat.jsx";
import { Panel } from "./Panel.jsx";

export function LuckyGiftPanel({ luckyMetrics, payoutDistribution }) {
  return (
    <Panel title="幸运礼物返奖">
      <FiveMetricRow items={luckyMetrics} />
      <div className="donut-layout">
        <div className="donut-wrap">
          <EChart className="donut-chart" option={createDonutOption(payoutDistribution)} />
          <div className="donut-center">
            <strong>{formatWholeMoney(totalValue(payoutDistribution))}</strong>
            <span>返奖总额</span>
          </div>
        </div>
        <DistributionList items={payoutDistribution} />
      </div>
    </Panel>
  );
}

function totalValue(items) {
  return items.reduce((sum, item) => sum + item.value, 0);
}

function DistributionList({ items }) {
  const total = items.reduce((sum, item) => sum + item.value, 0) || 1;
  return (
    <div className="distribution-list">
      {items.map((item) => (
        <div className="distribution-row" key={item.name}>
          <span />
          <em>{item.name}</em>
          <strong>{formatPercent(item.value / total)}</strong>
          <b>{formatCoin(item.value)}</b>
        </div>
      ))}
    </div>
  );
}