import { router } from '@inertiajs/react';
import type { ColumnDef } from '@tanstack/react-table';
import { useMemo, useState } from 'react';
import { IconButton } from '@/components/common/IconButton';
import { Badge } from '@/components/ui/badge';
import { SortableColumnHeader } from '@/components/ui/sortable-column-header';
import type { SupplierListItem, SuppliersSortColumn } from '@/features/suppliers/types';
import { useI18n } from '@/hooks/use-i18n';
import { tableRowIconButtonClass } from '@/lib/icon-button-classes';

type SortHandler = (column: SuppliersSortColumn) => void;

function emptyCell(value: string | null | undefined, fallback: string): string {
    return value && value.trim() !== '' ? value : fallback;
}

function SupplierRowActions({
    row,
    canEdit,
    canDeactivate,
    onEdit,
}: {
    row: SupplierListItem;
    canEdit: boolean;
    canDeactivate: boolean;
    onEdit: (id: number) => void;
}) {
    const { t } = useI18n();
    const [busy, setBusy] = useState(false);

    const patch = (path: string) => {
        setBusy(true);
        router.patch(path, {}, { preserveScroll: true, onFinish: () => setBusy(false) });
    };

    if (!canEdit && !canDeactivate) {
        return null;
    }

    return (
        <div className="flex justify-end gap-1">
            {canEdit ? (
                <IconButton
                    type="button"
                    variant="text"
                    color="ghost"
                    size="sm"
                    className={tableRowIconButtonClass}
                    aria-label={t('suppliers.admin_index.row_actions.edit')}
                    disabled={busy}
                    onClick={() => onEdit(row.id)}
                    icon="solar:pen-bold-duotone"
                />
            ) : null}
            {canDeactivate ? (
                row.active ? (
                    <IconButton
                        type="button"
                        variant="text"
                        color="danger"
                        size="sm"
                        className={tableRowIconButtonClass}
                        aria-label={t('suppliers.admin_index.row_actions.deactivate')}
                        disabled={busy}
                        onClick={() => patch(`/admin/suppliers/${row.id}/deactivate`)}
                        icon="solar:forbidden-circle-bold-duotone"
                    />
                ) : (
                    <IconButton
                        type="button"
                        variant="text"
                        color="success"
                        size="sm"
                        className={tableRowIconButtonClass}
                        aria-label={t('suppliers.admin_index.row_actions.reactivate')}
                        disabled={busy}
                        onClick={() => patch(`/admin/suppliers/${row.id}/reactivate`)}
                        icon="solar:refresh-square-bold-duotone"
                    />
                )
            ) : null}
        </div>
    );
}

function buildSuppliersColumns(
    t: (key: string, replacements?: Record<string, string | number>) => string,
    onSort: SortHandler,
    canEdit: boolean,
    canDeactivate: boolean,
    onEdit: (id: number) => void,
): ColumnDef<SupplierListItem>[] {
    const dash = t('suppliers.admin_index.table.empty_cell');

    return [
        {
            accessorKey: 'name',
            header: () => (
                <SortableColumnHeader
                    label={t('suppliers.admin_index.table.columns.name')}
                    onSort={() => onSort('name')}
                />
            ),
            cell: ({ row }) =>
                canEdit ? (
                    <button
                        type="button"
                        className="block w-full min-w-0 max-w-xs cursor-pointer truncate text-left font-semibold text-primary hover:opacity-80"
                        title={row.original.name}
                        onClick={() => onEdit(row.original.id)}
                    >
                        {row.original.name}
                    </button>
                ) : (
                    <span className="max-w-xs truncate font-medium" title={row.original.name}>
                        {row.original.name}
                    </span>
                ),
        },
        {
            accessorKey: 'cif',
            header: () => (
                <SortableColumnHeader
                    label={t('suppliers.admin_index.table.columns.cif')}
                    onSort={() => onSort('cif')}
                />
            ),
            cell: ({ row }) => (
                <span className="font-mono text-xs">{emptyCell(row.original.cif, dash)}</span>
            ),
        },
        {
            accessorKey: 'vat_number',
            header: () => t('suppliers.admin_index.table.columns.vat_number'),
            cell: ({ row }) => (
                <span className="font-mono text-xs">{emptyCell(row.original.vat_number, dash)}</span>
            ),
        },
        {
            accessorKey: 'email',
            header: () => t('suppliers.admin_index.table.columns.email'),
            cell: ({ row }) => (
                <span className="max-w-[12rem] truncate text-sm">{emptyCell(row.original.email, dash)}</span>
            ),
        },
        {
            accessorKey: 'phone',
            header: () => t('suppliers.admin_index.table.columns.phone'),
            cell: ({ row }) => <span className="text-sm">{emptyCell(row.original.phone, dash)}</span>,
        },
        {
            accessorKey: 'city',
            header: () => t('suppliers.admin_index.table.columns.city'),
            cell: ({ row }) => <span className="text-sm">{emptyCell(row.original.city, dash)}</span>,
        },
        {
            accessorKey: 'is_vat_payer',
            header: () => t('suppliers.admin_index.table.columns.vat_payer'),
            cell: ({ row }) =>
                row.original.is_vat_payer ? (
                    <Badge variant="outline" className="font-normal">
                        {t('suppliers.admin_index.table.vat_payer_yes')}
                    </Badge>
                ) : (
                    <span className="text-muted-foreground text-sm">{t('suppliers.admin_index.table.vat_payer_no')}</span>
                ),
        },
        {
            accessorKey: 'active',
            header: () => (
                <SortableColumnHeader
                    label={t('suppliers.admin_index.table.columns.status')}
                    onSort={() => onSort('active')}
                />
            ),
            cell: ({ row }) =>
                row.original.active ? (
                    <Badge variant="successSoft" className="font-normal">
                        {t('suppliers.admin_index.table.status_active')}
                    </Badge>
                ) : (
                    <Badge variant="secondary" className="font-normal">
                        {t('suppliers.admin_index.table.status_inactive')}
                    </Badge>
                ),
        },
        {
            id: 'actions',
            header: () => (
                <span className="block text-end text-[11px] font-semibold leading-tight text-foreground/85">
                    {t('suppliers.admin_index.table.columns.actions')}
                </span>
            ),
            cell: ({ row }) => (
                <SupplierRowActions
                    row={row.original}
                    canEdit={canEdit}
                    canDeactivate={canDeactivate}
                    onEdit={onEdit}
                />
            ),
        },
    ];
}

export function useSuppliersColumns(
    onSort: SortHandler,
    canEdit: boolean,
    canDeactivate: boolean,
    onEdit: (id: number) => void,
) {
    const { t } = useI18n();

    return useMemo(
        () => buildSuppliersColumns(t, onSort, canEdit, canDeactivate, onEdit),
        [t, onSort, canEdit, canDeactivate, onEdit],
    );
}