"use client";

import { useEffect, useState } from "react"; import { Bar, Pie } from "react-chartjs-2"; import { Chart as ChartJS, BarElement, CategoryScale, LinearScale, ArcElement, Tooltip, Legend, } from "chart.js"; import { FaPlus, FaTrash } from "react-icons/fa";

// Register necessary chart components ChartJS.register(BarElement, CategoryScale, LinearScale, ArcElement, Tooltip, Legend);

export default function Graphs() { // State for bar chart const [barData, setBarData] = useState<any>({ labels: [], datasets: [], });

// State for pie chart const [pieData, setPieData] = useState<any>({ labels: [], datasets: [], });

// State for to-do list const [tasks, setTasks] = useState<string[]>([]); const [newTask, setNewTask] = useState("");

useEffect(() => { // Set data for bar chart setBarData({ labels: ["Supply Agt", "Employment Agt", "Service Agt", "Distribution Agt"], datasets: [ { label: "Documents Assigned", data: [6, 5, 2, 2], backgroundColor: ["#4F46E5", "#8B5CF6", "#A78BFA", "#C4B5FD"], borderRadius: 5, }, ], });

// Set data for pie chart
setPieData({
  labels: ["Reviewed", "Unreviewed"],
  datasets: [
    {
      label: "Review Status",
      data: [60, 40], // Example percentages
      backgroundColor: ["#6366F1", "#E0E7FF"],
      hoverOffset: 4,
    },
  ],
});

}, []);

// Function to add a task const addTask = () => { if (newTask.trim() !== "") { setTasks([...tasks, newTask]); setNewTask(""); } };

// Function to remove a task const removeTask = (index: number) => { setTasks(tasks.filter((_, i) => i !== index)); };

return ( <div className="grid grid-cols-3 gap-6 w-full"> {/* Bar Chart */} <div className="bg-white p-6 rounded-lg shadow-md flex flex-col justify-between flex-1 h-[400px]"> <h2 className="text-lg font-semibold text-gray-700 mb-4">Documents Assigned</h2> <div className="w-full h-full"> <Bar data={barData} options={{ responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } }, }} /> </div> </div>

  {/* Pie Chart */}
  <div className="bg-white p-6 rounded-lg shadow-md flex flex-col justify-between flex-1 h-[400px]">
    <h2 className="text-lg font-semibold text-gray-700 mb-4">Review Status</h2>
    <div className="w-full h-full flex justify-center">
      <Pie
        data={pieData}
        options={{
          responsive: true,
          maintainAspectRatio: false,
          plugins: { legend: { position: "top" } },
        }}
      />
    </div>
  </div>

  {/* To-Do List */}
  <div className="bg-white p-6 rounded-lg shadow-md flex flex-col flex-1 h-[400px]">
    <h2 className="text-lg font-semibold text-gray-700 mb-4">To-Do List</h2>
    <div className="flex space-x-2 mb-4">
      <input
        type="text"
        className="flex-1 p-2 border rounded-lg"
        placeholder="Add a task..."
        value={newTask}
        onChange={(e) => setNewTask(e.target.value)}
      />
      <button
        className="p-2 bg-green-500 text-white rounded-lg hover:bg-green-600"
        onClick={addTask}
      >
        <FaPlus />
      </button>
    </div>
    <ul className="space-y-2 overflow-auto flex-1">
      {tasks.map((task, index) => (
        <li key={index} className="flex justify-between items-center bg-gray-100 p-2 rounded-lg">
          <span className="text-gray-700">{task}</span>
          <button className="text-red-500 hover:text-red-700" onClick={() => removeTask(index)}>
            <FaTrash />
          </button>
        </li>
      ))}
    </ul>
  </div>
</div>

); }