import { useState, useEffect, useMemo } from 'react';
import { Box, Card, Group, Select, Text, Stack, Flex, ThemeIcon } from '@mantine/core';
import { DonutChart } from '@mantine/charts';
import { IconChartPie, IconFlag, IconSelector } from '@tabler/icons-react';
import { useSelector, useDispatch } from 'react-redux';
import { __ } from '@wordpress/i18n';
import { fetchProjectsPieChartsData } from '../Settings/store/taskSlice';

const DonutMiniCard = ({ title, titleIcon, titleBg, titleColor, data }) => {
    const total = useMemo(() => data.reduce((s, d) => s + (d.value || 0), 0), [data]);

    return (
        <Card padding="md" radius="md" withBorder h="100%">
            <Card.Section withBorder inheritPadding py="xs" className="mb-2" style={{ background: titleBg }}>
                <Group gap="xs">
                    <ThemeIcon size="sm" radius="sm" variant="light" color={titleColor}>
                        {titleIcon}
                    </ThemeIcon>
                    <Text fw={600} size="sm">{title}</Text>
                </Group>
            </Card.Section>

            {data.length === 0 ? (
                <Flex align="center" justify="center" mih={220}>
                    <Text c="dimmed" size="sm">{__( 'No tasks available', 'lazytasks-project-task-management' )}</Text>
                </Flex>
            ) : (
                <Stack gap="sm" p="sm" align="center">
                    <Box style={{ position: 'relative', display: 'flex', justifyContent: 'center' }}>
                        <DonutChart
                            data={data}
                            withTooltip
                            tooltipDataSource="segment"
                            withLabels={false}
                            size={170}
                            thickness={22}
                            strokeWidth={1}
                            paddingAngle={0}
                        />
                        <Box
                            style={{
                                position: 'absolute',
                                top: '50%',
                                left: '50%',
                                transform: 'translate(-50%, -50%)',
                                textAlign: 'center',
                                pointerEvents: 'none',
                            }}
                        >
                            <Text fw={700} fz={22} lh={1}>{total}</Text>
                            <Text fz={10} mt={3} c="dimmed" tt="uppercase" style={{ letterSpacing: '0.5px' }}>
                                {__( 'Tasks', 'lazytasks-project-task-management' )}
                            </Text>
                        </Box>
                    </Box>

                    <Stack gap={4} style={{ width: '100%' }}>
                        {data.map((d) => {
                            const pct = total > 0 ? Math.round((d.value / total) * 100) : 0;
                            return (
                                <Group
                                    key={d.name}
                                    gap={10}
                                    wrap="nowrap"
                                    px={8}
                                    py={6}
                                    className="rounded-md transition-colors hover:bg-gray-50 cursor-default"
                                >
                                    <Box w={10} h={10} style={{ background: d.color, borderRadius: 3, flexShrink: 0 }} />
                                    <Text fz={12} fw={500} style={{ flex: 1, minWidth: 0 }} truncate>{d.name}</Text>
                                    <Text fz={12} fw={700}>
                                        {d.value}
                                        <Text span fz={10} c="dimmed" fw={500} ml={6}>({pct}%)</Text>
                                    </Text>
                                </Group>
                            );
                        })}
                    </Stack>
                </Stack>
            )}
        </Card>
    );
};

const DashboardPieChart = ({ dragHandle }) => {
    const dispatch = useDispatch();
    const { pieChartData } = useSelector((state) => state.settings.task);
    const { loggedUserId } = useSelector((state) => state.auth.user);
    const { loggedInUser, xWpNonce } = useSelector((state) => state.auth.session);

    const [selectedProject, setSelectedProject] = useState(null);

    const userId = loggedInUser?.loggedUserId ?? loggedUserId;
    const isAdmin = loggedInUser?.is_superadmin || loggedInUser?.llc_roles?.some(role => role.slug === 'admin');
    const isWpAdmin = loggedInUser?.roles?.includes('administrator');

    useEffect(() => {
        if (!xWpNonce) return;
        if (!pieChartData || Object.keys(pieChartData).length === 0) {
            dispatch(fetchProjectsPieChartsData({ id: isAdmin || isWpAdmin ? null : userId }));
        }
    }, [dispatch, loggedInUser, xWpNonce]);

    useEffect(() => {
        if (pieChartData && pieChartData.length > 0 && !selectedProject) {
            setSelectedProject(pieChartData[0]?.id.toString());
        }
    }, [pieChartData, selectedProject]);

    const project = useMemo(() => {
        if (!pieChartData || !selectedProject) return null;
        return pieChartData.find((p) => p.id.toString() === selectedProject) || null;
    }, [pieChartData, selectedProject]);

    const priorityData = useMemo(() => {
        const src = project?.priorities || [];
        return src
            .filter((it) => it.task_count > 0)
            .map((it) => ({ name: it.priority_name, value: it.task_count, color: it.color_code }));
    }, [project]);

    const statusData = useMemo(() => {
        const src = project?.statuses || [];
        return src
            .filter((it) => it.task_count > 0)
            .map((it) => ({ name: it.status_name, value: it.task_count, color: it.color_code }));
    }, [project]);

    return (
        <Card padding="md" withBorder radius="md" h="100%">
            <Card.Section withBorder inheritPadding py="xs" className="bg-[#EBF1F4] mb-2">
                <Box className={dragHandle ? 'draggable-header cursor-grab' : ''}>
                    <Group justify="space-between" align="center" wrap="nowrap">
                        <Group gap="xs" wrap="nowrap">
                            {dragHandle}
                            <ThemeIcon size="sm" radius="sm" variant="light" color="#39758D">
                                <IconChartPie size={14} />
                            </ThemeIcon>
                            <Text fw={600} size="sm">{__( 'Priority & Status Overview', 'lazytasks-project-task-management' )}</Text>
                        </Group>
                        <Box
                            onMouseDown={(e) => { if (dragHandle) e.stopPropagation(); }}
                            style={{ background: '#fff', borderRadius: 6, paddingLeft: 8 }}
                        >
                            <Select
                                size="xs"
                                variant="unstyled"
                                placeholder={__( 'Select Project', 'lazytasks-project-task-management' )}
                                onChange={setSelectedProject}
                                data={
                                    (pieChartData && pieChartData.length > 0 &&
                                        pieChartData.map((p) => ({ value: p.id.toString(), label: p.name }))) || []
                                }
                                value={selectedProject}
                                allowDeselect={false}
                                rightSection={<IconSelector size={14} stroke={2} color="#64748B" />}
                                w={160}
                            />
                        </Box>
                    </Group>
                </Box>
            </Card.Section>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-3 mt-1">
                <DonutMiniCard
                    title={__( 'Priority', 'lazytasks-project-task-management' )}
                    titleIcon={<IconFlag size={14} />}
                    titleBg="#F9D7BF"
                    titleColor="#ED7D31"
                    data={priorityData}
                />
                <DonutMiniCard
                    title={__( 'Status', 'lazytasks-project-task-management' )}
                    titleIcon={<IconChartPie size={14} />}
                    titleBg="#EBF1F4"
                    titleColor="#39758D"
                    data={statusData}
                />
            </div>
        </Card>
    );
};

export default DashboardPieChart;