import React, { useEffect, useState } from 'react';
import { useUIKit } from '@tencentcloud/uikit-base-component-react';
import cs from 'classnames';
import { SearchType } from '../../../../types/search';
import { DateRangePicker } from '../DateRangePicker';
import styles from './MessageAdvanced.module.scss';
import type { SearchParamsMap, AdvancedProps } from '../../../../types/search';

export const MessageAdvanced: React.FC<AdvancedProps> = ({
  advancedParams,
  onAdvancedParamsChange,
}) => {
  const { t } = useUIKit();
  const [isDatePickerOpen, setIsDatePickerOpen] = useState(false);
  const [dateRange, setDateRange] = useState<[Date | null, Date | null]>([null, null]);
  const datePickerRef = React.useRef<HTMLDivElement>(null);
  const [activeQuickOption, setActiveQuickOption] = useState<string>('all');

  const QUICK_OPTIONS = [
    { label: t('Search.Today'), value: 'today' },
    { label: t('Search.Last 3 Days'), value: 'last3days' },
    { label: t('Search.Last 7 Days'), value: 'last7days' },
  ];

  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (datePickerRef.current && !datePickerRef.current.contains(event.target as Node)) {
        setIsDatePickerOpen(false);
      }
    };

    document.addEventListener('mousedown', handleClickOutside);
    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, []);

  const setStartOfDay = (date: Date): Date => {
    const newDate = new Date(date);
    newDate.setHours(0, 0, 0, 0);
    return newDate;
  };

  const setEndOfDay = (date: Date): Date => {
    const newDate = new Date(date);
    newDate.setHours(23, 59, 59, 999);
    return newDate;
  };

  useEffect(() => {
    const messageParams = advancedParams
      ?.get(SearchType.MESSAGE) as SearchParamsMap[SearchType.MESSAGE];
    let newDateRange: [Date | null, Date | null] = [null, null];
    if (messageParams?.timePosition && messageParams?.timePeriod) {
      const endTimes = new Date(messageParams.timePosition * 1000);
      const startTimes = new Date((messageParams.timePosition - messageParams.timePeriod) * 1000);
      newDateRange = [startTimes, endTimes];
    } else {
      setActiveQuickOption('');
    }
    setDateRange(newDateRange);
  }, [advancedParams]);

  const dateRangeMatch = (
    startTime: number | undefined,
    endTime: number | undefined,
    daysAgo: number,
  ): boolean => {
    if (!startTime || !endTime) {
      return false;
    }
    const today = new Date();
    const endOfToday = setEndOfDay(today).setMilliseconds(0);
    const date = new Date();
    date.setDate(date.getDate() - (daysAgo - 1));
    const startOfDaysAgo = setStartOfDay(date).setMilliseconds(0);
    return endTime === endOfToday && startTime === startOfDaysAgo;
  };

  useEffect(() => {
    const startTimes = dateRange[0]?.setMilliseconds(0);
    const endTimes = dateRange[1]?.setMilliseconds(0);

    const quickOptionMatches = [
      { option: 'today', days: 1 },
      { option: 'last3days', days: 3 },
      { option: 'last7days', days: 7 },
    ];

    const matchedOption = quickOptionMatches.find(({ days }) =>
      dateRangeMatch(startTimes, endTimes, days),
    );

    setActiveQuickOption(matchedOption?.option || '');
  }, [dateRange]);

  const handleDateRange = (dates: [Date | null, Date | null]) => {
    const [startDate, endDate] = dates;
    const options = {
      timePosition: 0,
      timePeriod: 0,
    };

    if (startDate && endDate) {
      // 指定时间范围
      const startTimestamp = Math.floor(startDate.getTime() / 1000);
      options.timePosition = Math.floor(endDate.getTime() / 1000);
      options.timePeriod = options.timePosition - startTimestamp;
    }
    onAdvancedParamsChange?.(SearchType.MESSAGE, {
      ...advancedParams?.get(SearchType.MESSAGE),
      ...options,
    } as SearchParamsMap[SearchType.MESSAGE]);
  };

  const onDateRangeChange = (dates: [Date | null, Date | null]) => {
    const [startDate, endDate] = dates;
    if (!startDate && !endDate) {
      setIsDatePickerOpen(false);
    }
    if (!startDate || !endDate) {
      return;
    }
    setIsDatePickerOpen(false);
    const isSameStart = startDate?.getTime() === dateRange[0]?.getTime();
    const isSameEnd = endDate?.getTime() === dateRange[1]?.getTime();

    if (isSameStart && isSameEnd) {
      return;
    }

    handleDateRange(dates);
  };

  const handleQuickOptionClick = (option: string) => {
    const activeOption = option === activeQuickOption ? '' : option;
    const today = new Date();
    let start: Date | null = null;
    let end: Date | null = null;
    if (option !== activeQuickOption) {
      switch (option) {
        case 'today':
          start = setStartOfDay(today);
          end = setEndOfDay(today);
          break;
        case 'last3days': {
          const startDate = new Date(today);
          startDate.setDate(today.getDate() - 2);
          start = setStartOfDay(startDate);
          end = setEndOfDay(today);
          break;
        }
        case 'last7days': {
          const startDate = new Date(today);
          startDate.setDate(today.getDate() - 6);
          start = setStartOfDay(startDate);
          end = setEndOfDay(today);
          break;
        }
        default:
          start = null;
          end = null;
          break;
      }
    }
    const dates: [Date | null, Date | null] = [start, end];
    setActiveQuickOption(activeOption);
    handleDateRange(dates);
  };

  return (
    <div className={styles.SearchMessageAdvanced}>
      <div className={styles['SearchMessageAdvanced__filter-row']} ref={datePickerRef}>
        <div
          className={styles['SearchMessageAdvanced__filter-select']}
          onClick={() => setIsDatePickerOpen(!isDatePickerOpen)}
        >
          <span className={styles['SearchMessageAdvanced__filter-label']}>
            {t('Search.Select Time')}
            ：
          </span>
          <span className={styles['SearchMessageAdvanced__filter-value']}>
            {dateRange[0] && dateRange[1]
              ? `${dateRange[0].toLocaleDateString()} - ${dateRange[1].toLocaleDateString()}`
              : t('Search.All Time')}
          </span>
          <span className={cs(styles.SearchMessageAdvanced__arrow, {
            [styles['SearchMessageAdvanced__arrow--up']]: isDatePickerOpen,
          })}
          >
            ▼
          </span>
        </div>
        <div className={styles['SearchMessageAdvanced__quick-options']}>
          {QUICK_OPTIONS.map(option => (
            <button
              key={option.value}
              className={cs(styles['SearchMessageAdvanced__quick-option'], {
                [styles['SearchMessageAdvanced__quick-option--active']]: activeQuickOption === option.value,
              })}
              onClick={() => handleQuickOptionClick(option.value)}
            >
              {option.label}
            </button>
          ))}
        </div>
        {isDatePickerOpen && (
          <div className={styles['SearchMessageAdvanced__date-picker-dropdown']}>
            <DateRangePicker
              value={dateRange}
              onChange={onDateRangeChange}
            />
          </div>
        )}
      </div>
    </div>
  );
};

export default React.memo(MessageAdvanced);