"use client";

import { useState, useMemo, useCallback, useEffect } from "react";
import { Check, ChevronDown, Loader2, X, Users } from "lucide-react";
import { useUsersInfinite } from "@/hooks/use-users";
import { UserModel } from "@/utils/types/User";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import {
    Popover,
    PopoverContent,
    PopoverTrigger,
} from "@/components/ui/popover";
import {
    Command,
    CommandEmpty,
    CommandGroup,
    CommandItem,
    CommandList,
} from "@/components/ui/command";

interface UsersSelectProps {
    value?: number[];
    onChange?: (userIds: number[]) => void;
    placeholder?: string;
    disabled?: boolean;
    className?: string;
    maxDisplayItems?: number;
}

export default function UsersSelect({
    value = [],
    onChange,
    placeholder = "Select users...",
    disabled = false,
    className,
    maxDisplayItems = 3,
}: UsersSelectProps) {
    const [open, setOpen] = useState(false);
    const [selectedIds, setSelectedIds] = useState<number[]>(value);

    const {
        data,
        fetchNextPage,
        hasNextPage,
        isFetchingNextPage,
        isLoading,
        isError,
    } = useUsersInfinite();
    const users = useMemo(() => {
        if (!data?.pages) return [];
        const allUsers = data.pages.flatMap((page) => {
            return page.items || [];
        });

        return allUsers;
    }, [data?.pages]);

    const getUserDisplayName = (user: UserModel | null) => {
        const name = [user?.first_name, user?.last_name].filter(Boolean).join(" ");
        return name || "Unknown User";
    };
      


    const selectedUsers = useMemo(() => {
        return users.filter((user) => selectedIds.includes(user.id));
    }, [users, selectedIds]);

    useEffect(() => {
        setSelectedIds(value);
    }, [value]);

    const handleSelect = useCallback(
        (userId: number) => {
            const newSelectedIds = selectedIds.includes(userId)
                ? selectedIds.filter((id) => id !== userId)
                : [...selectedIds, userId];

            setSelectedIds(newSelectedIds);
            onChange?.(newSelectedIds);
        },
        [selectedIds, onChange]
    );
    const handleRemove = useCallback(
        (userId: number, e: React.MouseEvent) => {
            e.stopPropagation();
            const newSelectedIds = selectedIds.filter((id) => id !== userId);
            setSelectedIds(newSelectedIds);
            onChange?.(newSelectedIds);
        },
        [selectedIds, onChange]
    );
    const handleClearAll = useCallback(
        (e: React.MouseEvent) => {
            e.stopPropagation();
            setSelectedIds([]);
            onChange?.([]);
        },
        [onChange]
    );
    const handleLoadMore = useCallback(() => {
        if (hasNextPage && !isFetchingNextPage) {
            fetchNextPage();
        }
    }, [hasNextPage, isFetchingNextPage, fetchNextPage]);

    const renderTriggerContent = () => {
        if (selectedIds.length === 0) {
            return (
                <span className="flex items-center gap-2 text-muted-foreground">
                    <Users className="h-4 w-4" />
                    {placeholder}
                </span>
            );
        }

        const displayUsers = selectedUsers.slice(0, maxDisplayItems);
        const remainingCount = selectedUsers.length - maxDisplayItems;

        return (
            <div className="flex flex-wrap items-center gap-1.5 py-0.5">
                {displayUsers.map((user) => (
                    <Badge
                        key={user.id}
                        variant="secondary"
                        size="sm"
                        className="flex items-center gap-1 pr-1"
                    >
                        <span className="max-w-[100px] truncate">{getUserDisplayName(user)}</span>
                        <button
                            type="button"
                            className="ml-1 rounded-full p-0.5 hover:bg-muted-foreground/20 transition-colors"
                            onClick={(e) => handleRemove(user.id, e)}
                            aria-label={`Remove ${getUserDisplayName(user)}`}
                        >
                            <X className="h-3 w-3" />
                        </button>
                    </Badge>
                ))}
                {remainingCount > 0 && (
                    <Badge variant="secondary" size="sm" className="shrink-0">
                        +{remainingCount} more
                    </Badge>
                )}
            </div>
        );
    };

    return (
        <Popover open={open} onOpenChange={setOpen}>
            <PopoverTrigger asChild>
                <Button
                    variant="outline"
                    mode="input"
                    size="md"
                    autoHeight
                    disabled={disabled}
                    className={cn(
                        "w-full min-h-[38px] justify-between",
                        selectedIds.length > 0 && "h-auto",
                        className
                    )}
                    aria-expanded={open}
                    aria-haspopup="listbox"
                    aria-label="Select users"
                >
                    <div className="flex-1 text-left">{renderTriggerContent()}</div>
                    <div className="flex items-center gap-1 shrink-0 ml-2">
                        {selectedIds.length > 0 && (
                            <button
                                type="button"
                                className="p-0.5 rounded-full hover:bg-muted transition-colors"
                                onClick={handleClearAll}
                                aria-label="Clear all selections"
                            >
                                <X className="h-4 w-4 text-muted-foreground" />
                            </button>
                        )}
                        <ChevronDown className="h-4 w-4 text-muted-foreground" />
                    </div>
                </Button>
            </PopoverTrigger>

            <PopoverContent
                className="w-(--radix-popover-trigger-width) p-0"
                align="start"
            >
                <Command shouldFilter={false}>

                    <CommandList className="max-h-[300px]">
                        {isLoading ? (
                            <div className="flex items-center justify-center py-6">
                                <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
                                <span className="ml-2 text-sm text-muted-foreground">
                                    Loading users...
                                </span>
                            </div>
                        ) : isError ? (
                            <div className="py-6 text-center">
                                <p className="text-sm text-destructive">
                                    Failed to load users
                                </p>
                                <Button
                                    variant="ghost"
                                    size="sm"
                                    className="mt-2"
                                    onClick={() => window.location.reload()}
                                >
                                    Retry
                                </Button>
                            </div>
                        ) : users.length === 0 ? (
                            <CommandEmpty>
                                No users available.
                            </CommandEmpty>
                        ) : (
                            <CommandGroup>
                                {users.map((user) => {
                                    const isSelected = selectedIds.includes(user.id);
                                    return (
                                        <CommandItem
                                            key={user.id}
                                            value={user.id.toString()}
                                            onSelect={() => handleSelect(user.id)}
                                            className="flex items-center justify-between cursor-pointer"
                                        >
                                            <div className="flex flex-col">
                                                <span className="font-medium">{getUserDisplayName(user)}</span>
                                                <div className="flex items-center gap-2 text-xs text-muted-foreground">
                                                    {user.email && (
                                                        <span>{user.email}</span>
                                                    )}
                                                    {user.brand_name && user.brand_name !== getUserDisplayName(user) && (
                                                        <>
                                                            <span>•</span>
                                                            <span>{user.brand_name}</span>
                                                        </>
                                                    )}
                                                </div>
                                            </div>
                                        </CommandItem>
                                    );
                                })}
                                {hasNextPage && (
                                    <div className="border-t border-border mt-1 pt-1">
                                        <button
                                            type="button"
                                            className={cn(
                                                "w-full flex items-center justify-center gap-2 py-2.5 px-3",
                                                "text-sm font-medium text-primary",
                                                "hover:bg-accent rounded-sm transition-colors",
                                                "disabled:opacity-50 disabled:cursor-not-allowed"
                                            )}
                                            onClick={handleLoadMore}
                                            disabled={isFetchingNextPage}
                                        >
                                            {isFetchingNextPage ? (
                                                <>
                                                    <Loader2 className="h-4 w-4 animate-spin" />
                                                    <span>Loading more...</span>
                                                </>
                                            ) : (
                                                <>
                                                    <ChevronDown className="h-4 w-4" />
                                                    <span>Load more users</span>
                                                </>
                                            )}
                                        </button>
                                    </div>
                                )}
                            </CommandGroup>
                        )}
                    </CommandList>
                    {selectedIds.length > 0 && (
                        <div className="border-t border-border p-2 flex items-center justify-between bg-muted/30">
                            <span className="text-xs text-muted-foreground">
                                {selectedIds.length} user{selectedIds.length !== 1 ? "s" : ""}{" "}
                                selected
                            </span>
                            <Button
                                variant="ghost"
                                size="sm"
                                className="h-6 text-xs"
                                onClick={handleClearAll}
                            >
                                Clear all
                            </Button>
                        </div>
                    )}
                </Command>
            </PopoverContent>
        </Popover>
    );
}