import { useMemo, useState } from 'react';
import { Card, Group, Text, ThemeIcon, Flex, Table, Badge, Avatar, UnstyledButton } from '@mantine/core';
import { useDispatch } from 'react-redux';
import { IconAlertCircle, IconArrowUp, IconArrowDown, IconArrowsSort } from '@tabler/icons-react';
import { translate } from '../../../../utils/i18n';
import { isTaskOverdue, daysOverdue, getTaskPriorityName } from './reportUtils';
import { setEditableTask, openTaskEditDrawer } from '../../../Settings/store/taskSlice';

const priorityBadgeColor = (name) => {
    const up = (name || '').toUpperCase();
    if (up === 'HIGH') return 'red';
    if (up === 'MEDIUM') return 'orange';
    if (up === 'LOW') return 'green';
    return 'gray';
};

const priorityRank = (name) => {
    const up = (name || '').toUpperCase();
    if (up === 'HIGH') return 3;
    if (up === 'MEDIUM') return 2;
    if (up === 'LOW') return 1;
    return 0;
};

const OverdueTasksTable = ({ tasks = [], statuses = [], sections = [] }) => {
    const dispatch = useDispatch();
    const [sortCol, setSortCol] = useState('days');
    const [sortDir, setSortDir] = useState('desc');

    const rows = useMemo(() => {
        const now = new Date();
        const base = tasks
            .filter((t) => isTaskOverdue(t, statuses, sections, now))
            .map((t) => ({
                task: t,
                days: daysOverdue(t, now),
                priorityRank: priorityRank(getTaskPriorityName(t)),
                assigneeName: t.assigned_to?.name || '',
            }));

        const dir = sortDir === 'asc' ? 1 : -1;
        base.sort((a, b) => {
            if (sortCol === 'assignee') {
                const aEmpty = !a.assigneeName;
                const bEmpty = !b.assigneeName;
                if (aEmpty !== bEmpty) return aEmpty ? 1 : -1;
                return a.assigneeName.localeCompare(b.assigneeName) * dir;
            }
            if (sortCol === 'task') {
                return (a.task.name || '').localeCompare(b.task.name || '') * dir;
            }
            if (sortCol === 'priority') {
                return (a.priorityRank - b.priorityRank) * dir;
            }
            return (a.days - b.days) * dir;
        });
        return base;
    }, [tasks, statuses, sections, sortCol, sortDir]);

    const toggleSort = (col) => {
        if (sortCol === col) {
            setSortDir(sortDir === 'asc' ? 'desc' : 'asc');
        } else {
            setSortCol(col);
            setSortDir(col === 'task' || col === 'assignee' ? 'asc' : 'desc');
        }
    };

    const SortHeader = ({ col, label, align = 'left' }) => {
        const active = sortCol === col;
        const Icon = !active ? IconArrowsSort : sortDir === 'asc' ? IconArrowUp : IconArrowDown;
        return (
            <UnstyledButton
                onClick={() => toggleSort(col)}
                style={{
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: align === 'right' ? 'flex-end' : 'flex-start',
                    gap: 4,
                    width: '100%',
                    fontSize: 11,
                    fontWeight: 700,
                    color: active ? '#39758D' : '#64748B',
                    textTransform: 'uppercase',
                    letterSpacing: '0.4px',
                }}
            >
                {label}
                <Icon size={12} stroke={1.8} style={{ opacity: active ? 1 : 0.5 }} />
            </UnstyledButton>
        );
    };

    const handleOpenTask = (task) => {
        dispatch(setEditableTask(task));
        dispatch(openTaskEditDrawer());
    };

    return (
        <Card padding="md" radius="md" withBorder h="100%">
            <Card.Section withBorder inheritPadding py="xs" className="bg-[#FDE8E8] mb-2">
                <Group gap="xs">
                    <ThemeIcon size="sm" radius="sm" variant="light" color="red">
                        <IconAlertCircle size={14} />
                    </ThemeIcon>
                    <Text fw={600} size="sm">{translate('Overdue Tasks')}</Text>
                    <Badge color="red" variant="light" size="sm">{rows.length}</Badge>
                </Group>
            </Card.Section>

            {rows.length === 0 ? (
                <Flex align="center" justify="center" mih={160} direction="column" gap={6}>
                    <Text c="dimmed" size="sm">{translate('No overdue tasks — great job!')}</Text>
                </Flex>
            ) : (
                <Table horizontalSpacing="sm" verticalSpacing="xs" highlightOnHover withRowBorders={false}>
                    <Table.Thead style={{ background: '#FAFBFC' }}>
                        <Table.Tr>
                            <Table.Th><SortHeader col="task" label={translate('Task')} /></Table.Th>
                            <Table.Th><SortHeader col="assignee" label={translate('Assignee')} /></Table.Th>
                            <Table.Th style={{ textAlign: 'right', width: 80 }}><SortHeader col="days" label={translate('Days')} align="right" /></Table.Th>
                            <Table.Th style={{ width: 110 }}><SortHeader col="priority" label={translate('Priority')} /></Table.Th>
                        </Table.Tr>
                    </Table.Thead>
                    <Table.Tbody>
                        {rows.map(({ task, days }) => {
                            const pname = getTaskPriorityName(task);
                            const assignee = task.assigned_to;
                            return (
                                <Table.Tr
                                    key={task.id}
                                    style={{ cursor: 'pointer' }}
                                    onClick={() => handleOpenTask(task)}
                                >
                                    <Table.Td>
                                        <Text size="sm" fw={500} lineClamp={1} style={{ maxWidth: 280 }}>
                                            {task.name}
                                        </Text>
                                    </Table.Td>
                                    <Table.Td>
                                        {assignee ? (
                                            <Group gap={8} wrap="nowrap">
                                                <Avatar src={assignee.avatar || null} radius="xl" size={24} color="#39758D">
                                                    {(assignee.name || '?').slice(0, 2).toUpperCase()}
                                                </Avatar>
                                                <Text size="xs" c="dimmed" truncate>{assignee.name}</Text>
                                            </Group>
                                        ) : (
                                            <Text size="xs" c="dimmed">{translate('Unassigned')}</Text>
                                        )}
                                    </Table.Td>
                                    <Table.Td style={{ textAlign: 'right' }}>
                                        <Badge color={days >= 7 ? 'red' : 'orange'} variant="light" size="sm">
                                            {days}d
                                        </Badge>
                                    </Table.Td>
                                    <Table.Td>
                                        {pname ? (
                                            <Badge color={priorityBadgeColor(pname)} variant="light" size="sm">
                                                {pname}
                                            </Badge>
                                        ) : (
                                            <Text size="xs" c="dimmed">—</Text>
                                        )}
                                    </Table.Td>
                                </Table.Tr>
                            );
                        })}
                    </Table.Tbody>
                </Table>
            )}
        </Card>
    );
};

export default OverdueTasksTable;