import { IconUserCircle, IconSearch, IconUsers, IconCheck } from '@tabler/icons-react';
import React, { useState, useRef, useEffect, Fragment } from 'react';
import { Popover, Avatar, Button, ScrollArea, Text, TextInput } from '@mantine/core';
import { useHotkeys } from '@mantine/hooks';
import { useDispatch, useSelector } from 'react-redux';
import { editMyTask } from "../../Settings/store/myTaskSlice";
import { hasPermission } 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 TaskAssignTo = ({ task, assigned }) => {
    const dispatch = useDispatch();

    const [showMembersList, setShowMembersList] = useState(false);
    const { loggedUserId } = useSelector((state) => state.auth.user);
    const { loggedInUser } = useSelector((state) => state.auth.session);

    const [members, setMembers] = useState(task && task.project && task.project.members ? task.project.members : []);
    const [searchValue, setSearchValue] = useState('');
    const [filteredMembers, setFilteredMembers] = useState([]);
    const projectPermissions = task && task.project && task.project.permissions ? task.project.permissions.permissions : [];

    const [selectedMember, setSelectedMember] = useState((assigned && assigned.id) ? assigned : null);
    const membersListRef = useRef(null);
    const searchInputRef = useRef(null);

    useEffect(() => {
        setSelectedMember(assigned && assigned.id ? assigned : null);
    }, [assigned]);

    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 (members && members.length > 0) {
            const filtered = members.filter(
                (member) =>
                    member.name.toLowerCase().includes(searchValue.toLowerCase()) ||
                    member.email.toLowerCase().includes(searchValue.toLowerCase())
            )
                .sort((a, b) => a.name.localeCompare(b.name));
            setFilteredMembers(filtered);
        } else {
            setFilteredMembers([]);
        }
    }, [members, searchValue]);

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

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

    const handleAssignButtonClick = (member) => {
        const previousMembers = [...members];
        const previousSelectedMember = selectedMember;
        const isRemoving = selectedMember && selectedMember.id === member.id;
        const memberToAssign = isRemoving ? null : member;

        setSelectedMember(memberToAssign);
        setShowMembersList(false);
        if (task && task.id && task.id !== 'undefined') {
            dispatch(editMyTask({ id: task.id, data: { assigned_to: memberToAssign || '', 'updated_by': loggedInUser ? loggedInUser.loggedUserId : loggedUserId } }))
                .unwrap()
                .then((response) => {
                    if (response && response.status === 200) {
                        showNotification({
                            color: 'green',
                            title: 'Success',
                            message: memberToAssign
                                ? 'Assignee updated successfully.'
                                : 'Assignee removed successfully.',
                            icon: <IconCheck size={16} />,
                            autoClose: 3000,
                        });
                    } else if (response) {
                        // Revert state changes
                        setMembers(previousMembers);
                        setSelectedMember(previousSelectedMember);
                        showNotification({
                            id: 'load-data',
                            title: 'Task Assign Update Failed',
                            message: 'Failed to assign the task. Please try again.',
                            autoClose: 3000,
                            color: 'red',
                        });
                    }
                })
                .catch((error) => {
                    // Revert state changes
                    setMembers(previousMembers);
                    setSelectedMember(previousSelectedMember);
                    // Show an error message to the user
                    showNotification({
                        id: 'load-data',
                        title: 'Task Assign Update Failed',
                        message: 'Failed to assign the task. Please try again.',
                        autoClose: 3000,
                        color: 'red',
                    });
                });
        }
    };

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

    // Check permission — creator/assignee can always change assignee
    const isCreatorOrAssignee = task && (task.createdBy_id == loggedInUser?.loggedUserId || task.assignedTo_id == loggedInUser?.loggedUserId);
    const hasAccess = isCreatorOrAssignee || hasPermission(
        loggedInUser,
        ['manage-tasks-by-others'],
        projectPermissions, 'project'
    );

    return (
        <Popover
            opened={showMembersList && hasAccess}
            onClose={() => setShowMembersList(false)}
            width={320}
            position="bottom"
            shadow={false}
            offset={6}
        >
            <Popover.Target>
                <div onClick={handleAssignedToButtonClick} className="assignto-btn">
                    {selectedMember ? (
                        <div className="flex items-center gap-2">
                            {/*<Avatar src={selectedMember.avatar} size={32} radius="xl" />*/}
                            <UserAvatarSingle user={selectedMember} size={32} />
                            <Text title={selectedMember.name} lineClamp={1} size="sm" fw={600} c="#4d4d4d" className="ml-2">
                                {selectedMember.name}
                            </Text>
                        </div>
                    ) : (
                        <div className="flex items-center justify-center">
                            <div className="h-[32px] w-[32px] border border-dashed border-[#4d4d4d] rounded-full p-1 cursor-pointer">
                                <IconUserCircle color="#4d4d4d" size="22" />
                            </div>
                        </div>
                    )}
                </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('Assign to')}
                    </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', task && task.project && filteredMembers ? 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={selectedMember?.id === member.id ? 'red' : '#39758D'}
                                        onClick={() => handleAssignButtonClick(member)}
                                    >
                                        {selectedMember && selectedMember.id === member.id ? translate('Remove') : translate('Assign')}
                                    </Button>
                                </div>
                            ))}
                        </div>
                    </ScrollArea.Autosize>
                </div>
            </Popover.Dropdown>
        </Popover>
    );
};

export default TaskAssignTo;