import React 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 { useNavigation } from '@react-navigation/native';
import { NativeStackNavigationProp } from '@react-navigation/native-stack';
import { RootStackParamList } from '@navigation/navigationTypes';
import { RouteNames } from '@utils/constants';
import { getStyles } from './onboardingCompleteScreen.styles';

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

  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={() =>
          navigation.navigate('App', {
            screen: RouteNames.BottomTabs,
            params: { screen: RouteNames.Dashboard },
          })
        }
        style={styles.startButton}
      />
    </View>
  );
};

export default OnboardingCompleteScreen;