import { useRouter } from "expo-router";
import { View } from "react-native";
import { Avatar, DataTable, Text, Chip } from "react-native-paper";

import { TableSortDirection } from "@/constants/tableSortDirectionEnum";
import { AdminTableHeader } from "@/components/features/admins/AdminTableHeader";
import { AdminActions } from "@/components/features/admins/AdminActions";
import { User } from "@/store/models/User.model";
import { RoleEnum } from "@/constants/roleEnum";
import { getInitials } from "@/utils/userUtils";
import { useAuthContext } from "@/auth/AuthContext";

interface DesktopAdminAccountsTableProps {
  admins: User[];
  sortColumn: string | null;
  sortDirection: TableSortDirection;
  onSort: (column: string) => void;
  onEdit: (admin: User) => void;
  onDelete: (admin: User) => void;
  onResend: (admin: User) => void;
  isResending?: boolean;
}

export const DesktopAdminAccountsTable = ({
  admins,
  sortColumn,
  sortDirection,
  onSort,
  onEdit,
  onDelete,
  onResend,
  isResending,
}: DesktopAdminAccountsTableProps) => {
  const { user } = useAuthContext();
  const router = useRouter();

  const openDetails = (admin: User) => {
    router.push({
      pathname: "/accounts/admins/[id]",
      params: { id: admin.id },
    });
  };

  return (
    <DataTable>
      <AdminTableHeader
        sortColumn={sortColumn}
        sortDirection={sortDirection}
        onSort={onSort}
      />

      {admins.map((admin) => (
        <DataTable.Row key={admin.id}>
          <DataTable.Cell>
            <View className="flex-row items-center flex-shrink pr-2">
              {admin.imageUrl ? (
                <Avatar.Image
                  source={{
                    uri: admin.imageUrl,
                  }}
                  size={28}
                  style={{ marginRight: 10 }}
                />
              ) : (
                <Avatar.Text
                  label={getInitials(admin.firstName, admin.lastName)}
                  size={28}
                  style={{ marginRight: 10 }}
                />
              )}
              <View className="flex-row items-center flex-shrink px-1 py-1">
                <Text
                  onPress={() => openDetails(admin)}
                  numberOfLines={10}
                  className="flex-shrink"
                >
                  {admin.firstName} {admin.lastName}
                </Text>
                {admin.managerId === user?.id ? (
                  <View className="mb-3 w-1 h-1 rounded-full bg-primaryPurple ml-1" />
                ) : null}
                {!admin.isActivated && (
                  <Chip
                    compact
                    mode="flat"
                    style={{ marginLeft: 8 }}
                    textStyle={{ fontSize: 12 }}
                  >
                    Invited
                  </Chip>
                )}
              </View>
            </View>
          </DataTable.Cell>
          <DataTable.Cell>
            <View className="flex-row items-center flex-shrink pr-2">
              <Text numberOfLines={2}>{admin.email}</Text>
            </View>
          </DataTable.Cell>
          <DataTable.Cell
            style={{
              justifyContent: "center",
            }}
          >
            <View className="flex-row items-center flex-shrink">
              <Text numberOfLines={2}>
                {admin.role === RoleEnum.ADMIN ? "Admin" : "Manager"}
              </Text>
            </View>
          </DataTable.Cell>
          <DataTable.Cell style={{ justifyContent: "center" }}>
            <AdminActions
              admin={admin}
              onView={openDetails}
              onEdit={onEdit}
              onDelete={onDelete}
              onResend={onResend}
              isResending={isResending}
            />
          </DataTable.Cell>
        </DataTable.Row>
      ))}
    </DataTable>
  );
};