import React from 'react';
import { Drawer } from 'expo-router/drawer';
import CustomDrawerContent from '../../components/navigation/CustomDrawerContent';
import { Colors } from '../../constants/theme';
import { Ionicons } from '@expo/vector-icons';
import { TouchableOpacity } from 'react-native';
import { Link } from 'expo-router';
import NotificationBadge from '../../components/navigation/NotificationBadge';
import { useAuthStore } from '../../store/authStore';

export default function DrawerLayout() {
  const { user_type } = useAuthStore();
  const isStaff = user_type === 4;

  return (
    <Drawer
      drawerContent={(props: any) => <CustomDrawerContent {...props} />}
      screenOptions={{
        headerShown: true,
        headerStyle: {
          backgroundColor: Colors.light.primary,
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
          fontWeight: 'bold',
        },
        drawerActiveTintColor: Colors.light.primary,
        drawerInactiveTintColor: '#333',
      }}
    >
      <Drawer.Screen
        name="(tabs)"
        options={{
          drawerLabel: 'Painel',
          title: 'E-Concerto',
          headerRight: isStaff ? undefined : () => (
            <Link href="/notifications" asChild>
              <TouchableOpacity style={{ marginRight: 15 }}>
                <Ionicons name="notifications-outline" size={24} color="#fff" />
                <NotificationBadge size={16} style={{ top: -2, right: -2 }} />
              </TouchableOpacity>
            </Link>
          ),
        }}
      />
      <Drawer.Screen
        name="chat/[id]"
        options={{
          drawerItemStyle: { display: 'none' },
          headerTitle: 'Conversa',
        }}
      />
      <Drawer.Screen
        name="notifications"
        options={{
          drawerLabel: 'Notificações',
          title: 'Notificações',
          drawerItemStyle: isStaff ? { display: 'none' } : undefined,
        }}
      />
      <Drawer.Screen
        name="security"
        options={{
          drawerLabel: 'Segurança',
          title: 'Segurança',
        }}
      />
      <Drawer.Screen
        name="tickets"
        options={{
          drawerLabel: 'Tickets',
          title: 'Tickets',
        }}
      />
      <Drawer.Screen
        name="transactions"
        options={{
          drawerLabel: 'Transações',
          title: 'Transações',
        }}
      />
      <Drawer.Screen
        name="staff/booking/[id]"
        options={{
          drawerItemStyle: { display: 'none' },
          headerTitle: 'Detalhes do Serviço',
        }}
      />
    </Drawer>
  );
}