import { useWorkspaceStore } from "../workspace/store";
import { useSharedSessionDetection } from "../terminal/use-shared-session-detection";
import { BootstrapOverlay } from "./bootstrap-overlay";
import { SessionControls } from "./session-controls";
import { TabStrip } from "./tab-strip";
import { TerminalPane } from "./terminal-pane";

export function TerminalWorkspace({ workspace }: { workspace: string }) {
  const activeTab = useWorkspaceStore((s) => s.tabs.find((t) => t.id === s.activeTabId));
  const reconnectKey = useWorkspaceStore((s) => s.reconnectKeys[s.activeTabId] ?? 0);
  const setConnectionState = useWorkspaceStore((s) => s.setConnectionState);
  const connectionState = useWorkspaceStore((s) => s.connectionStates[s.activeTabId] ?? "disconnected");

  useSharedSessionDetection(activeTab?.sessionId ?? "");

  if (!activeTab) return null;

  const showOverlay =
    connectionState === "disconnected" || connectionState === "connecting" || connectionState === "reconnecting";

  return (
    <>
      <a
        href="#terminal-content"
        className="sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-[200] focus:rounded-lg focus:bg-zinc-800 focus:px-4 focus:py-2 focus:text-accent-400 focus:ring-2 focus:ring-accent-500/50"
      >
        Skip to terminal
      </a>
      <SessionControls />
      <TabStrip />
      <main id="terminal-content" className="flex-1 overflow-hidden relative p-1" role="tabpanel">
        <TerminalPane
          key={`${activeTab.id}-${reconnectKey}`}
          workspace={workspace}
          sessionId={activeTab.sessionId}
          onStateChange={(state) => setConnectionState(activeTab.id, state)}
        />
        {showOverlay && <BootstrapOverlay reconnecting={connectionState === "reconnecting"} />}
      </main>
    </>
  );
}