import React, { useCallback } from 'react';
import { View, Text } from 'react-native';
import Svg, { Circle, Path } from 'react-native-svg';
import { useAppTheme } from '@theme';
import { PrimaryButton } from '@components';
import { useFocusEffect, useNavigation } from '@react-navigation/native';
import { NativeStackNavigationProp } from '@react-navigation/native-stack';
import { OnBoardingParamList } from '@navigation/navigationTypes';
import { RouteNames } from '@utils/constants';
import { getStyles } from './onboardingCompleteScreen.styles';
import { getDashboard } from './thunk';
import { useAppDispatch, useAppSelector } from '@store';

export const OnboardingCompleteScreen: React.FC = () => {
  const { colors } = useAppTheme();
  const navigation =
    useNavigation<NativeStackNavigationProp<OnBoardingParamList>>();
  const styles = getStyles(colors);
  const dispatch = useAppDispatch();

  useFocusEffect(
    useCallback(() => {
      dispatch(getDashboard());
    }, [dispatch]),
  );

  const { isKycApproved } = useAppSelector(state => state.onboardingComplete);

  return (
    <View style={styles.container}>
      {/* Premium Success Checkmark Vector */}
      <View style={styles.illustrationContainer}>
        <Svg width="140" height="140" viewBox="0 0 140 140" fill="none">
          <Circle cx="70" cy="70" r="60" fill={colors.primaryLight} />
          <Circle cx="70" cy="70" r="48" fill={colors.primary} />
          {/* Checkmark icon */}
          <Path
            d="M 50 72 L 64 86 L 90 54"
            stroke="#FFFFFF"
            strokeWidth="8"
            strokeLinecap="round"
            strokeLinejoin="round"
          />
        </Svg>
      </View>

      <Text style={styles.successTitle}>Onboarding Completed!</Text>
      <Text style={styles.successDescription}>
        Welcome to the SG Delivery family! Your account has been successfully
        verified. You are now ready to go online and start earning.
      </Text>

      <PrimaryButton
        title="Get Started"
        onPress={() => {
          // If KYC is not yet approved, send user to KYC upload screen.
          // If KYC is approved, the auth reducer has already updated
          // user.status to ACTIVE via getDashboard.fulfilled, so the
          // rootNavigator will automatically swap to AppStack.
          if (!isKycApproved) {
            navigation.navigate(RouteNames.Kyc);
          }
        }}
        style={styles.startButton}
      />
    </View>
  );
};