import React, { Fragment, useEffect, useState, useRef } from 'react';
import {
    Modal,
    Text,
    Button,
    Group,
    Stack,
    ThemeIcon,
    Divider,
    Switch,
    Box,
    Badge,
    Card,
    Grid,
    ScrollArea,
    Select,
    Title,
    TextInput,
    ActionIcon,
    Loader,
} from '@mantine/core';
import { useDispatch, useSelector } from 'react-redux';
import { IconCalendar, IconChalkboard, IconChartBar, IconCheck, IconClock, IconDeviceFloppy, IconFlag, IconGripHorizontal, IconLayoutGrid, IconLayoutKanban, IconList, IconListTree, IconPencil, IconPlus, IconSettings2, IconTimeline, IconTrash, IconUsers, IconX } from '@tabler/icons-react';
import { translate } from '../../../utils/i18n';
import { notifications, showNotification } from "@mantine/notifications";
import { installAddonPlugin } from "../../Settings/store/settingSlice";
import { createProjectPriority, createProjectStatus, deleteProjectPriority, deleteProjectStatus, editProjectNav, editProjectPrioritySortOrder, editProjectStatusSortOrder, fetchProjectOverview, markIsCompletedTaskSection, updateBoardMembers, updateProjectCompleteStatus } from "../../Settings/store/taskSlice";
import { hasPermission, useProjectPermissions } from "../../ui/permissions";
import ProjectConfigureModal from './ProjectConfigureModal';
import UserAvatarSingle from '../../ui/UserAvatarSingle';
import { modals } from '@mantine/modals';
import { changeMemberProjectRole, editProject } from '../../Settings/store/projectSlice';
import { fetchAllRoles } from '../../../store/auth/roleSlice';
import { fetchAllMembers, removeUserFromProjectThunk } from '../../../store/auth/userSlice';
import { getUserProjectTaskCount } from '../../../services/AuthService';
import { fetchAllCompanies } from '../../Settings/store/companySlice';
import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';

