'use client'

import { useLayoutEffect, useRef, useState } from 'react'

const BADGE_H = 16
const BADGE_RX = 8
const BADGE_FONT_SIZE = 12
/** 左右內距（各 8px，與原 48px 寬／「家族長」三字對齊） */
const BADGE_PAD_X = 8
const BADGE_MIN_W = 40

const BADGE_FILL = {
    leader: '#FF9C75',
    deputy: '#5F97C8',
} as const

export type FamilyRoleBadgeVariant = keyof typeof BADGE_FILL

/**
 * 家族角色膠囊標籤（inline SVG）。
 * - `label`：由 i18n 傳入，例如 t('user.families.leader')
 * - 寬度：依實際文字量測，多語系長文案會自動拉寬
 */
export default function FamilyRoleBadge({
    label,
    variant,
}: {
    label: string
    variant: FamilyRoleBadgeVariant
}) {
    const measureRef = useRef<HTMLSpanElement>(null)
    const [width, setWidth] = useState(BADGE_MIN_W)

    useLayoutEffect(() => {
        const el = measureRef.current
        if (!el) return
        const textW = el.getBoundingClientRect().width
        setWidth(Math.max(BADGE_MIN_W, Math.ceil(textW + BADGE_PAD_X * 2)))
    }, [label])

    const fill = BADGE_FILL[variant]
    const textY = BADGE_H - 4

    return (
        <span className="relative inline-flex shrink-0 items-center" aria-label={label}>
            <span
                ref={measureRef}
                className="pointer-events-none absolute left-0 top-0 whitespace-nowrap text-xs font-bold opacity-0"
                aria-hidden
            >
                {label}
            </span>
            <svg
                xmlns="http://www.w3.org/2000/svg"
                width={width}
                height={BADGE_H}
                className="block shrink-0"
                role="img"
                aria-hidden
            >
                <rect width={width} height={BADGE_H} rx={BADGE_RX} fill={fill} />
                <text
                    x={width / 2}
                    y={textY}
                    fontSize={BADGE_FONT_SIZE}
                    fontWeight="bold"
                    textAnchor="middle"
                    fill="white"
                >
                    {label}
                </text>
            </svg>
        </span>
    )
}