import React, { Fragment, useEffect, useState } from 'react';
import { ReactSortable } from 'react-sortablejs';
import SubtaskContent from './SubtaskContent';
import MainTask from './MainTask';
import { useSelector, useDispatch } from 'react-redux';
import { createTask, deleteTask, archiveTask, completeTask } from "../../../../Settings/store/taskSlice";
import { Draggable, Droppable } from "react-beautiful-dnd";
import { Accordion, Button, Flex, Pill, Text, Title, Tooltip, Popover, List, Box } from "@mantine/core";
import { hasPermission, useProjectPermissions } from "../../../../ui/permissions";
import { IconChevronDown, IconPlus, IconTrash, IconDotsVertical, IconArchiveFilled, IconEye, IconCircleCheck } from "@tabler/icons-react";
import EditTaskDrawer from "../EditTaskDrawer";
import { modals } from "@mantine/modals";
import TaskDelete from "./TaskDelete";
import ChangeTaskSection from "./ChangeTaskSection";
import { updateInputFieldFocus } from "../../../../../store/base/commonSlice";
import MyZenButton from "./MyZenButton";
import { useDisclosure } from "@mantine/hooks";
import { showNotification } from "@mantine/notifications";
import TaskActionsMenu from './TaskActionsMenu';
import { translate } from '../../../../../utils/i18n';

