/* eslint-disable react-hooks/exhaustive-deps */
/* eslint-disable @typescript-eslint/no-explicit-any */
// import { ChangeEvent, useEffect, useState } from "react";
// import useAuthStore from "./stores/useAuthStore";
// import {
//   addHours,
//   eachMinuteOfInterval,
//   format,
//   isBefore,
//   parse,
// } from "date-fns";
// import ky from "ky";
import SessionScheduleSettings from "./components/SessionScheduleSettings";

function PersonalAreaDashboardPage() {
  // const [user, removeAuthStore, accessToken] = useAuthStore((state) => [
  //   state.user,
  //   state.removeAuthStore,
  //   state.accessToken,
  // ]);
  // const [startTime, setStartTime] = useState<string>("09:00");
  // const [endTime, setEndTime] = useState<string>("20:00");
  // const [duration, setDuration] = useState<number>(30);
  // const [datesAndTimes, setDatesAndTimes] = useState<any[]>([]);
  // const [isLoading, setIsLoading] = useState<boolean>(true);

  // function handleDuration(e: ChangeEvent<HTMLInputElement>) {
  //   e.preventDefault();

  //   let value = parseInt(e.target.value);
  //   const min = parseInt(e.target.min);
  //   const max = parseInt(e.target.max);

  //   if (!value || value < min) value = min;
  //   if (value > max) value = max;

  //   setDuration(value);
  // }

  // function calculateTimes() {
  //   if (startTime && endTime) {
  //     const startDateTime = parse(startTime, "HH:mm", new Date());
  //     const endDateTime = parse(endTime, "HH:mm", new Date());

  //     if (!isBefore(startDateTime, endDateTime)) {
  //       setEndTime(format(addHours(startDateTime, 1), "HH:mm"));

  //       return false;
  //     }

  //     const newDateAndTimes: any[] = eachMinuteOfInterval(
  //       {
  //         start: startDateTime,
  //         end: endDateTime,
  //       },
  //       { step: duration }
  //     );

  //     newDateAndTimes.forEach((value: Date, index: number) => {
  //       newDateAndTimes[index] = { value, active: true };
  //     });

  //     setDatesAndTimes(newDateAndTimes);
  //   }
  // }

  // async function getSessionScheduleSettings() {
  //   setIsLoading(true);

  //   try {
  //     const result: any = await ky
  //       .get(
  //         `${import.meta.env.VITE_COORD_URL}/users/session_schedule_settings`,
  //         {
  //           headers: {
  //             Authorization: `Bearer ${accessToken}`,
  //           },
  //         }
  //       )
  //       .json();

  //     if (result.error) {
  //       console.log("Error: ", result.error);
  //       return;
  //     }

  //     const { datesAndTimes, startTime, endTime, duration } = result;

  //     console.log("datesAndTimes", datesAndTimes);

  //     setStartTime(startTime);
  //     setEndTime(endTime);
  //     setDuration(duration);
  //     setIsLoading(false);
  //   } catch (error) {
  //     if (error instanceof Error) {
  //       console.log(error.message);
  //     }

  //     setIsLoading(false);
  //   }
  // }

  // async function saveSessionScheduleSettings() {
  //   try {
  //     await ky
  //       .post(
  //         `${import.meta.env.VITE_COORD_URL}/users/session_schedule_settings`,
  //         {
  //           headers: {
  //             Authorization: `Bearer ${accessToken}`,
  //           },
  //           json: { startTime, endTime, duration, datesAndTimes },
  //         }
  //       )
  //       .json();

  //     alert("Изменения сохранены!");
  //   } catch (error) {
  //     if (error instanceof Error) {
  //       console.log(error.message);
  //     }
  //   }
  // }

  // function changeActive(dateAndTimeValue: Date) {
  //   const newDatesAndTimes = datesAndTimes.map((dateAndTime) => {
  //     if (dateAndTime.value === dateAndTimeValue) {
  //       dateAndTime.active = !dateAndTime.active;
  //     }

  //     return dateAndTime;
  //   });

  //   setDatesAndTimes(newDatesAndTimes);
  // }

  // function logout() {
  //   removeAuthStore();
  // }

  // useEffect(() => {
  //   calculateTimes();
  // }, [startTime, endTime, duration]);

  // useEffect(() => {
  //   getSessionScheduleSettings();
  // }, []);

  // return (
  //   <div className="p-8 min-h-screen flex flex-col justify-center items-center text-[#F2F2F2] space-y-8">
  //     <div className="space-y-4">
  //       <p>
  //         <span className="text-[#C5C7CE] text-sm">Вы вошли как</span>{" "}
  //         {user?.username}
  //       </p>
  //       <button onClick={logout} className="text-yellow-600">
  //         Выйти
  //       </button>
  //     </div>

  //     <div className="flex gap-4">
  //       <div className="relative space-y-8 w-80 bg-[#151619] p-8 rounded-lg shadow min-h-[378px]">
  //         <p className="text-2xl font-gilroy">Настройки расписания сеансов</p>

  //         {!isLoading ? (
  //           <form
  //             onSubmit={(e) => e.preventDefault()}
  //             className="flex flex-col space-y-8"
  //           >
  //             <div className="space-y-4">
  //               <div className="flex gap-4 items-center">
  //                 <div className="space-y-1">
  //                   <p className="text-[#C5C7CE] text-sm">Начало</p>
  //                   <input
  //                     // ref={startTimeRef}
  //                     required
  //                     type="time"
  //                     value={startTime}
  //                     onChange={(e) => setStartTime(e.target.value)}
  //                     className="px-3 py-2 rounded bg-[#1C1D21] outline-none focus:outline-[#BC75FF] w-full transition-all"
  //                   />
  //                 </div>
  //                 <span className="mt-6">—</span>
  //                 <div className="space-y-1">
  //                   <p className="text-[#C5C7CE] text-sm">Конец</p>
  //                   <input
  //                     // ref={startTimeRef}
  //                     required
  //                     type="time"
  //                     value={endTime}
  //                     onChange={(e) => setEndTime(e.target.value)}
  //                     className="px-3 py-2 rounded bg-[#1C1D21] outline-none focus:outline-[#BC75FF] w-full transition-all"
  //                   />
  //                 </div>
  //               </div>
  //               <div className="space-y-1">
  //                 <p className="text-[#C5C7CE] text-sm">Длительность сеанса</p>
  //                 <input
  //                   // ref={sessionDurationRef}
  //                   required
  //                   type="number"
  //                   min={15}
  //                   max={60}
  //                   step={5}
  //                   value={duration}
  //                   onChange={handleDuration}
  //                   className="px-3 py-2 rounded bg-[#1C1D21] outline-none focus:outline-[#BC75FF] w-full transition-all"
  //                 />
  //               </div>
  //             </div>

  //             <button
  //               onClick={saveSessionScheduleSettings}
  //               type="submit"
  //               className="px-4 py-2 rounded bg-gradient outline-none opacity-95 hover:opacity-100 transition-all disabled:opacity-50 flex justify-center items-center h-10 self-end"
  //             >
  //               Сохранить
  //             </button>
  //           </form>
  //         ) : (
  //           <div className="absolute top-0 left-0 w-full h-full flex justify-center items-center">
  //             <svg
  //               className="animate-spin h-5 w-5"
  //               xmlns="http://www.w3.org/2000/svg"
  //               fill="none"
  //               viewBox="0 0 24 24"
  //             >
  //               <circle
  //                 className="opacity-25"
  //                 cx="12"
  //                 cy="12"
  //                 r="10"
  //                 stroke="currentColor"
  //                 strokeWidth="4"
  //               ></circle>
  //               <path
  //                 className="opacity-75"
  //                 fill="currentColor"
  //                 d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
  //               ></path>
  //             </svg>
  //           </div>
  //         )}
  //       </div>

  //       <div className="relative space-y-8 w-80 bg-[#151619] p-8 rounded-lg shadow min-h-[378px]">
  //         <p className="text-xl font-gilroy">Предпросмотр</p>

  //         {!isLoading ? (
  //           <div className="grid grid-cols-4">
  //             {datesAndTimes.map(
  //               (dateAndTime: { value: Date; active: true }, index: number) => (
  //                 <button
  //                   key={index}
  //                   onClick={() => changeActive(dateAndTime.value)}
  //                   className={[
  //                     "px-3 py-2 text-center rounded hover:bg-[#23242A]",
  //                     !dateAndTime.active ? "opacity-25" : "opacity-100",
  //                   ].join(" ")}
  //                 >
  //                   {format(dateAndTime.value, "HH:mm")}
  //                 </button>
  //               )
  //             )}
  //           </div>
  //         ) : (
  //           <div className="absolute top-0 left-0 w-full h-full flex justify-center items-center">
  //             <svg
  //               className="animate-spin h-5 w-5"
  //               xmlns="http://www.w3.org/2000/svg"
  //               fill="none"
  //               viewBox="0 0 24 24"
  //             >
  //               <circle
  //                 className="opacity-25"
  //                 cx="12"
  //                 cy="12"
  //                 r="10"
  //                 stroke="currentColor"
  //                 strokeWidth="4"
  //               ></circle>
  //               <path
  //                 className="opacity-75"
  //                 fill="currentColor"
  //                 d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
  //               ></path>
  //             </svg>
  //           </div>
  //         )}
  //       </div>
  //     </div>
  //   </div>
  // );

  return (
    <div className="min-h-screen flex flex-col justify-center items-center p-8">
      <SessionScheduleSettings />
    </div>
  );
}

export default PersonalAreaDashboardPage;