"use client";

import { useEffect, useState } from "react";
import { request } from "@/services/response";
import Cookies from "js-cookie";
import Container from "./Container";

const defaultData = {
  phone: { value: "", isEdit: false },
  national_code: { value: "", isEdit: false },
  name: { value: "", isEdit: false },
  basic_insurance: { value: "", isEdit: false },
};

function AppointmentPage({ doctor, disabledDates, matchedCity }) {
  const [step, setStep] = useState(0);
  const [isForAnother, setIsForAnother] = useState(false);
  const [isLoading, setIsLoading] = useState(true);

  const [prevData, setPrevData] = useState(defaultData);
  const [data, setData] = useState(defaultData);

  // Login states
  const [num, setNum] = useState("");
  const [uuid, setUuid] = useState("");
  const [isSendMsg, setIsSendMsg] = useState(false);

  // Appointment slot states
  const [selectedSlot, setSelectedSlot] = useState(null);
  const [selectedDate, setSelectedDate] = useState(null);

  useEffect(() => {
    setIsLoading(true);

    const userInfo = Cookies.get("userInfo");
    const parsedData = userInfo && JSON.parse(userInfo);
    const usernameFromCookie = parsedData?.username || "";
    if (userInfo && parsedData) {
      request
        .getUserProfile(parsedData.uuid)
        .then((res) => {
          if (res) {
            const newData = {
              uuid: res.uuid,
              phone: { value: usernameFromCookie, isEdit: true },
              national_code: {
                value: res.national_code || "",
                isEdit: res.national_code ? false : true,
              },
              name: { value: `${res.name} ${res.family}`, isEdit: true },
              basic_insurance: {
                value: res.basic_insurance,
                isEdit: true,
              },
            };
            setData(newData);
            setPrevData(newData);
          } else {
            const emptyData = {
              uuid: res.uuid,
              phone: { value: usernameFromCookie, isEdit: false },
              national_code: { value: "", isEdit: true },
              name: { value: "", isEdit: true },
              basic_insurance: {
                value: res.basic_insurance,
                isEdit: true,
              },
            };
            setData(emptyData);
            setPrevData(emptyData);
          }
          setIsLoading(false);
        })
        .catch((error) => {
          setIsLoading(false);
        });
    } else if (usernameFromCookie) {
      // اگر فقط Cookie داریم بدون UUID
      setData({
        ...defaultData,
        phone: { value: usernameFromCookie, isEdit: false },
      });
      setIsLoading(false);
    } else {
      setIsLoading(false);
    }
  }, []); // فقط یک بار در mount اولیه اجرا می‌شه

  // useEffect جداگانه برای زمانی که step تغییر می‌کنه
  useEffect(() => {
    if (step === 3) {
      const userInfo = Cookies.get("userInfo");
      const parsedData = userInfo && JSON.parse(userInfo);
      const usernameFromCookie = parsedData?.username || "";

      if (userInfo && parsedData && !data.uuid) {
        request
          .getUserProfile(parsedData.uuid)
          .then((res) => {
            if (res) {
              const newData = {
                uuid: res.uuid,
                phone: { value: usernameFromCookie, isEdit: false },
                national_code: {
                  value: res.national_code || "",
                  isEdit: res.national_code ? false : true,
                },
                name: { value: `${res.name} ${res.family}`, isEdit: true },
                basic_insurance: {
                  value: res.basic_insurance,
                  isEdit: true,
                },
              };
              setData(newData);
              setPrevData(newData);
            }
          });
      }
    }
  }, [step]);

  if (isLoading) {
    return (
      <div className="flex items-center justify-center min-h-screen">
        <div className="flex flex-col items-center gap-4">
          <div className="w-12 h-12 border-4 border-[#5559CE] border-t-transparent rounded-full animate-spin"></div>
          <p className="text-[#3B3B3B] text-[16px]">در حال بارگذاری...</p>
        </div>
      </div>
    );
  }

  return (
    <Container
      step={step}
      data={data}
      doctor={doctor}
      setData={setData}
      setStep={setStep}
      prevData={prevData}
      matchedCity={matchedCity}
      isForAnother={isForAnother}
      setIsForAnother={setIsForAnother}
      disabledDates={disabledDates}
      num={num}
      setNum={setNum}
      uuid={uuid}
      setUuid={setUuid}
      isSendMsg={isSendMsg}
      setIsSendMsg={setIsSendMsg}
      selectedSlot={selectedSlot}
      setSelectedSlot={setSelectedSlot}
      selectedDate={selectedDate}
      setSelectedDate={setSelectedDate}
    />
  );
}

export default AppointmentPage;