import React, { useState, useEffect, useCallback } from 'react';
import { Gender } from 'tuikit-atomicx-react/chat';
import { useUIKit } from '@tencentcloud/uikit-base-component-react';
import { SearchType } from '../../../../types/search';
import { ageToBirthday, birthdayToAge } from '../../../../utils';
import { Slider } from '../Slider';
import styles from './UserAdvanced.module.scss';
import type { SearchParamsMap, AdvancedProps } from '../../../../types/search';

export const UserAdvanced: React.FC<AdvancedProps> = ({
  advancedParams,
  onAdvancedParamsChange,
}) => {
  const { t } = useUIKit();
  const [userAdvanced, setUserAdvanced] = useState<SearchParamsMap[SearchType.USER]>();
  const [isGenderOpen, setIsGenderOpen] = useState(false);
  const [isAgeOpen, setIsAgeOpen] = useState(false);
  const [isFilterPage, setIsFilterPage] = useState(false);
  const [tempAge, setTempAge] = useState<{ min: number | undefined; max: number | undefined }>({
    min: undefined,
    max: undefined,
  });
  const [tempGender, setTempGender] = useState<string>(Gender.Unknown);
  const genderRef = React.useRef<HTMLDivElement>(null);
  const ageRef = React.useRef<HTMLDivElement>(null);

  const genderList = [
    {
      value: 'unknown',
      label: t('Search.Any'),
    },
    {
      value: Gender.Male,
      label: t('Search.Male'),
    },
    {
      value: Gender.Female,
      label: t('Search.Female'),
    },
  ];

  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (genderRef.current && !genderRef.current.contains(event.target as Node)) {
        setIsGenderOpen(false);
      }
      if (ageRef.current && !ageRef.current.contains(event.target as Node)) {
        setIsAgeOpen(false);
      }
    };

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

  useEffect(() => {
    const userParams = advancedParams?.get(SearchType.USER) as SearchParamsMap[SearchType.USER]
      || {};
    setUserAdvanced(prev => ({
      ...prev,
      ...userParams,
    }));
    setTempGender(userParams?.gender || '不限');
    setTempAge({
      min: userParams?.maxBirthday ? birthdayToAge(userParams?.maxBirthday) : undefined,
      max: userParams?.miniBirthday ? birthdayToAge(userParams?.miniBirthday) : undefined,
    });
  }, [advancedParams]);

  const handleGenderChange = useCallback((gender: Gender) => {
    onAdvancedParamsChange?.(SearchType.USER, {
      ...userAdvanced,
      gender: gender === Gender.Unknown ? undefined : gender,
    });
    setIsGenderOpen(false);
  }, [onAdvancedParamsChange, userAdvanced]);

  const handleAgeChange = useCallback((
    age: { min: number | undefined; max: number | undefined }) => {
    onAdvancedParamsChange?.(SearchType.USER, {
      ...userAdvanced,
      miniBirthday: ageToBirthday(age.max),
      maxBirthday: ageToBirthday(age.min),
    });
    setIsAgeOpen(false);
  }, [onAdvancedParamsChange, userAdvanced]);

  const handleAgeInputChange = useCallback((type: 'min' | 'max', value: string) => {
    setTempAge((prev) => {
      if (value === '') {
        return {
          ...prev,
          [type]: undefined,
        };
      }
      const numValue = Math.max(0, Math.min(99, parseInt(value, 10) || 0));
      return {
        ...prev,
        [type]: numValue,
      };
    });
  }, []);

  const toggleFilter = () => {
    setIsFilterPage(prev => !prev);
  };

  const handleAgeConfirm = useCallback(() => {
    const { min, max } = tempAge;
    handleAgeChange({ min, max });
  }, [tempAge, handleAgeChange]);

  const handleFilterChange = useCallback(() => {
    toggleFilter();
    const isSameGender = userAdvanced?.gender === tempGender;
    const isSameMiniBirthday = userAdvanced?.miniBirthday === ageToBirthday(tempAge.max);
    const isSameMaxBirthday = userAdvanced?.maxBirthday === ageToBirthday(tempAge.min);
    if (isSameGender && isSameMiniBirthday && isSameMaxBirthday) {
      return;
    }
    onAdvancedParamsChange?.(SearchType.USER, {
      ...userAdvanced,
      gender: tempGender === '不限' ? undefined : tempGender,
      miniBirthday: tempAge.max !== 99 ? ageToBirthday(tempAge.max) : undefined,
      maxBirthday: tempAge.min !== 0 ? ageToBirthday(tempAge.min) : undefined,
    });
  }, [onAdvancedParamsChange, tempAge.max, tempAge.min, tempGender, userAdvanced]);

  const handleTempGender = (value: string) => {
    setTempGender(value);
    setIsGenderOpen(false);
  };

  const minAge = userAdvanced?.maxBirthday ? birthdayToAge(userAdvanced.maxBirthday) : undefined;
  const maxAge = userAdvanced?.miniBirthday ? birthdayToAge(userAdvanced.miniBirthday) : undefined;

  const getGenderText = (gender: string) => {
    switch (gender) {
      case Gender.Male:
        return t('Search.Male');
      case Gender.Female:
        return t('Search.Female');
      default:
        return t('Search.Any');
    }
  };
  return (
    <div className={styles.SearchUserAdvanced}>
      <div className={styles['SearchUserAdvanced__filter-row']}>
        <div
          className={styles['SearchUserAdvanced__filter-select']}
          onClick={() => setIsGenderOpen(!isGenderOpen)}
        >
          <span className={styles['SearchUserAdvanced__filter-label']}>
            {t('Search.Gender')}
            ：
          </span>
          <span className={styles['SearchUserAdvanced__filter-value']}>
            {getGenderText(userAdvanced?.gender || t('Search.Any'))}
          </span>
          <span className={`${styles.SearchUserAdvanced__arrow} ${isGenderOpen ? styles['SearchUserAdvanced__arrow--up'] : ''}`}>▼</span>
        </div>
        {isGenderOpen && (
          <div className={styles.SearchUserAdvanced__dropdown} ref={genderRef}>
            {
              genderList.map(item => (
                <div
                  key={item.value}
                  className={styles.SearchUserAdvanced__option}
                  onClick={() => {
                    handleGenderChange(item.value);
                  }}
                >
                  {item.label}
                </div>
              ))
            }
          </div>
        )}
      </div>
      <div className={styles['SearchUserAdvanced__filter-row']} ref={ageRef}>
        <div
          className={styles['SearchUserAdvanced__filter-select']}
          onClick={() => setIsAgeOpen(!isAgeOpen)}
        >
          <span className={styles['SearchUserAdvanced__filter-label']}>
            {t('Search.Age')}
            ：
          </span>
          <span className={styles['SearchUserAdvanced__filter-value']}>
            {`${minAge || '0'}-${maxAge || '99'} ${t('Search.Years Old')}`}
          </span>
          <span className={`${styles.SearchUserAdvanced__arrow} ${isAgeOpen ? styles['SearchUserAdvanced__arrow--up'] : ''}`}>▼</span>
        </div>
        {isAgeOpen && (
          <div className={styles.SearchUserAdvanced__dropdown}>
            <div className={styles['SearchUserAdvanced__age-inputs']}>
              <input
                type="number"
                min="0"
                max="99"
                value={tempAge.min ?? ''}
                placeholder="0"
                onChange={e => handleAgeInputChange('min', e.target.value)}
                className={styles['SearchUserAdvanced__age-input']}
              />
              <span>-</span>
              <input
                type="number"
                min="0"
                max="99"
                value={tempAge.max ?? ''}
                placeholder="99"
                onChange={e => handleAgeInputChange('max', e.target.value)}
                className={styles['SearchUserAdvanced__age-input']}
              />
              <span>{t('Search.Years Old')}</span>
              <button
                className={styles['SearchUserAdvanced__confirm-button']}
                onClick={handleAgeConfirm}
              >
                {t('Search.Confirm')}
              </button>
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

export default React.memo(UserAdvanced);