import { useState, useEffect } from "react";
import { useParams } from "react-router-dom";

/**
 * Renders the component for showing total time per role in a project.
 * @returns JSX.Element
 */
export default function TimePerRole(): JSX.Element {
  const [PManagerTime, setPManagerTime] = useState(0);
  const [SManagerTime, setSManagerTime] = useState(0);
  const [DeveloperTime, setDeveloperTime] = useState(0);
  const [TesterTime, setTesterTime] = useState(0);

  //   const token = localStorage.getItem("accessToken") ?? "";
  //   const username = localStorage.getItem("username") ?? "";
  const { projectName } = useParams();

  //   const fetchTimePerRole = async (): Promise<void> => {
  //     const response = await api.getTimePerRole(
  //       username,
  //       projectName ?? "",
  //       token,
  //     );
  // {
  //     if (response.success) {
  //       const report: TimePerRole = response.data ?? {
  //         PManagerTime: 0,
  //         SManagerTime: 0,
  //         DeveloperTime: 0,
  //         TesterTime: 0,
  //       };
  //     } else {
  //       console.error("Failed to fetch weekly report:", response.message);
  //     }
  //   }

  interface TimePerRole {
    PManager: number;
    SManager: number;
    Developer: number;
    Tester: number;
  }

  const fetchTimePerRole = async (): Promise<void> => {
    // Use mock data
    const report: TimePerRole = {
      PManager: 120,
      SManager: 80,
      Developer: 200,
      Tester: 150,
    };

    // Set the state with the mock data
    setPManagerTime(report.PManager);
    setSManagerTime(report.SManager);
    setDeveloperTime(report.Developer);
    setTesterTime(report.Tester);

    await Promise.resolve();
  };

  useEffect(() => {
    void fetchTimePerRole();
  });

  return (
    <>
      <h1 className="font-bold text-[30px] mb-[20px]">
        Total Time Per Role In: {projectName}{" "}
      </h1>
      <div className="border-4 border-black bg-white flex flex-col justify-start min-h-[65vh] h-fit w-[50vw] rounded-3xl overflow-scroll space-y-[2vh] p-[30px] items-center">
        <div className="flex flex-col items-center">
          <table className="w-full text-center divide-y divide-x divide-white text-[30px]">
            <thead>
              <tr>
                <th className="w-1/2 py-2 border-b-2 border-black">Role</th>
                <th className="w-1/2 py-2 border-b-2 border-black">
                  Total Time (min)
                </th>
              </tr>
            </thead>
            <tbody className="divide-y divide-black">
              <tr className="h-[10vh]">
                <td>Project Manager</td>
                <td>
                  <input
                    type="string"
                    className="border-2 border-black rounded-md text-center w-1/2"
                    value={PManagerTime}
                    onKeyDown={(event) => {
                      event.preventDefault();
                    }}
                  />
                </td>
              </tr>
              <tr className="h-[10vh]">
                <td>System Manager</td>
                <td>
                  <input
                    type="string"
                    className="border-2 border-black rounded-md text-center w-1/2"
                    value={SManagerTime}
                    onKeyDown={(event) => {
                      event.preventDefault();
                    }}
                  />
                </td>
              </tr>
              <tr className="h-[10vh]">
                <td>Administration</td>
                <td>
                  <input
                    type="string"
                    className="border-2 border-black rounded-md text-center w-1/2"
                    value={DeveloperTime}
                    onKeyDown={(event) => {
                      event.preventDefault();
                    }}
                  />
                </td>
              </tr>
              <tr className="h-[10vh]">
                <td>Own Work</td>
                <td>
                  <input
                    type="string"
                    className="border-2 border-black rounded-md text-center w-1/2"
                    value={TesterTime}
                    onKeyDown={(event) => {
                      event.preventDefault();
                    }}
                  />
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </>
  );
}