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

import { User } from "@/store/models/User.model";
import { SizeEnum } from "@/constants/sizeEnum";
import { RiskIndicator } from "@/components/ui/RiskIndicator";

interface MobileUserAccountsTableProps {
  users: User[];
  selectedUsers: string[];
  onSelectUser: (userId: string) => void;
  onEdit: (user: User) => void;
  onLock: (user: User) => void;
  onDelete: (user: User) => void;
}

export const MobileUserAccountsTable = ({
  users,
  selectedUsers,
  onSelectUser,
  onEdit,
  onLock,
  onDelete,
}: MobileUserAccountsTableProps) => {
  const openDetails = (user: User) => {
    router.push(`/accounts/users/${user.id}`);
  };

  return (
    <View className="flex-1">
      <ScrollView
        className="flex-1"
        contentContainerStyle={{ paddingBottom: 16 }}
      >
        {users.map((user) => (
          <View
            key={user.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 min-w-0">
                <View>
                  <Checkbox
                    status={
                      selectedUsers.includes(user.id) ? "checked" : "unchecked"
                    }
                    onPress={() => onSelectUser(user.id)}
                  />
                </View>
                {user.imageUrl ? (
                  <Avatar.Image
                    source={{ uri: user.imageUrl }}
                    size={28}
                    style={{ marginRight: 10, marginLeft: 10 }}
                  />
                ) : (
                  <Avatar.Text
                    size={28}
                    label={`${user.firstName.charAt(0)}${user.lastName.charAt(
                      0
                    )}`}
                    style={{ marginRight: 10, marginLeft: 10 }}
                  />
                )}
                <View style={{ flex: 1, minWidth: 0 }}>
                  <View className="flex-row items-center">
                    <Text
                      className="font-medium"
                      numberOfLines={0}
                      style={{ flexShrink: 1, overflow: "visible" }}
                      onPress={() => openDetails(user)}
                    >
                      {user.firstName} {user.lastName}
                    </Text>
                  </View>
                </View>
              </View>
              <View className="ml-2">
                <RiskIndicator risk={user.riskStatus} size={SizeEnum.Small} />
              </View>
            </View>
            <Text
              className="text-sm mb-1"
              numberOfLines={1}
              ellipsizeMode="tail"
            >
              {user.email}
            </Text>
            <Text className="text-sm mb-3 text-gray-600">{user.title}</Text>

            <View className="flex-row justify-end border-t border-gray-200 pt-3">
              <IconButton
                icon="eye-outline"
                size={20}
                onPress={() => openDetails(user)}
              />
              <IconButton
                icon="pencil-outline"
                size={20}
                onPress={() => {
                  onEdit(user);
                }}
              />
              <IconButton
                icon="lock-outline"
                size={20}
                onPress={() => {
                  onLock(user);
                }}
              />
              <IconButton
                icon="delete-outline"
                size={20}
                onPress={() => {
                  onDelete(user);
                }}
              />
            </View>
          </View>
        ))}
      </ScrollView>
    </View>
  );
};