import { IconUsers, IconSearch } from '@tabler/icons-react';
import React, { useState, useRef, useEffect } from 'react';
import { Popover, ScrollArea, Text, TextInput, Tooltip, Button } from '@mantine/core';
import { useHotkeys } from '@mantine/hooks';
import { useDispatch, useSelector } from 'react-redux';
import UsersAvatarGroup from "../../../../ui/UsersAvatarGroup";
import { editTask } from "../../../../Settings/store/taskSlice";
import { hasPermission, useProjectPermissions } from "../../../../ui/permissions";
import UserAvatarSingle from "../../../../ui/UserAvatarSingle";
import { translate } from '../../../../../utils/i18n';
import { showNotification } from '@mantine/notifications';

const T = {
    white:    '#FFFFFF',
    border:   '#E2E8F0',
    text:     '#1A202C',
    muted:    '#64748B',
    teal:     '#39758D',
    tealLt:   '#EBF1F4',
    radius:   '12px',
    radiusSm: '6px',
};

const TaskFollower = ({ taskId, followers, editHandler = [], disabled }) => {
    const dispatch = useDispatch();
    const { projectInfo, boardMembers } = useSelector((state) => state.settings.task);
    const projectPermissions = useProjectPermissions(projectInfo?.id);
    const [showMembersList, setShowMembersList] = useState(false);
    const [selectedMembers, setSelectedMembers] = useState(followers || []);
    const membersListRef = useRef(null);
    const searchInputRef = useRef(null);
    const { loggedUserId } = useSelector((state) => state.auth.user)
    const { loggedInUser } = useSelector((state) => state.auth.session)

    const [searchValue, setSearchValue] = useState('');
    const [filteredMembers, setFilteredMembers] = useState([]);

    // console.log(followers); 
    useEffect(() => {
        const handleClickOutside = (event) => {
            if (membersListRef.current && !membersListRef.current.contains(event.target)) {
                setShowMembersList(false);
            }
        };

        document.addEventListener('mousedown', handleClickOutside);

        return () => {
            document.removeEventListener('mousedown', handleClickOutside);
        };
    }, [membersListRef]);

    useEffect(() => {
        if (boardMembers && boardMembers.length > 0) {
            const filtered = boardMembers.filter(
                (member) =>
                    member.name.toLowerCase().includes(searchValue.toLowerCase()) ||
                    member.email.toLowerCase().includes(searchValue.toLowerCase())
            )
                .sort((a, b) => a.name.localeCompare(b.name)); // Sort alphabetically by name
            setFilteredMembers(filtered);
        } else {
            setFilteredMembers([]);
        }
    }, [boardMembers, searchValue]);

    const handleAssignedToButtonClick = () => {
        setShowMembersList(true);
        setTimeout(() => {
            searchInputRef.current?.focus();
        }, 100);
    };

    const handleAssignButtonClick = (member) => {
        const previousMembers = [...selectedMembers];
        // Toggle between assigning and removing a member
        var updatedMembers = [];
        const index = selectedMembers.findIndex((selectedMember) => parseInt(selectedMember.id) === parseInt(member.id));
        if (index === -1) {
            const assignAfterMembers = [...selectedMembers, member];
            updatedMembers = assignAfterMembers;

            setSelectedMembers(assignAfterMembers);
        } else {
            const deletedAfterMembers = selectedMembers.filter((selectedMember) => parseInt(selectedMember.id) !== parseInt(member.id));
            updatedMembers = deletedAfterMembers;

            setSelectedMembers(deletedAfterMembers);
        }
        editHandler(updatedMembers);
        if (taskId && taskId !== 'undefined' && updatedMembers) {
            dispatch(editTask({ id: taskId, data: { members: updatedMembers, 'updated_by': loggedInUser ? loggedInUser.loggedUserId : loggedUserId } }))
                .unwrap()
                .then((response) => {
                    if (response && response.status != 200) {
                        setSelectedMembers(previousMembers);
                        // Show an error message to the user
                        showNotification({
                            id: 'load-data',
                            title: 'Follow Update Failed',
                            message: 'Failed to update followers. Please try again.',
                            autoClose: 3000,
                            color: 'red',
                        });
                    }
                })
                .catch((error) => {
                    // Revert to previous members on error
                    setSelectedMembers(previousMembers);
                    // Show an error message to the user
                    showNotification({
                        id: 'load-data',
                        title: 'Follow Update Failed',
                        message: 'Failed to update followers. Please try again.',
                        autoClose: 3000,
                        color: 'red',
                    });
                });
        }
    };

    const handleSearchInputChange = (e) => {
        const inputValue = e.target.value;
        setSearchValue(inputValue);
    };

    useEffect(() => {
        setSelectedMembers(followers && followers.length > 0 ? followers : []);
    }, [followers]);

    useHotkeys([
        ['Escape', () => setShowMembersList(false)]
    ]);

    // Following is free for all project members — no permission check needed
    const isDisabled = disabled;


    // const handleRemoveButtonClick = (selectedMember) => {
    //     setSelectedMembers(selectedMembers.filter((member) => member.id !== selectedMember.id));
    // };


    const remainingMembersTooltip = selectedMembers.slice(4).map((member) => member.name).join(', ');

    return (
        <>
            <Popover
                opened={showMembersList && !isDisabled}
                onClose={() => setShowMembersList(false)}
                width={320}
                position="bottom"
                shadow={false}
                offset={6}
                closeOnEscape
                disabled={isDisabled}
            >
                <Popover.Target>
                    <div className="assignto-btn">

                        {selectedMembers && selectedMembers.length > 0 ? (
                            // Always show avatars normally — users can see & hover for names even without permission
                            <div
                                onClick={isDisabled ? undefined : handleAssignedToButtonClick}
                                className={`h-[30px] w-[30px] flex-inline items-center mt-[-5px] ${isDisabled ? 'cursor-default' : 'cursor-pointer'}`}
                            >
                                <UsersAvatarGroup users={selectedMembers} size={36} maxCount={3} />
                            </div>
                        ) : (
                            // No followers yet — grey out the add icon when no permission
                            <Tooltip label={translate('Follow')} position="top" withArrow>
                                <div
                                    onClick={isDisabled ? undefined : handleAssignedToButtonClick}
                                    className={`flex items-center justify-center h-[28px] w-[28px] border border-dashed border-gray-300 rounded-full bg-white transition-colors ${isDisabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer hover:bg-gray-50'}`}
                                >
                                    <IconUsers color="#9CA3AF" size={18} stroke={1.5} />
                                </div>
                            </Tooltip>
                        )}
                    </div>
                </Popover.Target>

                <Popover.Dropdown style={{
                    padding: 0,
                    border: `1px solid ${T.border}`,
                    borderRadius: T.radius,
                    boxShadow: '0 8px 32px rgba(0,0,0,.12)',
                    overflow: 'hidden',
                }}>
                    <div style={{ padding: '10px 14px 8px', borderBottom: `1px solid ${T.border}` }}>
                        <span style={{ fontSize: '12px', fontWeight: 700, color: T.text, display: 'flex', alignItems: 'center', gap: '6px' }}>
                            <IconUsers size={13} stroke={1.5} color={T.teal} />
                            {translate('Followers')}
                        </span>
                    </div>
                    <div ref={membersListRef}>
                        <div style={{ padding: '10px 12px 6px' }}>
                            <TextInput
                                ref={searchInputRef}
                                leftSection={<IconSearch size={14} />}
                                placeholder={translate('Quick search member')}
                                value={searchValue}
                                onChange={handleSearchInputChange}
                                onKeyDown={(e) => {
                                    if (e.key === 'Escape') {
                                        setShowMembersList(false);
                                        e.stopPropagation();
                                    }
                                }}
                                styles={{
                                    input: {
                                        height: '30px',
                                        minHeight: '30px',
                                        fontSize: '12px',
                                        borderRadius: T.radiusSm,
                                        border: `1px solid ${T.border}`,
                                    }
                                }}
                            />
                        </div>
                        {filteredMembers?.length > 0 && (
                            <div style={{ padding: '2px 14px 6px' }}>
                                <Text size="xs" fw={600} style={{ color: T.muted }}>
                                    {translate('%d people available').replace('%d', filteredMembers?.length || 0)}
                                </Text>
                            </div>
                        )}
                        <ScrollArea.Autosize mah={220} scrollbarSize={4}>
                            <div style={{ padding: '0 8px 8px' }}>
                                {filteredMembers && filteredMembers.length > 0 && filteredMembers.map((member) => (
                                    <div key={member.id} className="flex items-center gap-2 px-2 py-[6px] rounded-lg hover:bg-[#EBF1F4] transition-colors">
                                        <UserAvatarSingle user={member} size={28} />
                                        <Text size="xs" fw={500} style={{ color: T.text, flex: 1 }} lineClamp={1}>{member.name}</Text>
                                        <Button
                                            size="compact-xs"
                                            radius="sm"
                                            variant="filled"
                                            color={selectedMembers.some((m) => parseInt(m.id) === parseInt(member.id)) ? 'red' : '#39758D'}
                                            onClick={() => handleAssignButtonClick(member)}
                                        >
                                            {selectedMembers.some((m) => parseInt(m.id) === parseInt(member.id)) ? translate('Remove') : translate('Follow')}
                                        </Button>
                                    </div>
                                ))}
                            </div>
                        </ScrollArea.Autosize>
                    </div>

                </Popover.Dropdown>


            </Popover>
        </>
    );
};

export default TaskFollower;