import type { GiftSuperChatTier } from './giftSuperChat'

export type GiftSuperChatThemeClasses = {
    card: string
    header: string
    body: string
    headerName: string
    headerNameButton: string
    headerAmount: string
    bodyName: string
    bodyNameButton: string
    bodyMuted: string
    count: string
}

/** 相對聊天室字級（繼承 Container 的 fontSize） */
export const GIFT_CHAT_TEXT_CLASS = 'text-[1em]'
export const GIFT_CHAT_COUNT_CLASS = 'text-[1.75em]'

const GIFT_CHAT_TEXT = GIFT_CHAT_TEXT_CLASS
const GIFT_CHAT_COUNT = GIFT_CHAT_COUNT_CLASS

const GIFT_COUNT_BASE = `shrink-0 self-center tabular-nums ${GIFT_CHAT_COUNT} font-extrabold leading-none tracking-tight [paint-order:stroke_fill]`

/** 白字數量：黑色描邊 */
const GIFT_COUNT_WHITE_TEXT = `${GIFT_COUNT_BASE} [-webkit-text-stroke:2px_#000000] text-white`

/** 深色字數量：白色描邊 */
const GIFT_COUNT_DARK_TEXT = `${GIFT_COUNT_BASE} [-webkit-text-stroke:2px_#ffffff]`

/** 色階避開身分色（橘／藍／紫字），卡片底色不用橘、紅、萊姆綠與藍系 */
const GIFT_SUPER_CHAT_THEMES: Record<GiftSuperChatTier, GiftSuperChatThemeClasses> = {
    blue: {
        card: 'w-full max-w-full overflow-hidden rounded-lg shadow-[0_2px_8px_rgba(27,94,32,0.45)] outline outline-1 -outline-offset-0 outline-[rgba(27,94,32,0.5)]',
        header: 'flex items-center gap-2.5 bg-[#1b5e20] px-3 py-2.5 text-white',
        body: 'flex min-h-[4em] items-center gap-2 bg-[#2e7d32] pl-3 text-white',
        headerName: 'truncate text-[1em] font-semibold text-white',
        headerNameButton: 'truncate text-[1em] font-semibold text-white',
        headerAmount: 'mt-0.5 flex items-center gap-1 text-[1em] font-bold tabular-nums text-white',
        bodyName: 'font-semibold text-white',
        bodyNameButton: 'font-semibold text-white',
        bodyMuted: 'text-white/90',
        count: GIFT_COUNT_WHITE_TEXT,
    },
    cyan: {
        card: 'w-full max-w-full overflow-hidden rounded-lg shadow-[0_2px_8px_rgba(0,77,64,0.45)] outline outline-1 -outline-offset-0 outline-[rgba(0,77,64,0.5)]',
        header: 'flex items-center gap-2.5 bg-[#004d40] px-3 py-2.5 text-white',
        body: 'flex min-h-[4em] items-center gap-2 bg-[#00796b] pl-3 text-white',
        headerName: 'truncate text-[1em] font-semibold text-white',
        headerNameButton: 'truncate text-[1em] font-semibold text-white',
        headerAmount: 'mt-0.5 flex items-center gap-1 text-[1em] font-bold tabular-nums text-white',
        bodyName: 'font-semibold text-white',
        bodyNameButton: 'font-semibold text-white',
        bodyMuted: 'text-white/90',
        count: GIFT_COUNT_WHITE_TEXT,
    },
    gold: {
        card: 'w-full max-w-full overflow-hidden rounded-lg shadow-[0_2px_8px_rgba(93,64,55,0.45)] outline outline-1 -outline-offset-0 outline-[rgba(93,64,55,0.5)]',
        header: 'flex items-center gap-2.5 bg-[#5d4037] px-3 py-2.5 text-white',
        body: 'flex min-h-[4em] items-center gap-2 bg-[#8d6e63] pl-3 text-white',
        headerName: 'truncate text-[1em] font-semibold text-white',
        headerNameButton: 'truncate text-[1em] font-semibold text-white',
        headerAmount: 'mt-0.5 flex items-center gap-1 text-[1em] font-bold tabular-nums text-white',
        bodyName: 'font-semibold text-white',
        bodyNameButton: 'font-semibold text-white',
        bodyMuted: 'text-white/90',
        count: GIFT_COUNT_WHITE_TEXT,
    },
    orange: {
        card: 'w-full max-w-full overflow-hidden rounded-lg shadow-[0_2px_8px_rgba(74,20,140,0.45)] outline outline-1 -outline-offset-0 outline-[rgba(74,20,140,0.5)]',
        header: 'flex items-center gap-2.5 bg-[#4a148c] px-3 py-2.5 text-white',
        body: 'flex min-h-[4em] items-center gap-2 bg-[#7b1fa2] pl-3 text-white',
        headerName: 'truncate text-[1em] font-semibold text-white',
        headerNameButton: 'truncate text-[1em] font-semibold text-white',
        headerAmount: 'mt-0.5 flex items-center gap-1 text-[1em] font-bold tabular-nums text-white',
        bodyName: 'font-semibold text-white',
        bodyNameButton: 'font-semibold text-white',
        bodyMuted: 'text-white/90',
        count: GIFT_COUNT_WHITE_TEXT,
    },
    pink: {
        card: 'w-full max-w-full overflow-hidden rounded-lg shadow-[0_2px_8px_rgba(136,14,79,0.45)] outline outline-1 -outline-offset-0 outline-[rgba(136,14,79,0.5)]',
        header: 'flex items-center gap-2.5 bg-[#880e4f] px-3 py-2.5 text-white',
        body: 'flex min-h-[4em] items-center gap-2 bg-[#c2185b] pl-3 text-white',
        headerName: 'truncate text-[1em] font-semibold text-white',
        headerNameButton: 'truncate text-[1em] font-semibold text-white',
        headerAmount: 'mt-0.5 flex items-center gap-1 text-[1em] font-bold tabular-nums text-white',
        bodyName: 'font-semibold text-white',
        bodyNameButton: 'font-semibold text-white',
        bodyMuted: 'text-white/90',
        count: GIFT_COUNT_WHITE_TEXT,
    },
}

/** 供 tailwind.config safelist：避免 lib 內動態 class 在 production 被 purge */
export const GIFT_SUPER_CHAT_SAFELIST = Array.from(
    new Set(
        [
            GIFT_CHAT_TEXT_CLASS,
            GIFT_CHAT_COUNT_CLASS,
            'min-h-[4em]',
            GIFT_COUNT_BASE,
            GIFT_COUNT_WHITE_TEXT,
            GIFT_COUNT_DARK_TEXT,
            ...Object.values(GIFT_SUPER_CHAT_THEMES).flatMap((theme) => Object.values(theme)),
        ].flatMap((className) => className.split(/\s+/).filter(Boolean))
    )
)

export function getGiftSuperChatTheme(tier: GiftSuperChatTier): GiftSuperChatThemeClasses {
    return GIFT_SUPER_CHAT_THEMES[tier]
}