Termix/src/ui/desktop/apps/features/docker/DockerManager.tsx

import React from "react";
import { useSidebar } from "@/components/ui/sidebar.tsx";
import { Separator } from "@/components/ui/separator.tsx";
import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from "@/components/ui/tabs.tsx";
import { useTranslation } from "react-i18next";
import { toast } from "sonner";
import type { SSHHost, DockerContainer, DockerValidation } from "@/types";
import {
  connectDockerSession,
  disconnectDockerSession,
  listDockerContainers,
  validateDockerAvailability,
  keepaliveDockerSession,
  verifyDockerTOTP,
  verifyDockerWarpgate,
  logActivity,
  getSSHHosts,
} from "@/ui/main-axios.ts";
import { SimpleLoader } from "@/ui/desktop/navigation/animations/SimpleLoader.tsx";
import { ContainerList } from "./components/ContainerList.tsx";
import { ContainerDetail } from "./components/ContainerDetail.tsx";
import { TOTPDialog } from "@/ui/desktop/navigation/dialogs/TOTPDialog.tsx";
import { SSHAuthDialog } from "@/ui/desktop/navigation/dialogs/SSHAuthDialog.tsx";
import { WarpgateDialog } from "@/ui/desktop/navigation/dialogs/WarpgateDialog.tsx";
import { useTabs } from "@/ui/desktop/navigation/tabs/TabContext.tsx";
import {
  ConnectionLogProvider,
  useConnectionLog,
} from "@/ui/desktop/navigation/connection-log/ConnectionLogContext.tsx";
import { ConnectionLog } from "@/ui/desktop/navigation/connection-log/ConnectionLog.tsx";

interface DockerManagerProps {
  hostConfig?: SSHHost;
  title?: string;
  isVisible?: boolean;
  isTopbarOpen?: boolean;
  embedded?: boolean;
  onClose?: () => void;
}

interface TabData {
  id: number;
  type: string;
  [key: string]: unknown;
}

