import { Drawer } from "expo-router/drawer";
import { DrawerContentScrollView, DrawerItem } from "@react-navigation/drawer";
import { useRouter, Redirect } from "expo-router";
import {
  TouchableOpacity,
  DeviceEventEmitter,
  View,
  ActivityIndicator,
} from "react-native";
import MaterialIcons from "@expo/vector-icons/MaterialIcons";
import { REFRESH_EVENT } from "common-ui/src/lib/const-strs";
import { useStaffAuth } from "@/components/context/staff-auth-context";
import { tw, MyText, theme } from "common-ui";

const SCREEN_TITLES: Record<string, string> = {
  index: "Dashboard",
  products: "Products",
  "prices-overview": "Prices Overview",
  "product-groupings": "Product Groupings",
  "dashboard-banners": "Dashboard Banners",
  slots: "Slots",
  complaints: "Complaints",
  "manage-orders": "Manage Orders",
  coupons: "Coupons",
  "vendor-snippets": "Vendor Snippets",
  stores: "Stores",
  "user-management": "User Management",
  "send-notifications": "Send Notifications",
  "product-tags": "Product Tags",
  "rebalance-orders": "Rebalance Orders",
  "customize-app": "Customize App",
};

function CustomDrawerContent() {
  const router = useRouter();
  const { logout, staff } = useStaffAuth();

  return (
    <DrawerContentScrollView>
      {staff && (
        <View style={tw`p-4 border-b border-gray-200`}>
          <MaterialIcons name="person" size={40} color="#3B82F6" />
          <View style={tw`mt-2`}>
            <MyText style={tw`text-lg font-semibold text-gray-800`}>
              {staff.name}
            </MyText>
            <MyText style={tw`text-sm text-gray-600`}>Staff Member</MyText>
          </View>
        </View>
      )}
      <DrawerItem
        label="Dashboard"
        onPress={() => router.dismissTo("/(drawer)/dashboard" as any)}
        icon={({ color, size }) => (
          <MaterialIcons name="dashboard" size={size} color={color} />
        )}
      />
      <DrawerItem
        label="Products"
        onPress={() => router.push("/(drawer)/dashboard/products" as any)}
        icon={({ color, size }) => (
          <MaterialIcons name="inventory" size={size} color={color} />
        )}
      />
      <DrawerItem
        label="Prices Overview"
        onPress={() => router.push("/(drawer)/dashboard/prices-overview" as any)}
        icon={({ color, size }) => (
          <MaterialIcons name="attach-money" size={size} color={color} />
        )}
      />
      <DrawerItem
        label="Product Groupings"
        onPress={() => router.push("/(drawer)/dashboard/product-groupings" as any)}
        icon={({ color, size }) => (
          <MaterialIcons name="group-work" size={size} color={color} />
        )}
      />
      <DrawerItem
        label="Dashboard Banners"
        onPress={() => router.push("/(drawer)/dashboard/dashboard-banners" as any)}
        icon={({ color, size }) => (
          <MaterialIcons name="view-carousel" size={size} color={color} />
        )}
      />
      <DrawerItem
        label="Slots"
        onPress={() => router.push("/(drawer)/dashboard/slots" as any)}
        icon={({ color, size }) => (
          <MaterialIcons name="schedule" size={size} color={color} />
        )}
      />
      <DrawerItem
        label="Complaints"
        onPress={() => router.push("/(drawer)/dashboard/complaints" as any)}
        icon={({ color, size }) => (
          <MaterialIcons name="report-problem" size={size} color={color} />
        )}
      />
      <DrawerItem
        label="Manage Orders"
        onPress={() => router.push("/(drawer)/dashboard/manage-orders" as any)}
        icon={({ color, size }) => (
          <MaterialIcons name="shopping-bag" size={size} color={color} />
        )}
      />
      <DrawerItem
        label="Coupons"
        onPress={() => router.push("/(drawer)/dashboard/coupons" as any)}
        icon={({ color, size }) => (
          <MaterialIcons name="local-offer" size={size} color={color} />
        )}
      />
      <DrawerItem
        label="Vendor Snippets"
        onPress={() => router.push("/(drawer)/dashboard/vendor-snippets" as any)}
        icon={({ color, size }) => (
          <MaterialIcons name="code" size={size} color={color} />
        )}
      />
      <DrawerItem
        label="Stores"
        onPress={() => router.push("/(drawer)/dashboard/stores" as any)}
        icon={({ color, size }) => (
          <MaterialIcons name="store" size={size} color={color} />
        )}
      />
      <DrawerItem
        label="User Management"
        onPress={() => router.push("/(drawer)/dashboard/user-management" as any)}
        icon={({ color, size }) => (
          <MaterialIcons name="people" size={size} color={color} />
        )}
      />
      <DrawerItem
        label="Send Notifications"
        onPress={() => router.push("/(drawer)/dashboard/send-notifications" as any)}
        icon={({ color, size }) => (
          <MaterialIcons name="campaign" size={size} color={color} />
        )}
      />
      <DrawerItem
        label="Logout"
        onPress={() => logout()}
        icon={({ color, size }) => (
          <MaterialIcons name="logout" size={size} color={color} />
        )}
      />
    </DrawerContentScrollView>
  );
}

export default function Layout() {
  const router = useRouter();
  const { isLoggedIn, isLoading } = useStaffAuth();

  if (isLoading) {
    return (
      <View style={tw`flex-1 justify-center items-center bg-white`}>
        <ActivityIndicator size="large" color="#3B82F6" />
      </View>
    );
  }

  if (!isLoggedIn) {
    return <Redirect href="/login" />;
  }

  return (
    <Drawer
      drawerContent={CustomDrawerContent}
      screenOptions={({ navigation }) => {
        const state = navigation.getState();
        const focusedRoute = state?.routes?.[state?.index ?? 0];
        const dashboardStack = (focusedRoute as any)?.state;
        const nestedIndex = dashboardStack?.index ?? 0;
        const canGoBack = nestedIndex > 0;
        const nestedRoute = dashboardStack?.routes?.[nestedIndex];
        const title = SCREEN_TITLES[nestedRoute?.name ?? ""] ?? "Dashboard";

        return {
          swipeEnabled: false,
          headerShown: true,
          headerStyle: {
            backgroundColor: theme.colors.gray1,
            shadowOpacity: 0,
            shadowRadius: 0,
            shadowOffset: { height: 0, width: 0 },
            elevation: 0,
          },
          headerTitle: title,
          headerTitleAlign: "center",
          headerLeft: () => (
            <TouchableOpacity
              onPress={() =>
                canGoBack ? router.back() : (navigation as any).openDrawer()
              }
              style={{
                marginLeft: 15,
                width: 40,
                height: 40,
                borderRadius: 20,
                backgroundColor: "#f2f2f2",
                justifyContent: "center",
                alignItems: "center",
              }}
            >
              <MaterialIcons
                name={canGoBack ? "arrow-back" : "menu"}
                size={24}
                color="black"
              />
            </TouchableOpacity>
          ),
          headerRight: () => (
            <TouchableOpacity
              style={{
                marginRight: 15,
                width: 40,
                height: 40,
                borderRadius: 20,
                backgroundColor: "#f2f2f2",
                justifyContent: "center",
                alignItems: "center",
              }}
              onPress={() => {
                DeviceEventEmitter.emit(REFRESH_EVENT);
              }}
            >
              <MaterialIcons name="refresh" size={24} color="black" />
            </TouchableOpacity>
          ),
        };
      }}
    >
      <Drawer.Screen name="dashboard" options={{ title: "Dashboard" }} />
    </Drawer>
  );
}