import React from 'react';
import { Text, View, TouchableOpacity, ScrollView } from 'react-native';
import { DrawerContentComponentProps } from '@react-navigation/drawer';
import Icon from 'react-native-vector-icons/Ionicons';
import { menuItems } from '@mock-data';
import { useTheme } from '@theme';
import { DrawerItemProps } from '@interfaces';
import { getStyles } from './customDrawerContent.style';

import { useAppDispatch, logout } from '@store';

const DrawerItem = ({ label, iconName, focused, onPress }: DrawerItemProps) => {
  const { theme: colors } = useTheme();
  const styles = getStyles(colors);

  return (
    <TouchableOpacity
      style={[styles.itemWrapper, focused && styles.itemWrapperActive]}
      activeOpacity={0.7}
      onPress={onPress}
    >
      <Icon
        name={iconName}
        size={22}
        color={focused ? colors.icon : colors.textSecondary}
        style={styles.itemIcon}
      />
      <Text style={[styles.itemLabel, focused && styles.itemLabelActive]}>
        {label}
      </Text>
    </TouchableOpacity>
  );
};

export const CustomDrawerContent = (props: DrawerContentComponentProps) => {
  const { state, navigation } = props;
  const { theme: colors } = useTheme();
  const styles = getStyles(colors);
  const dispatch = useAppDispatch();

  const handleLogout = async () => {
    try {
      dispatch(logout());
    } catch (e) {
      console.error(e);
    }
    navigation.reset({
      index: 0,
      routes: [{ name: 'AuthStack' }], // root-level stack name stays as-is
    });
  };
  const activeRouteName = state.routeNames[state.index];

  return (
    <View style={styles.container}>
      {/* Drawer Header Profile */}
      <View style={styles.header}>
        <View style={styles.logoCircle}>
          <Icon name="cube" size={28} color="#FFFFFF" />
        </View>
        <View style={styles.headerDetails}>
          <Text style={styles.tenantName}>Convex CRM</Text>
          <Text style={styles.adminEmail}>admin@convex.com</Text>
        </View>
      </View>

      <ScrollView contentContainerStyle={styles.scrollContent}>
        <View style={styles.menuContainer}>
          {menuItems.map(item => {
            const isFocused = activeRouteName === item.route;
            return (
              <DrawerItem
                key={item.route}
                label={item.label}
                iconName={item.icon}
                focused={isFocused}
                onPress={() => navigation.navigate(item.route)}
              />
            );
          })}
        </View>
      </ScrollView>

      {/* Drawer Footer / Sign Out */}
      <View style={styles.footer}>
        <TouchableOpacity style={styles.logoutButton} onPress={handleLogout}>
          <Icon
            name="log-out-outline"
            size={20}
            color="#EF4444"
            style={styles.logoutIcon}
          />
          <Text style={styles.logoutText}>Log Out</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};