import { Line } from 'react-chartjs-2';
import { useQuery } from '@apollo/client';
import { gql } from '@apollo/client';

const GET_ROUND_PERFORM_1 = gql`
  query GetRoundPerformance {
    getRoundPerform1 {
      roundNumber
      tokenPrice
      soldAmount
    }
  }
`;

function TokenPriceChart() {
  const { data, loading } = useQuery(GET_ROUND_PERFORM_1);

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

  const chartData = {
    labels: data.getRoundPerform1.map(r => `Round ${r.roundNumber}`),
    datasets: [
      {
        label: 'Token Price ($)',
        data: data.getRoundPerform1.map(r => r.tokenPrice),
        borderColor: 'rgb(251, 146, 60)',
        backgroundColor: 'rgba(251, 146, 60, 0.1)',
        tension: 0.4
      }
    ]
  };

  const options = {
    responsive: true,
    plugins: {
      title: {
        display: true,
        text: 'Token Price Trend Across Rounds'
      },
      legend: {
        position: 'top'
      }
    },
    scales: {
      y: {
        beginAtZero: true,
        title: {
          display: true,
          text: 'Price (USD)'
        }
      }
    }
  };

  return <Line data={chartData} options={options} />;
}