"use client";

import { useEffect, useMemo, useRef, useState } from "react";
import { useTranslations } from "next-intl";
import type {
  YearlyConnectionStatus,
  YearlyRecoveryReason,
} from "@/lib/socket/useYearlyAuctionSocket";

interface YearlyLiveConnectionBannerProps {
  connectionStatus: YearlyConnectionStatus;
  recoveryFailureCount: number;
  onRequestRecovery: (reason: YearlyRecoveryReason) => void;
  /**
   * Optional override for how many consecutive failures are required before we
   * surface a "reload page" fallback button. Defaults to `3`.
   */
  reloadThreshold?: number;
  /**
   * If true, the banner is hidden entirely. Useful while the page is
   * already showing its own loading skeleton.
   */
  hidden?: boolean;
}

/**
 * Small, non-intrusive notice shown when the live socket has been
 * disconnected or repeated recovery attempts didn't yield fresh events.
 *
 * - Hidden during normal `connected` operation with no failures.
 * - Shown briefly while we're trying to reconnect after a hiccup.
 * - Surfaces a "retry" button immediately, and after several consecutive
 *   failed recoveries also offers a manual page reload as a last resort.
 *   We never reload the page automatically.
 */
export default function YearlyLiveConnectionBanner({
  connectionStatus,
  recoveryFailureCount,
  onRequestRecovery,
  reloadThreshold = 3,
  hidden = false,
}: YearlyLiveConnectionBannerProps) {
  const t = useTranslations("YEARLY_AUCTION_LIVE");

  // Debounce a "show banner" decision so brief reconnects (under ~3s) don't
  // flicker UI noise into the user's face.
  const [showAfterDelay, setShowAfterDelay] = useState(false);
  const wasConnectedRef = useRef(connectionStatus === "connected");

  const shouldEventuallyShow =
    connectionStatus === "disconnected" ||
    connectionStatus === "recovering" ||
    recoveryFailureCount > 0;

  useEffect(() => {
    if (connectionStatus === "connected" && recoveryFailureCount === 0) {
      wasConnectedRef.current = true;
      setShowAfterDelay(false);
      return;
    }

    if (!shouldEventuallyShow) {
      setShowAfterDelay(false);
      return;
    }

    const timeout = window.setTimeout(() => {
      setShowAfterDelay(true);
    }, 3000);

    return () => window.clearTimeout(timeout);
  }, [connectionStatus, recoveryFailureCount, shouldEventuallyShow]);

  const showReload = recoveryFailureCount >= reloadThreshold;
  const headline = useMemo(() => {
    if (connectionStatus === "disconnected") {
      return t("connection_lost_title");
    }
    if (showReload) {
      return t("connection_recovery_failed_title");
    }
    return t("connection_recovering_title");
  }, [connectionStatus, showReload, t]);

  if (hidden) return null;
  if (!showAfterDelay) return null;
  if (connectionStatus === "connected" && recoveryFailureCount === 0) return null;

  return (
    <div
      className="rounded-xl border border-amber-300 bg-amber-50 px-4 py-3 text-amber-900 shadow-sm"
      role="status"
      aria-live="polite"
    >
      <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
        <div className="flex items-center gap-2 min-w-0">
          <span
            className={`w-2 h-2 rounded-full ${
              connectionStatus === "disconnected"
                ? "bg-red-500"
                : "bg-amber-500"
            } animate-pulse shrink-0`}
            aria-hidden
          />
          <div className="min-w-0">
            <p className="font-bold text-sm sm:text-base">{headline}</p>
            <p className="text-xs sm:text-sm text-amber-900/80 truncate">
              {showReload
                ? t("connection_recovery_failed_detail")
                : t("connection_recovering_detail")}
            </p>
          </div>
        </div>

        <div className="flex items-center gap-2 shrink-0">
          <button
            type="button"
            onClick={() => onRequestRecovery("manual")}
            className="text-xs sm:text-sm font-bold rounded-lg border border-amber-500 bg-white text-amber-800 px-3 py-1.5 hover:bg-amber-100 transition"
          >
            {t("connection_retry_button")}
          </button>
          {showReload ? (
            <button
              type="button"
              onClick={() => {
                if (typeof window !== "undefined") {
                  window.location.reload();
                }
              }}
              className="text-xs sm:text-sm font-bold rounded-lg bg-amber-700 text-white px-3 py-1.5 hover:bg-amber-800 transition"
            >
              {t("connection_reload_button")}
            </button>
          ) : null}
        </div>
      </div>
    </div>
  );
}