import { useState, useEffect } from "react";
import { NewWeeklyReport } from "../Types/goTypes";
import { api } from "../API/API";
import { useNavigate, useParams } from "react-router-dom";
import Button from "./Button";

/**
 * Renders the component for editing a weekly report.
 * @returns JSX.Element
 */
export default function GetWeeklyReport(): JSX.Element {
  const [week, setWeek] = useState(0);
  const [developmentTime, setDevelopmentTime] = useState(0);
  const [meetingTime, setMeetingTime] = useState(0);
  const [adminTime, setAdminTime] = useState(0);
  const [ownWorkTime, setOwnWorkTime] = useState(0);
  const [studyTime, setStudyTime] = useState(0);
  const [testingTime, setTestingTime] = useState(0);

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

  const fetchWeeklyReport = async (): Promise<void> => {
    const response = await api.getWeeklyReport(
      username,
      projectName ?? "",
      fetchedWeek?.toString() ?? "0",
      token,
    );

    if (response.success) {
      const report: NewWeeklyReport = response.data ?? {
        projectName: "",
        week: 0,
        developmentTime: 0,
        meetingTime: 0,
        adminTime: 0,
        ownWorkTime: 0,
        studyTime: 0,
        testingTime: 0,
      };

      setWeek(report.week);
      setDevelopmentTime(report.developmentTime);
      setMeetingTime(report.meetingTime);
      setAdminTime(report.adminTime);
      setOwnWorkTime(report.ownWorkTime);
      setStudyTime(report.studyTime);
      setTestingTime(report.testingTime);
    } else {
      console.error("Failed to fetch weekly report:", response.message);
    }
  };

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

  const handleNewWeeklyReport = async (): Promise<void> => {
    const newWeeklyReport: NewWeeklyReport = {
      projectName: projectName ?? "",
      week,
      developmentTime,
      meetingTime,
      adminTime,
      ownWorkTime,
      studyTime,
      testingTime,
    };

    await api.submitWeeklyReport(newWeeklyReport, token);
  };

  const navigate = useNavigate();

  return (
    <>
      <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">
        <form
          onSubmit={(e) => {
            if (week === 0) {
              alert("Please enter a week number");
              e.preventDefault();
              return;
            }
            e.preventDefault();
            void handleNewWeeklyReport();
            navigate(-1);
          }}
        >
          <div className="flex flex-col items-center">
            <input
              className="w-fill h-[5vh] font-sans text-[3vh] pl-[1vw] rounded-full text-center pt-[1vh] pb-[1vh] border-2 border-black"
              type="week"
              placeholder="Week"
              value={
                week === 0 ? "" : `2024-W${week.toString().padStart(2, "0")}`
              }
              onChange={(e) => {
                const weekNumber = parseInt(e.target.value.split("-W")[1]);
                setWeek(weekNumber);
              }}
              onKeyDown={(event) => {
                event.preventDefault();
              }}
              onPaste={(event) => {
                event.preventDefault();
              }}
            />
            <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">
                    Activity
                  </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>Development</td>
                  <td>
                    <input
                      type="number"
                      min="0"
                      className="border-2 border-black rounded-md text-center w-1/2"
                      value={developmentTime}
                      onChange={(e) => {
                        setDevelopmentTime(parseInt(e.target.value));
                      }}
                      onKeyDown={(event) => {
                        const keyValue = event.key;
                        if (!/\d/.test(keyValue) && keyValue !== "Backspace")
                          event.preventDefault();
                      }}
                    />
                  </td>
                </tr>
                <tr className="h-[10vh]">
                  <td>Meeting</td>
                  <td>
                    <input
                      type="number"
                      min="0"
                      className="border-2 border-black rounded-md text-center w-1/2"
                      value={meetingTime}
                      onChange={(e) => {
                        setMeetingTime(parseInt(e.target.value));
                      }}
                      onKeyDown={(event) => {
                        const keyValue = event.key;
                        if (!/\d/.test(keyValue) && keyValue !== "Backspace")
                          event.preventDefault();
                      }}
                    />
                  </td>
                </tr>
                <tr className="h-[10vh]">
                  <td>Administration</td>
                  <td>
                    <input
                      type="number"
                      min="0"
                      className="border-2 border-black rounded-md text-center w-1/2"
                      value={adminTime}
                      onChange={(e) => {
                        setAdminTime(parseInt(e.target.value));
                      }}
                      onKeyDown={(event) => {
                        const keyValue = event.key;
                        if (!/\d/.test(keyValue) && keyValue !== "Backspace")
                          event.preventDefault();
                      }}
                    />
                  </td>
                </tr>
                <tr className="h-[10vh]">
                  <td>Own Work</td>
                  <td>
                    <input
                      type="number"
                      min="0"
                      className="border-2 border-black rounded-md text-center w-1/2"
                      value={ownWorkTime}
                      onChange={(e) => {
                        setOwnWorkTime(parseInt(e.target.value));
                      }}
                      onKeyDown={(event) => {
                        const keyValue = event.key;
                        if (!/\d/.test(keyValue) && keyValue !== "Backspace")
                          event.preventDefault();
                      }}
                    />
                  </td>
                </tr>
                <tr className="h-[10vh]">
                  <td>Studies</td>
                  <td>
                    <input
                      type="number"
                      min="0"
                      className="border-2 border-black rounded-md text-center w-1/2"
                      value={studyTime}
                      onChange={(e) => {
                        setStudyTime(parseInt(e.target.value));
                      }}
                      onKeyDown={(event) => {
                        const keyValue = event.key;
                        if (!/\d/.test(keyValue) && keyValue !== "Backspace")
                          event.preventDefault();
                      }}
                    />
                  </td>
                </tr>
                <tr className="h-[10vh]">
                  <td>Testing</td>
                  <td>
                    <input
                      type="number"
                      min="0"
                      className="border-2 border-black rounded-md text-center w-1/2"
                      value={testingTime}
                      onChange={(e) => {
                        setTestingTime(parseInt(e.target.value));
                      }}
                      onKeyDown={(event) => {
                        const keyValue = event.key;
                        if (!/\d/.test(keyValue) && keyValue !== "Backspace")
                          event.preventDefault();
                      }}
                    />
                  </td>
                </tr>
              </tbody>
            </table>
            <Button
              text="Submit changes"
              onClick={(): void => {
                return;
              }}
              type="submit"
            />
          </div>
        </form>
      </div>
    </>
  );
}