import { renderComponent, renderSnippet } from "$lib/components/ui/data-table/index.js";
import { createRawSnippet } from "svelte";
import DataTableActions from "./data-table-actions.svelte";

export type ClientsProvidersColumnOptions = {
	canEdit?: boolean;
	canDelete?: boolean;
};

export function createColumns(onSuccess: () => void, options: ClientsProvidersColumnOptions = {}) {
	const { canEdit = false, canDelete = false } = options;
    return [
        {
            accessorKey: "id",
            header: "ID",
            cell: ({ row }) => {
                const snippet = createRawSnippet((getData) => {
                    const { val } = getData();
                    return { render: () => `<span class="font-medium">${val}</span>` };
                });
                return renderSnippet(snippet, { val: row.original.id });
            }
        },
        {
            accessorKey: "rfc",
            header: "RFC / TAX-ID",
            cell: ({ row }) => {
                const snippet = createRawSnippet((getData) => {
                    const { val } = getData();
                    return { render: () => `<code class="bg-muted px-1 py-0.5 rounded font-mono text-sm">${val}</code>` };
                });
                return renderSnippet(snippet, { val: row.original.rfc });
            }
        },
        {
            accessorKey: "name",
            header: "Nombre",
            cell: ({ row }) => {
                const snippet = createRawSnippet((getData) => {
                    const { val } = getData();
                    return { render: () => `<div class="max-w-[250px] truncate font-medium" title="${val}">${val}</div>` };
                });
                return renderSnippet(snippet, { val: row.original.name });
            }
        },
        {
            id: "streets",
            header: "Calles",
            cell: ({ row }) => {
                const snippet = createRawSnippet((getData) => {
                    const { val } = getData();
                    return { render: () => `<div class="max-w-[200px] truncate" title="${val || ''}">${val || '-'}</div>` };
                });
                return renderSnippet(snippet, { val: row.original.address?.streets });
            }
        },
        {
            id: "exterior_number",
            header: "Num Ext.",
            cell: ({ row }) => {
                const snippet = createRawSnippet((getData) => {
                    const { val } = getData();
                    return { render: () => `<div>${val || '-'}</div>` };
                });
                return renderSnippet(snippet, { val: row.original.address?.exterior_number });
            }
        },
        {
            id: "postal_code",
            header: "Código Postal",
            cell: ({ row }) => {
                const snippet = createRawSnippet((getData) => {
                    const { val } = getData();
                    return { render: () => `<code class="bg-muted px-1 py-0.5 rounded text-sm">${val || '-'}</code>` };
                });
                return renderSnippet(snippet, { val: row.original.address?.postal_code });
            }
        },
        {
            id: "neighborhood",
            header: "Colonia",
            cell: ({ row }) => {
                const snippet = createRawSnippet((getData) => {
                    const { val } = getData();
                    return { render: () => `<div class="max-w-[150px] truncate" title="${val || ''}">${val || '-'}</div>` };
                });
                return renderSnippet(snippet, { val: row.original.address?.neighborhood });
            }
        },
        {
            id: "city",
            header: "Ciudad",
            cell: ({ row }) => {
                const snippet = createRawSnippet((getData) => {
                    const { val } = getData();
                    return { render: () => `<div class="max-w-[150px] truncate" title="${val || ''}">${val || '-'}</div>` };
                });
                return renderSnippet(snippet, { val: row.original.address?.city });
            }
        },
        {
            id: "country",
            header: "País",
            cell: ({ row }) => {
                const snippet = createRawSnippet((getData) => {
                    const { val } = getData();
                    return { render: () => `<div>${val || '-'}</div>` };
                });
                // Busca en address.country, si no existe pone null
                const country = row.original.address?.country;
                return renderSnippet(snippet, { val: country });
            }
        },
        {
            accessorKey: "client_or_provider",
            header: "Tipo",
            cell: ({ row }) => {
                const snippet = createRawSnippet((getData) => {
                    const { val } = getData();
                    const map = { client: 'Cliente', provider: 'Proveedor', both: 'Ambos' };
                    const colors = { 
                        client: 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300', 
                        provider: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300', 
                        both: 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300' 
                    };
                    return { 
                        render: () => `<span class="px-2 py-0.5 rounded-full text-xs font-medium ${colors[val] || 'bg-gray-100'}">${map[val] || val}</span>` 
                    };
                });
                return renderSnippet(snippet, { val: row.original.client_or_provider });
            }
        },
        // --- CORRECCIÓN AQUÍ ---
        {
            accessorKey: "is_active",
            header: "Estado",
            cell: ({ row }) => {
                const snippet = createRawSnippet((getData) => {
                    const { val } = getData();
                    
                
                    const isActive = !!val; 

                    const text = isActive ? 'Activo' : 'Inactivo';
                    const color = isActive 
                        ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300' 
                        : 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300';
                    
                    return { 
                        render: () => `<span class="px-2 py-0.5 rounded-full text-xs font-medium ${color}">${text}</span>` 
                    };
                });
                return renderSnippet(snippet, { val: row.original.is_active });
            }
        },
        {
            id: "actions",
			header: "Acciones",
            cell: ({ row }) =>
				renderComponent(DataTableActions, {
					item: row.original,
					onSuccess,
					canEdit,
					canDelete
				})
        }
    ];
}