import { Text, View, Pressable, ScrollView } from "react-native";
import { router } from "expo-router";

import { useAuthContext } from "@/auth/AuthContext";
import { ToDoList } from "@/components/features/dashboard/todo/ToDoList";
import { LoadingSpinner } from "@/components/ui/LoadingSpinner";
import { RiskScoreIndicator } from "@/components/ui/RiskScoreIndicator";
import { useGetTodosQuery } from "@/store/api/todosApi";
import { useAppSelector } from "@/store/hooks";
import { selectIsMobile } from "@/store/screen/screenSizeSlice";
import { RoleEnum } from "@/constants/roleEnum";
import { NoData } from "@/components/ui/NoData";

const Dashboard = () => {
  const { user } = useAuthContext();
  const isMobile = useAppSelector(selectIsMobile);
  const isManager = user?.role === RoleEnum.MANAGER;

  const queryArgs = isManager ? undefined : { assigneeUserId: user?.id };

  const { data, error, refetch, isLoading, isFetching } =
    useGetTodosQuery(queryArgs);

  const allTodos = data?.items ?? [];
  const teamTodos = isManager ? allTodos : [];
  const myTodos = isManager
    ? allTodos.filter((t) => t.assignees?.some((a) => a.id === user?.id))
    : allTodos;
  return (
    <View
      className={`flex-1 bg-primaryPurpleLight ${isMobile ? "p-1" : "p-5"}`}
    >
      <View className="p-0">
        <Text
          className={`text-2xl font-bold ${
            isMobile ? "mb-1" : "mb-4"
          } text-white`}
        >
          User dashboard
        </Text>
      </View>

      <ScrollView>
        <View className="flex flex-col lg:flex-row flex-1">
          <View className="w-full lg:w-1/2 lg:pr-2 mb-4 lg:mb-0">
            <View className="bg-lightGray rounded-lg p-4 mb-4">
              <Text className="text-xl font-bold mb-4 text-black">
                Risk Score Indicators
              </Text>
              <View className="flex flex-row flex-wrap justify-around gap-4">
                <RiskScoreIndicator
                  value={100}
                  subtitle="MFA setup"
                  size={110}
                />
                <RiskScoreIndicator
                  value={50}
                  subtitle="Fishing emails"
                  size={110}
                />
                <RiskScoreIndicator
                  value={25}
                  subtitle="Login location change"
                  size={110}
                />
              </View>
            </View>

            <View className="bg-lightGray rounded-lg p-4 mb-4">
              <Text className="text-xl font-bold mb-4 text-black">
                User Report (High Risk)
              </Text>
              <Text className="font-normal text-black">Some high risk</Text>
            </View>
          </View>

          <View className="w-full lg:w-1/2 lg:pl-2 flex-1">
            {isLoading ? (
              <View className="bg-lightGray rounded-lg p-4 flex-1 items-center justify-center">
                <LoadingSpinner />
              </View>
            ) : error ? (
              <View className="bg-lightGray rounded-lg p-4">
                <NoData
                  onRetry={refetch}
                  message="No todos found"
                  isRetrying={isFetching}
                />
              </View>
            ) : (
              <View>
                <View className="bg-lightGray rounded-lg p-4 mb-4">
                  <Pressable
                    onPress={() => router.push("/(tabs)/accounts/todos")}
                  >
                    <Text className="text-xl font-bold mb-4 text-black">
                      Your To-Do List
                    </Text>
                  </Pressable>
                  <ToDoList
                    todos={myTodos}
                    emptyMessage="No tasks assigned to you"
                  />
                </View>

                {user?.role === RoleEnum.MANAGER && (
                  <View className="bg-lightGray rounded-lg p-4 mb-4">
                    <Pressable
                      onPress={() => router.push("/(tabs)/accounts/todos")}
                    >
                      <Text className="text-xl font-bold mb-4 text-black">
                        Your Team To-Do List
                      </Text>
                    </Pressable>

                    <ToDoList
                      todos={teamTodos}
                      emptyMessage="No tasks assigned to your team"
                    />
                  </View>
                )}
              </View>
            )}
          </View>
        </View>
      </ScrollView>
    </View>
  );
};

export default Dashboard;