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

import { useGetUserByIdQuery } from "@/store/api/usersApi";
import { useAppSelector } from "@/store/hooks";
import { selectIsMobile } from "@/store/screen/screenSizeSlice";
import { LoadingSpinner } from "@/components/ui/LoadingSpinner";
import { NoData } from "@/components/ui/NoData";
import { AccountDetails } from "@/components/features/accounts/AccountDetails";

export const AdminDetailsPage = () => {
  const { id } = useLocalSearchParams<{ id: string }>();
  const isMobile = useAppSelector(selectIsMobile);

  const {
    data: user,
    isLoading,
    isFetching,
    error,
    refetch,
  } = useGetUserByIdQuery(id, { refetchOnMountOrArgChange: true });

  return (
    <View className={`flex-1 bg-primaryPurpleLight`}>
      <View className={`${isMobile ? "p-1" : "p-5"} flex-1`}>
        <Text
          className={`text-2xl font-bold ${
            isMobile ? "mb-1" : "mb-4"
          } text-white`}
        >
          {user?.firstName} {user?.lastName} details
        </Text>

        <ScrollView
          className="flex-1"
          contentContainerStyle={{ paddingBottom: 16 }}
        >
          <View
            className={`bg-lightGray rounded-lg ${
              isMobile ? "p-1" : "p-5"
            } flex-1`}
          >
            {isLoading ? (
              <View className="flex-1 justify-center items-center py-10">
                <LoadingSpinner />
              </View>
            ) : error || !user ? (
              <View className="flex-1 justify-center items-center py-10">
                <NoData
                  message="Admin not found"
                  onRetry={refetch}
                  isRetrying={isFetching}
                />
              </View>
            ) : (
              <AccountDetails user={user} isLoading={isLoading || isFetching} />
            )}
          </View>
        </ScrollView>
      </View>
    </View>
  );
};