import React from 'react';
import { Line, Bar, Doughnut } from 'react-chartjs-2';
import Sidebar from '../components/SideBarGPT';

const Analytics = () => {
  // Sample data for charts
  const messagesOverTimeData = {
    labels: ['January', 'February', 'March', 'April', 'May', 'June'],
    datasets: [
      {
        label: 'Messages',
        data: [65, 59, 80, 81, 56, 55],
        fill: false,
        backgroundColor: 'rgba(75,192,192,0.2)',
        borderColor: 'rgba(75,192,192,1)',
      },
    ],
  };

  const userBotMessagesData = {
    labels: ['User', 'Bot'],
    datasets: [
      {
        label: 'Messages',
        data: [300, 450],
        backgroundColor: ['#36A2EB', '#FF6384'],
      },
    ],
  };

  const responseTimeData = {
    labels: ['<1s', '1-2s', '2-3s', '>3s'],
    datasets: [
      {
        label: 'Response Time',
        data: [50, 100, 75, 25],
        backgroundColor: [
          'rgba(255, 99, 132, 0.2)',
          'rgba(54, 162, 235, 0.2)',
          'rgba(255, 206, 86, 0.2)',
          'rgba(75, 192, 192, 0.2)',
        ],
        borderColor: [
          'rgba(255, 99, 132, 1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)',
          'rgba(75, 192, 192, 1)',
        ],
        borderWidth: 1,
      },
    ],
  };

  return (
    <div className="flex">
      <Sidebar />
      <div className="ml-64 flex-1 p-6 bg-gray-100">
        <div className="p-4 bg-white rounded-lg shadow">
          <h2 className="text-2xl font-bold mb-4">Analytics</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            <div className="p-4 bg-gray-100 rounded-lg">
              <h3 className="text-xl font-semibold mb-2">Messages Over Time</h3>
              <Line data={messagesOverTimeData} />
            </div>
            <div className="p-4 bg-gray-100 rounded-lg">
              <h3 className="text-xl font-semibold mb-2">User vs Bot Messages</h3>
              <Doughnut data={userBotMessagesData} />
            </div>
            <div className="p-4 bg-gray-100 rounded-lg">
              <h3 className="text-xl font-semibold mb-2">Response Time Distribution</h3>
              <Bar data={responseTimeData} />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Analytics;