import type { ColumnDef } from '@tanstack/react-table';
import { Badge } from '@ui/components/ui/badge';
import { Button } from '@ui/components/ui/button';
import {
    Tooltip,
    TooltipContent,
    TooltipProvider,
    TooltipTrigger,
} from '@ui/components/ui/tooltip';
import { Pencil, Trash2 } from 'lucide-react';
import type { Budget } from '@/types/finance';

interface BudgetColumnsProps {
    onEdit: (budget: Budget) => void;
    onDelete: (budget: Budget) => void;
    text: any;
}

export const createBudgetColumns = ({
    onEdit,
    onDelete,
    text,
}: BudgetColumnsProps): ColumnDef<Budget>[] => [
        {
            accessorKey: 'name',
            header: text('budget.field_name'),
            cell: ({ row }) => <div className="max-w-[300px] truncate font-medium">{row.getValue('name')}</div>,
        },
        {
            accessorKey: 'period_display',
            header: text('budget.field_fiscal_year'),
            enableSorting: false,
            enableGlobalFilter: false,
            cell: ({ row }) => <div>{row.getValue('period_display')}</div>,
        },
        {
            accessorKey: 'company_name',
            header: text('budget.field_company'),
            enableSorting: false,
            cell: ({ row }) => <div>{row.getValue('company_name') || '-'}</div>,
        },
        {
            accessorKey: 'branch_name',
            header: text('budget.field_branch'),
            enableSorting: false,
            cell: ({ row }) => <div>{row.getValue('branch_name') || '-'}</div>,
        },
        {
            accessorKey: 'department_name',
            header: text('budget.field_department'),
            enableSorting: false,
            cell: ({ row }) => <div>{row.getValue('department_name') || '-'}</div>,
        },
        {
            accessorKey: 'coa_code',
            header: text('budget.field_coa'),
            enableSorting: false,
            cell: ({ row }) => {
                const code = row.getValue('coa_code') as string;
                const name = row.original.coa_name;

                return (
                    <div className="max-w-[200px] truncate" title={`${code} - ${name}`}>
                        {code ? `${code} - ${name}` : '-'}
                    </div>
                );
            },
        },
        {
            accessorKey: 'allocated_amount',
            header: text('budget.field_amount'),
            cell: ({ row }) => {
                const amount = row.getValue('allocated_amount') as number;

                return (
                    <div className="font-medium text-right">
                        {new Intl.NumberFormat('id-ID', {
                            style: 'currency',
                            currency: 'IDR',
                        }).format(amount)}
                    </div>
                );
            },
        },
        {
            accessorKey: 'used_amount',
            header: text('budget.field_used'),
            enableSorting: false, // Calculated/Updated via transactions
            cell: ({ row }) => {
                const amount = row.getValue('used_amount') as number;

                return (
                    <div className="font-medium text-right">
                        {new Intl.NumberFormat('id-ID', {
                            style: 'currency',
                            currency: 'IDR',
                        }).format(amount)}
                    </div>
                );
            },
        },
        {
            accessorKey: 'usage_percentage',
            header: text('budget.field_usage'),
            enableSorting: false,
            enableGlobalFilter: false,
            cell: ({ row }) => {
                const percentage = row.getValue('usage_percentage') as number;
                const getColor = (pct: number) => {
                    if (pct >= 90) {
return 'bg-red-100 text-red-800 dark:bg-red-500/15 dark:text-red-300';
}

                    if (pct >= 75) {
return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-500/15 dark:text-yellow-300';
}

                    return 'bg-green-100 text-green-800 dark:bg-green-500/15 dark:text-green-300';
                };

                return (
                    <Badge className={getColor(percentage)}>
                        {percentage.toFixed(1)}%
                    </Badge>
                );
            },
        },
        {
            accessorKey: 'is_active',
            header: text('common.label_active_status'),
            size: 100,
            cell: ({ row }) => {
                const isActive = row.getValue('is_active') as boolean;

                return (
                    <Badge variant={isActive ? 'default' : 'destructive'}>
                        {isActive ? text('common.status_active') : text('common.status_inactive')}
                    </Badge>
                );
            },
        },
        {
            id: 'actions',
            header: text('common.label_actions'),
            size: 60,
            enableSorting: false,
            enableGlobalFilter: false,
            cell: ({ row }) => {
                const budget = row.original;

                return (
                    <div className="flex items-center gap-1">
                        <TooltipProvider>
                            <Tooltip>
                                <TooltipTrigger asChild>
                                    <Button
                                        variant="ghost"
                                        size="icon"
                                        className="h-8 w-8"
                                        onClick={() => onEdit(budget)}
                                    >
                                        <Pencil className="h-4 w-4" />
                                        <span className="sr-only">{text('common.btn_edit')}</span>
                                    </Button>
                                </TooltipTrigger>
                                <TooltipContent>
                                    <p>{text('common.btn_edit')} {text('budget.title')}</p>
                                </TooltipContent>
                            </Tooltip>
                        </TooltipProvider>

                        <TooltipProvider>
                            <Tooltip>
                                <TooltipTrigger asChild>
                                    <Button
                                        variant="ghost"
                                        size="icon"
                                        className="h-8 w-8 text-destructive hover:text-destructive hover:bg-destructive/10"
                                        onClick={() => onDelete(budget)}
                                    >
                                        <Trash2 className="h-4 w-4" />
                                        <span className="sr-only">{text('common.btn_delete')}</span>
                                    </Button>
                                </TooltipTrigger>
                                <TooltipContent>
                                    <p>{text('common.btn_delete')} {text('budget.title')}</p>
                                </TooltipContent>
                            </Tooltip>
                        </TooltipProvider>
                    </div>
                );
            },
        },
    ];