import React, { useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Text, Select, Box } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';
import { IconChevronDown } from '@tabler/icons-react';

// MyTask-specific field components (dispatch to myTaskSlice)
import TaskAssignTo from './Task/TaskAssignTo';
import TaskFollower from './Task/TaskFollower';
import TaskDueDate from './Task/TaskDueDate';
import TaskPriority from './Task/TaskPriority';
import TaskTag from './Task/TaskTag';
import TaskComment from './Task/TaskComment';
import TaskActivity from './Task/TaskActivity';
import TaskCommentAndActivity from './Task/TaskCommentAndActivity';
import TaskStatus from './Task/TaskStatus';
import TaskName from './Task/TaskName';

import {
    createMyTaskAttachment,
    deleteMyTaskAttachment,
    editMyTask,
    setEditableMyTask,
} from '../Settings/store/myTaskSlice';
import { fetchTask, createTask } from '../Settings/store/taskSlice';
import { translate } from '../../utils/i18n';
import { hasPermission } from '../ui/permissions';
import TaskDrawer, { FieldRow } from '../ui/TaskDrawer';

const EditMyTaskDrawer = ({ taskObj, taskId, taskEditDrawerOpen, openTaskEditDrawer, closeTaskEditDrawer }) => {
    const dispatch = useDispatch();

    const { loggedUserId }  = useSelector(s => s.auth.user);
    const { loggedInUser }  = useSelector(s => s.auth.session);
    const { task }          = useSelector(s => s.settings.task);

    const projectPermissions = taskObj?.project?.permissions?.permissions || [];
    const members = (taskObj?.project?.members || []).map(u => ({
        id: u.id, label: u.name, avatar: u.avatar,
    }));

    const [subTask, setSubTask]                 = useState(taskObj?.children || []);
    const [selectedValue, setSelectedValue]     = useState('Comments & Activities');
    const [commentDropdownOpened, { toggle }]   = useDisclosure();
    const [isLoading, setIsLoading]             = useState(false);
    const [visible, setVisible]                 = useState(false);

    // Fetch task when opened or comment view changes
    useEffect(() => {
        if (taskId) dispatch(fetchTask({ id: taskId }));
    }, [dispatch, taskId, selectedValue]);

    // Loading overlay when drawer opens
    useEffect(() => {
        if (taskEditDrawerOpen === true) setVisible(true);
        setTimeout(() => setVisible(false), 1000);
    }, [taskEditDrawerOpen]);

    // ── Attachment callbacks ──────────────────────────────────────────────────
    const handleAttachmentUpload = async (files) => {
        const formData = new FormData();
        files.forEach((file, i) => formData.append(`attachments${i}`, file));
        formData.append('task_id', task.id);
        formData.append('user_id', loggedUserId);
        const response = await dispatch(createMyTaskAttachment({ data: formData }));
        return response.payload;
    };

    const handleAttachmentDelete = async (id) => {
        const response = await dispatch(deleteMyTaskAttachment({
            id,
            data: { task_id: task.id, deleted_by: loggedUserId },
        }));
        return response.payload;
    };

    // ── Name / description save ───────────────────────────────────────────────
    const handleNameSave = (name) => {
        dispatch(editMyTask({ id: task.id, data: { name, updated_by: loggedUserId } }));
    };

    const handleDescriptionSave = (description, mentionedUsers) => {
        dispatch(editMyTask({
            id: task.id,
            data: { description, mention_users: mentionedUsers, updated_by: loggedUserId },
        }));
    };

    // ── Close ─────────────────────────────────────────────────────────────────
    const handleClose = () => {
        dispatch(setEditableMyTask(task));
        closeTaskEditDrawer();
    };

    // ── Add subtask ───────────────────────────────────────────────────────────
    const addSubtask = () => {
        dispatch(fetchTask({ id: taskId })).then(response => {
            if (response.payload?.status !== 200) return;
            const children = response.payload.data.children || [];
            setSubTask(children);

            const existingPlaceholder = children.find(s => s.name === 'Type task name here');
            if (existingPlaceholder) {
                const el = document.querySelector('.drawer-subtask')?.querySelector(`[data-id="${existingPlaceholder.id}"]`);
                el?.focus();
                return;
            }

            dispatch(createTask({
                name: 'Type task name here',
                parent: task,
                task_section_id: task.task_section_id,
                project_id: task.project_id,
                type: 'sub-task',
                created_by: loggedInUser?.loggedUserId || loggedUserId,
                status: 'ACTIVE',
            })).then(res => {
                if (res.payload?.status === 200) {
                    setIsLoading(true);
                    setTimeout(() => setIsLoading(false), 0);
                }
            });
        });
    };

    // ── Edit-mode field rows (MyTask/Task/* components → dispatch to myTaskSlice) ──
    const editFields = (
        <>
            <FieldRow label={translate('Assigned')} zIndex={7}>
                <TaskAssignTo task={task} assigned={task.assigned_to} />
            </FieldRow>
            <FieldRow label={translate('Following')} zIndex={6}>
                <TaskFollower task={task} followers={task.members} />
            </FieldRow>
            <FieldRow label={translate('Due Date')} zIndex={5}>
                <TaskDueDate taskId={task.id} dueDate={task.end_date} />
            </FieldRow>
            <FieldRow label={translate('Priority')} zIndex={4}>
                <TaskPriority task={task} priority={task.priority} />
            </FieldRow>
            <FieldRow label={translate('Status')} zIndex={3}>
                <TaskStatus task={task} status={task.internal_status} />
            </FieldRow>
            <FieldRow label={translate('Tags')} zIndex={2}>
                <TaskTag task={task} taskTags={task.tags} />
            </FieldRow>
        </>
    );

    // ── Subtasks section ──────────────────────────────────────────────────────
    const subtasksSection = taskObj?.parent === null ? (
        <div className="drawer-subtask mb-6 rounded-xl border border-[#E2E8F0] bg-[#F8FAFC]">
            <div className="flex items-center justify-between px-4 py-3 border-b border-[#E2E8F0] rounded-t-xl">
                <div className="flex items-center gap-2">
                    <Text fw={600} fz={14} c="#0F172A">Subtasks</Text>
                    {subTask.length > 0 && (
                        <div className="bg-[#E2E8F0] text-[#475569] px-2 py-0.5 rounded-md text-sm font-bold">
                            {subTask.length}
                        </div>
                    )}
                </div>
                {subTask.length > 0 && (() => {
                    const canAdd = hasPermission(loggedInUser, ['create-task'], projectPermissions, 'project');
                    return (
                        <button
                            className={`text-[#39758D] text-sm font-semibold px-2 py-1 rounded-md transition-colors ${!canAdd ? 'opacity-50 cursor-not-allowed' : 'hover:bg-[#EBF1F4]'}`}
                            onClick={canAdd ? addSubtask : undefined}
                            disabled={!canAdd}
                        >
                            + Add subtask
                        </button>
                    );
                })()}
            </div>

            {subTask.length > 0 ? (
                <div className="flex flex-col gap-0 bg-white rounded-b-xl">
                    {subTask.map((subtask, index) => (
                        <Box
                            key={index}
                            className="border-b border-[#F1F5F9] last:border-b-0 p-3 hover:bg-[#F8FAFC] transition-colors"
                        >
                            <div className="flex justify-between items-center w-full gap-2">
                                <Box className="flex-1 pr-2">
                                    <TaskName
                                        task={subtask}
                                        taskId={subtask.id}
                                        view="cardView"
                                        isSubtask
                                        nameOfTask={subtask.name || 'Untitled Subtask'}
                                    />
                                </Box>
                                <div className="flex items-center gap-2">
                                    <TaskDueDate
                                        taskId={subtask.id}
                                        startDate={subtask.start_date || null}
                                        dueDate={subtask.end_date || null}
                                        startDateIsVisible={subtask.start_date_is_visible}
                                        dueDateIsVisible={subtask.end_date_is_visible}
                                        isSubtask
                                        isDrawer
                                    />
                                    <TaskAssignTo
                                        taskId={subtask.id}
                                        task={subtask}
                                        view="cardView"
                                        assigned={subtask.assigned_to || null}
                                    />
                                </div>
                            </div>
                        </Box>
                    ))}
                </div>
            ) : (
                <div className="p-4 bg-white rounded-b-xl flex justify-center">
                    {(() => {
                        const canAdd = hasPermission(loggedInUser, ['create-task'], projectPermissions, 'project');
                        return (
                            <button
                                className={`w-full rounded-lg border border-dashed border-[#CBD5E1] p-2 flex justify-center items-center transition-colors text-[#64748B] ${!canAdd ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer hover:bg-[#F8FAFC]'}`}
                                onClick={canAdd ? addSubtask : undefined}
                                disabled={!canAdd}
                            >
                                <div className="w-4 h-4 rounded-full bg-[#64748B] text-white flex items-center justify-center mr-2 text-xs font-bold leading-none pb-[2px]">+</div>
                                <span className="font-semibold text-sm">Add a subtask</span>
                            </button>
                        );
                    })()}
                </div>
            )}
        </div>
    ) : null;

    // ── Comments section ──────────────────────────────────────────────────────
    const commentsSection = (
        <div className="commentbox bg-[#F8FAFC] border border-[#E2E8F0] rounded-xl p-4 mt-2">
            <div className="mb-4">
                {!commentDropdownOpened ? (
                    <div className="cursor-pointer flex items-center gap-1 text-[#0F172A]" onClick={toggle}>
                        <Text fw={600} fz={14} c="#0F172A">{selectedValue || 'Comments & Activities'}</Text>
                        <IconChevronDown size={16} className="text-[#64748B]" />
                    </div>
                ) : null}
                {commentDropdownOpened && (
                    <Select
                        variant="unstyled"
                        placeholder="Comments"
                        data={[translate('Only Comments'), translate('Only Activities'), translate('Comments & Activities')]}
                        style={{ width: '200px' }}
                        comboboxProps={{ transitionProps: { transition: 'pop', duration: 200 } }}
                        dropdownOpened={commentDropdownOpened}
                        onChange={(value) => { setSelectedValue(value); toggle(); }}
                    />
                )}
            </div>
            {selectedValue === 'Only Comments'         && <TaskComment task={task} selectedValue={selectedValue} />}
            {selectedValue === 'Only Activities'       && <TaskActivity task={task} selectedValue={selectedValue} />}
            {selectedValue === 'Comments & Activities' && <TaskCommentAndActivity task={task} selectedValue={selectedValue} />}
        </div>
    );

    return (
        <div className="drawer">
            <TaskDrawer
                mode="edit"
                user={{ loggedInUser, loggedUserId }}
                projectPermissions={projectPermissions}
                members={members}
                task={task}
                taskObj={taskObj}
                onClose={handleClose}
                onNameSave={handleNameSave}
                onDescriptionSave={handleDescriptionSave}
                onAttachmentUpload={handleAttachmentUpload}
                onAttachmentDelete={handleAttachmentDelete}
                attachmentsInit={task.attachments || []}
                editFields={editFields}
                subtasksSection={subtasksSection}
                commentsSection={commentsSection}
                showCreatedBy
                isLoading={visible}
                buttonLabel={translate('Update')}
            />
        </div>
    );
};

export default EditMyTaskDrawer;