import React from 'react';
import { Accordion, Tooltip, Avatar, Loader, Flex, Badge } from '@mantine/core';
import { IconRefresh } from '@tabler/icons-react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchTasksByMember } from '../../../../Settings/store/taskSlice';
import { Droppable, Draggable } from 'react-beautiful-dnd';
import TaskContent from '../Task/TaskContent';
import { translate } from '../../../../../utils/i18n';

const NO_ASSIGNED_KEY = 'no-assigned';

const TaskListMemberSectionItem = ({
    member,
    columns,
    projectInfo,
    provided,
    snapshot,
}) => {
    const dispatch = useDispatch();
    const { loggedUserId } = useSelector(state => state.auth.user);
    const { loggedInUser } = useSelector(state => state.auth.session);
    const { loadingMember } = useSelector(state => state.settings.task);

    // Column key = member.id.toString() or 'no-assigned' — matches fetchTasksByMember.fulfilled
    const memberKey = member.id === NO_ASSIGNED_KEY ? NO_ASSIGNED_KEY : String(member.id);
    const tasks = columns?.[memberKey] || [];
    const isLoading = loadingMember?.[memberKey] || false;

    const userId = loggedInUser ? loggedInUser.loggedUserId : loggedUserId;

    const handleRefresh = () => {
        if (projectInfo?.id) {
            dispatch(fetchTasksByMember({
                projectId: projectInfo.id,
                memberId: member.id === NO_ASSIGNED_KEY ? null : member.id,
                limit: 14,
                offset: 0,
                append: false,
                userId,
            }));
        }
    };

    return (
        <Accordion.Item
            value={memberKey}
            ref={provided.innerRef}
            className={`!border-solid !border-[#dddddd] !rounded-t-md accordion-item ${snapshot?.isDragging ? '!bg-[#EBF1F4] z-50' : '!bg-[#fcfcfc]'}`}
            {...provided.draggableProps}
            style={{ ...provided.draggableProps.style, boxShadow: 'none', transition: 'transform 0.1s ease' }}
        >
            {/* Sticky section header — matches default list section style */}
            <div
                className="flex items-center w-full border-b border-solid border-[#dddddd] !bg-[#EBF1F4]"
                style={{ position: 'sticky', top: 0, zIndex: 10, backgroundColor: '#EBF1F4', width: '100%' }}
            >
                <div className="flex w-full items-center font-bold py-1 pr-3 !pl-3 gap-5">
                    <Accordion.Control />
                    {/* Member avatar */}
                    {member.avatar && member.id !== NO_ASSIGNED_KEY && (
                        <Avatar
                            src={member.avatar}
                            size={22}
                            radius="xl"
                            className="flex-shrink-0"
                        />
                    )}
                    <span className="text-sm font-semibold text-[#333]">
                        {translate(member.name || 'Unassigned')}
                    </span>
                    <Badge size="sm" variant="light" color={member.id === NO_ASSIGNED_KEY ? 'gray' : '#39758D'} radius="sm">
                        {tasks.length}
                    </Badge>
                </div>
                <div className="flex gap-2 mr-2">
                    <Tooltip withinPortal={false} label={translate('Refresh')} position="top" withArrow>
                        <Avatar className="cursor-pointer" onClick={handleRefresh} size={26} color="#ED7D31" variant="light">
                            <IconRefresh className="hover:scale-110" size={16} />
                        </Avatar>
                    </Tooltip>
                </div>
            </div>

            <Accordion.Panel>
                {isLoading ? (
                    <Flex justify="center" align="center" py="sm">
                        <Loader type="dots" size={24} />
                    </Flex>
                ) : (
                    <Droppable droppableId={memberKey} type="MEMBER_TASK">
                        {(dropProvided, dropSnapshot) => (
                            <div
                                ref={dropProvided.innerRef}
                                {...dropProvided.droppableProps}
                                className={`w-full min-h-[40px] !px-[5px] ${dropSnapshot.isDraggingOver ? 'bg-blue-50' : ''}`}
                                style={{ transition: 'background-color 0.2s ease' }}
                            >
                                {tasks.length > 0 ? (
                                    tasks.map((task, index) => (
                                        task?.id && (
                                            <Draggable
                                                key={task.id}
                                                draggableId={`task-${task.id}`}
                                                index={index}
                                            >
                                                {(dragProvided, dragSnapshot) => (
                                                    <div
                                                        ref={dragProvided.innerRef}
                                                        {...dragProvided.draggableProps}
                                                        {...dragProvided.dragHandleProps}
                                                        className={`mb-0 mt-0 single-task ${dragSnapshot.isDragging ? 'z-50' : ''}`}
                                                        style={{
                                                            ...dragProvided.draggableProps.style,
                                                            backgroundColor: dragSnapshot.isDragging ? '#EBF1F4' : '#ffffff',
                                                            transition: 'all 0.1s ease-in-out',
                                                            cursor: dragSnapshot.isDragging ? 'grabbing' : 'grab',
                                                            opacity: dragSnapshot.isDragging ? 0.9 : 1,
                                                            transform: dragSnapshot.isDragging
                                                                ? `${dragProvided.draggableProps.style?.transform} rotate(-2deg) scale(1.02)`
                                                                : dragProvided.draggableProps.style?.transform,
                                                            boxShadow: dragSnapshot.isDragging ? '0 6px 12px rgba(0,0,0,0.15)' : 'none',
                                                            border: dragSnapshot.isDragging ? '1px solid #E5E5E5' : 'none',
                                                        }}
                                                    >
                                                        <TaskContent
                                                            view="listView"
                                                            taskSection={memberKey}
                                                            taskData={task}
                                                        />
                                                    </div>
                                                )}
                                            </Draggable>
                                        )
                                    ))
                                ) : (
                                    <div className="text-center text-gray-400 py-3 text-sm">
                                        {translate('No tasks assigned to this member')}
                                    </div>
                                )}
                                {dropProvided.placeholder}
                            </div>
                        )}
                    </Droppable>
                )}
            </Accordion.Panel>
        </Accordion.Item>
    );
};

export default TaskListMemberSectionItem;