import { getMonthDaysZh, getMonthTitleZh, getTodayIndexInMonth } from '@/utils/date';
import { Ionicons } from '@expo/vector-icons';
import DateTimePicker from '@react-native-community/datetimepicker';
import dayjs from 'dayjs';
import React, { useEffect, useRef, useState } from 'react';
import {
  Modal,
  Platform,
  Pressable,
  ScrollView,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';

export interface DateSelectorProps {
  /** 当前选中的日期索引 */
  selectedIndex?: number;
  /** 日期选择回调 */
  onDateSelect?: (index: number, date: Date) => void;
  /** 是否显示月份标题 */
  showMonthTitle?: boolean;
  /** 自定义月份标题 */
  monthTitle?: string;
  /** 是否禁用未来日期 */
  disableFutureDates?: boolean;
  /** 自定义样式 */
  style?: any;
  /** 容器样式 */
  containerStyle?: any;
  /** 日期项样式 */
  dayItemStyle?: any;
  /** 是否自动滚动到选中项 */
  autoScrollToSelected?: boolean;
  /** 是否显示日历图标 */
  showCalendarIcon?: boolean;
}

export const DateSelector: React.FC<DateSelectorProps> = ({
  selectedIndex: externalSelectedIndex,
  onDateSelect,
  showMonthTitle = true,
  monthTitle: externalMonthTitle,
  disableFutureDates = true,
  style,
  containerStyle,
  dayItemStyle,
  autoScrollToSelected = true,
  showCalendarIcon = true,
}) => {
  // 内部状态管理
  const [internalSelectedIndex, setInternalSelectedIndex] = useState(getTodayIndexInMonth());
  const [currentMonth, setCurrentMonth] = useState(dayjs()); // 当前显示的月份
  const selectedIndex = externalSelectedIndex ?? internalSelectedIndex;

  // 获取日期数据
  const days = getMonthDaysZh(currentMonth);
  const monthTitle = externalMonthTitle ?? getMonthTitleZh(currentMonth);

  // 滚动相关
  const daysScrollRef = useRef<ScrollView | null>(null);
  const [scrollWidth, setScrollWidth] = useState(0);
  const DAY_PILL_WIDTH = 48;
  const DAY_PILL_SPACING = 8;

  // 日历弹窗相关
  const [datePickerVisible, setDatePickerVisible] = useState(false);
  const [pickerDate, setPickerDate] = useState<Date>(new Date());

  // 滚动到指定索引
  const scrollToIndex = (index: number, animated = true) => {
    if (!daysScrollRef.current || scrollWidth === 0) return;

    const itemWidth = DAY_PILL_WIDTH + DAY_PILL_SPACING;
    const baseOffset = index * itemWidth;
    const centerOffset = Math.max(0, baseOffset - (scrollWidth / 2 - DAY_PILL_WIDTH / 2));

    // 确保不会滚动超出边界
    const maxScrollOffset = Math.max(0, (days.length * itemWidth) - scrollWidth);
    const finalOffset = Math.min(centerOffset, maxScrollOffset);

    if (animated) {
      // 使用原生动画API实现更平滑的滚动
      requestAnimationFrame(() => {
        daysScrollRef.current?.scrollTo({
          x: finalOffset,
          animated: true
        });
      });
    } else {
      // 非动画情况直接跳转
      daysScrollRef.current?.scrollTo({
        x: finalOffset,
        animated: false
      });
    }
  };

  // 初始化时滚动到选中项
  useEffect(() => {
    if (scrollWidth > 0 && autoScrollToSelected) {
      scrollToIndex(selectedIndex, true);
    }
  }, [scrollWidth, selectedIndex, autoScrollToSelected]);

  // 当选中索引变化时，滚动到对应位置
  useEffect(() => {
    if (scrollWidth > 0 && autoScrollToSelected) {
      // 添加微小延迟以确保动画效果更明显
      const timer = setTimeout(() => {
        scrollToIndex(selectedIndex, true);
      }, 50);

      return () => clearTimeout(timer);
    }
  }, [selectedIndex, autoScrollToSelected]);

  // 当月份变化时，重新滚动到选中位置
  useEffect(() => {
    if (scrollWidth > 0 && autoScrollToSelected) {
      const timer = setTimeout(() => {
        scrollToIndex(selectedIndex, true);
      }, 100);

      return () => clearTimeout(timer);
    }
  }, [currentMonth, scrollWidth, autoScrollToSelected]);

  // 处理日期选择
  const handleDateSelect = (index: number) => {
    const targetDate = days[index]?.date?.toDate();
    if (!targetDate) return;

    // 检查是否为未来日期
    if (disableFutureDates && days[index].date.isAfter(dayjs(), 'day')) {
      return;
    }

    // 先滚动到目标位置，再更新状态
    if (autoScrollToSelected) {
      scrollToIndex(index, true);
    }

    // 更新内部状态（如果使用外部控制则不更新）
    if (externalSelectedIndex === undefined) {
      setInternalSelectedIndex(index);
    }

    // 调用回调
    onDateSelect?.(index, targetDate);
  };

  // 日历弹窗相关函数
  const openDatePicker = () => {
    const currentSelectedDate = days[selectedIndex]?.date?.toDate() || new Date();
    setPickerDate(currentSelectedDate);
    setDatePickerVisible(true);
  };

  const closeDatePicker = () => setDatePickerVisible(false);

  const onConfirmDate = (date: Date) => {
    const today = new Date();
    today.setHours(0, 0, 0, 0);
    const picked = new Date(date);
    picked.setHours(0, 0, 0, 0);

    // 如果禁用未来日期，则限制选择
    const finalDate = (disableFutureDates && picked > today) ? today : picked;

    closeDatePicker();

    // 更新当前月份为选中日期的月份
    const selectedMonth = dayjs(finalDate);
    setCurrentMonth(selectedMonth);

    // 计算选中日期在新月份中的索引
    const newMonthDays = getMonthDaysZh(selectedMonth);
    const selectedDay = selectedMonth.date();
    const newSelectedIndex = newMonthDays.findIndex(day => day.dayOfMonth === selectedDay);

    // 更新内部状态（如果使用外部控制则不更新）
    if (externalSelectedIndex === undefined && newSelectedIndex !== -1) {
      setInternalSelectedIndex(newSelectedIndex);
    }

    // 调用统一的日期选择回调
    if (newSelectedIndex !== -1) {
      onDateSelect?.(newSelectedIndex, finalDate);
    }
  };

  return (
    <View style={[styles.container, containerStyle]}>
      {showMonthTitle && (
        <View style={styles.monthTitleContainer}>
          <Text style={styles.monthTitle}>{monthTitle}</Text>
          {showCalendarIcon && (
            <TouchableOpacity
              onPress={openDatePicker}
              style={styles.calendarIconButton}
              activeOpacity={0.7}
            >
              <Ionicons name="calendar-outline" size={14} color="#666666" />
            </TouchableOpacity>
          )}
        </View>
      )}

      <ScrollView
        horizontal
        showsHorizontalScrollIndicator={false}
        contentContainerStyle={styles.daysContainer}
        ref={daysScrollRef}
        onLayout={(e) => setScrollWidth(e.nativeEvent.layout.width)}
        style={style}
      >
        {days.map((d, i) => {
          const selected = i === selectedIndex;
          const isFutureDate = disableFutureDates && d.date.isAfter(dayjs(), 'day');

          return (
            <View key={`${d.dayOfMonth}`} style={[styles.dayItemWrapper, dayItemStyle]}>
              <TouchableOpacity
                style={[
                  styles.dayPill,
                  selected ? styles.dayPillSelected : styles.dayPillNormal,
                  isFutureDate && styles.dayPillDisabled
                ]}
                onPress={() => !isFutureDate && handleDateSelect(i)}
                activeOpacity={isFutureDate ? 1 : 0.8}
                disabled={isFutureDate}
              >
                <Text style={[
                  styles.dayLabel,
                  selected && styles.dayLabelSelected,
                  isFutureDate && styles.dayLabelDisabled
                ]}>
                  {d.weekdayZh}
                </Text>
                <Text style={[
                  styles.dayDate,
                  selected && styles.dayDateSelected,
                  isFutureDate && styles.dayDateDisabled
                ]}>
                  {d.dayOfMonth}
                </Text>
              </TouchableOpacity>
            </View>
          );
        })}
      </ScrollView>

      {/* 日历选择弹窗 */}
      <Modal
        visible={datePickerVisible}
        transparent
        animationType="fade"
        onRequestClose={closeDatePicker}
      >
        <Pressable style={styles.modalBackdrop} onPress={closeDatePicker} />
        <View style={styles.modalSheet}>
          <DateTimePicker
            value={pickerDate}
            mode="date"
            display={Platform.OS === 'ios' ? 'inline' : 'calendar'}
            minimumDate={dayjs().subtract(6, 'month').toDate()}
            maximumDate={disableFutureDates ? new Date() : undefined}
            {...(Platform.OS === 'ios' ? { locale: 'zh-CN' } : {})}
            onChange={(event, date) => {
              if (Platform.OS === 'ios') {
                if (date) setPickerDate(date);
              } else {
                if (event.type === 'set' && date) {
                  onConfirmDate(date);
                } else {
                  closeDatePicker();
                }
              }
            }}
          />
          {Platform.OS === 'ios' && (
            <View style={styles.modalActions}>
              <Pressable onPress={closeDatePicker} style={[styles.modalBtn]}>
                <Text style={styles.modalBtnText}>取消</Text>
              </Pressable>
              <Pressable onPress={() => {
                onConfirmDate(pickerDate);
              }} style={[styles.modalBtn, styles.modalBtnPrimary]}>
                <Text style={[styles.modalBtnText, styles.modalBtnTextPrimary]}>确定</Text>
              </Pressable>
            </View>
          )}
        </View>
      </Modal>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {

  },
  monthTitleContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'flex-start',
    marginBottom: 8,
  },
  monthTitle: {
    fontSize: 20,
    fontWeight: '800',
    color: '#192126',
  },
  calendarIconButton: {
    padding: 4,
    borderRadius: 6,
    marginLeft: 4
  },
  daysContainer: {
    paddingBottom: 8,
  },
  dayItemWrapper: {
    alignItems: 'center',
    width: 48,
    marginRight: 8,
  },
  dayPill: {
    width: 40,
    height: 60,
    borderRadius: 24,
    alignItems: 'center',
    justifyContent: 'center',
  },
  dayPillNormal: {
    backgroundColor: 'transparent',
  },
  dayPillSelected: {
    backgroundColor: '#FFFFFF',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3,
  },
  dayPillDisabled: {
    backgroundColor: 'transparent',
    opacity: 0.4,
  },
  dayLabel: {
    fontSize: 11,
    fontWeight: '700',
    color: 'gray',
    marginBottom: 2,
  },
  dayLabelSelected: {
    color: '#192126',
  },
  dayLabelDisabled: {
    color: 'gray',
  },
  dayDate: {
    fontSize: 12,
    fontWeight: '600',
    color: 'gray',
  },
  dayDateSelected: {
    color: '#192126',
  },
  dayDateDisabled: {
    color: 'gray',
  },
  modalBackdrop: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'rgba(0,0,0,0.4)',
  },
  modalSheet: {
    position: 'absolute',
    left: 0,
    right: 0,
    bottom: 0,
    padding: 16,
    backgroundColor: '#FFFFFF',
    borderTopLeftRadius: 16,
    borderTopRightRadius: 16,
  },
  modalActions: {
    flexDirection: 'row',
    justifyContent: 'flex-end',
    marginTop: 8,
    gap: 12,
  },
  modalBtn: {
    paddingHorizontal: 14,
    paddingVertical: 10,
    borderRadius: 10,
    backgroundColor: '#F1F5F9',
  },
  modalBtnPrimary: {
    backgroundColor: '#7a5af8',
  },
  modalBtnText: {
    color: '#334155',
    fontWeight: '700',
  },
  modalBtnTextPrimary: {
    color: '#FFFFFF',
    fontWeight: '700',
  },
});