import { PostState, PostStateLabels } from '@nice/common';
import {
    ExclamationCircleOutlined,
    BulbOutlined,
    QuestionCircleOutlined,
    CommentOutlined,
    ClockCircleOutlined,
    SyncOutlined,
    CheckCircleOutlined,
    TagOutlined,
} from '@ant-design/icons';

export const BADGE_STYLES = {
    category: {
        complaint: {
            bg: "bg-orange-50",
            text: "text-orange-700",
            border: "border border-orange-100",

            icon: <ExclamationCircleOutlined className="text-orange-400 text-sm" />,

        },
        suggestion: {
            bg: "bg-blue-50",
            text: "text-blue-700",
            border: "border border-blue-100",

            icon: <BulbOutlined className="text-blue-400 text-sm" />,

        },
        request: {
            bg: "bg-purple-50",
            text: "text-purple-700",
            border: "border border-purple-100",

            icon: <QuestionCircleOutlined className="text-purple-400 text-sm" />,

        },
        feedback: {
            bg: "bg-teal-50",
            text: "text-teal-700",
            border: "border border-teal-100",

            icon: <CommentOutlined className="text-teal-400 text-sm" />,

        },
    },
    state: {
        [PostState.PENDING]: {
            bg: "bg-yellow-50",
            text: "text-yellow-700",
            border: "border border-yellow-100",

            icon: <ClockCircleOutlined className="text-yellow-400 text-sm" />,

        },
        [PostState.PROCESSING]: {
            bg: "bg-blue-50",
            text: "text-blue-700",
            border: "border border-blue-100",

            icon: <SyncOutlined className="text-blue-400 text-sm" spin />,

        },
        [PostState.RESOLVED]: {
            bg: "bg-green-50",
            text: "text-green-700",
            border: "border border-green-100",

            icon: <CheckCircleOutlined className="text-green-400 text-sm" />,

        },
    },
    tag: {
        default: {
            bg: "bg-gray-50",
            text: "text-gray-700",
            border: "border border-gray-100",

            icon: <TagOutlined className="text-gray-400 text-sm" />,

        }
    },
} as const;

export const getBadgeStyle = (
    type: keyof typeof BADGE_STYLES,
    value: string
) => {
    const style = type === 'tag'
        ? BADGE_STYLES.tag.default
        : BADGE_STYLES[type][value as keyof (typeof BADGE_STYLES)[typeof type]] || {
            bg: "bg-gray-50",
            text: "text-gray-700",
            icon: <TagOutlined className="text-gray-400 text-sm" />,
        };

    return style;
};

export function LetterBadge({
    type,
    value,
    className = "",
}: {
    type: "category" | "state" | "tag";
    value: string;
    className?: string;
}) {
    if (!value) return null;

    const style = getBadgeStyle(type, value);

    return (
        <span
            className={`
                inline-flex items-center gap-2 px-2 py-1 rounded-full 
                text-xs transition-all
                ${style.bg} ${style.text} ${style.border}
                ${className}
            `}>
            {style.icon}
            <span className="tracking-wide">
                {type === 'state' ? PostStateLabels[value] : value}
            </span>
        </span>
    );
}
