'use client'

import type { WebRtcSignalLevel } from '@/lib/media/webrtcSignalMonitor'

type Props = {
    /** 1–4；null 表示直播中但無 WebRTC stats（維持滿格綠色） */
    level: WebRtcSignalLevel | null
    title?: string
    className?: string
}

function colorForLevel(active: number): string {
    if (active >= 4) return 'text-emerald-500 dark:text-emerald-400'
    if (active >= 3) return 'text-lime-500 dark:text-lime-400'
    if (active >= 2) return 'text-amber-500 dark:text-amber-400'
    if (active >= 1) return 'text-orange-500 dark:text-orange-400'
    return 'text-red-500 dark:text-red-400'
}

/** Feather FiWifi 路徑（與 react-icons/fi 一致），依格數淡顯示未點亮弧線 */
const WIFI_ARCS: { bar: number; d: string }[] = [
    { bar: 4, d: 'M1.42 9a16 16 0 0 1 21.16 0' },
    { bar: 3, d: 'M5 12.55a11 11 0 0 1 14 0' },
    { bar: 2, d: 'M8.53 16.11a6 6 0 0 1 6.95 0' },
]

/** 儀表板預覽：依 WebRTC 品質顯示 1–4 格 Wi‑Fi（尺寸對齊 FiWifi / FiWifiOff） */
export default function DashboardWifiSignalIcon({ level, title, className = '' }: Props) {
    const active = level == null ? 4 : Math.max(1, Math.min(4, level))
    const color = colorForLevel(active)

    return (
        <svg
            viewBox="0 0 24 24"
            className={`mx-auto block h-5 w-5 shrink-0 ${color} ${className}`}
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
            role={title ? 'img' : undefined}
            aria-label={title}
            aria-hidden={title ? undefined : true}
        >
            {title ? <title>{title}</title> : null}
            {WIFI_ARCS.map(({ bar, d }) => (
                <path key={bar} d={d} opacity={active >= bar ? 1 : 0.22} />
            ))}
            <line
                x1="12"
                y1="20"
                x2="12.01"
                y2="20"
                opacity={active >= 1 ? 1 : 0.22}
            />
        </svg>
    )
}