import { Button } from '@admin/components/ui/button';
import { Switch } from '@admin/components/ui/switch';
import { ColumnDef } from '@tanstack/react-table';
import { Edit, Eye } 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[];
    uid: string;
    email?: string;
}

interface AdminTableColumnsProps {
    handleViewAdmin?: (pkg: Package) => void;
    handleEditAdmin?: (pkg: Package) => void;
    handleToggleStatus?: (id: number) => void;
}

export const AdminTableColumns = ({ handleViewAdmin, handleEditAdmin, handleToggleStatus }: AdminTableColumnsProps): ColumnDef<Package>[] => [
    {
        accessorKey: 'uid',
        header: 'Uid',
        cell: ({ row }) => (
            <div className="flex flex-col">
                <span className="text-sm font-medium text-gray-900">{row.original.uid}</span>
            </div>
        ),
    },
    {
        accessorKey: 'name',
        header: 'Name',
        cell: ({ row }) => (
            <div className="flex flex-col">
                <span className="text-sm font-medium text-gray-900">{row.original.name}</span>
                <span className="text-sm text-muted-foreground">{row.original.email}</span>
            </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>
            );
        },
    },
    {
        id: 'actions',
        header: 'Actions',
        cell: ({ row }) => (
            <div className="flex items-center gap-2">
                {handleViewAdmin && (
                    <Button variant="ghost" size="icon" className="size-8 border text-primary" onClick={() => handleViewAdmin(row.original)}>
                        <Eye className="size-4 text-success" />
                    </Button>
                )}
                {handleEditAdmin && (
                    <Button variant="ghost" size="icon" className="size-8 border text-primary" onClick={() => handleEditAdmin(row.original)}>
                        <Edit className="h-4 w-4 text-success" />
                    </Button>
                )}
            </div>
        ),
    },
];