import { useEffect, useRef } from 'react';
import { Animated, Easing, Text, View } from 'react-native';
import { useTranslation } from 'react-i18next';
import { Ionicons } from '@expo/vector-icons';
import { useColors } from '../../../lib/theme';
import { OnboardingShell } from '../OnboardingShell';
import { LyraBubble } from '../LyraBubble';
import { CTABar } from '../CTABar';

export function DoneSlide({
  onEnter,
  current,
  total,
}: {
  onEnter: () => void;
  current: number;
  total: number;
}) {
  const { t } = useTranslation();
  const colors = useColors();
  const scale = useRef(new Animated.Value(0.6)).current;
  const opacity = useRef(new Animated.Value(0)).current;

  useEffect(() => {
    Animated.parallel([
      Animated.spring(scale, { toValue: 1, useNativeDriver: true, friction: 5, tension: 90 }),
      Animated.timing(opacity, {
        toValue: 1,
        duration: 500,
        useNativeDriver: true,
        easing: Easing.out(Easing.cubic),
      }),
    ]).start();
  }, []);

  return (
    <OnboardingShell
      current={current}
      total={total}
      cta={<CTABar primaryLabel={t('onboarding.done.cta_primary')} onPrimary={onEnter} />}
    >
      <LyraBubble text={t('onboarding.lyra.done.body')} emotion="happy" />

      <Animated.View
        style={{
          marginTop: 40,
          alignItems: 'center',
          opacity,
          transform: [{ scale }],
        }}
      >
        <View
          style={{
            width: 120,
            height: 120,
            borderRadius: 60,
            backgroundColor: 'rgba(34,197,94,0.14)',
            alignItems: 'center',
            justifyContent: 'center',
            borderWidth: 2,
            borderColor: 'rgba(34,197,94,0.40)',
          }}
        >
          <Ionicons name="checkmark" size={64} color={colors.success} />
        </View>

        <Text
          style={{
            marginTop: 24,
            fontFamily: 'Nunito_800ExtraBold',
            fontSize: 26,
            color: colors.text,
            textAlign: 'center',
            letterSpacing: -0.3,
          }}
        >
          {t('onboarding.done.headline')}
        </Text>
        <Text
          style={{
            marginTop: 8,
            fontFamily: 'Nunito_400Regular',
            fontSize: 15,
            lineHeight: 22,
            color: colors.textMuted,
            textAlign: 'center',
            paddingHorizontal: 16,
          }}
        >
          {t('onboarding.done.subhead')}
        </Text>
      </Animated.View>
    </OnboardingShell>
  );
}