import React, { Fragment, useEffect, useState } from 'react';
import TaskName from './TaskName';
import TaskAssignTo from './TaskAssignTo';
import TaskFollower from './TaskFollower';
import TaskDueDate from './TaskDueDate';
import TaskPriority from './TaskPriority';
import TaskStatus from './TaskStatus';
import TaskTag from './TaskTag';
import { IconSubtask, IconGripVertical, IconLock, IconPlus } from '@tabler/icons-react';
import { useSelector, useDispatch } from 'react-redux';
import { hasPermission, useProjectPermissions } from "../../../../ui/permissions";
import {
    Box,
    Grid,
    Tooltip,
    Avatar
} from "@mantine/core";
import { notifications } from "@mantine/notifications";
import { openTaskEditDrawer, setEditableTask } from "../../../../Settings/store/taskSlice";
import TaskSerial from './TaskSerial';
import TaskActionsMenu from './TaskActionsMenu';
import { translate } from '../../../../../utils/i18n';
import useTwColorByName from "../../../../ui/useTwColorByName";

const MainTask = ({ addSubtask, taskData, view, currentSectionSlug }) => {
    const dispatch = useDispatch();
    const { loggedInUser } = useSelector((state) => state.auth.session)
    const { projectInfo, childColumns } = useSelector((state) => state.settings.task);
    const projectPermissions = useProjectPermissions(projectInfo?.id);
    const { inputFieldIsFocused } = useSelector((state) => state.base.common);
    const bgColor = useTwColorByName();

    const [task, setTask] = useState(taskData);
    const isCompleted = task?.status === 'COMPLETED';
    const [isShown, setIsShown] = useState(false);
    const [isFocused, setIsFocused] = useState(inputFieldIsFocused || false);

    useEffect(() => { setTask(taskData); }, [taskData]);

    const handleEditTaskDrawerOpen = () => {
        dispatch(openTaskEditDrawer());
        dispatch(setEditableTask(task && task));
    };

    const [selectedAccordion, setSelectedAccordion] = useState('');
    const toggleSection = (section) => {
        setSelectedAccordion(section);
    };

    const handleFocus = () => {
        setIsFocused(true);
    };

    const handleBlur = () => {
        setIsFocused(false);
        // dispatch(updateInputFieldFocus(false));
    };

    const showCompletedWarning = (e) => {
        e.stopPropagation();
        notifications.show({
            color: 'orange',
            title: translate('Task is completed'),
            message: translate('Mark it as incomplete to make changes.'),
            icon: <IconLock size={16} />,
            autoClose: 3000,
        });
    };

    return (
        <>
            {view === 'cardView' ? (

                <Fragment>
                    <div className="flex single-task-content main-task flex-col gap-3">
                        <Box onClick={() => { handleEditTaskDrawerOpen() }} component="div">
                            <div className="flex items-center justify-between mb-4 w-full">
                                <div className="task-name w-full">
                                    <TaskName task={task && task} taskId={task.id} nameOfTask={task.name} view='cardView' disabled={isCompleted} />
                                </div>
                                <Box component="div" onClick={(e) => e.stopPropagation()}>
                                    {/* Old commented-out permission gate removed — TaskActionsMenu now handles its own permission checks */}
                                    <TaskActionsMenu actions={['view', 'complete', 'incomplete', 'changeSection', 'archive', 'delete', 'changeVisibility', 'duplicateTask', 'ganttTask', 'open', 'close']} taskData={taskData} currentSectionSlug={currentSectionSlug} />
                                </Box>

                            </div>
                            <div className="flex items-center justify-start mb-3 gap-3">
                                <div className="assign-to" onClick={isCompleted ? showCompletedWarning : (e) => e.stopPropagation()}>
                                    <TaskAssignTo taskId={task.id} assigned={task.assigned_to} view='cardView' disabled={isCompleted}
                                        createdBy_id={task.createdBy_id} assignedTo_id={task.assignedTo_id}
                                        assignedMember={(props) => {
                                            console.log('')
                                        }} />
                                </div>
                                <div className="due-date" onClick={isCompleted ? showCompletedWarning : (e) => e.stopPropagation()}>
                                    <TaskDueDate taskId={task.id} startDate={task.start_date} dueDate={task.end_date} startDateIsVisible={task.start_date_is_visible} dueDateIsVisible={task.end_date_is_visible} view='cardView' disabled={isCompleted} createdBy_id={task.createdBy_id} assignedTo_id={task.assignedTo_id} />
                                </div>
                            </div>

                            <div className="flex items-center justify-between mb-3 w-full">
                                <div className="flex items-center gap-3">
                                    <div className="priority" onClick={isCompleted ? showCompletedWarning : (e) => e.stopPropagation()}>
                                        <TaskPriority taskId={task.id} priority={task.priority} disabled={isCompleted} createdBy_id={task.createdBy_id} assignedTo_id={task.assignedTo_id} />
                                    </div>
                                    <div className="status" onClick={(e) => e.stopPropagation()}>
                                        <TaskStatus taskId={task.id} status={task.internal_status} taskDbStatus={task.status} createdBy_id={task.createdBy_id} assignedTo_id={task.assignedTo_id} />
                                    </div>
                                </div>
                                <div className="flex items-center">
                                    {
                                        childColumns && childColumns[task.slug] && childColumns[task.slug].length > 0 &&
                                        <Tooltip withinPortal={false} label={translate('View Subtask')} position="top" withArrow>
                                            <Avatar
                                                className={`cursor-pointer`}
                                                onClick={() => handleEditTaskDrawerOpen()}
                                                size={`sm`}
                                                bg="#ED7D31"
                                                color="#fff"
                                            >
                                                <IconSubtask className=' hover:scale-110' size={18} />
                                            </Avatar>
                                        </Tooltip>
                                    }
                                </div>
                            </div>

                            <div className="flex items-center justify-between w-full mb-0">
                                <div className="tags" onClick={isCompleted ? showCompletedWarning : (e) => e.stopPropagation()}>
                                    <TaskTag taskId={task.id} taskTags={task.tags} disabled={isCompleted} createdBy_id={task.createdBy_id} assignedTo_id={task.assignedTo_id} />
                                </div>
                                <div className="flex justify-end items-center gap-2">
                                    <Box component="div" onClick={(e) => e.stopPropagation()}>
                                        {(() => {
                                            if (isCompleted) return null;
                                            const isCreator  = task?.createdBy_id == loggedInUser?.loggedUserId;
                                            const isAssignee = task?.assignedTo_id == loggedInUser?.loggedUserId;
                                            const canAdd = hasPermission(loggedInUser, ['create-task'], projectPermissions, 'project')
                                                && (isCreator || isAssignee || hasPermission(loggedInUser, ['manage-tasks-by-others'], projectPermissions, 'project'));
                                            if (!canAdd) return null;
                                            return (
                                                <Tooltip label={translate('Add Subtask')} position="top" withArrow withinPortal={false}>
                                                    <div
                                                        onClick={() => addSubtask && addSubtask()}
                                                        className="h-[24px] w-[24px] border border-[#E9E9E9] bg-white rounded-full p-[3px] cursor-pointer hover:bg-gray-50 transition-colors create-subtask"
                                                    >
                                                        <IconPlus color="#6B7280" size={16} stroke={1.5} />
                                                    </div>
                                                </Tooltip>
                                            );
                                        })()}
                                    </Box>
                                </div>
                            </div>
                        </Box>
                    </div>

                </Fragment>

            ) : (
                <div onClick={() => {
                    handleEditTaskDrawerOpen()
                }} className="single-task-content main-task w-full py-2 hover:bg-gray-50 transition-colors duration-150 ease-in-out cursor-pointer"
                    onFocus={handleFocus} onBlur={handleBlur}
                    onMouseEnter={() => {
                        setIsShown(true)
                    }}
                    onMouseLeave={() => {
                        setIsShown(false)
                    }}
                >
                    <Grid columns={24} align="center">
                        {task && task.is_serial_enable && (
                            <Grid.Col className="flex items-center w-full !py-0" span={1.5}>
                                <div className="!min-w-[20px] w-[20px] pl-[5px]">
                                    {(isShown || isFocused) &&
                                        <IconGripVertical size={16} stroke={1.5} className="text-gray-400" />
                                    }
                                </div>
                                <div className="w-full text-gray-500 font-medium text-xs" style={{ marginLeft: '-15px' }}>
                                    <TaskSerial task={task && task} taskId={task.id} />
                                </div>
                            </Grid.Col>
                        )}
                        <Grid.Col className="flex items-center w-full !py-0" span={task && task.is_serial_enable ? 8.0 : 9.5}>
                            <div className="w-full" style={{ marginLeft: task && task.is_serial_enable ? '-40px' : '6px' }}>
                                <TaskName task={task && task} taskId={task.id} nameOfTask={task.name} disabled={isCompleted} />
                            </div>
                        </Grid.Col>
                        <Grid.Col className="assign-to flex items-center w-full !py-0" span={3.0} style={{ marginLeft: '-5px' }}>
                            <div className="pl-1 w-full flex justify-end" onClick={isCompleted ? showCompletedWarning : (e) => e.stopPropagation()}>
                                <TaskAssignTo taskId={task.id} assigned={task.assigned_to} disabled={isCompleted} createdBy_id={task.createdBy_id} assignedTo_id={task.assignedTo_id} assignedMember={(props) => {
                                    console.log('')
                                }} />
                            </div>
                        </Grid.Col>
                        <Grid.Col className="due-date flex items-center w-full !py-0 !pl-2" span={3.0}>
                            <div className="w-full flex justify-center" onClick={isCompleted ? showCompletedWarning : (e) => e.stopPropagation()}>
                                <TaskDueDate taskId={task.id} startDate={task.start_date} dueDate={task.end_date} startDateIsVisible={task.start_date_is_visible} dueDateIsVisible={task.end_date_is_visible} disabled={isCompleted} createdBy_id={task.createdBy_id} assignedTo_id={task.assignedTo_id} />
                            </div>
                        </Grid.Col>
                        <Grid.Col className="priority flex items-center w-full !py-0 !pl-2" span={2.5}>
                            <div className="w-full flex justify-start" onClick={isCompleted ? showCompletedWarning : (e) => e.stopPropagation()}>
                                <TaskPriority taskId={task.id} priority={task.priority} disabled={isCompleted} createdBy_id={task.createdBy_id} assignedTo_id={task.assignedTo_id} />
                            </div>
                        </Grid.Col>
                        <Grid.Col className="status flex items-center w-full !py-0 !pl-2" span={2.5}>
                            <div className="w-full flex justify-start" onClick={(e) => e.stopPropagation()}>
                                <TaskStatus taskId={task.id} status={task.internal_status} taskDbStatus={task.status} createdBy_id={task.createdBy_id} assignedTo_id={task.assignedTo_id} />
                            </div>
                        </Grid.Col>
                        <Grid.Col className="tags flex items-center w-full !py-0 !pl-2" span={3.5}>
                            <div className="w-full flex items-center" onClick={isCompleted ? showCompletedWarning : (e) => e.stopPropagation()}>
                                <TaskTag taskId={task.id} taskTags={task.tags} disabled={isCompleted} createdBy_id={task.createdBy_id} assignedTo_id={task.assignedTo_id} />
                            </div>
                        </Grid.Col>
                    </Grid>
                </div>
            )}

        </>


    );
};

export default MainTask;