import { Badge } from '@ui/components/ui/badge';
import { CheckCircle2, XCircle, Clock, AlertCircle, CheckCheck } from 'lucide-react';
import { useAppText } from '@/lib/app-text';

interface FundRequestStatusBadgeProps {
    status: 'waiting' | 'approved' | 'rejected' | 'on_progress' | 'done';
    className?: string;
}

export function FundRequestStatusBadge({ status, className }: FundRequestStatusBadgeProps) {
    const { t: text } = useAppText();

    const statusConfig = {
        waiting: {
            label: text('fund_request.status_waiting_approval'),
            variant: 'secondary' as const,
            icon: Clock,
            className: 'bg-yellow-100 text-yellow-800 border-yellow-300 dark:bg-yellow-500/15 dark:text-yellow-300 dark:border-yellow-500/30',
        },
        on_progress: {
            label: text('fund_request.status_on_progress'),
            variant: 'default' as const,
            icon: AlertCircle,
            className: 'bg-blue-100 text-blue-800 border-blue-300 dark:bg-blue-500/15 dark:text-blue-300 dark:border-blue-500/30',
        },
        approved: {
            label: text('fund_request.status_approved'),
            variant: 'default' as const,
            icon: CheckCircle2,
            className: 'bg-green-100 text-green-800 border-green-300 dark:bg-green-500/15 dark:text-green-300 dark:border-green-500/30',
        },
        rejected: {
            label: text('fund_request.status_rejected'),
            variant: 'destructive' as const,
            icon: XCircle,
            className: 'bg-red-100 text-red-800 border-red-300 dark:bg-red-500/15 dark:text-red-300 dark:border-red-500/30',
        },
        done: {
            label: text('fund_request.status_done'),
            variant: 'default' as const,
            icon: CheckCheck,
            className: 'bg-green-600 text-white border-green-700 dark:bg-green-500 dark:text-white dark:border-green-400',
        },
    };

    const config = statusConfig[status] || statusConfig.waiting;
    const Icon = config.icon;

    return (
        <Badge variant={config.variant} className={`${config.className} ${className || ''}`}>
            <Icon className="w-3 h-3 mr-1" />
            {config.label}
        </Badge>
    );
}

interface ApprovalStatusBadgeProps {
    status: 'approved' | 'rejected' | 'on_progress' | 'done' | 'waiting' | null;
    className?: string;
}

export function ApprovalStatusBadge({ status, className }: ApprovalStatusBadgeProps) {
    const { t: text } = useAppText();

    if (!status || status === 'waiting') {
        return (
            <Badge variant="outline" className={`bg-muted text-muted-foreground ${className || ''}`}>
                <Clock className="w-3 h-3 mr-1" />
                {text('fund_request.status_waiting_approval')}
            </Badge>
        );
    }

    if (status === 'on_progress') {
        return (
            <Badge variant="outline" className={`bg-blue-100 text-blue-800 dark:bg-blue-500/15 dark:text-blue-300 ${className || ''}`}>
                <AlertCircle className="w-3 h-3 mr-1" />
                {text('fund_request.status_on_progress')}
            </Badge>
        );
    }

    if (status === 'approved') {
        return (
            <Badge variant="outline" className={`bg-green-100 text-green-800 dark:bg-green-500/15 dark:text-green-300 ${className || ''}`}>
                <CheckCircle2 className="w-3 h-3 mr-1" />
                {text('fund_request.status_approved')}
            </Badge>
        );
    }

    if (status === 'done') {
        return (
            <Badge variant="outline" className={`bg-green-100 text-green-800 dark:bg-green-500/15 dark:text-green-300 ${className || ''}`}>
                <CheckCircle2 className="w-3 h-3 mr-1" />
                {text('fund_request.status_done')}
            </Badge>
        );
    }

    return (
        <Badge variant="outline" className={`bg-red-100 text-red-800 dark:bg-red-500/15 dark:text-red-300 ${className || ''}`}>
            <XCircle className="w-3 h-3 mr-1" />
            {text('fund_request.status_rejected')}
        </Badge>
    );
}