import { useEffect, useRef } from "react";
import { Button } from "~/components/ui/button";
import { Card } from "~/components/ui/card";

interface ConnectionOverlayProps {
  isConnected: boolean;
  isReconnecting: boolean;
  connectionError: string | null;
  isSyncing: boolean;
}

export function ConnectionOverlay({
  isConnected,
  isReconnecting,
  connectionError,
  isSyncing,
}: ConnectionOverlayProps) {
  const dialogRef = useRef<HTMLDivElement>(null);
  const titleId = "connection-overlay-title";

  useEffect(() => {
    if (isConnected && !isSyncing) return;
    const el = dialogRef.current;
    if (!el) return;
    const focusable = el.querySelector<HTMLElement>(
      'button:not([disabled]), [href], input:not([disabled]), [tabindex]:not([tabindex="-1"])'
    );
    focusable?.focus();

    function trapFocus(e: KeyboardEvent) {
      if (e.key !== "Tab") return;
      const focusables = el?.querySelectorAll<HTMLElement>(
        'button:not([disabled]), [href], input:not([disabled]), [tabindex]:not([tabindex="-1"])'
      );
      if (!focusables || focusables.length === 0) return;
      const first = focusables[0];
      const last = focusables[focusables.length - 1];
      if (e.shiftKey) {
        if (document.activeElement === first) { e.preventDefault(); last.focus(); }
      } else {
        if (document.activeElement === last) { e.preventDefault(); first.focus(); }
      }
    }
    document.addEventListener("keydown", trapFocus);
    return () => document.removeEventListener("keydown", trapFocus);
  }, [isConnected, isSyncing]);

  if (isConnected && !isSyncing) {
    return null;
  }

  const statusMessage = connectionError
    ? connectionError
    : isSyncing
    ? "Reconnected. Syncing the latest draft state..."
    : isReconnecting
    ? "Lost connection to the draft server. Attempting to reconnect..."
    : "Please wait while we connect you to the live draft room.";

  return (
    <div
      ref={dialogRef}
      role="dialog"
      aria-modal="true"
      aria-labelledby={titleId}
      className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-[100]"
    >
      <Card className="w-full max-w-md mx-4 p-8 text-center">
        <div className="flex flex-col items-center gap-6">
          {/* Spinner or Error Icon */}
          {connectionError ? (
            <div className="w-16 h-16 rounded-full bg-destructive/15 flex items-center justify-center">
              <svg
                className="w-8 h-8 text-destructive"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
                />
              </svg>
            </div>
          ) : (
            <div className="relative w-16 h-16">
              <div className="absolute inset-0 border-4 border-primary/30 rounded-full" />
              <div className="absolute inset-0 border-4 border-primary border-t-transparent rounded-full animate-spin" />
            </div>
          )}

          {/* Title */}
          <div>
            <h2 id={titleId} className="text-2xl font-bold mb-2">
              {connectionError
                ? "Connection Error"
                : isSyncing
                ? "Syncing Draft State..."
                : isReconnecting
                ? "Reconnecting..."
                : "Connecting to Draft"}
            </h2>

            <p className="text-muted-foreground">{statusMessage}</p>
          </div>

          {/* Action Button (only on persistent error) */}
          {connectionError && (
            <Button
              onClick={() => window.location.reload()}
              className="w-full"
              variant="default"
            >
              Reload Page
            </Button>
          )}

          {/* Loading Dots */}
          {!connectionError && (
            <div aria-live="polite" aria-label={statusMessage} className="flex gap-1.5">
              <div
                aria-hidden="true"
                className="w-2 h-2 bg-primary rounded-full animate-bounce"
                style={{ animationDelay: "0ms" }}
               />
              <div
                aria-hidden="true"
                className="w-2 h-2 bg-primary rounded-full animate-bounce"
                style={{ animationDelay: "150ms" }}
               />
              <div
                aria-hidden="true"
                className="w-2 h-2 bg-primary rounded-full animate-bounce"
                style={{ animationDelay: "300ms" }}
               />
            </div>
          )}
        </div>
      </Card>
    </div>
  );
}