import { renderSnippet } from "$lib/components/ui/data-table/index.js";
import { createRawSnippet } from "svelte";
import type { ColumnDef } from "@tanstack/table-core";
import type { Manifest } from "$lib/api/dashboard/a76/manifests";

export function createColumns(): ColumnDef<Manifest>[] {
    return [
        {
            accessorKey: "manifest_number",
            header: "Manifesto",
            cell: ({ row }) => {
                const manifestSnippet = createRawSnippet<[{ value: string | null }]>((getVal) => {
                    const { value } = getVal();
                    return {
                        render: () => `<code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-xs font-semibold">${value || '-'}</code>`
                    };
                });
                return renderSnippet(manifestSnippet, { value: row.original.manifest_number ?? null });
            }
        },
        {
            accessorKey: "carrier_code",
            header: "Transportista",
            cell: ({ row }) => {
                const carrierSnippet = createRawSnippet<[{ value: string | null }]>((getVal) => {
                    const { value } = getVal();
                    return {
                        render: () => `<div class="max-w-[120px] truncate text-xs uppercase font-medium">${value || '-'}</div>`
                    };
                });
                return renderSnippet(carrierSnippet, { value: row.original.carrier_code ?? null });
            }
        },
        {
            accessorKey: "person_in_charge",
            header: "Persona a cargo",
            cell: ({ row }) => {
                return row.original.person_in_charge || "-";
            }
        },
        {
            accessorKey: "foreign_exit_port",
            header: "PtoSalMex",
            cell: ({ row }) => {
                return row.original.foreign_exit_port || "-";
            }
        },
        {
            accessorKey: "destination_port",
            header: "Puerto Destino",
            cell: ({ row }) => {
                return row.original.destination_port || "-";
            }
        },
        {
            accessorKey: "entry_port",
            header: "Puerto arribo",
            cell: ({ row }) => {
                return row.original.entry_port || "-";
            }
        },
        {
            accessorKey: "entry_date",
            header: "Fecha entrada",
            cell: ({ row }) => {
                const dateSnippet = createRawSnippet<[{ value: number | null }]>((getVal) => {
                    const { value } = getVal();
                    let formattedDate = '-';
                    if (value) {
                        const dateStr = value.toString();
                        if (dateStr.length === 8) {
                            formattedDate = `${dateStr.substring(6, 8)}/${dateStr.substring(4, 6)}/${dateStr.substring(0, 4)}`;
                        }
                    }
                    return {
                        render: () => `<div class="text-xs text-muted-foreground">${formattedDate}</div>`
                    };
                });
                return renderSnippet(dateSnippet, { value: row.original.entry_date ?? null });
            }
        },
        {
            accessorKey: "status",
            header: "Estatus",
            cell: ({ row }) => {
                const statusSnippet = createRawSnippet<[{ status: string | null }]>((getS) => {
                    const { status } = getS();
                    let colorClass = "bg-muted text-muted-foreground";
                    if (status === 'RECIBIDO') colorClass = "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400";
                    if (status === 'PENDIENTE') colorClass = "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400";

                    return {
                        render: () => `<span class="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-bold uppercase ${colorClass}">${status || 'S.E.'}</span>`
                    };
                });
                return renderSnippet(statusSnippet, { status: row.original.status ?? null });
            }
        }
    ];
}
