import { useState, useEffect } from "react";

const BOOT_HINT_DELAY_MS = 5_000;

interface BootstrapOverlayProps {
  reconnecting?: boolean;
}

/**
 * Prominent overlay shown over the terminal area while the WebSocket
 * connection is being established. If connecting takes longer than 5 s
 * (typical for a cold container boot), a secondary hint is shown.
 */
export function BootstrapOverlay({ reconnecting }: BootstrapOverlayProps) {
  const [showBootHint, setShowBootHint] = useState(false);

  useEffect(() => {
    // Only show the "container booting" hint on first connect, not reconnects
    if (reconnecting) {
      setShowBootHint(false);
      return;
    }
    const timer = setTimeout(() => setShowBootHint(true), BOOT_HINT_DELAY_MS);
    return () => clearTimeout(timer);
  }, [reconnecting]);

  return (
    <div
      className="absolute inset-0 z-10 flex items-center justify-center bg-canvas animate-fade-in"
      role="status"
      aria-live="polite"
      aria-busy="true"
    >
      <div className="flex flex-col items-center gap-4">
        <div className="size-8 rounded-full border-3 border-zinc-700 border-t-zinc-100 animate-spinner" />
        <div className="text-zinc-100 text-sm">
          {reconnecting ? "Reconnecting to session\u2026" : "Connecting to container\u2026"}
        </div>
        {showBootHint && <div className="text-zinc-500 text-xs">Container is starting up — this can take a moment</div>}
      </div>
    </div>
  );
}