import React from 'react';
import { View, Text, ScrollView, TouchableOpacity, Alert } from 'react-native';
import { useAppTheme } from '@theme';
import { PersonIcon, ChevronRightIcon, ClipboardIcon, StarIcon } from '@icons';
import { useAppDispatch, useAppSelector } from '@store';
import { logout } from '@store/commonReducers/auth';
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 './profileScreen.styles';

export const ProfileScreen: React.FC = () => {
  const { colors } = useAppTheme();
  const styles = getStyles(colors);
  const dispatch = useAppDispatch();
  const navigation =
    useNavigation<NativeStackNavigationProp<AppStackParamList>>();
  const { profile } = useAppSelector(state => state.accountInfo);

  const menuItems = [
    {
      id: 'vehicle',
      title: 'Vehicle Info',
      icon: <ClipboardIcon size={20} color={colors.primary} />,
    },
    {
      id: 'documents',
      title: 'Documents',
      icon: <ClipboardIcon size={20} color={colors.primary} />,
      route: RouteNames.Documents,
    },
    {
      id: 'bank',
      title: 'Bank Details',
      icon: <ClipboardIcon size={20} color={colors.primary} />,
      route: RouteNames.BankDetails,
    },
    {
      id: 'emergency',
      title: 'Emergency Contact',
      icon: <PersonIcon size={20} color={colors.primary} />,
    },
    {
      id: 'settings',
      title: 'App Settings',
      icon: <PersonIcon size={20} color={colors.primary} />,
    },
  ];

  const handleMenuPress = (item: any) => {
    if (item.route) {
      navigation.navigate(item.route);
    } else {
      Alert.alert('Menu Option', `Viewing ${item.title} section...`);
    }
  };

  const handleLogout = () => {
    Alert.alert(
      'Logout',
      'Are you sure you want to log out of SG Delivery Partner?',
      [
        { text: 'Cancel', style: 'cancel' },
        {
          text: 'Logout',
          style: 'destructive',
          onPress: () => {
            dispatch(logout());
            // Reset navigation stack to the Auth Stack
            navigation.dispatch(
              CommonActions.reset({
                index: 0,
                routes: [{ name: 'Auth' }],
              }),
            );
          },
        },
      ],
    );
  };

  return (
    <View style={styles.container}>
      <ScrollView
        contentContainerStyle={styles.scrollContainer}
        showsVerticalScrollIndicator={false}
      >
        {/* Header User Card */}
        <View style={styles.headerCard}>
          <View style={styles.avatar}>
            <PersonIcon size={44} color={colors.primary} />
          </View>

          <Text style={styles.name}>{profile?.user?.name}</Text>

          <View style={styles.ratingRow}>
            <StarIcon size={16} color={colors.warning} />
            <Text style={styles.ratingText}>{profile?.rating}</Text>
            <Text style={styles.tripsText}>{profile?.user?.email}</Text>
          </View>

          <Text style={styles.idText}>ID: {profile?.user?.id}</Text>
        </View>

        {/* Profile Menu options */}
        <View style={styles.menuSection}>
          {menuItems.map((item, idx) => (
            <TouchableOpacity
              key={item.id}
              style={[
                styles.menuItem,
                idx === menuItems.length - 1 && { borderBottomWidth: 0 },
              ]}
              activeOpacity={0.7}
              onPress={() => handleMenuPress(item)}
            >
              <View style={styles.menuItemLeft}>
                <View style={styles.menuIconContainer}>{item.icon}</View>
                <Text style={styles.menuText}>{item.title}</Text>
              </View>
              <ChevronRightIcon size={20} color={colors.textSecondary} />
            </TouchableOpacity>
          ))}
        </View>

        {/* Logout Button */}
        <TouchableOpacity
          style={styles.logoutBtn}
          activeOpacity={0.8}
          onPress={handleLogout}
        >
          <Text style={styles.logoutText}>Log Out</Text>
        </TouchableOpacity>
      </ScrollView>
    </View>
  );
};

export default ProfileScreen;