import { Avatar, Badge, Button, Flex, Group, LoadingOverlay, Table, Text, Tooltip, ActionIcon, Box, Menu, Progress } from "@mantine/core";
import { IconBrandAndroid, IconBrandApple, IconDeviceDesktop, IconSend, IconMessage2, IconDotsVertical, IconCopy, IconTrash, IconChevronRight, IconChevronDown, IconChevronUp, IconPlayerStop, IconPlayerPlay, IconList, IconUser, IconRefresh, IconExclamationCircleFilled, IconX } from "@tabler/icons-react";
import React, { useState } from "react";
import { useNavigate } from "react-router";
import Filters, { type FilterState } from "./Filters";
import type { Campaign } from "./types";
import { ContextualLogs } from "@/components/blocks/activity-logs/ContextualLogs";
import { useDisclosure } from "@mantine/hooks";
import ConfirmAlert from "@/components/blocks/ConfirmAlert/confirmAlert";

interface CampaignsTableProps {
    campaigns: Campaign[];
    loading: boolean;
    sendingId: string | null;
    onSendNow: (id: string) => Promise<void>;
    onDuplicate: (campaign: Campaign) => void;
    onDelete: (id: string) => Promise<void>;
    onStop: (id: string) => Promise<void>;
    onResume: (id: string) => Promise<void>;
    onViewRecipients: (campaign: Campaign) => void;
    onActivate: (id: string) => Promise<void>;
    filterState: FilterState;
    onFiltersChange: (filters: FilterState) => void;
    sortBy?: string;
    sortOrder?: 'asc' | 'desc';
    onSort?: (column: string) => void;
}

