"use client";

import { WifiOff, RefreshCw, AlertCircle } from "lucide-react";
import { useCallback } from "react";
import { useTranslation } from "react-i18next";

import { usePlayerBannerHeightRef } from "@/hooks/use-player-banner-height-ref";
import { useWebSocketManager } from "@/hooks/use-websocket-manager";
import { playerContentColumnClass } from "@/lib/player-viewport";
import { useErrorStore } from "@/stores/error-store";
import { cn } from "@/lib/utils";

// 颜色常量（来自用户需求）
const COLORS = {
  success: "#52c41a",
  error: "#ff4d4f",
  warning: "#faad14",
  neutral: "#d9d9d9",
};

/**
 * 网络状态横幅组件
 * 当 WebSocket 断开时显示降级模式提示
 */
export function NetworkStatusBanner(): React.ReactElement | null {
  const { showDegradedBanner, mode, reconnect } = useWebSocketManager();
  const browserOffline = useErrorStore((state) => state.isOffline);
  const bannerRef = usePlayerBannerHeightRef("network");
  const { t } = useTranslation("player");

  const handleReconnectClick = useCallback(() => {
    reconnect();
  }, [reconnect]);

  // 浏览器离线时由 OfflineBanner 统一提示，避免重复
  if (!showDegradedBanner || browserOffline) {
    return null;
  }

  const isOffline = mode === "offline";

  return (
    <div ref={bannerRef} className="sticky top-0 z-50 w-full">
      <div
        className={cn(
          playerContentColumnClass,
          "flex items-center justify-center gap-2 px-4 py-2 text-sm",
          "animate-in slide-in-from-top-2 duration-200",
        )}
        style={{
          backgroundColor: isOffline ? COLORS.error : COLORS.warning,
          color: "#fff",
        }}
        role="status"
        aria-live="polite"
      >
      {isOffline ? (
        <>
          <WifiOff className="size-4 shrink-0" aria-hidden />
          <span className="font-medium">{t("network.offline")}</span>
          <button
            onClick={handleReconnectClick}
            className="ml-2 flex items-center gap-1 rounded px-2 py-0.5 text-xs font-medium hover:bg-white/20 focus:outline-none focus:ring-2 focus:ring-white/50"
            aria-label={t("network.retryReconnect")}
          >
            <RefreshCw className="size-3" aria-hidden />
            {t("network.retry")}
          </button>
        </>
      ) : (
        <>
          <AlertCircle className="size-4 shrink-0" aria-hidden />
          <span className="font-medium">{t("network.degraded")}</span>
          <button
            onClick={handleReconnectClick}
            className="ml-2 flex items-center gap-1 rounded px-2 py-0.5 text-xs font-medium hover:bg-white/20 focus:outline-none focus:ring-2 focus:ring-white/50"
            aria-label={t("network.recoverWebsocket")}
          >
            <RefreshCw className="size-3" aria-hidden />
            {t("network.recover")}
          </button>
        </>
      )}
      </div>
    </div>
  );
}

/**
 * 带网络状态横幅的页面包装器
 * 将横幅插入到页面顶部
 */
export function WithNetworkStatusBanner({
  children,
}: {
  children: React.ReactNode;
}): React.ReactElement {
  return (
    <>
      <NetworkStatusBanner />
      {children}
    </>
  );
}
