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

const ProjectDetailsList = (props) => {
    const dispatch = useDispatch();
    const { isLoading, loadedSections, projectInfo, columns, 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);

    // Memoize userId to prevent unnecessary effect re-runs
    const userId = useMemo(() => loggedInUser ? loggedInUser.loggedUserId : loggedUserId, [loggedInUser, loggedUserId]);

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

    // useEffect(() => {
    //     if (ordered && ordered.length > 0 && projectInfo?.id) {
    //         ordered.forEach((sectionSlug) => {
    //             const isAlreadyLoaded = !!loadedSections?.[sectionSlug];
    //             if (!isAlreadyLoaded) {
    //                 dispatch(fetchTasksBySection({
    //                     projectId: projectInfo.id,
    //                     sectionSlug,
    //                     limit: 15,
    //                     offset: 0,
    //                     append: true,
    //                     userId: userId
    //                 }));
    //             }
    //         });
    //     }
    // }, [ordered, projectInfo?.id]);
    useEffect(() => {
        if (!projectInfo?.id) {
            return;
        }
        if (loadedProjectRef.current === projectInfo.id) {
            return;
        }

        loadedProjectRef.current = projectInfo.id;
        dispatch(updateTasksLoading(true));

        const fetchData = async () => {
            try {
                await dispatch(fetchTasksSectionWise({
                    projectId: projectInfo.id,
                    limit: 10,
                    offset: 0,
                    search: '',
                    userId: userId
                }));
            } catch (err) {
                console.log("Unexpected error:", err);
            } finally {
                dispatch(updateTasksLoading(false));
            }
        };

        fetchData();
    }, [projectInfo?.id, userId, dispatch]);

    // useEffect(() => {
    //     const loadSectionsSequentially = async () => {
    //         for (const sectionSlug of ordered) {
    //             const isLoaded = loadedSections?.[sectionSlug];
    //             if (!isLoaded) {
    //                 await dispatch(fetchTasksBySection({
    //                     projectId: projectInfo.id,
    //                     sectionSlug,
    //                     limit: 15,
    //                     offset: 0,
    //                     append: true,
    //                     userId
    //                 })).unwrap(); // wait until section loads
    //             }
    //         }
    //     };

    //     if (ordered && projectInfo?.id) {
    //         loadSectionsSequentially();
    //     }
    // }, [ordered, projectInfo?.id]);

    return (
        <Fragment>
            <div className="border border-b-0 rounded-t-xl !pl-[25px] !pr-[117px] py-3 bg-white">
                <Grid gutter="0" 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 ? 8.0 : 9.5}>
                        <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={3.0} style={{ marginLeft: '-5px' }}>
                        <Text c="dimmed" ta="right" className="!pr-1" fz="xs" fw={600} tt="uppercase" ls={0.5}>{translate('Assigned')}</Text>
                    </Grid.Col>
                    <Grid.Col span={3} className="!pl-2">
                        <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} className="!pl-2">
                        <Text c="dimmed" fz="xs" fw={600} tt="uppercase" ls={0.5}>{translate('Priority')}</Text>
                    </Grid.Col>
                    <Grid.Col span={2.5} className="!pl-2">
                        <Text c="dimmed" fz="xs" fw={600} tt="uppercase" ls={0.5}>{translate('Status')}</Text>
                    </Grid.Col>
                    <Grid.Col span={3.5} className="!pl-2">
                        <Text c="dimmed" fz="xs" fw={600} tt="uppercase" ls={0.5}>{translate('Tags')}</Text>
                    </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">
                        <TaskList />
                    </div>
                </ScrollArea>
            </Box>
        </Fragment>
    );
}

export default ProjectDetailsList;