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

import { User } from "@/store/models/User.model";
import { RoleEnum } from "@/constants/roleEnum";

interface MobileAdminAccountsTableProps {
  admins: User[];
  onEdit: (admin: User) => void;
  onDelete: (admin: User) => void;
  onResend?: (admin: User) => void;
  isResending?: boolean;
}

export const MobileAdminAccountsTable = ({
  admins,
  onEdit,
  onDelete,
  onResend,
  isResending,
}: MobileAdminAccountsTableProps) => {
  const router = useRouter();

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

  return (
    <View className="flex-1">
      <ScrollView
        className="flex-1"
        contentContainerStyle={{ paddingBottom: 16 }}
      >
        {admins.map((admin) => (
          <View
            key={admin.id}
            className="mb-3 p-4 bg-white rounded-md shadow-sm"
          >
            <View className="flex-row justify-between items-center mb-3">
              <View className="flex-row items-center flex-1">
                <Avatar.Image
                  source={{
                    uri: admin.imageUrl,
                  }}
                  size={28}
                  style={{ marginRight: 10, marginLeft: 10 }}
                />
                <View className="flex-row items-center flex-1">
                  <Text
                    className="font-bold ml-2"
                    numberOfLines={1}
                    ellipsizeMode="tail"
                    onPress={() => openDetails(admin)}
                  >
                    {admin.firstName} {admin.lastName}
                  </Text>
                  {admin.managerId ? (
                    <View className="w-1.5 h-1.5 rounded-full bg-blue-500 ml-2" />
                  ) : null}
                </View>
              </View>
            </View>
            <Text
              className="text-sm mb-1"
              numberOfLines={1}
              ellipsizeMode="tail"
            >
              {admin.email}
            </Text>
            <Text className="text-sm mb-1 text-gray-600">
              {admin.role === RoleEnum.ADMIN ? "Admin" : "Manager"}
            </Text>
            {!admin.isActivated && (
              <Chip compact mode="flat" textStyle={{ fontSize: 12 }}>
                Invited
              </Chip>
            )}
            <View className="flex-row justify-end border-t border-gray-200 pt-3">
              <IconButton
                icon="eye-outline"
                size={20}
                onPress={() => openDetails(admin)}
              />
              {!admin.isActivated && (
                <IconButton
                  icon="email-send-outline"
                  size={20}
                  disabled={Boolean(isResending)}
                  onPress={() => onResend?.(admin)}
                />
              )}
              <IconButton
                icon="pencil-outline"
                size={20}
                onPress={() => {
                  onEdit(admin);
                }}
              />
              <IconButton
                icon="delete-outline"
                size={20}
                onPress={() => {
                  onDelete(admin);
                }}
              />
            </View>
          </View>
        ))}
      </ScrollView>
    </View>
  );
};