import { useState } from "react";
import { View, Text, FlatList } from "react-native";
import { Dialog, IconButton } from "react-native-paper";

import { DialogContainer } from "@/components/ui/DialogContainer";
import { Button } from "@/components/ui/Button";
import { LoadingSpinner } from "@/components/ui/LoadingSpinner";
import { User } from "@/store/models/User.model";

interface BulkDeleteUserModalProps {
  visible: boolean;
  users: User[];
  onDismiss: () => void;
  onDelete: (userIds: string[]) => void;
  isLoading?: boolean;
}

export const BulkDeleteUserModal = ({
  visible,
  users,
  onDismiss,
  onDelete,
  isLoading = false,
}: BulkDeleteUserModalProps) => {
  const [error, setError] = useState<string | null>(null);

  if (!users || users.length === 0) return null;

  const handleDelete = () => {
    try {
      setError(null);
      const userIds = users.map((user) => user.id);
      onDelete(userIds);
    } catch (err) {
      setError("Failed to delete users. Please try again.");
      console.error("Error in BulkDeleteModal:", err);
    }
  };

  return (
    <DialogContainer visible={visible} onDismiss={onDismiss}>
      <Dialog.Title>
        <View className="w-full flex-row items-center justify-between">
          <View className="flex-1">
            <Text className="pr-3">
              {users.length === 1 ? "Delete User" : "Bulk Delete Users"}
            </Text>
          </View>

          <View style={{ alignSelf: "flex-start" }}>
            <IconButton
              icon="close"
              size={20}
              onPress={onDismiss}
              disabled={isLoading}
              accessibilityLabel="Close dialog"
              style={{ margin: 0 }}
            />
          </View>
        </View>
      </Dialog.Title>
      <Dialog.Content>
        <Text className="mb-2">
          {users.length === 1
            ? `Are you sure you want to delete ${users[0].firstName} ${users[0].lastName}?`
            : `Are you sure you want to delete ${users.length} users?`}
        </Text>

        {users.length > 1 && (
          <View className="max-h-40 mb-2">
            <FlatList
              data={users}
              keyExtractor={(item) => item.id}
              renderItem={({ item }) => (
                <Text className="text-sm py-1">
                  {item.firstName} {item.lastName}
                </Text>
              )}
            />
          </View>
        )}

        {error && <Text className="text-highRisk mt-2">{error}</Text>}
      </Dialog.Content>
      <Dialog.Actions>
        <Button className="!ml-2" onPress={handleDelete} disabled={isLoading}>
          {users.length === 1 ? "Delete" : "Delete All"}
        </Button>
      </Dialog.Actions>
      {isLoading && (
        <View
          className="absolute inset-0 bg-gray-500/30 flex items-center justify-center"
          pointerEvents="auto"
          style={{ zIndex: 1000, top: 0, right: 0, bottom: 0, left: 0 }}
        >
          <LoadingSpinner size={16} />
        </View>
      )}
    </DialogContainer>
  );
};