interface DistributionChartProps {
  distribution: {
    high: number;
    medium_high: number;
    medium: number;
    medium_low: number;
    low: number;
  };
}

const LEVELS = [
  { key: 'high', label: '高风险 (86-100%)', color: 'bg-danger' },
  { key: 'medium_high', label: '中高风险 (71-85%)', color: 'bg-[#FB923C]' },
  { key: 'medium', label: '中风险 (51-70%)', color: 'bg-warning' },
  { key: 'medium_low', label: '中低风险 (31-50%)', color: 'bg-[#7DD3FC]' },
  { key: 'low', label: '低风险 (0-30%)', color: 'bg-success' },
];

export function DistributionChart({ distribution }: DistributionChartProps) {
  const total = Object.values(distribution).reduce((sum, val) => sum + val, 0);

  return (
    <div className="card p-4 h-fit">
      <div className="text-[11px] font-medium text-text-muted uppercase tracking-wide mb-4">
        风险等级分布
      </div>

      {LEVELS.map((level) => {
        const value = distribution[level.key as keyof typeof distribution];
        const percentage = total > 0 ? (value / total) * 100 : 0;

        return (
          <div key={level.key} className="mb-3.5 last:mb-0">
            <div className="flex justify-between mb-1.5">
              <span className="text-[12px] text-text-secondary">{level.label}</span>
              <span className="text-[12px] font-semibold">
                {value} ({percentage.toFixed(1)}%)
              </span>
            </div>
            <div className="h-[5px] bg-bg-page rounded overflow-hidden">
              <div
                className={`h-full rounded ${level.color}`}
                style={{ width: `${percentage}%` }}
              />
            </div>
          </div>
        );
      })}
    </div>
  );
}