import { IconUserCircle, IconSearch, IconUsers, IconCheck } from '@tabler/icons-react';
import React, { useState, useRef, useEffect, Fragment } from 'react';
import { Popover, Avatar, Button, ScrollArea, Text, Tooltip, TextInput } from '@mantine/core';
import { useHotkeys } from '@mantine/hooks';
import { useDispatch, useSelector } from 'react-redux';
import { editTask, setEditableTask } from "../../../../Settings/store/taskSlice";
import { hasPermission, useProjectPermissions } from "../../../../ui/permissions";
import acronym from "../../../../ui/acronym";
import useTwColorByName from "../../../../ui/useTwColorByName";
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 = ({ taskId, assigned, view, assignedMember = {}, disabled, createdBy_id, assignedTo_id }) => {
    const dispatch = useDispatch();

    const { projectInfo, boardMembers } = useSelector((state) => state.settings.task);
    const projectPermissions = useProjectPermissions(projectInfo?.id);
    const [showMembersList, setShowMembersList] = useState(false);
    const [members, setMembers] = useState(boardMembers ? boardMembers : []);
    const { loggedUserId } = useSelector((state) => state.auth.user)
    const { loggedInUser } = useSelector((state) => state.auth.session)

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

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

    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)); // Sort alphabetically by name
            setFilteredMembers(filtered);
        } else {
            setFilteredMembers([]);
        }
    }, [members, searchValue]);

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

    useEffect(() => {
        setMembers(boardMembers || []);
    }, [boardMembers]);

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

        document.addEventListener('mousedown', handleClickOutside);

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

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

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

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

        // Optimistically update the UI
        setMembers((prevMembers) =>
            prevMembers.map((m) => {
                if (m.id === member.id) {
                    return { ...m, assigned: !isRemoving }; // Toggle assigned status
                } else if (selectedMember && m.id === selectedMember.id) {
                    return { ...m, assigned: false }; // Unassign previously selected member
                } else {
                    return m;
                }
            })
        );

        if (typeof assignedMember === 'function') {
            assignedMember(memberToAssign);
        }
        setSelectedMember(memberToAssign);
        setShowMembersList(false);

        if (taskId && taskId !== 'undefined') {
            dispatch(editTask({ id: taskId, data: { assigned_to: memberToAssign || '', updated_by: loggedInUser ? loggedInUser.loggedUserId : loggedUserId } }))
                .unwrap()
                .then((response) => {
                    if (response.status === 200) {
                        showNotification({
                            color: 'green',
                            title: translate('Success'),
                            message: memberToAssign
                                ? translate('Assignee updated successfully.')
                                : translate('Assignee removed successfully.'),
                            icon: <IconCheck size={16} />,
                            autoClose: 3000,
                        });
                    } else {
                        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) => {
                    // API call failed, revert the UI to the previous state
                    setMembers(previousMembers);
                    setSelectedMember(previousSelectedMember);

                    // Show an error message to the user
                    showNotification({
                        id: 'load-data',
                        loading: true,
                        title: 'Task',
                        message: "Failed to assign the task. Please try again.",
                        autoClose: 2000,
                        disallowClose: true,
                        color: 'red',
                    });
                });
        }
    };

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

    const bgColor = useTwColorByName();

    // Check permission — creator/assignee bypass
    const isCreatorOrAssignee = (createdBy_id != null && createdBy_id == loggedUserId) ||
        (assignedTo_id != null && assignedTo_id == loggedUserId);
    const hasAccess = isCreatorOrAssignee || hasPermission(
        loggedInUser,
        ['manage-tasks-by-others'],
        projectPermissions, 'project'
    );
    const isDisabled = disabled || !hasAccess;

    return (
        <Popover
            opened={showMembersList}
            onClose={() => setShowMembersList(false)}
            width={320}
            position="bottom"
            shadow={false}
            offset={6}
            closeOnEscape
            disabled={isDisabled}
        >
            <Popover.Target>
                <div onClick={isDisabled ? undefined : handleAssignedToButtonClick} className={`assignto-btn w-full flex ${selectedMember ? (view !== 'cardView' && view !== 'ganttView' ? 'justify-end' : 'justify-start') : 'justify-end border-transparent'}`}>
                    {selectedMember ? (
                        <div className={`flex items-center gap-2 transition-opacity ${isDisabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer hover:opacity-80'}`}>
                            {view !== "cardView" && view !== "ganttView" && (
                                <Tooltip withinPortal={true} zIndex={10000} label={hasAccess ? selectedMember.name : `${translate('Assign to')}: ${translate('Only the task creator or assignee can perform this action')}`} position="top" withArrow>
                                    <Text size="xs" fw={500} c="dimmed" className="ml-1" style={{ whiteSpace: 'nowrap' }}>
                                        {selectedMember.name.length > 10 ? selectedMember.name.slice(0, 10) + '...' : selectedMember.name}
                                    </Text>
                                </Tooltip>
                            )}
                            <Tooltip withinPortal={true} zIndex={10000} label={hasAccess ? selectedMember.name : `${translate('Assign to')}: ${translate('Only the task creator or assignee can perform this action')}`} position="top" withArrow>
                                <Avatar
                                    color={`${bgColor(selectedMember.name)["font-color"]}`}
                                    bg={`${bgColor(selectedMember.name)["bg-color"]}`}
                                    size={30}
                                    radius={30}
                                    src={selectedMember.avatar || null}
                                >
                                    {!selectedMember.avatar && (
                                        <Text style={{ lineHeight: "14px" }} size="xs">
                                            {acronym(selectedMember.name)}
                                        </Text>
                                    )}
                                </Avatar>
                            </Tooltip>
                        </div>
                    ) : (
                        <div className="flex items-center">
                            <Tooltip withinPortal={true} zIndex={10000} label={hasAccess ? translate('Assign to') : `${translate('Assign to')}: ${translate('Only the task creator or assignee can perform this action')}`} position="top" withArrow>
                                <div className={`flex items-center justify-center h-[28px] w-[28px] border border-dashed border-gray-300 rounded-full transition-colors bg-white ${isDisabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer hover:bg-gray-50'}`}>
                                    <IconUserCircle color="#9CA3AF" size={18} stroke={1.5} />
                                </div>
                            </Tooltip>
                        </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', filteredMembers?.length || 0)}
                            </Text>
                        </div>
                    )}
                    <ScrollArea.Autosize mah={220} scrollbarSize={4}>
                        <div style={{ padding: '0 8px 8px' }}>
                            {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?.id === member.id ? translate('Remove') : translate('Assign')}
                                    </Button>
                                </div>
                            ))}
                        </div>
                    </ScrollArea.Autosize>
                </div>
            </Popover.Dropdown>
        </Popover>
    );
};

export default TaskAssignTo;