import CheckIcon from '@/assets/images/svg/check.svg';
import { memo, useEffect } from 'react';
import Animated, { useSharedValue, useAnimatedStyle, withTiming, withSequence, Easing } from 'react-native-reanimated';
import { Checkbox, Label, XStack } from 'tamagui';
import CustomText from '@/components/common/CustomText.jsx';
import { wp } from '@/utils/ui/screenUtils';
import { TouchableOpacity, Platform } from 'react-native';
import { router } from 'expo-router';
import { useTranslation } from 'react-i18next';
import { useAppStore } from '@/stores';

export const AgreementCheckbox = ({ agreementAccepted, onAgreementChange, shakeKey }) => {
  const { t } = useTranslation('login');
  const primaryColor = useAppStore(s => s.primary);

  // 抖动动画：左右位移
  const shakeX = useSharedValue(0);
  const shakeStyle = useAnimatedStyle(() => ({
    transform: [{ translateX: shakeX.value }],
  }));

  useEffect(() => {
    if (!shakeKey) return;
    // 每次 shakeKey 变化触发一次抖动
    shakeX.value = 0;
    const delta = wp(6);
    shakeX.value = withSequence(
      withTiming(-delta, { duration: 50, easing: Easing.linear }),
      withTiming(delta, { duration: 100, easing: Easing.linear }),
      withTiming(-delta, { duration: 100, easing: Easing.linear }),
      withTiming(0, { duration: 80, easing: Easing.linear }),
    );
  }, [shakeKey]);

  return (
    <Animated.View style={shakeStyle}>
      <XStack width={wp(300)} items="center"  justify="center" marginBottom={wp(15)}>
        <TouchableOpacity
          onPress={() => onAgreementChange(!agreementAccepted)}
          hitSlop={{ top: wp(10), bottom: wp(10), left: wp(10), right: wp(10) }}
          activeOpacity={1}
        >
          <Checkbox
            pointerEvents="none"
            width={wp(17)}
            height={wp(17)}
            borderRadius={wp(50)}
            marginRight={wp(5)}
            checked={agreementAccepted}
            onCheckedChange={onAgreementChange}
            backgroundColor={agreementAccepted ? primaryColor : undefined}
            borderColor={agreementAccepted ? primaryColor : undefined}
          >
            <Checkbox.Indicator
              style={{
                alignItems: 'center',
                justifyContent: 'center',
                display: 'flex',
              }}
            >
              <CheckIcon width={wp(10)} height={wp(10)} stroke="#ffffff" />
            </Checkbox.Indicator>
          </Checkbox>
        </TouchableOpacity>
    
        <XStack  style={{ flexWrap: 'wrap' }}>
          <CustomText style={{ fontSize: wp(12) }}>{t('agreement.prefix')}</CustomText>
          <TouchableOpacity style={Platform.OS === 'ios' ? { marginLeft: wp(5), marginRight: wp(5) } : undefined} onPress={()=>{
            router.push('/agreement/userService')
          }}>
            <CustomText style={{ fontSize: wp(12), color: primaryColor ,fontFamily: 'Regular'}}>{t('agreement.userService')}</CustomText>
          </TouchableOpacity>
          
          <TouchableOpacity onPress={()=>{
            router.push('/agreement/privateInfo')
          }}>
            <CustomText style={{ fontSize: wp(12), color: primaryColor,fontFamily: 'Regular' }}>{t('agreement.privacyPolicy')}</CustomText>
          </TouchableOpacity>
        </XStack>
      </XStack>
    </Animated.View>
  );
}

export default memo(AgreementCheckbox);
