import React, { useState, useEffect } from 'react';
import { Drawer, Text, Select, Tooltip } from '@mantine/core';
import { useDispatch, useSelector } from 'react-redux';
import { createTask, fetchProjectOverview, removeSuccessMessage, updateBoardMembers } from '../Settings/store/taskSlice';
import { fetchAllCompanies, fetchCompany } from '../Settings/store/companySlice';
import {
    emptyProjectSection,
    fetchProjectPriorities,
    fetchProjectStatuses,
    fetchProjectTaskSections,
} from '../Settings/store/projectSlice';
import { fetchAllTags } from '../Settings/store/tagSlice';
import { deleteQuickTask } from '../Settings/store/quickTaskSlice';
import TaskDrawer from '../ui/TaskDrawer';
import { translate } from '../../utils/i18n';

const AddTaskFromQuickTaskDrawer = ({ task, taskEditDrawerOpen, openTaskEditDrawer, closeTaskEditDrawer }) => {
    const dispatch = useDispatch();
    const { loggedUserId } = useSelector(s => s.auth.user);
    const { loggedInUser } = useSelector(s => s.auth.session);
    const permissionProjects = useSelector(s => s.auth.permissions.projects);
    const { companies, company } = useSelector(s => s.settings.company);
    const { projectSections, projectPriorities, projectStatuses } = useSelector(s => s.settings.project);

    const [projectID, setProjectID] = useState(null);
    const [taskSectionId, setTaskSectionId] = useState(null);
    const [selectedCompanyId, setSelectedCompanyId] = useState(null);
    const [selectedProject, setSelectedProject] = useState(null);

    const projects = company?.projects || [];

    useEffect(() => {
        dispatch(fetchAllCompanies());
        dispatch(fetchAllTags());
    }, []);

    useEffect(() => {
        if (!taskEditDrawerOpen) {
            dispatch(updateBoardMembers([]));
        }
    }, [taskEditDrawerOpen]);

    const onCompanyChange = (_, option) => {
        if (option?.value) {
            dispatch(fetchCompany(option.value));
            setSelectedCompanyId(option.value);
        } else {
            setSelectedCompanyId(null);
        }
        setSelectedProject(null);
        setProjectID(null);
        dispatch(emptyProjectSection());
        dispatch(updateBoardMembers([]));
    };

    const onProjectChange = (_, option) => {
        if (option?.value) {
            dispatch(fetchProjectPriorities(option.value));
            dispatch(fetchProjectStatuses(option.value));
            dispatch(fetchProjectTaskSections(option.value));
            dispatch(fetchProjectOverview(option.value));
            const project = projects.find(p => parseInt(p.id) === parseInt(option.value)) || null;
            setSelectedProject(project);
            setProjectID(option.value);
            dispatch(updateBoardMembers(project?.members || []));
        } else {
            setSelectedProject(null);
            setProjectID(null);
            dispatch(emptyProjectSection());
            dispatch(updateBoardMembers([]));
        }
    };

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

    const handleSave = async (formData) => {
        if (!formData.name || !projectID || !taskSectionId) return null;
        const response = await dispatch(createTask({
            ...formData,
            project_id: projectID,
            task_section_id: taskSectionId,
            created_by: loggedInUser?.loggedUserId || loggedUserId,
            type: 'task',
            status: 'ACTIVE',
        }));
        if (response.payload?.status === 200) {
            dispatch(deleteQuickTask(task.id));
            dispatch(removeSuccessMessage());
        }
        return response.payload;
    };

    // Workspace → Project → Section cascade rendered as a slot
    const workspacePickers = (
        <>
            <div className="flex z-[104]">
                <div className="w-1/4">
                    <Text fw={700} fz={14} c="#202020">Workspace</Text>
                </div>
                <Select
                    searchable
                    clearable
                    size="sm"
                    placeholder="Select Workspace"
                    data={(companies || []).map(c => ({ value: c.id, label: c.name }))}
                    allowDeselect
                    onChange={onCompanyChange}
                />
            </div>
            <div className="flex z-[104]">
                <div className="w-1/4">
                    <Text fw={700} fz={14} c="#202020">Project</Text>
                </div>
                <Select
                    searchable
                    clearable
                    size="sm"
                    placeholder="Select Project"
                    data={selectedCompanyId ? (projects || [])
                        .filter(p => loggedInUser?.is_superadmin || permissionProjects[String(p.id)]?.permissions?.includes('create-task'))
                        .map(p => ({ value: p.id, label: p.name })) : []}
                    allowDeselect
                    onChange={onProjectChange}
                />
            </div>
            <div className="flex z-[104]">
                <div className="w-1/4">
                    <Text fw={700} fz={14} c="#202020">Section</Text>
                </div>
                <Select
                    searchable
                    clearable
                    size="sm"
                    placeholder="Select Section"
                    data={(projectSections || []).map(s => ({ value: s.id, label: s.name }))}
                    allowDeselect
                    onChange={(_, option) => setTaskSectionId(option?.value || null)}
                />
            </div>
        </>
    );

    return (
        <>
            {taskEditDrawerOpen && (
                <div className="drawer">
                    <Drawer
                        opened={taskEditDrawerOpen}
                        onClose={closeTaskEditDrawer}
                        position="right"
                        withCloseButton={false}
                        size="lg"
                        closeOnClickOutside
                        overlayProps={{ backgroundOpacity: 0.3, blur: 1 }}
                    >
                        <div className="mt-4">
                            <Drawer.Body className="!px-1">
                                <TaskDrawer
                                    mode="create"
                                    user={{ loggedInUser, loggedUserId }}
                                    members={members}
                                    onClose={closeTaskEditDrawer}
                                    onSave={handleSave}
                                    workspacePickers={workspacePickers}
                                    initialTaskName={task?.name || ''}
                                    boardMembers={selectedProject?.members || []}
                                    projectPriorities={projectPriorities || []}
                                    projectStatuses={projectStatuses || []}
                                    buttonLabel={translate('Convert')}
                                />
                            </Drawer.Body>
                        </div>
                    </Drawer>
                </div>
            )}
        </>
    );
};

export default AddTaskFromQuickTaskDrawer;