import React, { useMemo } from 'react';
import AppLayout from '../../layouts/app-layout';
import { Inertia } from '@inertiajs/inertia';
// import { InertiaLink, usePage } from '@inertiajs/inertia-react';
import {
    Container,
    Title,
    Card,
    Group,
    Button,
    Badge,
    ActionIcon,
} from '@mantine/core';
import { IconEdit, IconTrash } from '@tabler/icons-react';
import {  } from 'mantine-react-table';
import type { MRT_Row } from 'mantine-react-table';
import { Link } from '@inertiajs/react';
import type { Campaign } from '@/types';
import Table, { RowActionsProps } from "@/components/table";

interface Props {
    campaigns: Campaign[];
}

export default function TicketDetails({
    campaigns,
}: Props) {
    const campaignsData = campaigns ?? [];
    const handleDelete = (id: number) => {
        if (confirm('Are you sure you want to delete this campaign?')) {
            Inertia.delete(`/campaigns/${id}`);
        }
    };

    const columns = useMemo(
        () => [
            {
                accessorKey: 'campaign_name',
                header: 'Campaign Name',
            },
            {
                accessorKey: 'status',
                header: 'Status',
                Cell: ({ cell }: any) => {
                    const value = cell.getValue() as string;
                    const color =
                        value === 'active'
                            ? 'green'
                            : value === 'paused'
                                ? 'yellow'
                                : value === 'ended'
                                    ? 'red'
                                    : 'gray';
                    return <Badge color={color}>{value}</Badge>;
                },
            },
            {
                accessorKey: 'client.name',
                header: 'Client',
            },
            {
                accessorKey: 'consultant.name',
                header: 'Consultant',
            },
            {
                accessorKey: 'campaign_manager.name',
                header: 'Manager',
            },
            {
                accessorKey: 'client.industry',
                header: 'Industry',
            },
        ],
        []
    );

    const renderRowActions = ({ row }: { row: MRT_Row<Campaign> }) => {
        const campaign = row.original;
        return (
            <Group spacing="xs">
                <ActionIcon
                    color="blue"
                    component={Link}
                    href={`/campaigns/${campaign.id}/edit`}
                >
                    <IconEdit size={18} />
                </ActionIcon>
                <ActionIcon color="red" onClick={() => handleDelete(campaign.id)}>
                    <IconTrash size={18} />
                </ActionIcon>
            </Group>
        );
    };

    return (
        <AppLayout>
            <Container size="lg" mt="md">
                <Title order={2} mb="md">
                    Campaigns
                </Title>
                <Table
                    columns={columns}
                    data={campaignsData}
                    enablePagination
                    // manualPagination
                    // rowCount={campaigns?.total ?? campaignsData.length}
                    // initialState={{
                    //     pagination: { pageIndex: 0, pageSize: 10 },
                    //     columnPinning: {
                    //         right: ["MRT_Row"],
                    //     },
                    // }}
                    renderRowActions={renderRowActions}
                    // enableRowActions
                // columnPinning={{ right: ['mrt-row-actions'] }}
                />
            </Container>
        </AppLayout>
    );
}