import { Progress, Space, Typography } from 'antd';
import type { StrawPollOption } from '@/types/api';

const { Text } = Typography;

const YES_NO_COLORS: Record<string, string> = {
  Yes: '#52c41a',
  No: '#ff4d4f',
  Abstain: '#8c8c8c',
};

interface PollResultsProps {
  options: StrawPollOption[];
  totalVotes: number;
  type: 'SINGLE_CHOICE' | 'YES_NO_ABSTAIN';
}

const COLORS = ['#1890ff', '#52c41a', '#faad14', '#ff4d4f', '#722ed1', '#13c2c2', '#eb2f96', '#fa8c16', '#a0d911', '#2f54eb'];

export default function PollResults({ options, totalVotes, type }: PollResultsProps) {
  return (
    <div>
      {options.map((opt, i) => {
        const count = opt.voteCount ?? opt._count?.votes ?? 0;
        const pct = totalVotes > 0 ? Math.round((count / totalVotes) * 100) : 0;
        const color = type === 'YES_NO_ABSTAIN'
          ? YES_NO_COLORS[opt.label] || COLORS[i % COLORS.length]
          : COLORS[i % COLORS.length];

        return (
          <div key={opt.id} style={{ marginBottom: 12 }}>
            <Space style={{ width: '100%', justifyContent: 'space-between' }}>
              <Text strong>{opt.label}</Text>
              <Text type="secondary">{count} vote{count !== 1 ? 's' : ''} ({pct}%)</Text>
            </Space>
            <Progress
              percent={pct}
              showInfo={false}
              strokeColor={color}
              size="small"
              style={{ marginTop: 4 }}
            />
          </div>
        );
      })}
      <Text type="secondary" style={{ display: 'block', marginTop: 8 }}>
        Total: {totalVotes} vote{totalVotes !== 1 ? 's' : ''}
      </Text>
    </div>
  );
}
