"use client";

import { useEffect, useState } from "react";
import moment from "moment-jalaali";
import "moment-timezone";
import { dateToTimestamp } from "@/helper";
import InlineJalaliMonth from "@/components/common/InlineJalaliMonth";

function DatePicker({ setDate, disabledDates = [] }) {
  const [baseMonth, setBaseMonth] = useState(moment().tz("Asia/Tehran"));
  const [selectedDate, setSelectedDate] = useState(null);
  const [autoSelected, setAutoSelected] = useState(false);

  const isDisabled = (date) => {
    const day = moment(date).startOf("day");
    if (day.isBefore(moment().startOf("day"))) return true;
    return disabledDates.some((ts) => day.isSame(moment.unix(ts).startOf("day")));
  };

  const selectDay = (date) => {
    if (isDisabled(date)) return;
    setSelectedDate(date);
    setDate(dateToTimestamp(date));
  };

  useEffect(() => {
    if (autoSelected) return;

    const today = moment().tz("Asia/Tehran");
    for (let i = 0; i <= 30; i++) {
      const candidate = today.clone().add(i, "days");
      if (!isDisabled(candidate)) {
        setSelectedDate(candidate);
        setBaseMonth(candidate.clone());
        setDate(candidate.clone().startOf("day").unix());
        setAutoSelected(true);
        break;
      }
    }
  }, [disabledDates, autoSelected, setDate]);

  const secondMonth = moment(baseMonth).add(1, "jMonth");

  return (
    <div className="datePickerApt flex items-start justify-evenly gap-[24px] w-full">
      <div className="hidden md:block lg:hidden xl:block w-1/2">
        <InlineJalaliMonth
          displayDate={secondMonth}
          selectedDate={selectedDate}
          onSelectDay={selectDay}
          isDisabled={isDisabled}
          showPrev={false}
          onNext={() => setBaseMonth(moment(baseMonth).add(1, "jMonth"))}
          onPrev={() => setBaseMonth(moment(baseMonth).subtract(1, "jMonth"))}
        />
      </div>
      <div className="w-full lg:w-1/2">
        <InlineJalaliMonth
          displayDate={baseMonth}
          selectedDate={selectedDate}
          onSelectDay={selectDay}
          isDisabled={isDisabled}
          showNext={false}
          onPrev={() => setBaseMonth(moment(baseMonth).subtract(1, "jMonth"))}
          onNext={() => setBaseMonth(moment(baseMonth).add(1, "jMonth"))}
        />
      </div>
    </div>
  );
}

export default DatePicker;