import React from "react";
import { MultiNodeConsole } from "../../../shared/components";
import { FileSystemNavigator } from "../../../shared/components";

export const SwarmControlConsoleOverlay = ({
  showConsole,
  attachedNodeIds,
  accessibleNodes,
  isConsoleExpanded,
  consoleHeight,
  handleConsoleDragStart,
  setIsConsoleExpanded,
  isProcessing
}) => {
  if (!showConsole || attachedNodeIds.length === 0) return null;

  return (
    <div
      className="shadow-xl border-x border-b border-t dark:border-gray-800 animate-in slide-in-from-bottom duration-300 flex flex-col overflow-hidden relative shrink-0 fixed inset-x-0 bottom-0 z-[70] lg:relative lg:inset-auto lg:z-auto"
      style={{ height: isConsoleExpanded ? (window.innerWidth < 1024 ? "90vh" : "75vh") : `${consoleHeight}px` }}
    >
      {!isConsoleExpanded && (
        <div
          onMouseDown={handleConsoleDragStart}
          onContextMenu={handleConsoleDragStart}
          className="absolute top-0 left-0 right-0 h-4 cursor-row-resize z-[100] hover:bg-indigo-500/30 transition-colors flex justify-center items-start group"
        >
          <div className="w-16 h-1 bg-gray-500/40 rounded-b mt-0.5 group-hover:bg-indigo-400/80 transition-colors pointer-events-none shadow-sm" />
        </div>
      )}

      <MultiNodeConsole
        attachedNodeIds={attachedNodeIds}
        nodes={accessibleNodes}
        isAIProcessing={isProcessing}
        isExpanded={isConsoleExpanded}
        onToggleExpand={() => setIsConsoleExpanded(!isConsoleExpanded)}
      />
    </div>
  );
};

export const SwarmControlFileExplorerOverlay = ({
  showFileExplorer,
  workspaceId,
  attachedNodeIds,
  setShowFileExplorer
}) => {
  if (!showFileExplorer || !workspaceId || attachedNodeIds.length === 0) return null;

  return (
    <>
      <div
        className="fixed inset-0 bg-gray-900/40 backdrop-blur-sm z-[55] lg:hidden"
        onClick={() => setShowFileExplorer(false)}
      />
      <div className="fixed inset-y-0 right-0 w-80 max-w-[85vw] border-l dark:border-gray-800 bg-white dark:bg-gray-900 flex flex-col z-[60] animate-in slide-in-from-right duration-300 lg:relative lg:z-10 lg:animate-none">
        <div className="flex items-center justify-between p-4 border-b dark:border-gray-800 lg:hidden">
          <span className="font-bold text-sm">File Explorer</span>
          <button onClick={() => setShowFileExplorer(false)} className="p-1 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-md">
            <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" /></svg>
          </button>
        </div>
        <FileSystemNavigator
          nodeId={attachedNodeIds[0]}
          sessionId={workspaceId}
          initialPath="."
          showSyncStatus={true}
        />
      </div>
    </>
  );
};