import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ReferenceLine } from 'recharts';
import { useQuery, gql } from '@apollo/client';

const GET_ROUND_CHANCE = gql`
  query GetSuccessRates {
    getRoundChance {
      roundNumber
      winRate
      failedRate
    }
  }
`;

function WinRateTrendChart() {
  const { data, loading } = useQuery(GET_ROUND_CHANCE);

  if (loading) return <div>Loading success rates...</div>;

  const chartData = data.getRoundChance.map(round => ({
    round: `Round ${round.roundNumber}`,
    roundNum: round.roundNumber,
    winRate: round.winRate,
    failedRate: round.failedRate
  }));

  return (
    <LineChart width={800} height={400} data={chartData}>
      <CartesianGrid strokeDasharray="3 3" />
      <XAxis dataKey="round" />
      <YAxis label={{ value: 'Percentage (%)', angle: -90, position: 'insideLeft' }} domain={[0, 100]} />
      <Tooltip formatter={(value) => `${value.toFixed(1)}%`} />
      <Legend />

      {/* Reference line at 50% */}
      <ReferenceLine y={50} stroke="#888" strokeDasharray="3 3" label="50% Threshold" />

      {/* Win rate line in green */}
      <Line
        type="monotone"
        dataKey="winRate"
        stroke="#10b981"
        strokeWidth={3}
        name="Win Rate"
        dot={{ r: 5 }}
      />

      {/* Fail rate line in red */}
      <Line
        type="monotone"
        dataKey="failedRate"
        stroke="#ef4444"
        strokeWidth={3}
        name="Failure Rate"
        dot={{ r: 5 }}
      />
    </LineChart>
  );
}