import React, { useState, useEffect, useRef, useImperativeHandle } from "react";
import { CalendarCard } from "@nutui/nutui-react-taro";
import { View, Text, Image } from "@tarojs/components";
import images from "@/config/images";
import styles from "./index.module.scss";
import {
  getMonth,
  getWeekend,
  getWeekendOfCurrentWeek,
} from "@/utils/timeUtils";
import { PopupPicker } from "@/components/Picker/index";
import dayjs from "dayjs";
interface NutUICalendarProps {
  type?: "single" | "range" | "multiple";
  value?: string | Date | String[] | Date[];
  defaultValue?: string | string[];
  onChange?: (value: Date | Date[]) => void;
  isBorder?: boolean;
  showQuickActions?: boolean;
  onHeaderClick?: (date: Date) => void;
}

export interface CalendarUIRef {
  jumpTo: (year: number, month: number) => void;
  gotoMonth: (delta: number) => void;
}

const NutUICalendar = React.forwardRef<CalendarUIRef, NutUICalendarProps>(
  (
    {
      type = "single",
      value,
      onChange,
      isBorder = false,
      showQuickActions = true,
      onHeaderClick,
    },
    ref
  ) => {
    // 根据类型初始化选中值
    //   const getInitialValue = (): Date | Date[] => {
    //     console.log(value,defaultValue,'today')

    //     if (typeof value === 'string' && value) {
    //         return new Date(value)
    //     }
    //     if (Array.isArray(value) && value.length > 0) {
    //         return value.map(item => new Date(item))
    //     }
    //     if (typeof defaultValue === 'string' && defaultValue) {
    //       return new Date(defaultValue)
    //     }
    //     if (Array.isArray(defaultValue) && defaultValue.length > 0) {
    //       return defaultValue.map(item => new Date(item))
    //     }
    //     const today = new Date();
    //     if (type === 'multiple') {
    //       return [today]
    //     }
    //     return today
    //   }
    const startOfMonth = (date: Date) =>
      new Date(date.getFullYear(), date.getMonth(), 1);

    const [selectedValue, setSelectedValue] = useState<Date | Date[]>();
    const [current, setCurrent] = useState<Date>(startOfMonth(new Date()));
    const calendarRef = useRef<any>(null);
    const [visible, setvisible] = useState(false);
    console.log("current", current);
    // 当外部 value 变化时更新内部状态
    useEffect(() => {
      if (Array.isArray(value) && value.length > 0) {
        setSelectedValue(value.map((item) => new Date(item)));
        setCurrent(new Date(value[0] as Date));
      }
      if ((typeof value === "string" || value instanceof Date) && value) {
        setSelectedValue(new Date(value));
        setCurrent(new Date(value));
      }
    }, [value]);

    useImperativeHandle(ref, () => ({
      jumpTo: (year: number, month: number) => {
        calendarRef.current?.jumpTo(year, month);
      },
      gotoMonth,
    }));

    const handleDateChange = (newValue: any) => {
      if (type === "range") return;
      setSelectedValue(newValue);
      onChange?.(newValue as any);
    };
    const formatHeader = (date: Date) => `${getMonth(date)}`;

    const handlePageChange = (data: { year: number; month: number }) => {
      // 月份切换时的处理逻辑，如果需要的话
      console.log("月份切换:", data);
    };

    const handleDayClick = (day: any) => {
      const { type, year, month, date } = day;
      if (type === "next") return;
      onChange?.([new Date(year, month - 1, date)]);
    };

    const gotoMonth = (delta: number) => {
      const base = current instanceof Date ? new Date(current) : new Date();
      base.setMonth(base.getMonth() + delta);
      const next = startOfMonth(base);
      setCurrent(next);
      // 同步底部 CalendarCard 的月份
      try {
        calendarRef.current?.jump?.(delta);
      } catch (e) {
        console.warn("CalendarCardRef jump 调用失败", e);
      }
      handlePageChange({
        year: next.getFullYear(),
        month: next.getMonth() + 1,
      });
    };

    const handleHeaderClick = () => {
      onHeaderClick && onHeaderClick(current);
      setvisible(true);
    };

    const syncMonthTo = (anchor: Date) => {
      // 计算从 current 到目标 anchor 所在月份的偏移，调用 jump(delta)
      const monthsDelta =
        (anchor.getFullYear() - current.getFullYear()) * 12 +
        (anchor.getMonth() - current.getMonth());
      if (monthsDelta !== 0) {
        gotoMonth(monthsDelta);
      }
    };
    const renderDay = (day: any) => {
      const { date, month, year } = day;
      const today = new Date();
      if (
        date === today.getDate() &&
        month === today.getMonth() + 1 &&
        year === today.getFullYear()
      ) {
        return <View className="day-container">{date}</View>;
      }
      return date;
    };

    const selectWeekend = () => {
      const [start, end] = getWeekend();
      setSelectedValue([start, end]);
      syncMonthTo(start);
      onChange?.([start, end]);
    };
    const selectWeek = () => {
      const dayList = getWeekendOfCurrentWeek(7);
      setSelectedValue(dayList);
      syncMonthTo(dayList[0]);
      onChange?.(dayList);
    };
    const selectMonth = () => {
      const dayList = getWeekendOfCurrentWeek(30);
      setSelectedValue(dayList);
      syncMonthTo(dayList[0]);
      onChange?.(dayList);
    };

    const handleMonthChange = (value: any) => {
      const [year, month] = value;
      const newDate = new Date(year, month - 1, 1);
      setCurrent(newDate);
      calendarRef.current?.jumpTo(year, month);
    };

    return (
      <View>
        {/* 快速操作行 */}
        {showQuickActions && (
          <View className={styles["quick-actions"]}>
            <View className={styles["quick-action"]} onClick={selectWeekend}>
              本周末
            </View>
            <View className={styles["quick-action"]} onClick={selectWeek}>
              一周内
            </View>
            <View className={styles["quick-action"]} onClick={selectMonth}>
              一个月
            </View>
          </View>
        )}
        <View
          className={`${styles["calendar-card"]} ${
            isBorder ? styles["border"] : ""
          }`}
        >
          {type === "range" && (
            <View className={styles["date-range-container"]}>
              <Text
                className={`${styles["date-text-placeholder"]} ${
                  (value as Date[]).length === 2 ? styles["date-text"] : ""
                }`}
              >
                {(value as Date[]).length === 2
                  ? dayjs(value?.[0] as Date).format("YYYY-MM-DD")
                  : "起始时间"}
              </Text>
              <Text>至</Text>
              <Text
                className={`${styles["date-text-placeholder"]} ${
                  (value as Date[]).length === 2 ? styles["date-text"] : ""
                }`}
              >
                {(value as Date[]).length === 2
                  ? dayjs(value?.[1] as Date).format("YYYY-MM-DD")
                  : "结束时间"}
              </Text>
            </View>
          )}
          {/* 自定义头部显示周一到周日 */}
          <View className={styles["header"]}>
            <View className={styles["header-left"]} onClick={handleHeaderClick}>
              <Text className={styles["header-text"]}>
                {formatHeader(current as Date)}
              </Text>
              <Image
                src={images.ICON_RIGHT_MAX}
                className={`${styles["month-arrow"]}`}
                onClick={() => gotoMonth(1)}
              />
            </View>
            <View className={styles["header-actions"]}>
              <View
                className={styles["arrow-left-container"]}
                onClick={() => gotoMonth(-1)}
              >
                <Image
                  src={images.ICON_RIGHT_MAX}
                  className={`${styles["arrow"]} ${styles["left"]}`}
                />
              </View>
              <View
                className={styles["arrow-right-container"]}
                onClick={() => gotoMonth(1)}
              >
                <Image
                  src={images.ICON_RIGHT_MAX}
                  className={`${styles["arrow"]}`}
                />
              </View>
            </View>
          </View>
          <View className={styles["week-header"]}>
            {["周日", "周一", "周二", "周三", "周四", "周五", "周六"].map(
              (day) => (
                <Text key={day} className={styles["week-day"]}>
                  {day}
                </Text>
              )
            )}
          </View>

          {/* NutUI CalendarCard 组件 */}
          <CalendarCard
            ref={calendarRef}
            type={type}
            value={selectedValue}
            renderDay={renderDay}
            onChange={handleDateChange}
            onPageChange={handlePageChange}
            onDayClick={handleDayClick}
          />
        </View>
        {visible && (
          <PopupPicker
            visible={visible}
            setvisible={setvisible}
            value={[current.getFullYear(), current.getMonth() + 1]}
            type="month"
            onChange={(value) => handleMonthChange(value)}
          />
        )}
      </View>
    );
  }
);

export default NutUICalendar;