import React, { useState, useEffect, Fragment } from 'react';
import { Accordion } from '@mantine/core';
import { IconCheck, IconChevronDown } from '@tabler/icons-react';
import { useSelector, useDispatch } from 'react-redux';
import {
    fetchTasksByMember,
    updateColumns,
    updateTaskAssignee,
} from '../../../../Settings/store/taskSlice';
import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
import TaskListMemberSectionItem from './TaskListMemberSectionItem';
import { notifications } from '@mantine/notifications';

const NO_ASSIGNED_KEY = 'no-assigned';

const TaskListSectionByMember = () => {
    const dispatch = useDispatch();
    const { loggedUserId } = useSelector(state => state.auth.user);
    const { loggedInUser } = useSelector(state => state.auth.session);
    const { projectInfo, boardMembers, columns, filterValues } = useSelector(state => state.settings.task);

    const userId = loggedInUser ? loggedInUser.loggedUserId : loggedUserId;
    const search = filterValues?.name || '';
    // Cross-dimension filters (excludes assigned_to — that's the groupBy dimension here)
    const filterParams = {
        section_id:         filterValues?.section_id         || null,
        priority_id:        filterValues?.priority_id        || null,
        internal_status_id: filterValues?.internal_status_id || null,
        date_type:          filterValues?.date_type          || null,
    };

    // Build the full list: project members + static "No Member Assigned"
    const membersWithNone = [
        ...(boardMembers || []),
        { id: NO_ASSIGNED_KEY, name: 'No Member Assigned', avatar: null },
    ];

    const [expandedItems, setExpandedItems] = useState([]);

    useEffect(() => {
        if (!projectInfo?.id || !boardMembers?.length) return;

        const allKeys = membersWithNone.map(m =>
            m.id === NO_ASSIGNED_KEY ? NO_ASSIGNED_KEY : String(m.id)
        );
        setExpandedItems(allKeys);

        membersWithNone.forEach(member => {
            dispatch(fetchTasksByMember({
                projectId: projectInfo.id,
                memberId: member.id === NO_ASSIGNED_KEY ? null : member.id,
                limit: 10,
                offset: 0,
                append: false,
                userId,
                search,
                filterValues: filterParams,
            }));
        });
    }, [projectInfo?.id, boardMembers?.length, search,
        filterParams.section_id, filterParams.priority_id,
        filterParams.internal_status_id, filterParams.date_type]);

    const onDragEnd = (result) => {
        if (!result.destination) return;
        const { source, destination } = result;

        if (source.droppableId === destination.droppableId && source.index === destination.index) return;

        const sourceKey = source.droppableId;
        const destKey = destination.droppableId;

        const sourceTasks = [...(columns?.[sourceKey] || [])];
        const [movedTask] = sourceTasks.splice(source.index, 1);
        if (!movedTask) return;

        if (sourceKey !== destKey) {
            const destTasks = [...(columns?.[destKey] || [])];
            destTasks.splice(destination.index, 0, movedTask);

            // Optimistic UI update
            dispatch(updateColumns({
                ...columns,
                [sourceKey]: sourceTasks,
                [destKey]: destTasks,
            }));

            // Find the target member by key
            const targetMember = membersWithNone.find(m =>
                (m.id === NO_ASSIGNED_KEY && destKey === NO_ASSIGNED_KEY) ||
                String(m.id) === destKey
            );

            const newMemberId = targetMember && targetMember.id !== NO_ASSIGNED_KEY
                ? targetMember.id
                : null;
            const newMemberName = targetMember ? targetMember.name : '';

            dispatch(updateTaskAssignee({
                id: movedTask.id,
                data: {
                    assignee_id: newMemberId,
                    assignee_name: newMemberName,
                    updated_by: userId,
                },
            }));

            notifications.show({
                color: 'teal',
                title: 'Assignee Updated',
                message: 'Tasks are ordered according to the main task list, the order you see here might not retain',
                icon: <IconCheck size={16} />,
                autoClose: 6000,
            });
        }
    };

    return (
        <Fragment>
            <Accordion
                variant="separated"
                multiple={true}
                value={expandedItems}
                onChange={setExpandedItems}
                chevron={<IconChevronDown size={30} stroke={2} />}
                classNames={{
                    control: '!w-[18px] !pl-0 !pr-2',
                    content: '!pb-0 !pt-0 !px-0',
                }}
                styles={{
                    panel: { overflow: 'visible' },
                    content: { overflow: 'visible' },
                }}
            >
                <DragDropContext onDragEnd={onDragEnd}>
                    <Droppable droppableId="section-by-member-root" type="MEMBER_SECTION" isDropDisabled={true}>
                        {(provided) => (
                            <div {...provided.droppableProps} ref={provided.innerRef}>
                                {membersWithNone.map((member, index) => (
                                    <Draggable
                                        key={member.id === NO_ASSIGNED_KEY ? NO_ASSIGNED_KEY : String(member.id)}
                                        draggableId={`member-section-${member.id}`}
                                        index={index}
                                        isDragDisabled={true}
                                    >
                                        {(dragProvided, dragSnapshot) => (
                                            <TaskListMemberSectionItem
                                                member={member}
                                                columns={columns}
                                                projectInfo={projectInfo}
                                                provided={dragProvided}
                                                snapshot={dragSnapshot}
                                            />
                                        )}
                                    </Draggable>
                                ))}
                                {provided.placeholder}
                            </div>
                        )}
                    </Droppable>
                </DragDropContext>
            </Accordion>
        </Fragment>
    );
};

export default TaskListSectionByMember;