import React from 'react';
import {
  LineChart,
  Line,
  BarChart,
  Bar,
  PieChart,
  Pie,
  Cell,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  ResponsiveContainer
} from 'recharts';

const COLORS = ['#3B82F6', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6', '#EC4899'];

export const TaskProgressChart = ({ data }) => {
  return (
    <ResponsiveContainer width="100%" height={300}>
      <LineChart data={data}>
        <CartesianGrid strokeDasharray="3 3" className="opacity-30" />
        <XAxis dataKey="month" stroke="#6B7280" />
        <YAxis stroke="#6B7280" />
        <Tooltip 
          contentStyle={{ 
            backgroundColor: '#1F2937', 
            border: '1px solid #374151',
            borderRadius: '8px'
          }}
        />
        <Legend />
        <Line 
          type="monotone" 
          dataKey="completed" 
          stroke="#10B981" 
          strokeWidth={2}
          name="Completed"
        />
        <Line 
          type="monotone" 
          dataKey="inProgress" 
          stroke="#3B82F6" 
          strokeWidth={2}
          name="In Progress"
        />
        <Line 
          type="monotone" 
          dataKey="pending" 
          stroke="#F59E0B" 
          strokeWidth={2}
          name="Pending"
        />
      </LineChart>
    </ResponsiveContainer>
  );
};

export const TaskDistributionChart = ({ data }) => {
  return (
    <ResponsiveContainer width="100%" height={300}>
      <PieChart>
        <Pie
          data={data}
          cx="50%"
          cy="50%"
          labelLine={false}
          label={({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`}
          outerRadius={80}
          fill="#8884d8"
          dataKey="value"
        >
          {data.map((entry, index) => (
            <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
          ))}
        </Pie>
        <Tooltip 
          contentStyle={{ 
            backgroundColor: '#1F2937', 
            border: '1px solid #374151',
            borderRadius: '8px'
          }}
        />
      </PieChart>
    </ResponsiveContainer>
  );
};

export const UserPerformanceChart = ({ data }) => {
  return (
    <ResponsiveContainer width="100%" height={300}>
      <BarChart data={data}>
        <CartesianGrid strokeDasharray="3 3" className="opacity-30" />
        <XAxis dataKey="name" stroke="#6B7280" />
        <YAxis stroke="#6B7280" />
        <Tooltip 
          contentStyle={{ 
            backgroundColor: '#1F2937', 
            border: '1px solid #374151',
            borderRadius: '8px'
          }}
        />
        <Legend />
        <Bar dataKey="tasks" fill="#3B82F6" name="Tasks Completed" />
        <Bar dataKey="efficiency" fill="#10B981" name="Efficiency %" />
      </BarChart>
    </ResponsiveContainer>
  );
};

export const ActivityChart = ({ data }) => {
  return (
    <ResponsiveContainer width="100%" height={300}>
      <LineChart data={data}>
        <CartesianGrid strokeDasharray="3 3" className="opacity-30" />
        <XAxis dataKey="date" stroke="#6B7280" />
        <YAxis stroke="#6B7280" />
        <Tooltip 
          contentStyle={{ 
            backgroundColor: '#1F2937', 
            border: '1px solid #374151',
            borderRadius: '8px'
          }}
        />
        <Legend />
        <Line 
          type="monotone" 
          dataKey="tasks" 
          stroke="#8B5CF6" 
          strokeWidth={2}
          name="Tasks Created"
        />
        <Line 
          type="monotone" 
          dataKey="comments" 
          stroke="#EC4899" 
          strokeWidth={2}
          name="Comments"
        />
        <Line 
          type="monotone" 
          dataKey="documents" 
          stroke="#F59E0B" 
          strokeWidth={2}
          name="Documents Uploaded"
        />
      </LineChart>
    </ResponsiveContainer>
  );
};