const CampaignsTable: React.FC<CampaignsTableProps> = ({ campaigns, loading, sendingId, onSendNow, onDuplicate, onDelete, onStop, onResume, onViewRecipients, onActivate, filterState, onFiltersChange, sortBy, sortOrder, onSort }) => {
    const navigate = useNavigate();
    const [expandedRowId, setExpandedRowId] = useState<string | null>(null);
    const [confirmOpened, { open: openConfirm, close: closeConfirm }] = useDisclosure(false);
    const [confirmAction, setConfirmAction] = useState<{ id: string, type: 'stop' | 'resume' | 'send' } | null>(null);

    const handleActionClick = (e: React.MouseEvent, id: string, type: 'stop' | 'resume' | 'send') => {
        e.stopPropagation();
        setConfirmAction({ id, type });
        openConfirm();
    };

    const handleConfirmAction = async () => {
        if (!confirmAction) return;
        const { id, type } = confirmAction;
        closeConfirm();

        if (type === 'stop') await onStop(id);
        else if (type === 'resume') await onResume(id);
        else if (type === 'send') await onSendNow(id);
    };

    const SortableHeader = ({ label, column }: { label: string, column: string }) => {
        const isActive = sortBy === column;
        return (
            <Table.Th 
                style={{ color: 'var(--mantine-color-gray-6)', fontWeight: 500, cursor: 'pointer', userSelect: 'none' }}
                onClick={() => onSort?.(column)}
            >
                <Group gap={4} wrap="nowrap">
                    {label}
                    {isActive ? (
                        sortOrder === 'asc' ? <IconChevronUp size={14} /> : <IconChevronDown size={14} />
                    ) : (
                        <IconChevronDown size={14} style={{ opacity: 0.3 }} />
                    )}
                </Group>
            </Table.Th>
        );
    };

    const getStatusColor = (status: string) => {
        switch (status) {
            case "DRAFT": return "gray";
            case "SCHEDULED": return "blue";
            case "SENDING": return "yellow";
            case "SENT": return "green";
            case "COMPLETED": return "teal";
            case "FAILED": return "red";
            case "STOPPED": return "orange";
            case "DELETED": return "gray";
            default: return "gray";
        }
    };

    const getTargetIcons = (criteria: any) => {
        const parsedCriteria = typeof criteria === 'string' ? JSON.parse(criteria || '{}') : (criteria || {});
        let platforms = parsedCriteria?.userSegment || [];
        if (platforms.length === 0) platforms = ["iOS", "Android", "Web"];

        const isIOS = platforms.some((p: string) => p.toLowerCase() === 'ios');
        const isAndroid = platforms.some((p: string) => p.toLowerCase() === 'android');
        const isWeb = platforms.some((p: string) => p.toLowerCase() === 'web');

        return (
            <Group gap={4}>
                {isIOS && <IconBrandApple size={14} color="var(--mantine-color-gray-6)" />}
                {isAndroid && <IconBrandAndroid size={14} color="var(--mantine-color-gray-6)" />}
                {isWeb && <IconDeviceDesktop size={14} color="var(--mantine-color-gray-6)" />}
            </Group>
        );
    };

    // Status AND platform are both filtered server-side now, so the rows arrive
    // pre-filtered. Filtering again here would only re-filter the current page —
    // which is exactly what used to show "No Campaigns Found" while matches sat
    // on later pages, and made the pagination total disagree with the rows.
    const rows = campaigns.map((campaign, index) => (
        <React.Fragment key={campaign.id}>
            <Table.Tr
                onClick={() => setExpandedRowId(expandedRowId === campaign.id ? null : campaign.id)}
                style={{
                    borderBottom: '1px solid var(--mantine-color-gray-2)',
                    cursor: 'pointer',
                    backgroundColor: expandedRowId === campaign.id ? 'var(--mantine-color-blue-0)' : 'transparent',
                    animation: 'slideIn 0.3s ease-out forwards',
                    opacity: 0,
                    animationDelay: `${index * 0.05}s`
                }}
            >
                <Table.Td>
                    <Group gap="md" wrap="nowrap">
                        {expandedRowId === campaign.id ? <IconChevronDown size={18} color="var(--mantine-color-blue-6)" /> : <IconChevronRight size={18} color="var(--mantine-color-gray-4)" />}
                        <Box
                            style={{
                                width: 32,
                                height: 32,
                                display: 'flex',
                                alignItems: 'center',
                                justifyContent: 'center',
                                borderRadius: '8px',
                                backgroundColor: 'transparent'
                            }}
                        >
                            <IconMessage2 size={24} color="var(--mantine-color-gray-6)" />
                        </Box>
                        <div style={{ flex: 1 }}>
                            {campaign.name && (
                                <Text
                                    size="sm"
                                    c="blue.7"
                                    fw={600}
                                    mb={4}
                                    title={campaign.name}
                                    onClick={(e) => {
                                        e.stopPropagation();
                                        navigate(`/admin/notifications/${campaign.id}`);
                                    }}
                                    style={{
                                        cursor: 'pointer',
                                        textDecoration: 'underline'
                                    }}
                                >
                                    {campaign.name}
                                </Text>
                            )}
                            <Text fw={500} size="sm" mb={2} c="dark.4">{campaign.title}</Text>
                            <Text size="sm" c="dimmed" lineClamp={1} w={300} title={campaign.body}>
                                {campaign.body}
                            </Text>
                        </div>
                    </Group>
                </Table.Td>

                <Table.Td>
                    <Text size="sm" fw={500}>
                        {campaign.scheduled_at
                            ? new Date(campaign.scheduled_at).toLocaleDateString('en-GB', { day: 'numeric', month: 'short', year: 'numeric' })
                            : new Date(campaign.created_at).toLocaleDateString('en-GB', { day: 'numeric', month: 'short', year: 'numeric' })}
                    </Text>
                    <Text size="sm" c="dimmed">
                        {campaign.scheduled_at
                            ? new Date(campaign.scheduled_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' })
                            : new Date(campaign.created_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' })}
                    </Text>
                </Table.Td>

                <Table.Td>
                    <Text size="sm">
                        {(campaign.status === 'SENT' || campaign.status === 'COMPLETED')
                            ? new Date(campaign.updated_at).toLocaleDateString('en-GB', { day: 'numeric', month: 'short', year: 'numeric' })
                            : '-'
                        }
                    </Text>
                    {(campaign.status === 'SENT' || campaign.status === 'COMPLETED') && (
                        <Text size="sm" c="dimmed">
                            {new Date(campaign.updated_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' })}
                        </Text>
                    )}
                </Table.Td>

                <Table.Td>
                    <Badge color={getStatusColor(campaign.status)} variant="light" size="sm" tt="capitalize">
                        {campaign.status.toLowerCase()}
                    </Badge>
                    {campaign.status === 'SCHEDULED' && campaign.scheduled_at && (
                        <Text size="sm" mt={2} c="blue">
                            {new Date(campaign.scheduled_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
                        </Text>
                    )}
                </Table.Td>

                <Table.Td>
                    {getTargetIcons(campaign.target_criteria)}
                </Table.Td>

                <Table.Td>
                    <Text size="sm">
                        {new Date(campaign.updated_at).toLocaleDateString('en-GB', { day: 'numeric', month: 'short', year: 'numeric' })}
                    </Text>
                </Table.Td>

                <Table.Td>
                    <Flex direction="column" gap={4}>
                        <Group gap={8}>
                            <Text size="sm" fw={500}>
                                {campaign.sent_count?.toLocaleString() || 0}
                            </Text>
                            <Text size="xs" c="dimmed">
                                / {campaign.total_count?.toLocaleString() || 0}
                            </Text>
                        </Group>
                        <Progress
                            value={campaign.total_count ? ((campaign.sent_count || 0) / campaign.total_count) * 100 : 0}
                            size="sm"
                            color={campaign.status === 'FAILED' ? 'red' : 'blue'}
                            animated={campaign.status === 'SENDING'}
                        />
                    </Flex>
                </Table.Td>

                <Table.Td>
                    <Text size="sm" fw={500}>
                        {campaign.click_count?.toLocaleString() || 0} / {campaign.open_count?.toLocaleString() || 0}
                    </Text>
                </Table.Td>

                <Table.Td>
                    <Group gap={8} justify="flex-end">
                        {(campaign.status === "DRAFT" || campaign.status === "SCHEDULED") && (
                            <Tooltip label="Send Now">
                                <ActionIcon
                                    size="sm"
                                    variant="subtle"
                                    color="blue"
                                    loading={sendingId === campaign.id}
                                    onClick={(e) => handleActionClick(e, campaign.id, 'send')}
                                >
                                    <IconSend size={16} />
                                </ActionIcon>
                            </Tooltip>
                        )}

                        {campaign.status === "SENDING" && (
                            <Tooltip label="Stop Campaign">
                                <ActionIcon
                                    size="sm"
                                    variant="subtle"
                                    color="red"
                                    onClick={(e) => handleActionClick(e, campaign.id, 'stop')}
                                >
                                    <IconPlayerStop size={16} />
                                </ActionIcon>
                            </Tooltip>
                        )}

                        {(campaign.status === "STOPPED" || campaign.status === "FAILED") && (
                            <Tooltip label="Resume Campaign">
                                <ActionIcon
                                    size="sm"
                                    variant="subtle"
                                    color="green"
                                    loading={sendingId === campaign.id}
                                    onClick={(e) => handleActionClick(e, campaign.id, 'resume')}
                                >
                                    <IconPlayerPlay size={16} />
                                </ActionIcon>
                            </Tooltip>
                        )}

                        <Menu shadow="md" width={150} position="bottom-end">
                            <Menu.Target>
                                <ActionIcon variant="subtle" color="gray" size="sm">
                                    <IconDotsVertical size={16} />
                                </ActionIcon>
                            </Menu.Target>

                            <Menu.Dropdown>
                                <Menu.Item
                                    leftSection={<IconCopy size={14} />}
                                    onClick={() => onDuplicate(campaign)}
                                >
                                    Duplicate
                                </Menu.Item>
                                <Menu.Item
                                    leftSection={<IconList size={14} />}
                                    onClick={() => onViewRecipients(campaign)}
                                >
                                    Recipients
                                </Menu.Item>
                                <Menu.Divider />
                                {campaign.status !== "DELETED" && (
                                    <Menu.Item
                                        color="red"
                                        leftSection={<IconTrash size={14} />}
                                        onClick={(e) => { e.stopPropagation(); onDelete(campaign.id); }}
                                    >
                                        Delete
                                    </Menu.Item>
                                )}
                                {campaign.status === "DELETED" && (
                                    <Menu.Item
                                        color="blue"
                                        leftSection={<IconRefresh size={14} />}
                                        onClick={(e) => { e.stopPropagation(); onActivate(campaign.id); }}
                                    >
                                        Restore
                                    </Menu.Item>
                                )}
                            </Menu.Dropdown>
                        </Menu>
                    </Group>
                </Table.Td>
            </Table.Tr>
            {expandedRowId === campaign.id && (
                <Table.Tr bg="var(--mantine-color-blue-0)">
                    <Table.Td colSpan={9} p="md">
                        <Box p="md" style={{ border: '1px dashed var(--mantine-color-blue-3)', borderRadius: '8px', backgroundColor: 'white' }}>
                            <Text fw={600} size="sm" mb="xs" c="blue">Batch Sending Details</Text>
                            <Flex gap="xl">
                                <Box>
                                    <Text size="xs" c="dimmed" fw={500}>RECIPIENTS</Text>
                                    <Group gap="xs" align="center">
                                        <Text size="sm" fw={600}>{campaign.total_count?.toLocaleString() || 0} Members</Text>
                                        <Badge
                                            size="sm"
                                            variant="light"
                                            color="blue"
                                            style={{ cursor: 'pointer', textTransform: 'none' }}
                                            onClick={(e) => { e.stopPropagation(); onViewRecipients(campaign); }}
                                        >
                                            View Member Emails
                                        </Badge>
                                    </Group>
                                </Box>
                                <Box>
                                    <Text size="xs" c="dimmed" fw={500}>BATCH SIZE</Text>
                                    <Text size="sm" fw={600}>{campaign.additional_data?.schedule_details?.batchSize || 750} per batch</Text>
                                </Box>
                                <Box>
                                    <Text size="xs" c="dimmed" fw={500}>DELAY BETWEEN BATCHES</Text>
                                    <Text size="sm" fw={600}>Configured Delay</Text>
                                </Box>
                                <Box>
                                    <Text size="xs" c="dimmed" fw={500}>TOTAL BATCHES</Text>
                                    <Text size="sm" fw={600}>
                                        {Math.ceil((campaign.total_count || 0) / (campaign.additional_data?.schedule_details?.batchSize || 750))} Batches
                                    </Text>
                                </Box>
                                {(campaign.status === 'FAILED' || campaign.status === 'STOPPED' || campaign.status === 'SENDING') && (
                                    <Box>
                                        <Text size="xs" c="dimmed" fw={500}>REMAINING</Text>
                                        <Text size="sm" fw={600} c="orange">
                                            {((campaign.total_count || 0) - (campaign.sent_count || 0)).toLocaleString()} Emails
                                        </Text>
                                    </Box>
                                )}
                                 {(() => {
                                     const data = typeof campaign.additional_data === 'string' ? JSON.parse(campaign.additional_data) : campaign.additional_data;
                                     if (data?.delivery_summary) {
                                         return (
                                             <Box>
                                                 <Text size="xs" c="dimmed" fw={500}>DELIVERY STATS</Text>
                                                 <Group gap={8} mt={2}>
                                                     <Badge size="xs" color="green" variant="outline" style={{ textTransform: 'none' }}>{data.delivery_summary.processable || 0} OK</Badge>
                                                     <Badge size="xs" color="red" variant="outline" style={{ textTransform: 'none' }}>{data.delivery_summary.invalid || 0} Invalid</Badge>
                                                     <Badge size="xs" color="orange" variant="outline" style={{ textTransform: 'none' }}>{data.delivery_summary.non_processable || 0} Skip</Badge>
                                                 </Group>
                                             </Box>
                                         );
                                     }
                                     return null;
                                 })()}
                                 {(() => {
                                     const data = typeof campaign.additional_data === 'string' ? JSON.parse(campaign.additional_data) : campaign.additional_data;
                                     if (data && (data.seen_count !== undefined || data.unseen_count !== undefined)) {
                                         return (
                                             <Box>
                                                 <Text size="xs" c="dimmed" fw={500}>NOTIFICATION STATS</Text>
                                                 <Group gap={8} mt={2}>
                                                     <Badge size="xs" color="green" variant="outline" style={{ textTransform: 'none' }}>{data.seen_count || 0} Seen / Opened</Badge>
                                                     <Badge size="xs" color="gray" variant="outline" style={{ textTransform: 'none' }}>{data.unseen_count || 0} Unseen</Badge>
                                                 </Group>
                                             </Box>
                                         );
                                     }
                                     return null;
                                 })()}
                                 <Box>
                                     <Text size="xs" c="dimmed" fw={500}>PUBLISHED BY</Text>
                                    {campaign.published_by ? (
                                        <Group gap={6} wrap="nowrap" mt={2}>
                                            <Avatar size={20} radius="xl" color="blue">
                                                <IconUser size={12} />
                                            </Avatar>
                                            <Text size="sm" fw={600} lineClamp={1} title={campaign.published_by}>
                                                {campaign.published_by}
                                            </Text>
                                        </Group>
                                    ) : (
                                        <Text size="sm" fw={600} c="dimmed">-</Text>
                                    )}
                                </Box>
                            </Flex>
                            {campaign.status === 'SENDING' && (
                                <Box mt="md">
                                    <Text size="sm" fw={700} c="orange">PROCESSSING: Wait time enforced between batches to stay within API limits.</Text>
                                </Box>
                            )}
                        </Box>
                    </Table.Td>
                </Table.Tr>
            )}
        </React.Fragment>
    ));

    return (
        <div style={{ position: "relative", minHeight: 200 }}>
            <style>
                {`
                    @keyframes slideIn {
                        from {
                            opacity: 0;
                            transform: translateY(10px);
                        }
                        to {
                            opacity: 1;
                            transform: translateY(0);
                        }
                    }
                `}
            </style>
            <Group gap="xs" align="center" wrap="wrap">
    <Filters onApply={onFiltersChange} initialFilters={filterState} />
    {(() => {
        const ARRAY_CATEGORIES: { key: "platform" | "status"; label: string; color: string }[] = [
            { key: "platform", label: "Platform", color: "grape" },
            { key: "status", label: "Status", color: "teal" },
        ];

        const removeArrayValue = (key: "platform" | "status", value: string) => {
            onFiltersChange({
                ...filterState,
                [key]: filterState[key].filter((v) => v !== value),
            });
        };

        const hasAny =
            ARRAY_CATEGORIES.some((c) => filterState[c.key].length > 0)

        return (
            <>
                {ARRAY_CATEGORIES.flatMap((cat) =>
                    filterState[cat.key].map((value) => (
                        <Badge
                            key={`${cat.key}-${value}`}
                            size="sm"
                            variant="light"
                            color={cat.color}
                            rightSection={
                                <IconX
                                    size={12}
                                    style={{ cursor: "pointer" }}
                                    onClick={() => removeArrayValue(cat.key, value)}
                                />
                            }
                            tt="none"
                        >
                            {cat.label}: {value}
                        </Badge>
                    ))
                )}
                {hasAny && (
                    <Button
                        variant="subtle"
                        size="compact-xs"
                        c="dimmed"
                        onClick={() =>
                            onFiltersChange({
                                platform: [],
                                status: [],
                            })
                        }
                    >
                        Clear all
                    </Button>
                )}
            </>
        );
    })()}
</Group>

            <div style={{ marginTop: 16, position: 'relative' }}>
                <LoadingOverlay visible={loading} zIndex={1000} overlayProps={{ radius: "sm", blur: 2 }} />

                {campaigns.length === 0 && !loading ? (
                    <Flex justify={"center"} align={"center"} py={50}>
                        <Text fz={"h2"} fw={"bold"} ta={"center"}>
                            No Campaigns Found
                        </Text>
                    </Flex>
                ) : (
                    <Table.ScrollContainer minWidth={1000}>
                        <Table verticalSpacing="lg" variant="simple">
                            <Table.Thead>
                                <Table.Tr style={{ borderBottom: '1px solid var(--mantine-color-gray-3)' }}>
                                    <Table.Th style={{ color: 'var(--mantine-color-gray-6)', fontWeight: 500 }}>Campaign</Table.Th>
                                    <SortableHeader label="Start" column="start" />
                                    <SortableHeader label="End" column="end" />
                                    <SortableHeader label="Status" column="status" />
                                    <Table.Th style={{ color: 'var(--mantine-color-gray-6)', fontWeight: 500 }}>Target</Table.Th>
                                    <SortableHeader label="Last updated" column="updated_at" />
                                    <Table.Th style={{ color: 'var(--mantine-color-gray-6)', fontWeight: 500 }}>Sends / Impressions</Table.Th>
                                    <Table.Th style={{ color: 'var(--mantine-color-gray-6)', fontWeight: 500 }}>Clicks / Opens</Table.Th>
                                    <Table.Th></Table.Th>
                                </Table.Tr>
                            </Table.Thead>
                            <Table.Tbody>{rows}</Table.Tbody>
                        </Table>
                    </Table.ScrollContainer>
                )}
            </div>

            <ConfirmAlert
                title={
                    confirmAction?.type === 'stop' ? "Stop Campaign" :
                    confirmAction?.type === 'resume' ? "Resume Campaign" : "Send Campaign Now"
                }
                titleIcon={<IconExclamationCircleFilled color={confirmAction?.type === 'stop' ? 'red' : 'blue'} />}
                message={
                    confirmAction?.type === 'stop' ? "Are you sure you want to stop this campaign? Sending will be paused immediately." :
                    confirmAction?.type === 'resume' ? "Are you sure you want to resume this campaign? It will start sending to the remaining audience." :
                    "Are you sure you want to send this campaign now? This action cannot be undone."
                }
                handleConfirm={handleConfirmAction}
                modalProps={{
                    opened: confirmOpened,
                    onClose: closeConfirm,
                }}
            />
        </div>
    );
};

export default CampaignsTable;