"use client";

import { Wifi, WifiOff } from "lucide-react";

import type {
  NetworkQuality,
  VoicePreviewStatus,
} from "@/hooks/use-voice-preview";

const QUALITY_VIEW: Record<
  NetworkQuality,
  { label: string; color: string; darkColor: string }
> = {
  unknown: {
    label: "检测中",
    color: "text-muted-foreground",
    darkColor: "text-white/55",
  },
  good: {
    label: "网络良好",
    color: "text-emerald-600",
    darkColor: "text-emerald-300",
  },
  fair: {
    label: "网络一般",
    color: "text-amber-600",
    darkColor: "text-amber-300",
  },
  poor: {
    label: "网络较差",
    color: "text-red-600",
    darkColor: "text-red-300",
  },
};

export function NetworkQualityIndicator({
  quality,
  status,
  dark = false,
  className = "",
}: {
  quality: NetworkQuality;
  status: VoicePreviewStatus;
  dark?: boolean;
  className?: string;
}) {
  const connected = status === "connected";
  const qualityView = QUALITY_VIEW[quality];
  const view = connected
    ? {
        label: qualityView.label,
        color: dark ? qualityView.darkColor : qualityView.color,
      }
    : {
        label: status === "connecting" ? "检测中" : "未连接",
        color: dark ? "text-white/55" : "text-muted-foreground",
      };
  const Icon = connected || status === "connecting" ? Wifi : WifiOff;

  return (
    <span
      className={`inline-flex items-center gap-1.5 whitespace-nowrap text-xs ${view.color} ${className}`}
      title={view.label}
      aria-label={view.label}
    >
      <Icon className="size-3.5" aria-hidden="true" />
      <span>{view.label}</span>
    </span>
  );
}