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

interface UnsignedReports {
  projectName: string;
  username: string;
  week: number;
  signed: boolean;
}

/**
 * Renders a component that displays the projects a user is a part of and links to the projects start-page.
 * @returns The JSX element representing the component.
 */
function DisplayUserProject(): JSX.Element {
  const { projectName } = useParams();
  const [unsignedReports, setUnsignedReports] = useState<UnsignedReports[]>([]);
  //const navigate = useNavigate();

  //   const getUnsignedReports = async (): Promise<void> => {
  //     const token = localStorage.getItem("accessToken") ?? "";
  //     const response = await api.getUserProjects(token);
  //     console.log(response);
  //     if (response.success) {
  //       setUnsignedReports(response.data ?? []);
  //     } else {
  //       console.error(response.message);
  //     }
  //   };

  //   const handleReportClick = async (projectName: string): Promise<void> => {
  //     const username = localStorage.getItem("username") ?? "";
  //     const token = localStorage.getItem("accessToken") ?? "";
  //     const response = await api.checkIfProjectManager(
  //       username,
  //       projectName,
  //       token,
  //     );
  //     if (response.success) {
  //       if (response.data) {
  //         navigate(`/PMProjectPage/${projectName}`);
  //       } else {
  //         navigate(`/project/${projectName}`);
  //       }
  //     } else {
  //       // handle error
  //       console.error(response.message);
  //     }
  //   };

  const getUnsignedReports = async (): Promise<void> => {
    // Simulate a delay
    await Promise.resolve();

    // Use mock data
    const reports: UnsignedReports[] = [
      {
        projectName: "projecttest",
        username: "user1",
        week: 2,
        signed: false,
      },
      {
        projectName: "projecttest",
        username: "user2",
        week: 2,
        signed: false,
      },
      {
        projectName: "projecttest",
        username: "user3",
        week: 2,
        signed: false,
      },
      {
        projectName: "projecttest",
        username: "user4",
        week: 2,
        signed: false,
      },
    ];

    // Set the state with the mock data
    setUnsignedReports(reports);
  };

  // Call getProjects when the component mounts
  useEffect(() => {
    void getUnsignedReports();
  }, []);

  return (
    <>
      <h1 className="font-bold text-[30px] mb-[20px]">
        All Unsigned Reports In: {projectName}{" "}
      </h1>
      <div className="border-4 border-black bg-white flex flex-col items-center justify-center min-h-[65vh] h-fit w-[70vw] rounded-3xl content-center overflow-scroll space-y-[10vh] p-[30px] text-[20px]">
        {unsignedReports.map(
          (unsignedReport: UnsignedReports, index: number) => (
            <h1 key={index} className="border-b-2 border-black w-full">
              <div className="flex justify-between">
                <div className="flex">
                  <h1>{unsignedReport.username}</h1>
                  <span className="ml-6 mr-2 font-bold">Week:</span>
                  <h1>{unsignedReport.week}</h1>
                  <span className="ml-6 mr-2 font-bold">Signed:</span>
                  <h1>NO</h1>
                </div>
                <div className="flex">
                  <div className="ml-auto flex space-x-4">
                    <Link
                      to={`/PMViewUnsignedReport/${projectName}/${unsignedReport.username}/${unsignedReport.week}`}
                    >
                      <h1 className="underline cursor-pointer font-bold">
                        View Report
                      </h1>
                    </Link>
                  </div>
                </div>
              </div>
            </h1>
          ),
        )}
      </div>
    </>
  );
}

export default DisplayUserProject;