import React, { Fragment, useEffect, useRef, useMemo } from 'react';
import TaskListSectionByPriority from './TasksElements/SectionByPriority/TaskListSectionByPriority';
import { Grid, LoadingOverlay, ScrollArea, Text, Overlay, Box, Badge } from "@mantine/core";
import { useSelector, useDispatch } from "react-redux";
import { fetchSettings } from "../../Settings/store/settingSlice";
import { fetchTasksByProject, updateTasksLoading } from '../../Settings/store/taskSlice';
import { translate } from '../../../utils/i18n';
import { IconArchive } from '@tabler/icons-react';

const ProjectDetailsListSectionByPriority = (props) => {
    const dispatch = useDispatch();
    const { isLoading, projectInfo, isTasksLoading } = useSelector((state) => state.settings.task);
    const { serialSettings } = useSelector((state) => state.settings.setting);
    const { loggedUserId } = useSelector((state) => state.auth.user);
    const { loggedInUser } = useSelector((state) => state.auth.session);
    const loadedProjectRef = useRef(null);

    const userId = useMemo(() => loggedInUser ? loggedInUser.loggedUserId : loggedUserId, [loggedInUser, loggedUserId]);

    useEffect(() => {
        if (!serialSettings) {
            dispatch(fetchSettings());
        }
    }, [dispatch, serialSettings]);

    // Fetch project info (priorities, members, etc.) using fetchTasksByProject
    // This populates projectPriorities in Redux state, which TaskListSectionByPriority uses
    useEffect(() => {
        if (!projectInfo?.id) return;
        if (loadedProjectRef.current === projectInfo.id) return;

        loadedProjectRef.current = projectInfo.id;
    }, [projectInfo?.id]);

    return (
        <Fragment>
            <div className="border border-b-0 rounded-t-xl px-2 py-3 bg-white !pl-[25px]">
                <Grid gutter="0" columns={24}>
                    <Grid.Col span={22}>
                        <Grid columns={24} align="center">
                            {serialSettings && serialSettings.enabled && (
                                <Grid.Col span={1.5}>
                                    <Text c="dimmed" className="!pl-[20px]" fz="xs" fw={600} tt="uppercase" ls={0.5}>{translate('Ref.#')}</Text>
                                </Grid.Col>
                            )}
                            <Grid.Col span={serialSettings && serialSettings.enabled ? 9.5 : 11}>
                                <Text c="dimmed" className={serialSettings && serialSettings.enabled ? '!pl-[5px]' : '!pl-[30px]'} style={{ marginLeft: serialSettings && serialSettings.enabled ? '-40px' : '0' }} fz="xs" fw={600} tt="uppercase" ls={0.5}>{translate('Task Title')}</Text>
                            </Grid.Col>
                            <Grid.Col span={1.5}>
                                <Text c="dimmed" className="!pl-0" fz="xs" fw={600} tt="uppercase" ls={0.5}>{translate('Assigned')}</Text>
                            </Grid.Col>
                            <Grid.Col span={3}>
                                <Text c="dimmed" ta="center" fz="xs" fw={600} tt="uppercase" ls={0.5}>{translate('Due Date')}</Text>
                            </Grid.Col>
                            <Grid.Col span={2.5}>
                                <Text c="dimmed" ta="center" fz="xs" fw={600} tt="uppercase" ls={0.5}>{translate('Priority')}</Text>
                            </Grid.Col>
                            <Grid.Col span={2.5}>
                                <Text c="dimmed" ta="center" fz="xs" fw={600} tt="uppercase" ls={0.5}>{translate('Status')}</Text>
                            </Grid.Col>
                            <Grid.Col span={3.5} className="!pl-10">
                                <Text c="dimmed" fz="xs" fw={600} tt="uppercase" ls={0.5}>{translate('Tags')}</Text>
                            </Grid.Col>
                        </Grid>
                    </Grid.Col>
                </Grid>
            </div>
            <Box style={{ position: 'relative' }}>
                {projectInfo && projectInfo?.status_name === 'archived' && (
                    <>
                        <Overlay blur={2} opacity={0.7} color="#fff" zIndex={20} />
                        <Box
                            style={{
                                position: 'absolute',
                                top: '50%',
                                left: '50%',
                                transform: 'translate(-50%, -50%)',
                                zIndex: 25,
                                textAlign: 'center',
                            }}
                        >
                            <Badge size="lg" leftSection={<IconArchive stroke={1.25} />} color="orange">
                                {translate('This project is archived')}
                            </Badge>
                        </Box>
                    </>
                )}
                <ScrollArea
                    scrollbars="y"
                    scrollbarSize={4}
                    className={`${appLocalizer?.is_admin ? 'h-[calc(100vh-330px)]' : 'h-[calc(100vh-283px)]'} pb-[1px] !pr-1`}
                >
                    <LoadingOverlay
                        visible={isLoading || isTasksLoading}
                        zIndex={1000}
                        overlayProps={{ radius: 'sm', blur: 4 }}
                    />
                    <div className="relative w-full">
                        <TaskListSectionByPriority />
                    </div>
                </ScrollArea>
            </Box>
        </Fragment>
    );
};

export default ProjectDetailsListSectionByPriority;