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 } 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 menuItems = [
    { id: 'personal', title: 'Personal Info', icon: <PersonIcon size={20} color={colors.primary} /> },
    { 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} /> },
    { 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}>Rahul Kumar</Text>
          
          <View style={styles.ratingRow}>
            <StarIcon size={16} color={colors.warning} />
            <Text style={styles.ratingText}>4.8</Text>
            <Text style={styles.tripsText}>(128 Trips)</Text>
          </View>
          
          <Text style={styles.idText}>ID: DP126478</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;