import React, { useMemo } from 'react';
import { Grid, Paper, Text, Group, ThemeIcon, Box } from '@mantine/core';
import { IconChecklist, IconCircleCheck, IconRefresh, IconAlertTriangle, IconArchive, IconLock } from '@tabler/icons-react';
import { translate } from '../../../../utils/i18n';
import { isTaskComplete, isTaskOverdue } from './reportUtils';

const pct = (n, total) => (total > 0 ? Math.round((n / total) * 100) : 0);

const KPICard = ({ bg, iconBg, iconColor, Icon, title, count, subtitle }) => (
    <Paper
        radius="md"
        p="md"
        withBorder
        style={{
            background: bg,
            borderColor: 'transparent',
            height: '100%',
            minHeight: 110,
        }}
    >
        <Group justify="space-between" align="flex-start" wrap="nowrap">
            <Box style={{ minWidth: 0 }}>
                <Text
                    size="xs"
                    fw={700}
                    c="dimmed"
                    tt="uppercase"
                    style={{ letterSpacing: '0.3px' }}
                >
                    {title}
                </Text>
                <Text fz={28} fw={700} lh={1.1} mt={6}>
                    {count}
                </Text>
                {subtitle && (
                    <Text size="xs" c="dimmed" mt={4}>
                        {subtitle}
                    </Text>
                )}
            </Box>
            <ThemeIcon size={42} radius="md" variant="filled" style={{ background: iconBg, color: iconColor }}>
                <Icon size={20} stroke={1.8} />
            </ThemeIcon>
        </Group>
    </Paper>
);

const OverviewKPIs = ({ tasks = [], statuses = [], sections = [], archivedCount = 0, closedCount = 0 }) => {
    const stats = useMemo(() => {
        const total = tasks.length;
        let completed = 0;
        let overdue = 0;
        for (const t of tasks) {
            if (isTaskComplete(t, statuses, sections)) completed += 1;
            if (isTaskOverdue(t, statuses, sections)) overdue += 1;
        }
        const inProgress = total - completed;
        return { total, completed, inProgress, overdue };
    }, [tasks, statuses, sections]);

    const colSpan = { base: 12, xs: 6, sm: 4, md: 2 };

    return (
        <Grid gutter="md">
            <Grid.Col span={colSpan}>
                <KPICard
                    bg="#FCEBE0"
                    iconBg="rgba(237,125,49,0.22)"
                    iconColor="#D46A1E"
                    Icon={IconChecklist}
                    title={translate('Total Tasks')}
                    count={stats.total}
                    subtitle={translate('Active tasks')}
                />
            </Grid.Col>
            <Grid.Col span={colSpan}>
                <KPICard
                    bg="#E7F4E8"
                    iconBg="rgba(16,185,129,0.22)"
                    iconColor="#10B981"
                    Icon={IconCircleCheck}
                    title={translate('Completed')}
                    count={stats.completed}
                    subtitle={`${pct(stats.completed, stats.total)}% ${translate('complete')}`}
                />
            </Grid.Col>
            <Grid.Col span={colSpan}>
                <KPICard
                    bg="#DBE5FF"
                    iconBg="rgba(57,117,141,0.22)"
                    iconColor="#39758D"
                    Icon={IconRefresh}
                    title={translate('In Progress')}
                    count={stats.inProgress}
                    subtitle={`${pct(stats.inProgress, stats.total)}% ${translate('of total')}`}
                />
            </Grid.Col>
            <Grid.Col span={colSpan}>
                <KPICard
                    bg="#F9D9E0"
                    iconBg="rgba(239,68,68,0.22)"
                    iconColor="#EF4444"
                    Icon={IconAlertTriangle}
                    title={translate('Overdue')}
                    count={stats.overdue}
                    subtitle={`${pct(stats.overdue, stats.total)}% ${translate('of total')}`}
                />
            </Grid.Col>
            <Grid.Col span={colSpan}>
                <KPICard
                    bg="#F1F5F9"
                    iconBg="rgba(100,116,139,0.22)"
                    iconColor="#64748B"
                    Icon={IconArchive}
                    title={translate('Archived')}
                    count={archivedCount}
                    subtitle={translate('Not in active views')}
                />
            </Grid.Col>
            <Grid.Col span={colSpan}>
                <KPICard
                    bg="#FEF3C7"
                    iconBg="rgba(217,119,6,0.22)"
                    iconColor="#B45309"
                    Icon={IconLock}
                    title={translate('Closed')}
                    count={closedCount}
                    subtitle={translate('Read-only tasks')}
                />
            </Grid.Col>
        </Grid>
    );
};

export default OverviewKPIs;