'use client';

import { FC } from 'react';
import { PieChart, Pie, Cell, ResponsiveContainer, Legend, Tooltip } from 'recharts';
import { Card } from '@/components/common';
import styles from './RegionDistribution.module.scss';

interface RegionData {
  region: string;
  percentage: number;
  color: string;
}

export interface RegionDistributionProps {
  data: RegionData[];
}

export const RegionDistribution: FC<RegionDistributionProps> = ({ data }) => {
  return (
    <Card title="区域分布" className={styles.regionDistribution}>
      <div className={styles.regionDistribution__content}>
        <div className={styles.regionDistribution__chart}>
          <ResponsiveContainer width="100%" height={250}>
            <PieChart>
              <Pie
                data={data}
                cx="50%"
                cy="50%"
                innerRadius={60}
                outerRadius={90}
                paddingAngle={2}
                dataKey="percentage"
                nameKey="region"
              >
                {data.map((entry, index) => (
                  <Cell key={`cell-${index}`} fill={entry.color} />
                ))}
              </Pie>
              <Tooltip
                formatter={(value: number) => [`${value}%`, '占比']}
                contentStyle={{
                  backgroundColor: '#fff',
                  border: '1px solid #E0E0E0',
                  borderRadius: 8,
                  boxShadow: '0 4px 12px rgba(0,0,0,0.1)',
                }}
              />
            </PieChart>
          </ResponsiveContainer>
        </div>
        <div className={styles.regionDistribution__legend}>
          {data.map((item, index) => (
            <div key={index} className={styles.regionDistribution__legendItem}>
              <span
                className={styles.regionDistribution__legendColor}
                style={{ backgroundColor: item.color }}
              />
              <span className={styles.regionDistribution__legendLabel}>{item.region}</span>
              <span className={styles.regionDistribution__legendValue}>{item.percentage}%</span>
            </div>
          ))}
        </div>
      </div>
    </Card>
  );
};
