import React from 'react';
import { Badge } from '@/components/ui/badge';
import { cn } from '@/lib/utils';

// Define status color mappings for different types
export const STATUS_VARIANTS = {
    // User statuses
    user: {
        ACTIVE: 'bg-blue-50 border-blue-200 text-blue-700',
        inactive: 'bg-gray-50 border-gray-200 text-gray-700',
        invited: 'bg-purple-50 border-purple-200 text-purple-700',
        suspended: 'bg-red-50 border-red-200 text-red-700',
        pending: 'bg-yellow-50 border-yellow-200 text-yellow-700',
        deleted: 'bg-red-50 border-red-200 text-red-700',
    },
    // Role statuses
    role: {
        admin: 'bg-red-50 border-red-200 text-red-700',
        manager: 'bg-blue-50 border-blue-200 text-blue-700',
        user: 'bg-green-50 border-green-200 text-green-700',
        employee: 'bg-purple-50 border-purple-200 text-purple-700',
        superadmin: 'bg-orange-50 border-orange-200 text-orange-700',
    },
    // Task statuses
    task: {
        todo: 'bg-gray-50 border-gray-200 text-gray-700',
        'in-progress': 'bg-blue-50 border-blue-200 text-blue-700',
        completed: 'bg-green-50 border-green-200 text-green-700',
        cancelled: 'bg-red-50 border-red-200 text-red-700',
        on_hold: 'bg-yellow-50 border-yellow-200 text-yellow-700',
    },
    // Order statuses
    order: {
        pending: 'bg-yellow-50 border-yellow-200 text-yellow-700',
        processing: 'bg-blue-50 border-blue-200 text-blue-700',
        shipped: 'bg-purple-50 border-purple-200 text-purple-700',
        delivered: 'bg-green-50 border-green-200 text-green-700',
        cancelled: 'bg-red-50 border-red-200 text-red-700',
        refunded: 'bg-orange-50 border-orange-200 text-orange-700',
    },
    // Payment statuses
    payment: {
        paid: 'bg-green-50 border-green-200 text-green-700',
        unpaid: 'bg-red-50 border-red-200 text-red-700',
        pending: 'bg-yellow-50 border-yellow-200 text-yellow-700',
        refunded: 'bg-orange-50 border-orange-200 text-orange-700',
        partial: 'bg-blue-50 border-blue-200 text-blue-700',
    },
    // Project statuses
    project: {
        active: 'bg-green-50 border-green-200 text-green-700',
        inactive: 'bg-gray-50 border-gray-200 text-gray-700',
        completed: 'bg-blue-50 border-blue-200 text-blue-700',
        on_hold: 'bg-yellow-50 border-yellow-200 text-yellow-700',
        cancelled: 'bg-red-50 border-red-200 text-red-700',
    },
    // General statuses
    general: {
        success: 'bg-green-50 border-green-200 text-green-700',
        warning: 'bg-yellow-50 border-yellow-200 text-yellow-700',
        error: 'bg-red-50 border-red-200 text-red-700',
        info: 'bg-blue-50 border-blue-200 text-blue-700',
        default: 'bg-gray-50 border-gray-200 text-gray-700',
    },
} as const;

export type StatusVariantType = keyof typeof STATUS_VARIANTS;
export type StatusValue<T extends StatusVariantType> = keyof typeof STATUS_VARIANTS[T];

interface StatusBadgeProps<T extends StatusVariantType> {
    variant: T;
    status: StatusValue<T> | string;
    className?: string;
    size?: 'sm' | 'md' | 'lg';
    children?: React.ReactNode;
}

export function StatusBadge<T extends StatusVariantType>({
    variant,
    status,
    className,
    size = 'md',
    children,
}: StatusBadgeProps<T>) {
    // Get the color class for the status
    const statusKey = status as StatusValue<T>;
    const colorClass = STATUS_VARIANTS[variant]?.[statusKey] || STATUS_VARIANTS.general.default;
    
    // Size classes
    const sizeClasses = {
        sm: 'px-2 py-0.5 text-xs',
        md: 'px-2.5 py-1 text-xs',
        lg: 'px-3 py-1.5 text-sm',
    };

    return (
        <Badge
            variant="outline"
            className={cn(
                'inline-flex items-center rounded-md border font-medium capitalize',
                colorClass,
                sizeClasses[size],
                className
            )}
        >
            {children || String(status)}
        </Badge>
    );
}

// Convenience components for specific use cases
export const UserStatusBadge = ({ status, ...props }: Omit<StatusBadgeProps<'user'>, 'variant'>) => (
    <StatusBadge variant="user" status={status} {...props} />
);

export const RoleStatusBadge = ({ status, ...props }: Omit<StatusBadgeProps<'role'>, 'variant'>) => (
    <StatusBadge variant="role" status={status} {...props} />
);

export const TaskStatusBadge = ({ status, ...props }: Omit<StatusBadgeProps<'task'>, 'variant'>) => (
    <StatusBadge variant="task" status={status} {...props} />
);

export const OrderStatusBadge = ({ status, ...props }: Omit<StatusBadgeProps<'order'>, 'variant'>) => (
    <StatusBadge variant="order" status={status} {...props} />
);

export const PaymentStatusBadge = ({ status, ...props }: Omit<StatusBadgeProps<'payment'>, 'variant'>) => (
    <StatusBadge variant="payment" status={status} {...props} />
);

export const ProjectStatusBadge = ({ status, ...props }: Omit<StatusBadgeProps<'project'>, 'variant'>) => (
    <StatusBadge variant="project" status={status} {...props} />
);

export const GeneralStatusBadge = ({ status, ...props }: Omit<StatusBadgeProps<'general'>, 'variant'>) => (
    <StatusBadge variant="general" status={status} {...props} />
);

export default StatusBadge;