const ProjectSettingsModal = ({ project_id, opened, onClose, isSettings }) => {
    const dispatch = useDispatch();
    const [loading, setLoading] = useState(false);
    const [success, setSuccess] = useState(false);
    const [error, setError] = useState('');

    const { loggedInUser } = useSelector((state) => state.auth.session);
    const { loggedUserId } = useSelector((state) => state.auth.user);
    const { projectInfo, projectNavbar, boardMembers, projectPriorities, projectStatuses, taskListSections } = useSelector((state) => state.settings.task);
    const projectPermissions = useProjectPermissions(projectInfo?.id);
    const { roles } = useSelector((state) => state.auth.role);
    const { allMembers } = useSelector((state) => state.auth.user);
    const { projects: memberProjects, isLoaded: permissionsLoaded } = useSelector((state) => state.auth.permissions);
    const { whiteboardAddonState } = useSelector((state) => state.settings.setting);

    const canSeeGeneral  = hasPermission(loggedInUser, ['config-project'], projectPermissions, 'project');
    const canSeeMembers  = hasPermission(loggedInUser, ['manage-project-members', 'remove-project-member'], projectPermissions, 'project');
    const canAddMember   = hasPermission(loggedInUser, ['manage-project-members'], projectPermissions, 'project');
    const canRemoveMember = hasPermission(loggedInUser, ['remove-project-member'], projectPermissions, 'project');
    const canSeeViews    = hasPermission(loggedInUser, ['config-project'], projectPermissions, 'project');
    const canSeePriority = hasPermission(loggedInUser, ['config-project'], projectPermissions, 'project');
    const canSeeStatus   = hasPermission(loggedInUser, ['config-project'], projectPermissions, 'project');
    const canManageSection = hasPermission(loggedInUser, ['config-project'], projectPermissions, 'project');
    const canEditProject = hasPermission(loggedInUser, ['manage-project'], null, 'global');

    const [activePanel, setActivePanel] = useState('general');
    const [genName, setGenName] = useState('');
    const [genSaving, setGenSaving] = useState(false);
    const [editingName, setEditingName] = useState(false);
    const [completeSectionId, setCompleteSectionId] = useState(null);
    const [completeSectionSaving, setCompleteSectionSaving] = useState(false);
    const [completeStatusId, setCompleteStatusId] = useState(null);
    const [completeStatusSaving, setCompleteStatusSaving] = useState(false);
    const [memberRoles, setMemberRoles] = useState({});

    const [showAddMember, setShowAddMember] = useState(false);
    const [addMemberRoleId, setAddMemberRoleId] = useState(null);
    const [selectedNewMember, setSelectedNewMember] = useState(null);
    const [addMemberLoading, setAddMemberLoading] = useState(false);
    const [removeMemberModal, setRemoveMemberModal] = useState(null);

    const [isPriorityLoading, setIsPriorityLoading] = useState(false);
    const [isStatusLoading, setIsStatusLoading] = useState(false);

    const [newPriority, setNewPriority] = useState('');
    const [newPriorityColor, setNewPriorityColor] = useState('#346A80');
    const [showPriorityAddInput, setShowPriorityAddInput] = useState(false);
    const [showPriorityEditInput, setShowPriorityEditInput] = useState(false);
    const [priorityId, setPriorityId] = useState(null);

    const [newStatus, setNewStatus] = useState('');
    const [newStatusColor, setNewStatusColor] = useState('#346A80');
    const [showStatusAddInput, setShowStatusAddInput] = useState(false);
    const [showStatusEditInput, setShowStatusEditInput] = useState(false);
    const [statusId, setStatusId] = useState(null);

    const priorityInputRef = useRef(null);
    const statusInputRef = useRef(null);

    // Local state for enabled tabs
    const [localEnabled, setLocalEnabled] = useState({});

    const ProjectTabs = [
        {
            key: 'list',
            name: 'List',
            description: 'Manage your project tasks in a detailed list view.',
            icon: IconList,
            badge: null,
        },
        {
            key: 'board',
            name: 'Board',
            description: 'Organize your tasks with a Kanban-style board.',
            icon: IconLayoutKanban,
            badge: null,
        },
        {
            key: 'calendar',
            name: 'Calendar',
            description: 'View your tasks on a calendar to track deadlines.',
            icon: IconCalendar,
            badge: null,
        },
        {
            key: 'gantt',
            name: 'Gantt Chart',
            description: 'Plan and schedule your project with a Gantt chart.',
            icon: IconListTree,
            badge: null,
        },
        {
            key: 'report',
            name: 'Report',
            description: 'Project health snapshot with charts and team workload.',
            icon: IconChartBar,
            badge: null,
        },
        {
            key: 'whiteboard',
            name: 'Whiteboard',
            description: 'Visualize your project tasks on a whiteboard.',
            icon: IconChalkboard,
            badge: null,
        },
        {
            key: 'swimlane',
            name: 'Swimlane',
            description: 'Swimlanes to organize and streamline tasks',
            icon: IconTimeline,
            badge: <Badge color="#39758D" size='xs'>{translate('Upcoming')}</Badge>,
        },
    ];

    // Views that require a site-level addon to be installed + active.
    // Extend this map when a new addon gates a project view.
    const VIEW_ADDON_REQUIREMENTS = {
        whiteboard: {
            addonName: 'LazyTasks Whiteboard',
            getState: () => whiteboardAddonState,
        },
    };

    const getEnabledStatus = (tabKey) => {
        // tabKey should be lowercase and match the keys in projectNavbar
        return projectNavbar && typeof projectNavbar[tabKey.toLowerCase()] !== 'undefined'
            ? projectNavbar[tabKey.toLowerCase()]
            : true; // default true if not found
    };

    const tabs = ProjectTabs.map(tab => ({
        ...tab,
        enabled: getEnabledStatus(tab.key),
    }));

    // Handle switch toggle
    const handleChange = (tabKey, checked) => {
        // Prevent disabling the "List" tab
        if (tabKey === 'list') {
            setLocalEnabled(prev => ({
                ...prev,
                list: true,
            }));
            return;
        }
        // Prevent disabling if it's the only enabled tab
        const enabledTabsCount = Object.values(localEnabled).filter(Boolean).length;
        if (!checked && enabledTabsCount <= 1 && localEnabled[tabKey]) {
            setError('At least one tab must be enabled.');
            setTimeout(() => setError(''), 3000);
            return;
        }
        if (checked && VIEW_ADDON_REQUIREMENTS[tabKey]) {
            const { addonName, getState } = VIEW_ADDON_REQUIREMENTS[tabKey];
            if (getState() !== 'installed_active') {
                showNotification({
                    title: translate('Addon required'),
                    message: `${addonName} ${translate('addon must be installed and activated by an admin for this view to appear.')}`,
                    color: 'orange',
                    autoClose: 5000,
                });
            }
        }
        setLocalEnabled(prev => ({
            ...prev,
            [tabKey]: checked,
            list: true,
        }));
    };

    // Save changes handler
    const handleSaveChanges = () => {
        setLoading(true);
        // onClose();
        dispatch(editProjectNav({ id: project_id, data: localEnabled }))
            .then((response) => {
                setLoading(false);
                onClose();
                if (response.payload && response.payload.status && response.payload.status === 200) {
                    // Simulate successful form submission
                    showNotification({
                        id: 'load-data',
                        title: 'Project Tabs Updated',
                        message: response.payload && response.payload.message && response.payload.message,
                        icon: <IconCheck />,
                        color: 'teal',
                        autoClose: 3000,
                    });

                } else {
                    showNotification({
                        id: 'load-data',
                        title: 'Project Tab Update Failed',
                        message: response.payload && response.payload.message && response.payload.message,
                        color: 'red',
                        disallowClose: true,
                        autoClose: 3000,
                    });
                }
            }).catch((error) => {
                setLoading(false);
                showNotification({
                    id: 'load-data',
                    loading: true,
                    title: 'Project Tab Update Error',
                    message: error?.message || 'Project Tab Update failed.',
                    autoClose: 2000,
                    disallowClose: true,
                    color: 'red',
                });
            });
    };

    useEffect(() => {
        setLocalEnabled(prev => ({
            ...projectNavbar,
            list: true, // Always true
        }));
    }, [projectNavbar, opened]);

    useEffect(() => {
        if (isSettings && project_id) {
            // Route guard: block non-members from accessing project settings.
            // Superadmin / WP admin bypass is handled by hasPermission() returning true for those roles.
            const isSuperadmin = loggedInUser?.is_superadmin ?? false;
            const isWpAdmin = (loggedInUser?.roles ?? []).includes('administrator');

            if (permissionsLoaded && !memberProjects[String(project_id)] && !isSuperadmin && !isWpAdmin) {
                onClose();
                return;
            }

            dispatch(fetchProjectOverview(project_id));
        }
    }, [isSettings, permissionsLoaded]);

    useEffect(() => {
        if (projectInfo && projectInfo.name) {
            setGenName(projectInfo.name);
        }
    }, [projectInfo]);

    const handleSaveGeneral = async () => {
        if (!genName.trim()) return;
        setGenSaving(true);
        const res = await dispatch(editProject({ id: project_id, data: { name: genName.trim(), updated_by: loggedInUser } }));
        setGenSaving(false);
        setEditingName(false);
        const ok = res.payload?.status === 200;
        showNotification({
            title: translate('Project Settings'),
            message: res.payload?.message || '',
            color: ok ? 'green' : 'red',
            autoClose: 2000,
        });
    };

    useEffect(() => {
        const current = Object.values(taskListSections || {}).find(s => s.mark_is_complete === 'complete');
        setCompleteSectionId(current ? String(current.id) : null);
    }, [taskListSections]);

    const handleCompleteSection = async (newSectionId) => {
        const currentSection = Object.values(taskListSections || {}).find(s => s.mark_is_complete === 'complete');
        const userId = loggedInUser?.loggedUserId ?? loggedUserId;
        setCompleteSectionSaving(true);
        try {
            // Unmark the current complete section if switching to a different one or clearing
            if (currentSection && String(currentSection.id) !== newSectionId) {
                await dispatch(markIsCompletedTaskSection({
                    id: currentSection.id,
                    data: { project_id: projectInfo?.id, markIsChecked: false, updated_by: userId },
                }));
            }
            // Mark the newly selected section
            if (newSectionId) {
                const res = await dispatch(markIsCompletedTaskSection({
                    id: Number(newSectionId),
                    data: { project_id: projectInfo?.id, markIsChecked: true, updated_by: userId },
                }));
                const ok = res.payload?.status === 200;
                showNotification({
                    title: translate('Complete Section'),
                    message: ok ? translate('Designated complete section updated.') : (res.payload?.message || translate('Something went wrong.')),
                    color: ok ? 'green' : 'red',
                    autoClose: 2000,
                });
            } else {
                showNotification({
                    title: translate('Complete Section'),
                    message: translate('Designated complete section removed.'),
                    color: 'green',
                    autoClose: 2000,
                });
            }
        } finally {
            setCompleteSectionSaving(false);
        }
    };

    useEffect(() => {
        const current = (projectStatuses || []).find(s => s.is_complete_status == 1);
        setCompleteStatusId(current ? String(current.id) : null);
    }, [projectStatuses]);

    const handleCompleteStatus = async (newStatusId) => {
        const userId = loggedInUser?.loggedUserId ?? loggedUserId;
        setCompleteStatusSaving(true);
        try {
            const res = await dispatch(updateProjectCompleteStatus({
                id: projectInfo?.id,
                data: { status_id: newStatusId ? Number(newStatusId) : null, updated_by: userId },
            }));
            const ok = res.payload?.status === 200;
            showNotification({
                title: translate('Complete Status'),
                message: ok
                    ? (newStatusId ? translate('Designated complete status updated.') : translate('Designated complete status removed.'))
                    : (res.payload?.message || translate('Something went wrong.')),
                color: ok ? 'green' : 'red',
                autoClose: 2000,
            });
        } finally {
            setCompleteStatusSaving(false);
        }
    };

    useEffect(() => {
        if (opened && activePanel === 'members') {
            if (!roles || roles.length === 0) dispatch(fetchAllRoles());
            dispatch(fetchAllMembers());
        }
    }, [opened, activePanel]);

    const handlePriorityDragEnd = (priorityResult) => {
        if (!priorityResult.destination) return;
        setIsPriorityLoading(true);

        const reorderedPriorities = Array.from(projectPriorities);
        const [movedItem] = reorderedPriorities.splice(priorityResult.source.index, 1);
        reorderedPriorities.splice(priorityResult.destination.index, 0, movedItem);

        // Check if the order has changed
        const isOrderChanged = reorderedPriorities.some((priority, index) => priority.id !== projectPriorities[index].id);

        if (!isOrderChanged) {
            return;
        }

        if (priorityResult.type === 'priority') {

            dispatch(editProjectPrioritySortOrder({
                data: {
                    project_id: project_id,
                    sort_order: reorderedPriorities.map((priority, index) => ({
                        id: priority.id,
                        sort_order: index + 1,
                    })),
                },
            })).then((response) => {
                if (response.payload && response.payload.status === 200) {
                    // setShowPriorityList(false);
                    notifications.show({
                        color: "green",
                        title: response.payload.message,
                        icon: <IconCheck />,
                        autoClose: 5000,
                        // withCloseButton: true,
                    });
                }
            })
                .finally(() => {
                    setIsPriorityLoading(false);
                });
        } else {
            setIsPriorityLoading(false);
        }


    };

    const handleStatusDragEnd = (statusResult) => {
        if (!statusResult.destination) return;
        setIsStatusLoading(true);

        const reorderedStatuses = Array.from(projectStatuses);
        const [movedItem] = reorderedStatuses.splice(statusResult.source.index, 1);
        reorderedStatuses.splice(statusResult.destination.index, 0, movedItem);

        // Check if the order has changed
        const isOrderChanged = reorderedStatuses.some((status, index) => status.id !== projectStatuses[index].id);

        if (!isOrderChanged) {
            return;
        }

        if (statusResult.type === 'status') {

            dispatch(editProjectStatusSortOrder({
                data: {
                    project_id: project_id,
                    sort_order: reorderedStatuses.map((status, index) => ({
                        id: status.id,
                        sort_order: index + 1,
                    })),
                },
            })).then((response) => {
                if (response.payload && response.payload.status === 200) {
                    // setShowStatusList(false);
                    notifications.show({
                        color: "green",
                        title: response.payload.message,
                        icon: <IconCheck />,
                        autoClose: 5000,
                        // withCloseButton: true,
                    });
                }
            })
                .finally(() => {
                    setIsStatusLoading(false);
                });
        } else {
            setIsStatusLoading(false);
        }
    };

    const handleInputChange = (e) => {
        setNewPriority(e.target.value);
    };

    const handleColorInputChange = (e) => {
        setNewPriorityColor(e.target.value);
    };

    const handleStatusInputChange = (e) => {
        setNewStatus(e.target.value);
    };

    const handleStatusColorInputChange = (e) => {
        setNewStatusColor(e.target.value);
    };

    const handleCancelAddPriority = () => {
        setNewPriority('');
        setShowPriorityAddInput(false);
        setShowPriorityEditInput(false);
    }

    const handleCreatePriority = () => {
        setNewPriority('');
        setShowPriorityAddInput(true);
        setShowPriorityEditInput(false);
        setNewPriorityColor('#346A80');
        setTimeout(() => {
            if (priorityInputRef.current) {
                priorityInputRef.current.focus();
            }
        }, 0);
    };

    const handleAddPriority = () => {
        if (newPriority.trim() !== '' && newPriority !== 'Type name here') {
            const submitData = {
                name: newPriority,
                project_id: project_id,
                color_code: newPriorityColor,
                created_by: loggedInUser ? loggedInUser.loggedUserId : loggedUserId
            }
            dispatch(createProjectPriority(submitData))
            setNewPriority('');
        }
        setShowPriorityAddInput(false);
    };

    // priorityEditHandler
    const handleEditPriority = (priority) => {
        setShowPriorityAddInput(false);
        if (priority && priority.id) {
            setNewPriority(priority.name);
            setNewPriorityColor(priority.color_code);
            setShowPriorityEditInput(true);
            setPriorityId(priority.id);
            setTimeout(() => {
                if (priorityInputRef.current) {
                    priorityInputRef.current.focus();
                }
            }, 0);
        }

    }

    const handleDeletePriority = (priority) =>
        modals.openConfirmModal({
            title: (
                <Title order={5}>You are parmanently deleting this priority</Title>
            ),
            size: 'sm',
            radius: 'md',
            withCloseButton: false,
            centered: true,
            children: (
                <Text size="sm">
                    Are you sure you want to delete this priority?
                </Text>
            ),
            labels: { confirm: 'Confirm', cancel: 'Cancel' },
            onCancel: () => console.log('Cancel'),
            onConfirm: () => {
                if (priority && project_id) {

                    dispatch(deleteProjectPriority({ data: { id: priority.id, project_id: project_id } })).then((response) => {

                        if (response.payload && response.payload.status === 200) {

                            // setSelectedPriority
                            // const newPriorities = response.payload.data;

                            // map through the priorities and update the selected priority
                            // const priority = newPriorities.find(priority => priority.id === selectedPriority);

                            // setSelectedPriority(priority ? priority.id : '');

                            notifications.show({
                                color: "green",
                                title: response.payload.message,
                                icon: <IconCheck />,
                                autoClose: 5000,
                                // withCloseButton: true,
                            });


                        } else {
                            modals.open({
                                withCloseButton: false,
                                centered: true,
                                children: (
                                    <Fragment>
                                        <Text size="sm">
                                            {response.payload.message}
                                        </Text>
                                        <div className="!grid w-full !justify-items-center">
                                            <Button justify="center" onClick={() => modals.closeAll()} mt="md">
                                                Ok
                                            </Button>
                                        </div>
                                    </Fragment>
                                ),
                            });

                        }
                    });

                }
            },
        });

    const handleUpdatePriority = () => {
        if (newPriority.trim() !== '' && newPriority !== 'Type name here') {
            const submitData = {
                id: priorityId,
                name: newPriority,
                project_id: project_id,
                color_code: newPriorityColor,
                created_by: loggedInUser ? loggedInUser.loggedUserId : loggedUserId
            }
            dispatch(createProjectPriority(submitData)).then((response) => {

                if (response.payload && response.payload.data) {
                    // const newPriorities = response.payload.data;
                    // map through the priorities and update the selected priority
                    // const priority = newPriorities.find(priority => priority.id === selectedPriority);

                    // setSelectedPriority(priority ? priority.id : '');
                    // setSelectedPriorityName(priority ? priority.name : '');
                    // setSelectedPriorityColor(priority && priority.color_code ? priority.color_code : '#000000');
                    setNewPriority('');
                    setShowPriorityEditInput(false);

                    notifications.show({
                        color: "green",
                        title: response.payload.message,
                        icon: <IconCheck />,
                        autoClose: 5000,
                        // withCloseButton: true,
                    });

                }

            })
        }
    };

    const handleCreateStatus = () => {
        setNewStatus('');
        setShowStatusAddInput(true);
        setShowStatusEditInput(false);
        setNewStatusColor('#346A80');
        setTimeout(() => {
            if (statusInputRef.current) {
                statusInputRef.current.focus();
            }
        }, 0);
    };

    const handleAddStatus = () => {
        if (newStatus.trim() !== '' && newStatus !== 'Type name here') {
            const submitData = {
                name: newStatus,
                project_id: project_id,
                color_code: newStatusColor,
                created_by: loggedInUser ? loggedInUser.loggedUserId : loggedUserId
            }
            dispatch(createProjectStatus(submitData))
            setNewStatus('');
        }
        setShowStatusAddInput(false);
    };

    const handleCancelAddStatus = () => {
        setNewStatus('');
        setShowStatusAddInput(false);
        setShowStatusEditInput(false);
    }

    const handleEditStatus = (status) => {
        setShowStatusAddInput(false);
        if (status && status.id) {
            setNewStatus(status.name);
            setNewStatusColor(status.color_code);
            setShowStatusEditInput(true);
            setStatusId(status.id);
            setTimeout(() => {
                if (statusInputRef.current) {
                    statusInputRef.current.focus();
                }
            }, 0);
        }
    }

    const handleUpdateStatus = () => {
        if (newStatus.trim() !== '' && newStatus !== 'Type name here') {
            const submitData = {
                id: statusId,
                name: newStatus,
                project_id: project_id,
                color_code: newStatusColor,
                created_by: loggedInUser ? loggedInUser.loggedUserId : loggedUserId
            }
            dispatch(createProjectStatus(submitData)).then((response) => {

                if (response.payload && response.payload.data) {

                    setNewStatus('');
                    setShowStatusEditInput(false);

                    notifications.show({
                        color: "green",
                        title: response.payload.message,
                        icon: <IconCheck />,
                        autoClose: 5000,
                    });
                }

            })
        }
    };

    const handleDeleteStatus = (status) =>
        modals.openConfirmModal({
            title: (
                <Title order={5}>You are parmanently deleting this status</Title>
            ),
            size: 'sm',
            radius: 'md',
            withCloseButton: false,
            centered: true,
            children: (
                <Text size="sm">
                    Are you sure you want to delete this status?
                </Text>
            ),
            labels: { confirm: 'Confirm', cancel: 'Cancel' },
            onCancel: () => console.log('Cancel'),
            onConfirm: () => {
                if (status && project_id) {

                    dispatch(deleteProjectStatus({ data: { id: status.id, project_id: project_id } })).then((response) => {

                        if (response.payload && response.payload.status === 200) {

                            notifications.show({
                                color: "green",
                                title: response.payload.message,
                                icon: <IconCheck />,
                                autoClose: 5000,
                            });


                        } else {
                            modals.open({
                                withCloseButton: false,
                                centered: true,
                                children: (
                                    <Fragment>
                                        <Text size="sm">
                                            {response.payload.message}
                                        </Text>
                                        <div className="!grid w-full !justify-items-center">
                                            <Button justify="center" onClick={() => modals.closeAll()} mt="md">
                                                Ok
                                            </Button>
                                        </div>
                                    </Fragment>
                                ),
                            });

                        }
                    });

                }
            },
        });

    const handleKeyPressForPriority = (e) => {
        if (e.key === 'Enter') {
            if (showPriorityAddInput) {
                handleAddPriority();
            } else if (showPriorityEditInput) {
                handleUpdatePriority();
            }
        } else if (e.key === 'Escape') {
            handleCancelAddPriority();
        }
    };

    const handleKeyPressForStatus = (e) => {
        if (e.key === 'Enter') {
            if (showStatusAddInput) {
                handleAddStatus();
            } else if (showStatusEditInput) {
                handleUpdateStatus();
            }
        } else if (e.key === 'Escape') {
            handleCancelAddStatus();
        }
    };

    const handleRemoveMember = async (member) => {
        try {
            const res = await getUserProjectTaskCount(member.id, project_id);
            setRemoveMemberModal({ member, taskCount: res?.task_count || 0 });
        } catch {
            setRemoveMemberModal({ member, taskCount: 0 });
        }
    };

    const handleConfirmRemoveMember = async () => {
        const { member } = removeMemberModal;
        const res = await dispatch(removeUserFromProjectThunk({ userId: member.id, projectId: project_id }));
        if (res.payload?.status === 200) {
            const updatedMembers = boardMembers.filter((m) => parseInt(m.id) !== parseInt(member.id));
            dispatch(updateBoardMembers(updatedMembers));
            showNotification({ title: translate('Member removed'), color: 'green', autoClose: 2000 });
        } else {
            showNotification({ title: res.payload?.message || translate('Failed'), color: 'red', autoClose: 2000 });
        }
        setRemoveMemberModal(null);
    };

    const handleAddMember = () => {
        if (!selectedNewMember || !addMemberRoleId) {
            showNotification({ title: translate('Role and member required'), color: 'red', autoClose: 2000 });
            return;
        }
        setAddMemberLoading(true);
        const memberWithRole = { ...selectedNewMember, role_id: addMemberRoleId };
        const updatedMembers = [...boardMembers, memberWithRole];
        dispatch(editProject({ id: project_id, data: { members: updatedMembers, updated_by: loggedUserId } }))
            .then((res) => {
                if (res.payload?.status === 200) {
                    dispatch(updateBoardMembers(res.payload.data.members || []));
                    showNotification({ title: translate('Member added'), color: 'green', autoClose: 2000 });
                    setShowAddMember(false);
                    setSelectedNewMember(null);
                    setAddMemberRoleId(null);
                }
            }).finally(() => setAddMemberLoading(false));
    };

    const sidebarNavItems = [
        { key: 'general',  label: translate('General'),  Icon: IconSettings2,  disabled: !canSeeGeneral },
        { key: 'views',    label: translate('Views'),    Icon: IconLayoutGrid, disabled: !canSeeViews },
        { key: 'priority', label: translate('Priority'), Icon: IconFlag,       disabled: !canSeePriority },
        { key: 'status',   label: translate('Status'),   Icon: IconClock,      disabled: !canSeeStatus },
        { key: 'members',  label: translate('Members'),  Icon: IconUsers,      disabled: !canSeeMembers },
    ];

    // If the current tab becomes inaccessible (e.g. permissions load after mount), advance to first allowed tab
    useEffect(() => {
        const current = sidebarNavItems.find(item => item.key === activePanel);
        if (current?.disabled) {
            const firstAllowed = sidebarNavItems.find(item => !item.disabled);
            if (firstAllowed) setActivePanel(firstAllowed.key);
        }
    }, [canSeeGeneral, canSeeMembers, canSeeViews, canSeePriority, canSeeStatus]);

    return (
        <>
            <Modal
                opened={opened}
                onClose={onClose}
                title={
                    <Group spacing="xs">
                        <ThemeIcon color="orange" radius="md" size="lg" variant="light">
                            <IconSettings2 size={24} />
                        </ThemeIcon>
                        <Text size="lg" fw={600} c="#202020">
                            {translate('Project Settings')}
                        </Text>
                    </Group>
                }
                size={appLocalizer?.is_admin ? '65%' : '100%'}
                centered
                closeOnEscape={false}
                styles={{ body: { padding: 0 } }}
            >
                <Divider size="xs" my={0} />

                <div style={{ display: 'flex', height: '80vh', overflow: 'hidden' }}>

                    {/* ── Sidebar ── */}
                    <nav style={{ width: 190, borderRight: '1px solid #e9ecef', padding: '16px 10px', flexShrink: 0, display: 'flex', flexDirection: 'column', gap: 2 }}>
                        <Text size="xs" fw={600} c="#868e96" style={{ padding: '0 8px 10px', letterSpacing: '0.5px', textTransform: 'uppercase' }}>
                            {translate('Settings')}
                        </Text>
                        {sidebarNavItems.map(({ key, label, Icon, disabled }) => (
                            <button
                                key={key}
                                onClick={() => { if (!disabled) { setActivePanel(key); setEditingName(false); } }}
                                disabled={disabled}
                                style={{
                                    display: 'flex',
                                    alignItems: 'center',
                                    gap: 10,
                                    width: '100%',
                                    padding: '9px 12px',
                                    borderRadius: 8,
                                    border: 'none',
                                    background: activePanel === key ? '#fff4ec' : 'transparent',
                                    color: disabled ? '#c1c5cb' : activePanel === key ? '#ED7D31' : '#495057',
                                    fontWeight: activePanel === key ? 600 : 500,
                                    fontSize: 13.5,
                                    cursor: disabled ? 'not-allowed' : 'pointer',
                                    textAlign: 'left',
                                    transition: 'background 0.13s, color 0.13s',
                                    opacity: disabled ? 0.5 : 1,
                                }}
                                onMouseEnter={(e) => { if (activePanel !== key && !disabled) e.currentTarget.style.background = '#f8f9fa'; }}
                                onMouseLeave={(e) => { if (activePanel !== key) e.currentTarget.style.background = 'transparent'; }}
                            >
                                <Icon size={16} />
                                {label}
                            </button>
                        ))}
                    </nav>

                    {/* ── Content area ── */}
                    <div style={{ flex: 1, overflowY: 'auto', padding: '20px 24px' }}>

                        {/* ── GENERAL PANEL ── */}
                        {activePanel === 'general' && (
                            <div>
                                <Text fw={700} size="sm" c="#202020" mb={4}>{translate('General')}</Text>
                                <Text size="xs" c="#868e96" mb={16}>{translate('Update the basic information for this project.')}</Text>
                                <div style={{ marginBottom: 14 }}>
                                    <Text size="xs" fw={600} c="#495057" mb={4}>{translate('Project Name')}</Text>
                                    <TextInput
                                        value={genName}
                                        onChange={e => setGenName(e.target.value)}
                                        placeholder={translate('Enter project name')}
                                        size="sm"
                                        readOnly={!editingName}
                                        styles={!editingName ? { input: { cursor: 'default', backgroundColor: '#f8f9fa' } } : undefined}
                                        rightSection={
                                            genSaving ? (
                                                <Loader size={16} color="orange" />
                                            ) : editingName ? (
                                                <ActionIcon
                                                    color="orange"
                                                    variant="filled"
                                                    radius="xl"
                                                    size="sm"
                                                    onClick={handleSaveGeneral}
                                                    disabled={!genName.trim()}
                                                >
                                                    <IconDeviceFloppy size={14} stroke={1.5} />
                                                </ActionIcon>
                                            ) : (
                                                <ActionIcon
                                                    color={canEditProject ? 'orange' : 'gray'}
                                                    variant="subtle"
                                                    radius="xl"
                                                    size="sm"
                                                    onClick={canEditProject ? () => setEditingName(true) : undefined}
                                                    disabled={!canEditProject}
                                                    style={!canEditProject ? { cursor: 'not-allowed' } : undefined}
                                                >
                                                    <IconPencil size={14} stroke={1.5} />
                                                </ActionIcon>
                                            )
                                        }
                                    />
                                </div>
                                <div style={{ marginBottom: 14, opacity: canManageSection ? 1 : 0.5 }}>
                                    <Text size="xs" fw={600} c="#495057" mb={4}>{translate('Designated Complete Section')}</Text>
                                    <Text size="xs" c="#868e96" mb={6}>{translate('Tasks moved to this section are automatically marked as complete.')}</Text>
                                    <Select
                                        value={completeSectionId}
                                        onChange={handleCompleteSection}
                                        placeholder={translate('None selected')}
                                        disabled={!canManageSection || completeSectionSaving}
                                        clearable
                                        data={Object.values(taskListSections || {})
                                            .filter(s => !['ARCHIVED_R', 'ARCHIVED_C'].includes(s.mark_is_complete))
                                            .map(s => ({ value: String(s.id), label: s.name }))
                                        }
                                        size="sm"
                                    />
                                </div>
                                <div style={{ marginBottom: 14, opacity: canSeeStatus ? 1 : 0.5 }}>
                                    <Text size="xs" fw={600} c="#495057" mb={4}>{translate('Designated Complete Status')}</Text>
                                    <Text size="xs" c="#868e96" mb={6}>{translate('When a task\'s status is set to this, it automatically triggers the completion workflow.')}</Text>
                                    <Select
                                        value={completeStatusId}
                                        onChange={handleCompleteStatus}
                                        placeholder={translate('None selected')}
                                        disabled={!canSeeStatus || completeStatusSaving}
                                        clearable
                                        data={(projectStatuses || [])
                                            .map(s => ({ value: String(s.id), label: s.name }))
                                        }
                                        size="sm"
                                    />
                                </div>
                            </div>
                        )}

                        {/* ── VIEWS PANEL ── */}
                        {activePanel === 'views' && (
                            <div>
                                <Text fw={700} size="sm" c="#202020" mb={4}>{translate('Configure Project Views')}</Text>
                                <Text size="xs" c="#868e96" mb={16}>{translate('Choose which views are available for this project.')}</Text>
                                {hasPermission(loggedInUser, ['config-project'], projectPermissions, 'project') ? (
                                    <>
                                        {tabs.map((tab) => (
                                            <div
                                                key={tab.key}
                                                style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '10px 14px', border: '1px solid #e9ecef', borderRadius: 8, marginBottom: 8, background: '#fff' }}
                                            >
                                                <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                                                    <ThemeIcon color="orange" radius="lg" size="md" variant="light">
                                                        <tab.icon size={16} />
                                                    </ThemeIcon>
                                                    <div>
                                                        <Text size="sm" fw={600} c="#202020" style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                                                            {translate(tab.name)}
                                                            {tab.badge && <span style={{ marginLeft: 6 }}>{tab.badge}</span>}
                                                        </Text>
                                                        <Text size="xs" c="#868e96">{translate(tab.description)}</Text>
                                                    </div>
                                                </div>
                                                {tab.key !== 'list' ? (
                                                    <Switch
                                                        checked={!!localEnabled[tab.key]}
                                                        onChange={(e) => handleChange(tab.key, e.currentTarget.checked)}
                                                        color="orange"
                                                        size="sm"
                                                        radius="sm"
                                                    />
                                                ) : (
                                                    <Text size="xs" c="dimmed">{translate('Default')}</Text>
                                                )}
                                            </div>
                                        ))}
                                        <Group justify='flex-end' mt={16}>
                                            <Button
                                                variant="filled"
                                                color='orange'
                                                onClick={handleSaveChanges}
                                                disabled={loading}
                                                loading={loading}
                                                loaderProps={{ type: 'dots' }}
                                                size='sm'
                                                radius="md"
                                                fw={500}
                                            >
                                                {translate('Save Changes')}
                                            </Button>
                                        </Group>
                                    </>
                                ) : (
                                    <Text size="sm" c="dimmed">{translate('You do not have permission to configure project tabs.')}</Text>
                                )}
                            </div>
                        )}

                        {/* ── PRIORITY PANEL ── */}
                        {activePanel === 'priority' && (
                            <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
                                <Text fw={700} size="sm" c="#202020" mb={4}>{translate('Priority Levels')}</Text>
                                <Text size="xs" c="#868e96" mb={16}>{translate('Create and reorder task priorities for this project.')}</Text>
                                {hasPermission(loggedInUser, ['config-project'], projectPermissions, 'project') ? (
                                    <DragDropContext onDragEnd={handlePriorityDragEnd}>
                                        <Droppable droppableId="priorityList" type="priority">
                                            {(provided, snapshot) => (
                                                <Box {...provided.droppableProps} ref={provided.innerRef} style={{ position: 'relative', overflow: 'visible', display: 'flex', flexDirection: 'column', flex: 1, minHeight: 0 }}>
                                                    <Button variant="light" color="orange" size="sm" radius="md" mb={10} fw={500}
                                                        leftSection={<IconPlus size={16} />}
                                                        onClick={handleCreatePriority}
                                                        fullWidth
                                                    >
                                                        {translate('Add New Priority')}
                                                    </Button>
                                                    <ScrollArea style={{ flex: 1, minHeight: 0 }} scrollbarSize={4}>
                                                        {projectPriorities && projectPriorities.map((priority, index) => (
                                                            <Draggable key={priority.id} draggableId={priority.id.toString()} index={index}>
                                                                {(provided, snapshot) => (
                                                                    <Box
                                                                        ref={provided.innerRef}
                                                                        {...provided.draggableProps}
                                                                        {...provided.dragHandleProps}
                                                                        className={`dnd-item ${snapshot.isDragging ? 'dragging' : ''}`}
                                                                        style={{
                                                                            ...provided.draggableProps.style,
                                                                            ...(snapshot.isDragging && { position: 'fixed', zIndex: 1000 }),
                                                                        }}
                                                                    >
                                                                        <div
                                                                            style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '9px 12px', border: '1px solid #e9ecef', borderRadius: 8, marginBottom: 8, background: '#fff' }}
                                                                            className="hover:bg-gray-50 transition-colors"
                                                                        >
                                                                            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                                                                                <ThemeIcon color='#BABABA' radius="xl" size="sm" variant="transparent" style={{ cursor: 'grab' }}>
                                                                                    <IconGripHorizontal size={16} />
                                                                                </ThemeIcon>
                                                                                <Box className="w-[14px] h-[14px] rounded-full shadow-sm flex-shrink-0" style={{ backgroundColor: priority.color_code }} />
                                                                                <Text size="sm" fw={500} c="#202020" lineClamp={1} style={{ maxWidth: 240 }}>
                                                                                    {translate(priority.name)}
                                                                                </Text>
                                                                            </div>
                                                                            <div style={{ display: 'flex', gap: 6 }}>
                                                                                <ActionIcon color="orange" variant="light" radius="xl" onClick={() => handleEditPriority(priority)}>
                                                                                    <IconPencil size={14} color='orange' />
                                                                                </ActionIcon>
                                                                                <ActionIcon color="red" variant="light" radius="xl" onClick={() => handleDeletePriority(priority)}>
                                                                                    <IconTrash size={14} color='red' />
                                                                                </ActionIcon>
                                                                            </div>
                                                                        </div>
                                                                    </Box>
                                                                )}
                                                            </Draggable>
                                                        ))}
                                                        {provided.placeholder}
                                                        <Box>
                                                            {showPriorityAddInput && (
                                                                <Group position="apart" spacing="xs" justify='space-between'
                                                                    style={{ padding: '7px 14px', border: '1px solid #E0E0E0', borderRadius: 8, backgroundColor: '#FFFFFF', width: '100%' }}
                                                                >
                                                                    <Group spacing="sm" justify='flex-start'>
                                                                        <input className="w-[35px] h-[35px] rounded-sm text-[12px]" type="color" value={newPriorityColor} onChange={handleColorInputChange} placeholder="Color" />
                                                                        <TextInput ref={priorityInputRef} size="sm" defaultValue={newPriority} onChange={handleInputChange} onKeyDown={handleKeyPressForPriority} placeholder={'Type name here'} style={{ flex: 1, width: '220px' }} />
                                                                    </Group>
                                                                    <Group spacing="sm" justify='flex-start'>
                                                                        <ActionIcon onClick={handleAddPriority} radius="xl" color="#ED7D31" variant="filled">
                                                                            <IconDeviceFloppy size={16} stroke={1.5} />
                                                                        </ActionIcon>
                                                                        <ActionIcon onClick={handleCancelAddPriority} radius="xl" color="#EBF1F4" variant="filled">
                                                                            <IconX size={16} stroke={1.5} color="#000000" />
                                                                        </ActionIcon>
                                                                    </Group>
                                                                </Group>
                                                            )}
                                                            {showPriorityEditInput && (
                                                                <Group position="apart" spacing="xs" justify='space-between'
                                                                    style={{ padding: '7px 14px', border: '1px solid #E0E0E0', borderRadius: 8, backgroundColor: '#FFFFFF', width: '100%' }}
                                                                >
                                                                    <Group spacing="sm" justify='flex-start'>
                                                                        <input className="w-[35px] h-[35px] rounded-sm text-[12px]" type="color" value={newPriorityColor} onChange={handleColorInputChange} placeholder="Color" />
                                                                        <TextInput ref={priorityInputRef} size="sm" defaultValue={newPriority} onChange={handleInputChange} onKeyDown={handleKeyPressForPriority} placeholder={'Type name here'} style={{ flex: 1, width: '220px' }} />
                                                                    </Group>
                                                                    <Group spacing="sm" justify='flex-start'>
                                                                        <ActionIcon onClick={handleUpdatePriority} size={30} radius="xl" color="#ED7D31" variant="filled">
                                                                            <IconDeviceFloppy style={{ width: '22px', height: '22px' }} stroke={1.5} />
                                                                        </ActionIcon>
                                                                        <ActionIcon onClick={handleCancelAddPriority} size={30} radius="xl" color="#EBF1F4" variant="filled">
                                                                            <IconX style={{ width: '22px', height: '22px' }} stroke={1.5} color="#000000" />
                                                                        </ActionIcon>
                                                                    </Group>
                                                                </Group>
                                                            )}
                                                        </Box>
                                                    </ScrollArea>
                                                </Box>
                                            )}
                                        </Droppable>
                                    </DragDropContext>
                                ) : (
                                    <Text size="sm" c="dimmed">{translate('You do not have permission to manage priorities.')}</Text>
                                )}
                            </div>
                        )}

                        {/* ── STATUS PANEL ── */}
                        {activePanel === 'status' && (
                            <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
                                <Text fw={700} size="sm" c="#202020" mb={4}>{translate('Task Statuses')}</Text>
                                <Text size="xs" c="#868e96" mb={16}>{translate('Define the workflow statuses available in this project.')}</Text>
                                {hasPermission(loggedInUser, ['config-project'], projectPermissions, 'project') ? (
                                    <DragDropContext onDragEnd={handleStatusDragEnd}>
                                        <Droppable droppableId="statusList" type="status">
                                            {(provided) => (
                                                <Box {...provided.droppableProps} ref={provided.innerRef} style={{ display: 'flex', flexDirection: 'column', flex: 1, minHeight: 0 }}>
                                                    <Button variant="light" color="orange" size="sm" radius="md" mb={10} fw={500}
                                                        leftSection={<IconPlus size={16} />}
                                                        onClick={handleCreateStatus}
                                                        fullWidth
                                                    >
                                                        {translate('Add New Status')}
                                                    </Button>
                                                    <ScrollArea style={{ flex: 1, minHeight: 0 }} scrollbarSize={4}>
                                                        {projectStatuses && projectStatuses.map((status, index) => (
                                                            <Draggable key={status.id} draggableId={status.id.toString()} index={index}>
                                                                {(provided, snapshot) => (
                                                                    <Box
                                                                        ref={provided.innerRef}
                                                                        {...provided.draggableProps}
                                                                        {...provided.dragHandleProps}
                                                                        className={`dnd-item ${snapshot.isDragging ? 'dragging' : ''}`}
                                                                        style={{
                                                                            ...provided.draggableProps.style,
                                                                            ...(snapshot.isDragging && { position: 'fixed', zIndex: 1000 }),
                                                                        }}
                                                                    >
                                                                        <div
                                                                            style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '9px 12px', border: '1px solid #e9ecef', borderRadius: 8, marginBottom: 8, background: '#fff' }}
                                                                            className="hover:bg-gray-50 transition-colors"
                                                                        >
                                                                            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                                                                                <ThemeIcon color='#BABABA' radius="xl" size="sm" variant="transparent" style={{ cursor: 'grab' }}>
                                                                                    <IconGripHorizontal size={16} />
                                                                                </ThemeIcon>
                                                                                <Box className="w-[14px] h-[14px] rounded-full shadow-sm flex-shrink-0" style={{ backgroundColor: status.color_code }} />
                                                                                <Text size="sm" fw={500} c="#202020" lineClamp={1} style={{ maxWidth: 240 }}>
                                                                                    {translate(status.name)}
                                                                                </Text>
                                                                            </div>
                                                                            <div style={{ display: 'flex', gap: 6 }}>
                                                                                <ActionIcon color="orange" variant="light" radius="xl" onClick={() => handleEditStatus(status)}>
                                                                                    <IconPencil size={14} color='orange' />
                                                                                </ActionIcon>
                                                                                <ActionIcon color="red" variant="light" radius="xl" onClick={() => handleDeleteStatus(status)}>
                                                                                    <IconTrash size={14} color='red' />
                                                                                </ActionIcon>
                                                                            </div>
                                                                        </div>
                                                                    </Box>
                                                                )}
                                                            </Draggable>
                                                        ))}
                                                        {provided.placeholder}
                                                        <Box>
                                                            {showStatusAddInput && (
                                                                <Group position="apart" spacing="xs" justify='space-between'
                                                                    style={{ padding: '7px 14px', border: '1px solid #E0E0E0', borderRadius: 8, backgroundColor: '#FFFFFF', width: '100%' }}
                                                                >
                                                                    <Group spacing="sm" justify='flex-start'>
                                                                        <input className="w-[35px] h-[35px] rounded-sm text-[12px]" type="color" value={newStatusColor} onChange={handleStatusColorInputChange} placeholder="Color" />
                                                                        <TextInput ref={statusInputRef} size="sm" defaultValue={newStatus} onChange={handleStatusInputChange} onKeyDown={handleKeyPressForStatus} placeholder={'Type name here'} style={{ flex: 1, width: '220px' }} />
                                                                    </Group>
                                                                    <Group spacing="sm" justify='flex-start'>
                                                                        <ActionIcon onClick={handleAddStatus} radius="xl" color="#ED7D31" variant="filled">
                                                                            <IconDeviceFloppy size={16} stroke={1.5} />
                                                                        </ActionIcon>
                                                                        <ActionIcon onClick={handleCancelAddStatus} radius="xl" color="#EBF1F4" variant="filled">
                                                                            <IconX size={16} stroke={1.5} color="#000000" />
                                                                        </ActionIcon>
                                                                    </Group>
                                                                </Group>
                                                            )}
                                                            {showStatusEditInput && (
                                                                <Group position="apart" spacing="xs" justify='space-between'
                                                                    style={{ padding: '7px 14px', border: '1px solid #E0E0E0', borderRadius: 8, backgroundColor: '#FFFFFF', width: '100%' }}
                                                                >
                                                                    <Group spacing="sm" justify='flex-start'>
                                                                        <input className="w-[35px] h-[35px] rounded-sm text-[12px]" type="color" value={newStatusColor} onChange={handleStatusColorInputChange} placeholder="Color" />
                                                                        <TextInput ref={statusInputRef} size="sm" defaultValue={newStatus} onChange={handleStatusInputChange} onKeyDown={handleKeyPressForStatus} placeholder={'Type name here'} style={{ flex: 1, width: '220px' }} />
                                                                    </Group>
                                                                    <Group spacing="sm" justify='flex-start'>
                                                                        <ActionIcon onClick={handleUpdateStatus} size={30} radius="xl" color="#ED7D31" variant="filled">
                                                                            <IconDeviceFloppy style={{ width: '22px', height: '22px' }} stroke={1.5} />
                                                                        </ActionIcon>
                                                                        <ActionIcon onClick={handleCancelAddStatus} size={30} radius="xl" color="#EBF1F4" variant="filled">
                                                                            <IconX style={{ width: '22px', height: '22px' }} stroke={1.5} color="#000000" />
                                                                        </ActionIcon>
                                                                    </Group>
                                                                </Group>
                                                            )}
                                                        </Box>
                                                    </ScrollArea>
                                                </Box>
                                            )}
                                        </Droppable>
                                    </DragDropContext>
                                ) : (
                                    <Text size="sm" c="dimmed">{translate('You do not have permission to manage statuses.')}</Text>
                                )}
                            </div>
                        )}

                        {/* ── MEMBERS PANEL ── */}
                        {activePanel === 'members' && (
                            <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
                                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 4 }}>
                                    <Text fw={700} size="sm" c="#202020">{translate('Project Members')}</Text>
                                    <Button
                                        variant="light"
                                        color="orange"
                                        size="xs"
                                        radius="md"
                                        leftSection={<IconPlus size={14} />}
                                        disabled={!canAddMember}
                                        onClick={!canAddMember ? undefined : () => { setShowAddMember((v) => !v); setSelectedNewMember(null); setAddMemberRoleId(null); }}
                                        className={!canAddMember ? 'opacity-50 cursor-not-allowed' : ''}
                                    >
                                        {translate('Add Member')}
                                    </Button>
                                </div>
                                <Text size="xs" c="#868e96" mb={12}>{translate('Manage who has access to this project and their roles.')}</Text>

                                {showAddMember && (
                                    <div style={{ display: 'flex', gap: 8, alignItems: 'center', padding: '10px 14px', border: '1px dashed #ED7D31', borderRadius: 8, marginBottom: 12, background: '#fff8f4' }}>
                                        <Select
                                            placeholder={translate('Search member...')}
                                            searchable
                                            size="xs"
                                            radius="md"
                                            style={{ flex: 1 }}
                                            data={(allMembers || [])
                                                .filter((m) => !boardMembers?.some((bm) => parseInt(bm.id) === parseInt(m.id)))
                                                .map((m) => ({ value: m.id?.toString(), label: m.name + (m.email ? ` (${m.email})` : '') }))
                                            }
                                            value={selectedNewMember?.id?.toString() || null}
                                            onChange={(val) => {
                                                const found = (allMembers || []).find((m) => m.id?.toString() === val);
                                                setSelectedNewMember(found || null);
                                            }}
                                            comboboxProps={{ withinPortal: true }}
                                        />
                                        <Select
                                            placeholder={translate('Role')}
                                            size="xs"
                                            radius="md"
                                            style={{ minWidth: 120 }}
                                            data={(roles || []).filter(r => r.slug !== 'superadmin').map((r) => ({ value: r.id?.toString(), label: r.name || r.label }))}
                                            value={addMemberRoleId}
                                            onChange={setAddMemberRoleId}
                                            comboboxProps={{ withinPortal: true }}
                                        />
                                        <Button size="xs" radius="md" color="orange" loading={addMemberLoading} disabled={!canAddMember} onClick={!canAddMember ? undefined : handleAddMember}>{translate('Add')}</Button>
                                        <ActionIcon variant="subtle" color="gray" radius="xl" onClick={() => setShowAddMember(false)}><IconX size={14} /></ActionIcon>
                                    </div>
                                )}

                                <ScrollArea style={{ flex: 1, minHeight: 0 }} scrollbarSize={4} type="auto">
                                    {boardMembers && boardMembers.length > 0 ? boardMembers.map((member) => {
                                        const selectedRoleId = memberRoles[member.id] || member.project_role?.id?.toString() || null;
                                        const selectedRoleLabel = selectedRoleId && roles ? roles.find((r) => r.id?.toString() === selectedRoleId)?.name || roles.find((r) => r.id?.toString() === selectedRoleId)?.label || '' : '';
                                        return (
                                            <div
                                                key={member.id}
                                                style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '14px 16px', border: '1px solid #e9ecef', borderRadius: 10, marginBottom: 10, background: '#fff' }}
                                                className="hover:border-gray-300 hover:shadow-sm transition-all"
                                            >
                                                <div style={{ display: 'flex', alignItems: 'center', gap: 13 }}>
                                                    <UserAvatarSingle user={member} size={44} />
                                                    <div>
                                                        <Text size="sm" fw={600} c="#202020">{member.name}</Text>
                                                        <Text size="xs" c="#868e96" mt={1}>{member.email}</Text>
                                                        {selectedRoleLabel && (
                                                            <span style={{ display: 'inline-flex', alignItems: 'center', padding: '2px 8px', borderRadius: 20, background: '#f1f3f5', color: '#495057', fontSize: 11, fontWeight: 600, marginTop: 4, border: '1px solid #e9ecef' }}>
                                                                {selectedRoleLabel}
                                                            </span>
                                                        )}
                                                    </div>
                                                </div>
                                                <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexShrink: 0 }}>
                                                    {roles && roles.length > 0 && (
                                                        <Select
                                                            size="xs"
                                                            radius="md"
                                                            data={roles.filter(r => r.slug !== 'superadmin').map((r) => ({ value: r.id?.toString(), label: r.name || r.label }))}
                                                            value={selectedRoleId}
                                                            onChange={(val) => {
                                                                setMemberRoles((prev) => ({ ...prev, [member.id]: val }));
                                                                dispatch(changeMemberProjectRole({
                                                                    id: project_id,
                                                                    data: { member: { ...member, role_id: val }, updated_by: loggedUserId },
                                                                })).then((res) => {
                                                                    if (res.payload?.status === 200) {
                                                                        showNotification({ title: translate('Role updated'), color: 'green', autoClose: 2000 });
                                                                    }
                                                                });
                                                            }}
                                                            placeholder={translate('Select Role')}
                                                            style={{ minWidth: 130 }}
                                                            comboboxProps={{ withinPortal: true }}
                                                        />
                                                    )}
                                                    {canRemoveMember && (
                                                    <ActionIcon
                                                        color="red"
                                                        variant="light"
                                                        radius="xl"
                                                        onClick={() => handleRemoveMember(member)}
                                                    >
                                                        <IconTrash size={14} color='red' />
                                                    </ActionIcon>
                                                    )}
                                                </div>
                                            </div>
                                        );
                                    }) : (
                                        <Text size="sm" c="dimmed" ta="center" mt={40}>{translate('No members found.')}</Text>
                                    )}
                                </ScrollArea>
                            </div>
                        )}

                    </div>
                </div>

            </Modal>

            {/* ── Remove Member Modal ── */}
            <Modal opened={!!removeMemberModal} onClose={() => setRemoveMemberModal(null)} title={translate('Remove member')} centered size="sm">
                {removeMemberModal && (() => {
                    const { member, taskCount } = removeMemberModal;
                    return (
                        <div>
                            {taskCount > 0 && (
                                <div style={{ background: '#FFF7ED', border: '1px solid #FDBA74', borderRadius: 8, padding: '10px 12px', marginBottom: 12 }}>
                                    <Text size="xs" c="#92400E">
                                        <strong>{taskCount} task{taskCount > 1 ? 's' : ''}</strong> {translate('assigned to this user in')} <strong>{projectInfo?.name}</strong> {translate('will be')} <strong>{translate('unassigned')}</strong>.
                                    </Text>
                                </div>
                            )}
                            <Text size="sm" mb={12}>
                                {translate('Remove')} <strong>{member.first_name || member.name}</strong> {translate('from')} <strong>{projectInfo?.name}</strong>?
                            </Text>
                            <Group justify="flex-end">
                                <Button variant="default" size="xs" onClick={() => setRemoveMemberModal(null)}>{translate('Cancel')}</Button>
                                <Button color="red" size="xs" onClick={handleConfirmRemoveMember}>{translate('Remove')}</Button>
                            </Group>
                        </div>
                    );
                })()}
            </Modal>
        </>
    );
};

export default ProjectSettingsModal;