const TaskContent = ({ view, taskData, taskSection }) => {

    const dispatch = useDispatch();
    const { projectInfo, childColumns } = useSelector((state) => state.settings.task);
    const projectPermissions = useProjectPermissions(projectInfo?.id);
    const [task, setTask] = useState(taskData);
    const [opened, setOpened] = useState(false);

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

    const [subtasks, setSubtasks] = useState(childColumns && childColumns[taskData.slug] && childColumns[taskData.slug].length ? [...Array(childColumns[taskData.slug].length).keys()] : []);
    const [newlyCreatedSubtaskId, setNewlyCreatedSubtaskId] = useState(null);
    const { loggedUserId } = useSelector((state) => state.auth.user)
    const { loggedInUser } = useSelector((state) => state.auth.session)
    const { settings: siteSettings } = useSelector((state) => state.settings.setting);
    const coreSettings = React.useMemo(() => {
        if (siteSettings?.core_setting) {
            try { return JSON.parse(siteSettings.core_setting); } catch {}
        }
        return {};
    }, [siteSettings?.core_setting]);
    const showCardStatusBorder = coreSettings.show_card_status_border !== false;
    const showCardPriorityBorder = coreSettings.show_card_priority_border !== false;


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

    const addSubtask = () => {
        setSubtasks([...subtasks, subtasks.length]);

        // If a placeholder subtask already exists, just refocus it instead of creating another
        if (childColumns && childColumns[taskData.slug] && childColumns[taskData.slug].some(subtask => subtask.name === 'Type task name here')) {
            const placeholder = childColumns[taskData.slug].find(subtask => subtask.name === 'Type task name here');
            if (placeholder) {
                setNewlyCreatedSubtaskId(placeholder.id);
            }
            return false;
        }

        const newTaskData = {
            name: 'Type task name here',
            parent: taskData,
            task_section_id: taskData.task_section_id,
            project_id: taskData.project_id,
            type: 'sub-task',
            created_by: loggedInUser ? loggedInUser.loggedUserId : loggedUserId,
            status: 'ACTIVE',
            'is_visible': taskData.ganttIsVisible == 1 ? 1 : 0,
        }
        dispatch(createTask(newTaskData)).then((response) => {
            if (response?.payload?.status === 200 && response.payload.data?.id) {
                setNewlyCreatedSubtaskId(response.payload.data.id);
            }
        });
        dispatch(updateInputFieldFocus(true));
    };
    const onSortEnd = (sortedList) => {
        setSubtasks(sortedList);
    };

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

    const ArrowBadge = ({ number, isOpen }) => (
        <Box
            pos="relative"
            py={5}
            px={5}
            bg="#F4A05A"
            c="white"
            style={{
                clipPath: "polygon(0 0, 100% 0, 100% calc(100% - 7px), 50% 100%, 0 calc(100% - 7px))",
                borderRadius: "3px",
                minWidth: "22px",
                marginLeft: isOpen ? "-5px" : "0",
                transition: "margin-left 0.3s ease",
                textAlign: "center",
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
            }}
        >
            <Text fw={500} ta="center" style={{
                fontSize: '10px',
                rotate: isOpen ? '180deg' : '0',
                transition: 'transform 0.3s ease',
                paddingTop: isOpen ? '2px' : '0',
                lineHeight: 1,
            }}>
                {number}
            </Text>
        </Box>
    );


    let leftBorderColor = '#e5e7eb'; // Default light grey
    if (task && task.priority && task.priority.color_code) {
        leftBorderColor = task.priority.color_code;
    }

    let bottomBorderColor = '#ffffff'; // Default white
    if (task && task.internal_status && task.internal_status.color_code) {
        bottomBorderColor = task.internal_status.color_code;
    } else if (task && task.statusName && task.status_color_code) {
        bottomBorderColor = task.status_color_code;
    } else if (task && task.status === 'COMPLETED') {
        bottomBorderColor = '#10B981';
    }

    return (
        <Fragment>
            {view === 'cardView' ? (
                <div
                    className="full-project-tasks flex-col shadow-md p-3 rounded-md border border-1 border-[#efefef] gap-3 relative overflow-hidden"
                    style={{
                        boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)'
                    }}
                >
                    {/* Left Border Gradient — center outward fade */}
                    {showCardPriorityBorder && (
                        <div style={{
                            position: 'absolute',
                            left: 0,
                            top: 0,
                            bottom: 0,
                            width: '5px',
                            background: `linear-gradient(to bottom, #ffffff 0%, ${leftBorderColor}cc 50%, #ffffff 100%)`,
                            borderTopLeftRadius: '6px',
                            borderBottomLeftRadius: '6px',
                            zIndex: 1
                        }}></div>
                    )}

                    {/* Bottom Border Gradient — center outward fade */}
                    {showCardStatusBorder && (
                        <div style={{
                            position: 'absolute',
                            left: 0,
                            right: 0,
                            bottom: 0,
                            height: '5px',
                            background: `linear-gradient(to right, #ffffff 0%, ${bottomBorderColor}cc 50%, #ffffff 100%)`,
                            borderBottomLeftRadius: '6px',
                            borderBottomRightRadius: '6px',
                            zIndex: 1
                        }}></div>
                    )}

                    <div className="relative z-10 w-full">
                        <MainTask view='cardView' addSubtask={addSubtask} taskData={task} currentSectionSlug={taskSection} />
                    </div>
                </div>
            ) : (
                <div className="full-project-tasks">
                    <Accordion
                        value={selectedAccordion}
                        onChange={setSelectedAccordion}
                        chevronPosition="left"
                        // chevron={<IconChevronDown size={30} stroke={2} />}
                        chevron={
                            childColumns && childColumns[taskData.slug] && childColumns[taskData.slug].length > 0
                            && <ArrowBadge number={childColumns[taskData.slug].length}
                                isOpen={selectedAccordion === taskData.slug}
                            />
                        }
                        classNames={{
                            control: '!p-0 !w-auto',
                            content: '!p-0',
                            label: '!py-0 !pt-1',
                            chevron: '!mx-0 !ml-1',
                            // chevron: classes.chevron
                        }}
                        styles={{
                            content: {
                                backgroundColor: '#EBF1F4',
                                borderRadius: '8px',
                                marginBottom: '6px',
                                borderLeft: '3px solid #39758D',
                            },
                            panel: {
                                backgroundColor: '#EBF1F4',
                                borderRadius: '8px',
                                marginLeft: '10px',
                                marginRight: '10px',
                            }
                        }}
                    >
                        <Accordion.Item value={taskData?.slug || `task-${taskData?.id}`}>
                            <div className="flex w-full items-center py-1">
                                <div className={`min-w-[19px] min-h-[30px]`}>
                                    {childColumns && childColumns[taskData.slug] && childColumns[taskData.slug].length > 0 &&
                                        <Accordion.Control>

                                        </Accordion.Control>
                                    }
                                </div>
                                <div className="flex w-full items-center">
                                    {/*<Pill className="!bg-[#ED7D31] !text-white !px-2">{childColumns && childColumns[taskData.slug] && childColumns[taskData.slug].length > 0 ? childColumns[taskData.slug].length : 0 }</Pill>*/}
                                    <MainTask addSubtask={addSubtask} taskData={task} />
                                </div>
                                <div className="flex items-center justify-end min-w-28">
                                    {/* { loggedInUser && loggedUserId === parseInt(taskData.assignedTo_id) &&
                                  <MyZenButton task={taskData} taskId={taskData && taskData.id} projectInfo={projectInfo} />
                              } */}


                                    {taskData.status !== 'COMPLETED' && hasPermission(loggedInUser, ['create-task'], projectPermissions, 'project') &&
                                        <div onClick={(e) => e.stopPropagation()}>
                                            <Tooltip withinPortal={false} label={translate('Add Subtask')} position="top" withArrow>
                                                <div
                                                    className="h-[24px] w-[24px] border border-[#E9E9E9] bg-white rounded-full p-[3px] cursor-pointer hover:bg-gray-50 transition-colors create-subtask"
                                                    onClick={() => {
                                                        toggleSection(taskData.slug);
                                                        addSubtask();
                                                    }}>
                                                    <IconPlus color="#6B7280" size={16} stroke={1.5} />
                                                </div>
                                            </Tooltip>
                                        </div>
                                    }
                                    {/* Old commented-out permission gate removed — TaskActionsMenu now handles its own permission checks */}
                                    <TaskActionsMenu actions={['view', 'complete', 'changeSection', 'archive', 'delete', 'changeVisibility', 'duplicateTask', 'ganttTask']} taskData={taskData} currentSectionSlug={taskSection} />

                                </div>

                            </div>

                            {childColumns && childColumns[taskData.slug] && childColumns[taskData.slug].length > 0 &&
                                <Accordion.Panel>
                                    <Box bg="#EBF1F4">
                                        <Droppable
                                            key={taskData.id}
                                            droppableId={taskData.slug}
                                            type='SUBTASK'
                                        >
                                            {(dropProvided, snapshot) => (
                                                <div
                                                    style={{ transition: 'background-color 0.3s ease' }}
                                                    className={`w-full h-full min-h-[20px] mb-2 ${childColumns && childColumns[taskData.slug] && childColumns[taskData.slug].length > 0 ? 'py-1 bg-[#EBF1F4] rounded-lg' : ''}`}
                                                    ref={dropProvided.innerRef}
                                                    {...dropProvided.droppableProps}
                                                >
                                                    {childColumns && childColumns[taskData.slug] && childColumns[taskData.slug].length > 0 && childColumns[taskData.slug].map((subTask, subtaskIndex) => (
                                                        <Draggable
                                                            key={subTask.id}
                                                            draggableId={subTask.id.toString()}
                                                            index={subtaskIndex}
                                                            isDragDisabled={subTask.status === 'COMPLETED'}
                                                        >
                                                            {(dragProvided, dragSnapshot) => (
                                                                <div
                                                                    key={subtaskIndex}
                                                                    className='single-task'
                                                                    ref={dragProvided.innerRef}
                                                                    {...dragProvided.draggableProps}
                                                                    {...dragProvided.dragHandleProps}
                                                                    style={{
                                                                        ...dragProvided.draggableProps.style,
                                                                        backgroundColor: dragSnapshot.isDragging ? '#D6E4EC' : '#EBF1F4',
                                                                        transition: 'all 0.1s ease-in-out',
                                                                        cursor: dragSnapshot.isDragging ? 'grabbing' : 'grab',
                                                                        opacity: dragSnapshot.isDragging ? 0.9 : 1,
                                                                        transform: snapshot.isDragging
                                                                            ? `${dragProvided.draggableProps.style?.transform} rotate(-10deg) scale(1.10)`
                                                                            : dragProvided.draggableProps.style?.transform,
                                                                        boxShadow: snapshot.isDragging
                                                                            ? '0 6px 12px rgba(0, 0, 0, 0.15)'
                                                                            : 'none',
                                                                        userSelect: 'none',
                                                                        border: dragSnapshot.isDragging ? '1px solid #E5E5E5' : 'none',
                                                                    }}
                                                                >
                                                                    <SubtaskContent taskData={taskData} key={subtaskIndex}
                                                                        subtask={subTask}
                                                                        autoFocus={String(subTask.id) === String(newlyCreatedSubtaskId)} />

                                                                </div>
                                                            )}

                                                        </Draggable>
                                                    ))}

                                                    {dropProvided.placeholder}

                                                </div>
                                            )}

                                        </Droppable>

                                        {taskData.status !== 'COMPLETED' && childColumns && childColumns[taskData.slug] && childColumns[taskData.slug].length > 0 && hasPermission(loggedInUser, ['create-task'], projectPermissions, 'project') &&
                                            <div className="w-full flex justify-center pb-3 pt-1">
                                                <button
                                                    className="w-[60%] flex items-center justify-center gap-2 px-3 py-[6px] rounded-md border border-dashed border-[#C8D9E2] bg-white text-[12px] text-[#64748B] hover:bg-white hover:border-[#39758D] hover:text-[#39758D] transition-colors group"
                                                    onClick={() => {
                                                        toggleSection(taskData.slug);
                                                        addSubtask();
                                                    }}
                                                >
                                                    <IconPlus size={13} stroke={2} className="flex-shrink-0 group-hover:text-[#39758D]" />
                                                    <span className="font-medium">{translate('Add Subtask')}</span>
                                                </button>
                                            </div>
                                        }
                                    </Box>
                                </Accordion.Panel>
                            }
                        </Accordion.Item>
                    </Accordion>

                </div>

            )}
        </Fragment>
    );
};

export default TaskContent;