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 { FundRequest } from '@/types/fund-request';

interface FundRequestColumnsProps {
    onEdit?: (fundRequest: FundRequest) => void;
    onDelete?: (fundRequest: FundRequest) => void;
    text: any;
}

export const createFundRequestColumns = ({
    onEdit,
    onDelete,
    text,
}: FundRequestColumnsProps): ColumnDef<FundRequest>[] => {
    const columns: ColumnDef<FundRequest>[] = [
        {
            accessorKey: 'code',
            header: text('fund_request.field_code'),
            cell: ({ row }) => (
                <div className="font-medium">{row.getValue('code')}</div>
            ),
        },
        {
            accessorKey: 'applicant.name',
            header: text('fund_request.field_requester'),
            cell: ({ row }) => {
                const applicant = row.original.applicant;

                return <div>{applicant?.name || '-'}</div>;
            },
        },
        {
            accessorKey: 'company.name',
            header: text('budget.field_company'),
            cell: ({ row }) => {
                const company = row.original.company;

                return <div>{company?.name || '-'}</div>;
            },
        },
        {
            accessorKey: 'description',
            header: text('fund_request.field_description'),
            cell: ({ row }) => (
                <div className="max-w-[300px] truncate" title={row.getValue('description')}>
                    {row.getValue('description')}
                </div>
            ),
        },
        {
            accessorKey: 'amount',
            header: text('fund_request.field_amount'),
            cell: ({ row }) => {
                const amount = row.getValue('amount') as number;

                return (
                    <div className="font-medium">
                        {new Intl.NumberFormat('id-ID', {
                            style: 'currency',
                            currency: 'IDR',
                        }).format(amount)}
                    </div>
                );
            },
        },
        {
            accessorKey: 'bank.name',
            header: text('fund_request.field_bank'),
            cell: ({ row }) => {
                const bank = row.original.bank;

                return <div>{bank?.name || '-'}</div>;
            },
        },
        {
            accessorKey: 'status',
            header: text('fund_request.field_status'),
            cell: ({ row }) => {
                const status = row.getValue('status') as string;

                // Handle null or undefined status
                if (!status) {
                    return <Badge className="bg-muted text-muted-foreground">{text('fund_request.status_unknown')}</Badge>;
                }

                const statusConfig: Record<string, { color: string; label: string }> = {
                    waiting: { color: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-500/15 dark:text-yellow-300', label: text('common.status_waiting') },
                    approved: { color: 'bg-green-100 text-green-800 dark:bg-green-500/15 dark:text-green-300', label: text('common.status_approved') },
                    rejected: { color: 'bg-red-100 text-red-800 dark:bg-red-500/15 dark:text-red-300', label: text('common.status_rejected') },
                    on_progress: { color: 'bg-blue-100 text-blue-800 dark:bg-blue-500/15 dark:text-blue-300', label: text('common.status_on_progress') },
                    done: { color: 'bg-green-600 text-white dark:bg-green-500 dark:text-white', label: text('common.status_done') },
                };

                const config = statusConfig[status] || { color: 'bg-muted text-muted-foreground', label: status };

                return (
                    <Badge className={`${config.color} border-0`}>
                        {config.label}
                    </Badge>
                );
            },
        },
        {
            accessorKey: 'created_at',
            header: text('common.label_created_at'),
            cell: ({ row }) => {
                const date = row.getValue('created_at') as string;

                return <div>{new Date(date).toLocaleDateString('id-ID')}</div>;
            },
        }
    ];

    if (!onEdit || !onDelete) {
        return columns;
    }

    columns.push({
            id: 'actions',
            header: text('common.label_actions'),
            cell: ({ row }) => {
                const fundRequest = 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(fundRequest)}
                                    >
                                        <Pencil className="h-4 w-4" />
                                        <span className="sr-only">Edit</span>
                                    </Button>
                                </TooltipTrigger>
                                <TooltipContent>
                                    <p>{text('common.btn_edit')} {text('fund_request.detail_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(fundRequest)}
                                    >
                                        <Trash2 className="h-4 w-4" />
                                        <span className="sr-only">Delete</span>
                                    </Button>
                                </TooltipTrigger>
                                <TooltipContent>
                                    <p>{text('common.btn_delete')} {text('fund_request.detail_title')}</p>
                                </TooltipContent>
                            </Tooltip>
                        </TooltipProvider>
                    </div>
                );
            },
        },
    );

    return columns;
};