import React, { useEffect, useState } from 'react';
import axios from 'axios';
import {
  PieChart,
  Pie,
  Cell,
  Tooltip,
  Legend,
} from 'recharts';

const COLORS = ['#0088FE', '#FEB43C'];

export default function PollDetail({ question }) {
  const [poll, setPoll] = useState(null);

  useEffect(() => {
    fetchPoll();
  }, [question]);

  const fetchPoll = async () => {
    try {
      const response = await axios.post('/api/admin/view-votes', { question });
      setPoll(response.data[0]);
    } catch (error) {
      console.error('Error fetching poll:', error);
    }
  };

  if (!poll) return <div>Loading...</div>;

  const memberData = [
    { name: 'Yes', value: poll.member_yes },
    { name: 'No', value: poll.member_no },
  ];

  const nonMemberData = [
    { name: 'Yes', value: poll.non_member_yes },
    { name: 'No', value: poll.non_member_no },
  ];

  return (
    <div>
      <h1>{poll.question}</h1>
      <p>Created At: {new Date(poll.created_at).toLocaleString()}</p>

      <div style={{ width: '40%', margin: '20px' }}>
        <PieChart width={400} height={300}>
          <Pie
            data={memberData}
            cx="50%"
            cy="50%"
            labelLine={false}
            outerRadius={80}
            fill="#8884d8"
            dataKey="value"
          >
            {memberData.map((entry, index) => (
              <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
            ))}
          </Pie>
          <Tooltip />
          <Legend />
        </PieChart>
      </div>

      <div style={{ width: '40%', margin: '20px' }}>
        <PieChart width={400} height={300}>
          <Pie
            data={nonMemberData}
            cx="50%"
            cy="50%"
            labelLine={false}
            outerRadius={80}
            fill="#8884d8"
            dataKey="value"
          >
            {nonMemberData.map((entry, index) => (
              <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
            ))}
          </Pie>
          <Tooltip />
          <Legend />
        </PieChart>
      </div>

      <p>Member Yes Votes: {poll.member_yes}</p>
      <p>Member No Votes: {poll.member_no}</p>
      <p>Non-Member Yes Votes: {poll.non_member_yes}</p>
      <p>Non-Member No Votes: {poll.non_member_no}</p>
    </div>
  );
}