function DockerManagerInner({
  hostConfig,
  title,
  isVisible = true,
  isTopbarOpen = true,
  embedded = false,
  onClose,
}: DockerManagerProps): React.ReactElement {
  const { t } = useTranslation();
  const { state: sidebarState } = useSidebar();
  const {
    addLog,
    setLogs,
    clearLogs,
    isExpanded: isConnectionLogExpanded,
  } = useConnectionLog();
  const { currentTab, removeTab } = useTabs() as {
    currentTab: number | null;
    removeTab: (tabId: number) => void;
  };
  const [currentHostConfig, setCurrentHostConfig] = React.useState(hostConfig);
  const [sessionId, setSessionId] = React.useState<string | null>(null);
  const [containers, setContainers] = React.useState<DockerContainer[]>([]);
  const [selectedContainer, setSelectedContainer] = React.useState<
    string | null
  >(null);
  const [isConnecting, setIsConnecting] = React.useState(false);
  const [activeTab, setActiveTab] = React.useState("containers");
  const [dockerValidation, setDockerValidation] =
    React.useState<DockerValidation | null>(null);
  const [isValidating, setIsValidating] = React.useState(false);
  const [viewMode, setViewMode] = React.useState<"list" | "detail">("list");
  const [isLoadingContainers, setIsLoadingContainers] = React.useState(false);
  const [totpRequired, setTotpRequired] = React.useState(false);
  const [totpSessionId, setTotpSessionId] = React.useState<string | null>(null);
  const [totpPrompt, setTotpPrompt] = React.useState<string>("");
  const [warpgateRequired, setWarpgateRequired] = React.useState(false);
  const [warpgateSessionId, setWarpgateSessionId] = React.useState<
    string | null
  >(null);
  const [warpgateUrl, setWarpgateUrl] = React.useState<string>("");
  const [warpgateSecurityKey, setWarpgateSecurityKey] =
    React.useState<string>("");
  const [showAuthDialog, setShowAuthDialog] = React.useState(false);
  const [authReason, setAuthReason] = React.useState<
    "no_keyboard" | "auth_failed" | "timeout"
  >("no_keyboard");
  const [hasConnectionError, setHasConnectionError] = React.useState(false);

  const activityLoggedRef = React.useRef(false);
  const activityLoggingRef = React.useRef(false);

  const logDockerActivity = async () => {
    if (
      !currentHostConfig?.id ||
      activityLoggedRef.current ||
      activityLoggingRef.current
    ) {
      return;
    }

    activityLoggingRef.current = true;
    activityLoggedRef.current = true;

    try {
      const hostName =
        currentHostConfig.name ||
        `${currentHostConfig.username}@${currentHostConfig.ip}`;
      await logActivity("docker", currentHostConfig.id, hostName);
    } catch (err) {
      console.warn("Failed to log docker activity:", err);
      activityLoggedRef.current = false;
    } finally {
      activityLoggingRef.current = false;
    }
  };

  React.useEffect(() => {
    if (hostConfig?.id !== currentHostConfig?.id) {
      setCurrentHostConfig(hostConfig);
      setContainers([]);
      setSelectedContainer(null);
      setSessionId(null);
      setDockerValidation(null);
      setViewMode("list");
    }
  }, [hostConfig?.id]);

  React.useEffect(() => {
    const fetchLatestHostConfig = async () => {
      if (hostConfig?.id) {
        try {
          const hosts = await getSSHHosts();
          const updatedHost = hosts.find((h) => h.id === hostConfig.id);
          if (updatedHost) {
            setCurrentHostConfig(updatedHost);
          }
        } catch {
          // Silently handle error
        }
      }
    };

    fetchLatestHostConfig();

    const handleHostsChanged = async () => {
      if (hostConfig?.id) {
        try {
          const hosts = await getSSHHosts();
          const updatedHost = hosts.find((h) => h.id === hostConfig.id);
          if (updatedHost) {
            setCurrentHostConfig(updatedHost);
          }
        } catch {
          // Silently handle error
        }
      }
    };

    window.addEventListener("ssh-hosts:changed", handleHostsChanged);
    return () =>
      window.removeEventListener("ssh-hosts:changed", handleHostsChanged);
  }, [hostConfig?.id]);

  const initializingRef = React.useRef(false);

  React.useEffect(() => {
    const initSession = async () => {
      if (!currentHostConfig?.id || !currentHostConfig.enableDocker) {
        return;
      }

      if (initializingRef.current) return;
      initializingRef.current = true;

      if (sessionId) {
        initializingRef.current = false;
        return;
      }

      setIsConnecting(true);
      setHasConnectionError(false);
      clearLogs();
      const sid = `docker-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;

      try {
        const result = await connectDockerSession(sid, currentHostConfig.id, {
          useSocks5: currentHostConfig.useSocks5,
          socks5Host: currentHostConfig.socks5Host,
          socks5Port: currentHostConfig.socks5Port,
          socks5Username: currentHostConfig.socks5Username,
          socks5Password: currentHostConfig.socks5Password,
          socks5ProxyChain: currentHostConfig.socks5ProxyChain,
        });

        if (result?.requires_warpgate) {
          setWarpgateRequired(true);
          setWarpgateSessionId(sid);
          setWarpgateUrl(result.url || "");
          setWarpgateSecurityKey(result.securityKey || "");
          setIsConnecting(false);
          return;
        }

        if (result?.requires_totp) {
          setTotpRequired(true);
          setTotpSessionId(sid);
          setTotpPrompt(result.prompt || t("docker.verificationCodePrompt"));
          setIsConnecting(false);
          return;
        }

        if (result?.status === "auth_required") {
          setShowAuthDialog(true);
          setAuthReason(
            result.reason === "no_keyboard" ? "no_keyboard" : "auth_failed",
          );
          setIsConnecting(false);
          return;
        }

        setSessionId(sid);

        setIsValidating(true);
        const validation = await validateDockerAvailability(sid);
        setDockerValidation(validation);
        setIsValidating(false);

        if (!validation.available) {
          setHasConnectionError(true);
          addLog({
            type: "error",
            stage: "validation",
            message: validation.error || t("docker.error"),
            details: validation.code
              ? `Error code: ${validation.code}`
              : undefined,
          });
        } else {
          logDockerActivity();
          setTimeout(() => clearLogs(), 1000);
        }
      } catch (error: any) {
        setIsConnecting(false);
        setIsValidating(false);
        setHasConnectionError(true);

        if (error?.connectionLogs) {
          setLogs(error.connectionLogs);
        } else {
          addLog({
            type: "error",
            stage: "connection",
            message: error?.message || t("docker.connectionFailed"),
          });
        }
      } finally {
        setIsConnecting(false);
      }
    };

    initSession();

    return () => {
      initializingRef.current = false;
      if (sessionId) {
        disconnectDockerSession(sessionId).catch(() => {
          // Silently handle disconnect errors
        });
      }
    };
  }, [currentHostConfig?.id, currentHostConfig?.enableDocker]);

  React.useEffect(() => {
    if (!sessionId || !isVisible) return;

    const keepalive = setInterval(
      () => {
        keepaliveDockerSession(sessionId).catch(() => {
          // Silently handle keepalive errors
        });
      },
      10 * 60 * 1000,
    );

    return () => clearInterval(keepalive);
  }, [sessionId, isVisible]);

  const refreshContainers = React.useCallback(async () => {
    if (!sessionId) return;
    try {
      const data = await listDockerContainers(sessionId, true);
      setContainers(data);
    } catch (error) {
      // Silently handle polling errors
    }
  }, [sessionId]);

  React.useEffect(() => {
    if (!sessionId || !isVisible || !dockerValidation?.available) return;

    let cancelled = false;

    const pollContainers = async () => {
      try {
        setIsLoadingContainers(true);
        const data = await listDockerContainers(sessionId, true);
        if (!cancelled) {
          setContainers(data);
        }
      } catch (error) {
        // Silently handle polling errors
      } finally {
        if (!cancelled) {
          setIsLoadingContainers(false);
        }
      }
    };

    pollContainers();
    const interval = setInterval(pollContainers, 5000);

    return () => {
      cancelled = true;
      clearInterval(interval);
    };
  }, [sessionId, isVisible, dockerValidation?.available]);

  const handleBack = React.useCallback(() => {
    setViewMode("list");
    setSelectedContainer(null);
  }, []);

  const handleTotpSubmit = async (code: string) => {
    if (!totpSessionId || !code) return;

    try {
      setIsConnecting(true);
      const result = await verifyDockerTOTP(totpSessionId, code);

      if (result?.status === "success") {
        setTotpRequired(false);
        setTotpPrompt("");
        setSessionId(totpSessionId);
        setTotpSessionId(null);

        setIsValidating(true);
        const validation = await validateDockerAvailability(totpSessionId);
        setDockerValidation(validation);
        setIsValidating(false);

        if (!validation.available) {
          setHasConnectionError(true);
          addLog({
            type: "error",
            stage: "validation",
            message: validation.error || t("docker.error"),
            details: validation.code
              ? `Error code: ${validation.code}`
              : undefined,
          });
        } else {
          logDockerActivity();
        }
      }
    } catch (error) {
      console.error("TOTP verification failed:", error);
      setHasConnectionError(true);
      addLog({
        type: "error",
        stage: "auth",
        message: t("docker.totpVerificationFailed"),
      });
    } finally {
      setIsConnecting(false);
    }
  };

  const handleTotpCancel = () => {
    setTotpRequired(false);
    setTotpSessionId(null);
    setTotpPrompt("");
    setIsConnecting(false);
    if (currentTab !== null) {
      removeTab(currentTab);
    }
  };

  const handleWarpgateContinue = async () => {
    if (!warpgateSessionId) return;

    try {
      setIsConnecting(true);
      const result = await verifyDockerWarpgate(warpgateSessionId);

      if (result?.status === "success") {
        setWarpgateRequired(false);
        setWarpgateUrl("");
        setWarpgateSecurityKey("");
        setSessionId(warpgateSessionId);
        setWarpgateSessionId(null);

        setIsValidating(true);
        const validation = await validateDockerAvailability(warpgateSessionId);
        setDockerValidation(validation);
        setIsValidating(false);

        if (!validation.available) {
          setHasConnectionError(true);
          addLog({
            type: "error",
            stage: "validation",
            message: validation.error || t("docker.error"),
            details: validation.code
              ? `Error code: ${validation.code}`
              : undefined,
          });
        } else {
          logDockerActivity();
        }
      }
    } catch (error) {
      console.error("Warpgate verification failed:", error);
      setHasConnectionError(true);
      addLog({
        type: "error",
        stage: "auth",
        message: t("docker.warpgateVerificationFailed"),
      });
    } finally {
      setIsConnecting(false);
    }
  };

  const handleWarpgateCancel = () => {
    setWarpgateRequired(false);
    setWarpgateSessionId(null);
    setWarpgateUrl("");
    setWarpgateSecurityKey("");
    setIsConnecting(false);
    if (currentTab !== null) {
      removeTab(currentTab);
    }
  };

  const handleWarpgateOpenUrl = () => {
    if (warpgateUrl) {
      window.open(warpgateUrl, "_blank", "noopener,noreferrer");
    }
  };

  const handleAuthSubmit = async (credentials: {
    password?: string;
    sshKey?: string;
    keyPassword?: string;
  }) => {
    if (!currentHostConfig?.id) return;

    setShowAuthDialog(false);
    setIsConnecting(true);

    const sid = `docker-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;

    try {
      const result = await connectDockerSession(sid, currentHostConfig.id, {
        userProvidedPassword: credentials.password,
        userProvidedSshKey: credentials.sshKey,
        userProvidedKeyPassword: credentials.keyPassword,
        useSocks5: currentHostConfig.useSocks5,
        socks5Host: currentHostConfig.socks5Host,
        socks5Port: currentHostConfig.socks5Port,
        socks5Username: currentHostConfig.socks5Username,
        socks5Password: currentHostConfig.socks5Password,
        socks5ProxyChain: currentHostConfig.socks5ProxyChain,
      });

      if (result?.requires_warpgate) {
        setWarpgateRequired(true);
        setWarpgateSessionId(sid);
        setWarpgateUrl(result.url || "");
        setWarpgateSecurityKey(result.securityKey || "N/A");
        setIsConnecting(false);
        return;
      }

      if (result?.requires_totp) {
        setTotpRequired(true);
        setTotpSessionId(sid);
        setTotpPrompt(result.prompt || t("docker.verificationCodePrompt"));
        setIsConnecting(false);
        return;
      }

      if (result?.status === "auth_required") {
        setShowAuthDialog(true);
        setAuthReason("auth_failed");
        setIsConnecting(false);
        return;
      }

      setSessionId(sid);

      setIsValidating(true);
      const validation = await validateDockerAvailability(sid);
      setDockerValidation(validation);
      setIsValidating(false);

      if (!validation.available) {
        setHasConnectionError(true);
      } else {
        logDockerActivity();
      }
    } catch (error) {
      setIsConnecting(false);
      setIsValidating(false);
      setHasConnectionError(true);
      addLog({
        type: "error",
        stage: "connection",
        message: error?.message || t("docker.connectionFailed"),
      });
    } finally {
      setIsConnecting(false);
    }
  };

  const handleAuthCancel = () => {
    setShowAuthDialog(false);
    setIsConnecting(false);
    onClose?.();
  };

  const topMarginPx = isTopbarOpen ? 74 : 16;
  const leftMarginPx = sidebarState === "collapsed" ? 16 : 8;
  const bottomMarginPx = 8;

  const wrapperStyle: React.CSSProperties = embedded
    ? { opacity: isVisible ? 1 : 0, height: "100%", width: "100%" }
    : {
        opacity: isVisible ? 1 : 0,
        marginLeft: leftMarginPx,
        marginRight: 17,
        marginTop: topMarginPx,
        marginBottom: bottomMarginPx,
        height: `calc(100vh - ${topMarginPx + bottomMarginPx}px)`,
      };

  const containerClass = embedded
    ? "h-full w-full text-foreground overflow-hidden bg-transparent"
    : "bg-canvas text-foreground rounded-lg border-2 border-edge overflow-hidden";

  if (!currentHostConfig?.enableDocker) {
    return (
      <div style={wrapperStyle} className={`${containerClass} relative`}>
        <div className="h-full w-full flex flex-col">
          <div className="flex flex-col sm:flex-row sm:items-center justify-between px-4 pt-3 pb-3 gap-3">
            <div className="flex items-center gap-4 min-w-0">
              <div className="min-w-0">
                <h1 className="font-bold text-lg truncate">
                  {currentHostConfig?.folder} / {title}
                </h1>
              </div>
            </div>
          </div>
          <Separator className="p-0.25 w-full" />

          <div className="flex-1 overflow-hidden min-h-0 p-4">
            <Alert variant="destructive">
              <AlertCircle className="h-4 w-4" />
              <AlertDescription>{t("docker.notEnabled")}</AlertDescription>
            </Alert>
          </div>
        </div>
      </div>
    );
  }

  if (isConnecting || isValidating) {
    return (
      <div style={wrapperStyle} className={`${containerClass} relative`}>
        <div className="h-full w-full flex flex-col">
          <div className="flex-1 overflow-hidden min-h-0 relative">
            <SimpleLoader
              visible={true && !isConnectionLogExpanded}
              message={
                isValidating ? t("docker.validating") : t("docker.connecting")
              }
            />
          </div>
        </div>
        <ConnectionLog
          isConnecting={isConnecting}
          isConnected={!!sessionId && !!dockerValidation?.available}
          hasConnectionError={hasConnectionError}
          position={hasConnectionError ? "top" : "bottom"}
        />
      </div>
    );
  }

  if (dockerValidation && !dockerValidation.available) {
    return (
      <div style={wrapperStyle} className={`${containerClass} relative`}>
        <ConnectionLog
          isConnecting={isConnecting}
          isConnected={!!sessionId && !!dockerValidation?.available}
          hasConnectionError={
            hasConnectionError ||
            (!!dockerValidation && !dockerValidation.available)
          }
          position={
            hasConnectionError ||
            (!!dockerValidation && !dockerValidation.available)
              ? "top"
              : "bottom"
          }
        />
      </div>
    );
  }

  return (
    <div style={wrapperStyle} className={`${containerClass} relative`}>
      <div
        className="h-full w-full flex flex-col"
        style={{
          visibility:
            (hasConnectionError ||
              (!!dockerValidation && !dockerValidation.available)) &&
            isConnectionLogExpanded
              ? "hidden"
              : "visible",
        }}
      >
        <div className="flex flex-col sm:flex-row sm:items-center justify-between px-4 pt-3 pb-3 gap-3">
          <div className="flex items-center gap-4 min-w-0">
            <div className="min-w-0">
              <h1 className="font-bold text-lg truncate">
                {currentHostConfig?.folder} / {title}
              </h1>
              {dockerValidation?.version && (
                <p className="text-xs text-muted-foreground">
                  {t("docker.version", { version: dockerValidation.version })}
                </p>
              )}
            </div>
          </div>
        </div>
        <Separator className="p-0.25 w-full" />

        <div className="flex-1 overflow-hidden min-h-0 relative">
          {viewMode === "list" ? (
            <div className="h-full px-4 py-4">
              {sessionId ? (
                isLoadingContainers && containers.length === 0 ? (
                  <SimpleLoader
                    visible={true}
                    message={t("docker.loadingContainers")}
                  />
                ) : (
                  <ContainerList
                    containers={containers}
                    sessionId={sessionId}
                    onSelectContainer={(id) => {
                      setSelectedContainer(id);
                      setViewMode("detail");
                    }}
                    selectedContainerId={selectedContainer}
                    onRefresh={refreshContainers}
                  />
                )
              ) : (
                <div className="text-center py-8">
                  <p className="text-muted-foreground">No session available</p>
                </div>
              )}
            </div>
          ) : sessionId && selectedContainer && currentHostConfig ? (
            <ContainerDetail
              sessionId={sessionId}
              containerId={selectedContainer}
              containers={containers}
              hostConfig={currentHostConfig}
              onBack={handleBack}
            />
          ) : (
            <div className="text-center py-8">
              <p className="text-muted-foreground">
                Select a container to view details
              </p>
            </div>
          )}
        </div>
      </div>
      <TOTPDialog
        isOpen={totpRequired}
        prompt={totpPrompt}
        onSubmit={handleTotpSubmit}
        onCancel={handleTotpCancel}
      />
      <WarpgateDialog
        isOpen={warpgateRequired}
        url={warpgateUrl}
        securityKey={warpgateSecurityKey}
        onContinue={handleWarpgateContinue}
        onCancel={handleWarpgateCancel}
        onOpenUrl={handleWarpgateOpenUrl}
      />
      {currentHostConfig && (
        <SSHAuthDialog
          isOpen={showAuthDialog}
          reason={authReason}
          onSubmit={handleAuthSubmit}
          onCancel={handleAuthCancel}
          hostInfo={{
            ip: currentHostConfig.ip,
            port: currentHostConfig.port,
            username: currentHostConfig.username,
            name: currentHostConfig.name,
          }}
        />
      )}
      <SimpleLoader
        visible={isConnecting && !isConnectionLogExpanded}
        message={t("docker.connecting")}
      />
      <ConnectionLog
        isConnecting={isConnecting}
        isConnected={!!sessionId && !!dockerValidation?.available}
        hasConnectionError={
          hasConnectionError ||
          (!!dockerValidation && !dockerValidation.available)
        }
        position={
          hasConnectionError ||
          (!!dockerValidation && !dockerValidation.available)
            ? "top"
            : "bottom"
        }
      />
    </div>
  );
}

export function DockerManager(props: DockerManagerProps): React.ReactElement {
  return (
    <ConnectionLogProvider>
      <DockerManagerInner {...props} />
    </ConnectionLogProvider>
  );
}