import { Button } from '@admin/components/ui/button';
import { Switch } from '@admin/components/ui/switch';
import { ColumnDef } from '@tanstack/react-table';
import { Edit, Eye, RotateCcw, Trash2 } from 'lucide-react';

export interface Feature {
    id: number;
    name: string;
    price: number;
    module?: string; // Module name as string
    app?: string; // App name as string
}

export interface Package {
    id: number;
    name: string;
    slug: string;
    price: number;
    status: number;
    status_info?: { value: number; name: string };
    created_at: string;
    features_count?: number;
    features?: Feature[];
    price_per_tenant?: number;
    price_per_user?: number;
    pricing_type?: number;
    deleted_at?: string | null;
}

interface PackageTableColumnsProps {
    handleViewPackage?: (pkg: Package) => void;
    handleEditPackage?: (pkg: Package) => void;
    handleToggleStatus?: (id: number) => void;
    handleDeletePackage?: (pkg: Package) => void;
    handleRestorePackage?: (pkg: Package) => void;
}

export const packageTableColumns = ({ handleViewPackage, handleEditPackage, handleToggleStatus, handleDeletePackage, handleRestorePackage }: PackageTableColumnsProps): ColumnDef<Package>[] => [
    {
        accessorKey: 'name',
        header: 'Package Name',
        cell: ({ row }) => ( <div className="flex flex-col min-w-[220px] gap-1 px-2 py-1"> <span className="text-sm font-medium text-gray-900">{row.original.name}</span> <span className="text-sm text-gray-500">{row.original.slug}</span> </div>
        ),
    },
    {
        "accessorKey": "price",
        "header": "Price",
        "cell": ({ row }) => {
            const pricingType = row.original.pricing_type;
            const pricePerTenant = row.original.price_per_tenant;
            const pricePerUser = row.original.price_per_user;

            if (pricingType === 1) { // Per Tenant
                return (
                    <div className="flex min-w-[220px] gap-3 px-2 py-1">
                        <div className="flex items-center gap-2 bg-blue-50 border border-blue-200 rounded-full px-3 py-1">
                            <span className="text-xs font-semibold text-blue-700 uppercase">Per Tenant</span>
                            <span className="text-sm font-bold text-blue-900">${pricePerTenant}</span>
                        </div>
                    </div>
                );
            } else if (pricingType === 2) { // Per User
                return (
                    <div className="flex min-w-[220px] gap-3 px-2 py-1">
                        <div className="flex items-center gap-2 bg-green-50 border border-green-200 rounded-full px-3 py-1">
                            <span className="text-xs font-semibold text-green-700 uppercase">Per User</span>
                            <span className="text-sm font-bold text-green-900">${pricePerUser}</span>
                        </div>
                    </div>
                );
            }

            // Fallback for unknown pricing type
            return (
                <div className="flex min-w-[220px] gap-3 px-2 py-1">
                    <span className="text-sm text-gray-500">Unknown pricing type</span>
                </div>
            );
        }
    },
    {
        "accessorKey": "features_count",
        "header": "Features",
        "cell": ({ row }) => {
            const featuresCount = row.original.features_count || 0;
            const features = row.original.features || [];

            // Group features by app
            const featuresByApp = features.reduce((acc: Record<string, number>, feature: Feature) => {
                const appName = feature?.app || 'Unknown';
                acc[appName] = (acc[appName] || 0) + 1;
                return acc;
            }, {});

            return (
                <div className="flex flex-col min-w-[220px] gap-1 px-2 py-1 text-sm">
                    <span className="font-medium text-gray-900">{featuresCount} Total</span>
                    {Object.entries(featuresByApp).map(([appName, count]) => (
                        <div key={appName} className="flex items-center gap-2">
                            <span className="text-sm text-gray-500 w-24">{appName}:</span>
                            <span className="text-sm text-gray-700">{count}</span>
                        </div>
                    ))}
                </div>
            );
        }
    },
    {
        accessorKey: 'status',
        header: 'Status',
        cell: ({ row }) => {
            const status = row.original.status_info?.value ?? row.original.status;
            const statusName = row.original.status_info?.name ?? (status === 1 ? 'Active' : 'Inactive');

            return (
                <div className="flex items-center gap-2">
                    <Switch checked={status === 1} onCheckedChange={() => handleToggleStatus?.(row.original.id)} />
                </div>
            );
        },
    },
    {
        accessorKey: 'created_at',
        header: 'Created At',
        cell: ({ row }) => <div className="text-sm text-muted-foreground">{new Date(row.original.created_at).toLocaleDateString()}</div>,
    },
    {
        id: 'actions',
        header: 'Actions',
        cell: ({ row }) => {
            const pkg = row.original;
            const isDeleted = !!pkg.deleted_at;

            return (
                <div className="flex items-center gap-2">
                    {!isDeleted && handleViewPackage && (
                        <Button
                            variant="ghost"
                            size="icon"
                            className="size-8 border border-blue-200 text-blue-500 hover:border-blue-400 hover:bg-blue-50 hover:text-blue-700"
                            onClick={() => handleViewPackage(pkg)}
                            title="View Package"
                        >
                            <Eye className="size-4" />
                        </Button>
                    )}
                    {!isDeleted && handleEditPackage && (
                        <Button
                            variant="ghost"
                            size="icon"
                            className="size-8 border border-amber-200 text-amber-500 hover:border-amber-400 hover:bg-amber-50 hover:text-amber-700"
                            onClick={() => handleEditPackage(pkg)}
                            title="Edit Package"
                        >
                            <Edit className="size-4" />
                        </Button>
                    )}
                    {!isDeleted && handleDeletePackage && (
                        <Button
                            variant="ghost"
                            size="icon"
                            className="size-8 border border-red-200 text-red-400 hover:border-red-400 hover:bg-red-50 hover:text-red-600"
                            onClick={() => handleDeletePackage(pkg)}
                            title="Delete Package"
                        >
                            <Trash2 className="size-4" />
                        </Button>
                    )}
                    {isDeleted && handleRestorePackage && (
                        <Button
                            variant="ghost"
                            size="icon"
                            className="size-8 border border-green-200 text-green-500 hover:border-green-400 hover:bg-green-50 hover:text-green-700"
                            onClick={() => handleRestorePackage(pkg)}
                            title="Restore Package"
                        >
                            <RotateCcw className="size-4" />
                        </Button>
                    )}
                </div>
            );
        },
    },
];