import React, { useEffect, useMemo } from 'react';
import { Badge, Box, Grid, LoadingOverlay, Overlay, ScrollArea, Text, Group, ThemeIcon } from '@mantine/core';
import { useDispatch, useSelector } from 'react-redux';
import { IconArchive, IconChartBar } from '@tabler/icons-react';
import { translate } from '../../../utils/i18n';
import { fetchArchiveTasks, fetchClosedTasks, fetchTasksByProject } from '../../Settings/store/taskSlice';

import OverviewKPIs from './Reports/OverviewKPIs';
import StatusDonut from './Reports/StatusDonut';
import PriorityDonut from './Reports/PriorityDonut';
import SectionProgressBar from './Reports/SectionProgressBar';
import TeamWorkloadTable from './Reports/TeamWorkloadTable';
import OverdueTasksTable from './Reports/OverdueTasksTable';

const ProjectDetailsReport = () => {
    const dispatch = useDispatch();
    const { isLoading, projectInfo, allTasks, taskListSections, ordered, boardMembers, archivedTasks, closedTasks, projectPriorities, projectStatuses } = useSelector(
        (state) => state.settings.task
    );
    const { loggedUserId } = useSelector((state) => state.auth.user);
    const { loggedInUser } = useSelector((state) => state.auth.session);
    const userId = loggedInUser ? loggedInUser.loggedUserId : loggedUserId;

    useEffect(() => {
        if (!projectInfo?.id) return;
        dispatch(fetchTasksByProject({ id: projectInfo.id, data: {}, userId }));
        dispatch(fetchArchiveTasks());
        dispatch(fetchClosedTasks());
    }, [dispatch, projectInfo?.id, userId]);

    const taskList = useMemo(() => {
        if (Array.isArray(allTasks)) return allTasks;
        if (allTasks && typeof allTasks === 'object') return Object.values(allTasks);
        return [];
    }, [allTasks]);
    const sectionsArray = useMemo(
        () => (taskListSections ? Object.values(taskListSections) : []),
        [taskListSections]
    );

    const archivedCount = useMemo(() => {
        if (!projectInfo?.id || !Array.isArray(archivedTasks)) return 0;
        const pid = String(projectInfo.id);
        return archivedTasks.filter((t) => String(t.projectId) === pid).length;
    }, [archivedTasks, projectInfo?.id]);

    const closedCount = useMemo(() => {
        if (!projectInfo?.id || !Array.isArray(closedTasks)) return 0;
        const pid = String(projectInfo.id);
        return closedTasks.filter((t) => String(t.projectId) === pid).length;
    }, [closedTasks, projectInfo?.id]);

    return (
        <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
                scrollbarSize={4}
                offsetScrollbars
                className={`${appLocalizer?.is_admin ? 'h-[calc(100vh-292px)]' : 'h-[calc(100vh-245px)]'} pb-[2px]`}
            >
                <LoadingOverlay visible={isLoading} zIndex={1000} overlayProps={{ radius: 'sm', blur: 4 }} />

                <Box px="xs" pt="sm" pb="md">
                    <Group justify="space-between" mb="md">
                        <Group gap="xs">
                            <ThemeIcon variant="light" color="#ED7D31" radius="md" size="lg">
                                <IconChartBar size={18} stroke={1.8} />
                            </ThemeIcon>
                            <Box>
                                <Text fw={700} size="md">
                                    {translate('Project Report')}
                                </Text>
                                <Text size="xs" c="dimmed">
                                    {translate('Quick snapshot of how this project is progressing.')}
                                </Text>
                            </Box>
                        </Group>
                    </Group>

                    <OverviewKPIs
                        tasks={taskList}
                        statuses={projectStatuses || []}
                        sections={sectionsArray}
                        archivedCount={archivedCount}
                        closedCount={closedCount}
                    />

                    <Grid mt="md" gutter="md">
                        <Grid.Col span={{ base: 12, md: 6 }}>
                            <StatusDonut tasks={taskList} statuses={projectStatuses || []} />
                        </Grid.Col>
                        <Grid.Col span={{ base: 12, md: 6 }}>
                            <PriorityDonut tasks={taskList} priorities={projectPriorities || []} />
                        </Grid.Col>
                    </Grid>

                    <Box mt="md">
                        <SectionProgressBar
                            tasks={taskList}
                            sections={sectionsArray}
                            statuses={projectStatuses || []}
                            sectionOrder={ordered || []}
                            sectionsMap={taskListSections || {}}
                        />
                    </Box>

                    <Grid mt="md" gutter="md">
                        <Grid.Col span={{ base: 12, md: 6 }}>
                            <TeamWorkloadTable
                                tasks={taskList}
                                members={boardMembers || []}
                                statuses={projectStatuses || []}
                                sections={sectionsArray}
                            />
                        </Grid.Col>
                        <Grid.Col span={{ base: 12, md: 6 }}>
                            <OverdueTasksTable
                                tasks={taskList}
                                statuses={projectStatuses || []}
                                sections={sectionsArray}
                            />
                        </Grid.Col>
                    </Grid>
                </Box>
            </ScrollArea>
        </Box>
    );
};

export default ProjectDetailsReport;