import type { ColumnDef } from '@tanstack/table-core';
import type { Doda } from '$lib/api/dashboard/a76/general_catalogs/doda';
import { renderComponent, renderSnippet } from '$lib/components/ui/data-table';
import { createRawSnippet } from 'svelte';
import DataTableActions from './data-table-actions.svelte';

function formatDate(date?: string | null): string {
    if (!date) return '-';
    // Supposing created_at is an ISO string or similar
    try {
        return new Date(date).toLocaleDateString('es-MX', {
            year: 'numeric',
            month: '2-digit',
            day: '2-digit'
        });
    } catch (e) {
        return date;
    }
}

export function createColumns(onSuccess?: () => void): ColumnDef<Doda>[] {
    return [
        {
            accessorKey: 'id',
            header: 'Folio',
            cell: ({ row }) => {
                const numberSnippet = createRawSnippet<[{ number: number }]>((getProps) => {
                    const { number } = getProps();
                    return {
                        render: () =>
                            `<code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold">${number}</code>`
                    };
                });
                return renderSnippet(numberSnippet, { number: row.original.id });
            }
        },
        {
            accessorKey: 'created_at',
            header: 'Fecha doda',
            cell: ({ row }) => {
                const dateSnippet = createRawSnippet<[{ date: string }]>((getProps) => {
                    const { date } = getProps();
                    return {
                        render: () =>
                            `<div class="text-sm text-muted-foreground">${date}</div>`
                    };
                });
                return renderSnippet(dateSnippet, { date: formatDate(row.original.created_at) });
            }
        },
        {
            accessorKey: 'dispatch_customs',
            header: 'Desp',
            cell: ({ row }) => row.original.dispatch_customs || 'N/A'
        },
        {
            accessorKey: 'patent',
            header: 'Patente',
            cell: ({ row }) => row.original.patent || 'N/A'
        },
        {
            accessorKey: 'pedimentos',
            header: 'Pedimento(s)',
            cell: ({ row }) => row.original.pedimentos || 'N/A'
        },
        {
            accessorKey: 'shipments',
            header: 'Remesa(s)',
            cell: ({ row }) => row.original.shipments || 'N/A'
        },
        {
            accessorKey: 'integration_number',
            header: 'Integracion',
            cell: ({ row }) => {
                const numberSnippet = createRawSnippet<[{ number?: string | null }]>((getProps) => {
                    const { number } = getProps();
                    return {
                        render: () =>
                            `<code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold">${number || 'N/A'}</code>`
                    };
                });
                return renderSnippet(numberSnippet, { number: row.original.integration_number });
            }
        },
        {
            accessorKey: 'transaction_number',
            header: 'No transaccion',
            cell: ({ row }) => row.original.transaction_number || 'N/A'
        },
        {
            accessorKey: 'transport_identification',
            header: 'Id transporte',
            cell: ({ row }) => row.original.transport_identification || 'N/A'
        },
        {
            accessorKey: 'caat',
            header: 'CAAT',
            cell: ({ row }) => row.original.caat || 'N/A'
        },
        {
            accessorKey: 'last_user',
            header: 'Usuario',
            cell: ({ row }) => row.original.last_user || 'N/A'
        },
        {
            accessorKey: 'status',
            header: 'Estatus',
            cell: ({ row }) => {
                const status = row.original.status;
                const statusSnippet = createRawSnippet<[{ status?: string | null }]>((getProps) => {
                    const { status } = getProps();
                    const colorClass = status === 'VALIDADO' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800';
                    return {
                        render: () =>
                            `<span class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${colorClass}">
                                ${status || '-'}
                            </span>`
                    };
                });
                return renderSnippet(statusSnippet, { status });
            }
        },
        {
            id: 'actions',
            header: 'Acciones',
            cell: ({ row }) => {
                return renderComponent(DataTableActions, {
                    item: row.original,
                    onSuccess
                });
            }
        }
    ];
}
