import { Badge } from '@admin/components/ui/badge';
import { cn } from '@admin/lib/utils';
import { ColumnDef } from '@tanstack/react-table';

export interface TenantSubscription {
    id: number;
    user_count: number;
    total_price: string;
    started_at: string;
    expires_at: string;
    subscription_name?: string;
    package_name?: string;
    status: number;
    package?: {
        id: number;
        name: string;
        features_count: number;
    };
}

const getStatusColor = (status: number): string => {
    switch (status) {
        case 1:
            return 'bg-emerald-100 text-emerald-700 border border-emerald-300';
        case 0:
            return 'bg-gray-200 text-gray-600 border border-gray-300';
        default:
            return 'bg-gray-200 text-gray-600 border border-gray-300';
    }
};

export const tenantSubscriptionTableColumns = (): ColumnDef<TenantSubscription>[] => [
    {
        accessorKey: 'package_name',
        header: 'Package',
        cell: ({ row }) => {
            const packageName = row.original.package_name || row.original.subscription_name || 'N/A';
            return (
                <div className="min-w-[100px] max-w-[140px] px-2 py-1">
                    <div className="flex flex-col gap-1">
                        <span className="text-sm font-medium text-gray-900 truncate" title={packageName}>{packageName}</span>
                        <Badge className={cn("w-fit font-semibold text-xs px-1.5 py-0.5", getStatusColor(row.original.status))}>
                            {row.original.status === 1 ? 'Active' : 'Inactive'}
                        </Badge>
                    </div>
                </div>
            );
        },
    },
    {
        accessorKey: 'user_count',
        header: 'Users',
        cell: ({ row }) => (
            <div className="min-w-[50px] px-2 py-1 text-center">
                <span className="text-sm text-gray-700">{row.original.user_count}</span>
            </div>
        ),
    },
    {
        accessorKey: 'total_price',
        header: 'Price',
        cell: ({ row }) => (
            <div className="min-w-[70px] px-2 py-1 text-center">
                <span className="text-sm font-semibold text-gray-900">${row.original.total_price}</span>
            </div>
        ),
    },
    {
        accessorKey: 'duration',
        header: 'Duration',
        cell: ({ row }) => {
            const startedAt = new Date(row.original.started_at);
            const expiresAt = new Date(row.original.expires_at);
            const now = new Date();
            const isExpired = expiresAt < now;

            return (
                <div className="min-w-[140px] px-2 py-1">
                    <div className="flex flex-col gap-1">
                        <div className="flex items-center gap-1 text-xs text-gray-700">
                            <span className="font-medium">From:</span>
                            <span>{startedAt.toLocaleDateString('en-US', {
                                month: 'short',
                                day: 'numeric',
                                year: '2-digit',
                            })}</span>
                        </div>
                        <div className="flex items-center gap-1 text-xs">
                            <span className={cn(
                                "font-medium",
                                isExpired ? "text-red-600" : "text-gray-700"
                            )}>To:</span>
                            <span className={cn(
                                isExpired ? "text-red-600 font-medium" : "text-gray-700"
                            )}>
                                {expiresAt.toLocaleDateString('en-US', {
                                    month: 'short',
                                    day: 'numeric',
                                    year: '2-digit',
                                })}
                            </span>
                            {isExpired && (
                                <Badge className="text-xs bg-red-100 text-red-700 border border-red-300 ml-1">
                                    Expired
                                </Badge>
                            )}
                        </div>
                    </div>
                </div>
            );
        },
    },
];