brackt/app/components/draft/ConnectionOverlay.tsx

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

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

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

  useFocusTrap(dialogRef, isVisible);

  if (!isVisible) 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]"
    >
      {/* sr-only live region so status changes are announced without relying on aria-label on the dots */}
      <span className="sr-only" aria-live="polite" aria-atomic="true">{statusMessage}</span>

      {/* tabIndex allows the card to receive focus when there are no interactive children (spinner state) */}
      <Card tabIndex={-1} className="w-full max-w-md mx-4 p-8 text-center focus:outline-none">
        <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
                aria-hidden="true"
                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 aria-hidden="true" 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-hidden="true" className="flex gap-1.5">
              <div className="w-2 h-2 bg-primary rounded-full animate-bounce" style={{ animationDelay: "0ms" }} />
              <div className="w-2 h-2 bg-primary rounded-full animate-bounce" style={{ animationDelay: "150ms" }} />
              <div className="w-2 h-2 bg-primary rounded-full animate-bounce" style={{ animationDelay: "300ms" }} />
            </div>
          )}
        </div>
      </Card>
    </div>
  );
}