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, CommonActions } from '@react-navigation/native';
import { NativeStackNavigationProp } from '@react-navigation/native-stack';
import { AppStackParamList } from '@navigation/navigationTypes';
import { RouteNames } from '@utils/constants';
import { getStyles } from './deliveryCompletedScreen.styles';

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

  const handleGoToDashboard = () => {
    // Reset route stack and go back to Dashboard
    navigation.dispatch(
      CommonActions.reset({
        index: 0,
        routes: [
          {
            name: 'BottomTabs',
            state: {
              routes: [{ name: RouteNames.Dashboard }],
            },
          },
        ],
      })
    );
  };

  return (
    <View style={styles.container}>
      {/* Checkmark Vector */}
      <View style={styles.illustrationContainer}>
        <Svg width="120" height="120" viewBox="0 0 120 120" fill="none">
          <Circle cx="60" cy="60" r="50" fill={colors.primaryLight} />
          <Circle cx="60" cy="60" r="40" fill={colors.primary} />
          <Path
            d="M 44 62 L 54 72 L 76 46"
            stroke="#FFFFFF"
            strokeWidth="6"
            strokeLinecap="round"
            strokeLinejoin="round"
          />
        </Svg>
      </View>

      <Text style={styles.title}>Delivery Completed!</Text>
      <Text style={styles.earnedText}>
        You earned <Text style={styles.amount}>₹78.00</Text> on this delivery
      </Text>

      {/* Summary Card */}
      <View style={styles.summaryCard}>
        <View style={styles.summaryRow}>
          <Text style={styles.summaryLabel}>Order ID</Text>
          <Text style={styles.summaryVal}>#ORD125487</Text>
        </View>

        <View style={styles.summaryRow}>
          <Text style={styles.summaryLabel}>Delivery Distance</Text>
          <Text style={styles.summaryVal}>1.2 km</Text>
        </View>

        <View style={styles.summaryRow}>
          <Text style={styles.summaryLabel}>Time Taken</Text>
          <Text style={styles.summaryVal}>15 mins</Text>
        </View>

        <View style={styles.summaryRow}>
          <Text style={styles.summaryLabel}>Payment Mode</Text>
          <Text style={styles.summaryVal}>Online Paid</Text>
        </View>
      </View>

      <PrimaryButton
        title="Go to Dashboard"
        onPress={handleGoToDashboard}
        style={styles.button}
      />
    </View>
  );
};

export default DeliveryCompletedScreen;