Termix/src/ui/desktop/apps/features/tunnel/TunnelObject.tsx

import React from "react";
import { Button } from "@/components/ui/button.tsx";
import { Card } from "@/components/ui/card.tsx";
import { Separator } from "@/components/ui/separator.tsx";
import { useTranslation } from "react-i18next";
import {
  Loader2,
  Pin,
  Network,
  Tag,
  Play,
  Square,
  AlertCircle,
  Clock,
  Wifi,
  WifiOff,
  X,
} from "lucide-react";
import { Badge } from "@/components/ui/badge.tsx";
import type {
  TunnelStatus,
  SSHTunnelObjectProps,
} from "../../../types/index.js";

export function TunnelObject({
  host,
  tunnelIndex,
  tunnelStatuses,
  tunnelActions,
  onTunnelAction,
  compact = false,
  bare = false,
}: SSHTunnelObjectProps): React.ReactElement {
  const { t } = useTranslation();

  const getTunnelStatus = (idx: number): TunnelStatus | undefined => {
    const tunnel = host.tunnelConnections[idx];
    const tunnelName = `${host.id}::${idx}::${host.name || `${host.username}@${host.ip}`}::${tunnel.sourcePort}::${tunnel.endpointHost}::${tunnel.endpointPort}`;
    return tunnelStatuses[tunnelName];
  };

  const getTunnelStatusDisplay = (status: TunnelStatus | undefined) => {
    if (!status)
      return {
        icon: <WifiOff className="h-4 w-4" />,
        text: t("tunnels.unknown"),
        color: "text-muted-foreground",
        bgColor: "bg-muted/50",
        borderColor: "border-border",
      };

    const statusValue = status.status || "DISCONNECTED";

    switch (statusValue.toUpperCase()) {
      case "CONNECTED":
        return {
          icon: <Wifi className="h-4 w-4" />,
          text: t("tunnels.connected"),
          color: "text-green-600 dark:text-green-400",
          bgColor: "bg-green-500/10 dark:bg-green-400/10",
          borderColor: "border-green-500/20 dark:border-green-400/20",
        };
      case "CONNECTING":
        return {
          icon: <Loader2 className="h-4 w-4 animate-spin" />,
          text: t("tunnels.connecting"),
          color: "text-blue-600 dark:text-blue-400",
          bgColor: "bg-blue-500/10 dark:bg-blue-400/10",
          borderColor: "border-blue-500/20 dark:border-blue-400/20",
        };
      case "DISCONNECTING":
        return {
          icon: <Loader2 className="h-4 w-4 animate-spin" />,
          text: t("tunnels.disconnecting"),
          color: "text-orange-600 dark:text-orange-400",
          bgColor: "bg-orange-500/10 dark:bg-orange-400/10",
          borderColor: "border-orange-500/20 dark:border-orange-400/20",
        };
      case "DISCONNECTED":
        return {
          icon: <WifiOff className="h-4 w-4" />,
          text: t("tunnels.disconnected"),
          color: "text-muted-foreground",
          bgColor: "bg-muted/30",
          borderColor: "border-border",
        };
      case "WAITING":
        return {
          icon: <Clock className="h-4 w-4" />,
          color: "text-blue-600 dark:text-blue-400",
          bgColor: "bg-blue-500/10 dark:bg-blue-400/10",
          borderColor: "border-blue-500/20 dark:border-blue-400/20",
        };
      case "ERROR":
      case "FAILED":
        return {
          icon: <AlertCircle className="h-4 w-4" />,
          text: status.reason || t("tunnels.error"),
          color: "text-red-600 dark:text-red-400",
          bgColor: "bg-red-500/10 dark:bg-red-400/10",
          borderColor: "border-red-500/20 dark:border-red-400/20",
        };
      default:
        return {
          icon: <WifiOff className="h-4 w-4" />,
          text: t("tunnels.unknown"),
          color: "text-muted-foreground",
          bgColor: "bg-muted/30",
          borderColor: "border-border",
        };
    }
  };

  if (bare) {
    return (
      <div className="w-full min-w-0">
        <div className="space-y-3">
          {host.tunnelConnections && host.tunnelConnections.length > 0 ? (
            <div className="space-y-3">
              {(tunnelIndex !== undefined
                ? [tunnelIndex]
                : host.tunnelConnections.map((_, idx) => idx)
              ).map((idx) => {
                const tunnel = host.tunnelConnections[idx];
                const status = getTunnelStatus(idx);
                const statusDisplay = getTunnelStatusDisplay(status);
                const tunnelName = `${host.id}::${idx}::${host.name || `${host.username}@${host.ip}`}::${tunnel.sourcePort}::${tunnel.endpointHost}::${tunnel.endpointPort}`;
                const isActionLoading = tunnelActions[tunnelName];
                const statusValue =
                  status?.status?.toUpperCase() || "DISCONNECTED";
                const isConnected = statusValue === "CONNECTED";
                const isConnecting = statusValue === "CONNECTING";
                const isDisconnecting = statusValue === "DISCONNECTING";
                const isRetrying = statusValue === "RETRYING";
                const isWaiting = statusValue === "WAITING";

                return (
                  <div
                    key={idx}
                    className={`border rounded-lg p-3 min-w-0 ${statusDisplay.bgColor} ${statusDisplay.borderColor}`}
                  >
                    <div className="flex items-start justify-between gap-2">
                      <div className="flex items-start gap-2 flex-1 min-w-0">
                        <span
                          className={`${statusDisplay.color} mt-0.5 flex-shrink-0`}
                        >
                          {statusDisplay.icon}
                        </span>
                        <div className="flex-1 min-w-0">
                          <div className="text-sm font-medium break-words">
                            {t("tunnels.port")} {tunnel.sourcePort} →{" "}
                            {tunnel.endpointHost}:{tunnel.endpointPort}
                          </div>
                          <div
                            className={`text-xs ${statusDisplay.color} font-medium`}
                          >
                            {statusDisplay.text}
                          </div>
                        </div>
                      </div>
                      <div className="flex flex-col items-end gap-1 flex-shrink-0 min-w-[120px]">
                        {!isActionLoading ? (
                          <div className="flex flex-col gap-1">
                            {isConnected ? (
                              <>
                                <Button
                                  size="sm"
                                  variant="outline"
                                  onClick={() =>
                                    onTunnelAction("disconnect", host, idx)
                                  }
                                  className="h-7 px-2 text-red-600 dark:text-red-400 border-red-500/30 dark:border-red-400/30 hover:bg-red-500/10 dark:hover:bg-red-400/10 hover:border-red-500/50 dark:hover:border-red-400/50 text-xs"
                                >
                                  <Square className="h-3 w-3 mr-1" />
                                  {t("tunnels.disconnect")}
                                </Button>
                              </>
                            ) : isRetrying || isWaiting ? (
                              <Button
                                size="sm"
                                variant="outline"
                                onClick={() =>
                                  onTunnelAction("cancel", host, idx)
                                }
                                className="h-7 px-2 text-orange-600 dark:text-orange-400 border-orange-500/30 dark:border-orange-400/30 hover:bg-orange-500/10 dark:hover:bg-orange-400/10 hover:border-orange-500/50 dark:hover:border-orange-400/50 text-xs"
                              >
                                <X className="h-3 w-3 mr-1" />
                                {t("tunnels.cancel")}
                              </Button>
                            ) : (
                              <Button
                                size="sm"
                                variant="outline"
                                onClick={() =>
                                  onTunnelAction("connect", host, idx)
                                }
                                disabled={isConnecting || isDisconnecting}
                                className="h-7 px-2 text-green-600 dark:text-green-400 border-green-500/30 dark:border-green-400/30 hover:bg-green-500/10 dark:hover:bg-green-400/10 hover:border-green-500/50 dark:hover:border-green-400/50 text-xs"
                              >
                                <Play className="h-3 w-3 mr-1" />
                                {t("tunnels.connect")}
                              </Button>
                            )}
                          </div>
                        ) : (
                          <Button
                            size="sm"
                            variant="outline"
                            disabled
                            className="h-7 px-2 text-muted-foreground border-border text-xs"
                          >
                            <Loader2 className="h-3 w-3 mr-1 animate-spin" />
                            {isConnected
                              ? t("tunnels.disconnecting")
                              : isRetrying || isWaiting
                                ? t("tunnels.canceling")
                                : t("tunnels.connecting")}
                          </Button>
                        )}
                      </div>
                    </div>

                    {(statusValue === "ERROR" || statusValue === "FAILED") &&
                      status?.reason && (
                        <div className="mt-2 text-xs text-red-600 dark:text-red-400 bg-red-500/10 dark:bg-red-400/10 rounded px-3 py-2 border border-red-500/20 dark:border-red-400/20">
                          <div className="font-medium mb-1">
                            {t("tunnels.error")}:
                          </div>
                          {status.reason}
                          {status.reason &&
                            status.reason.includes("Max retries exhausted") && (
                              <>
                                <div className="mt-2 pt-2 border-t border-red-500/20 dark:border-red-400/20">
                                  {t("tunnels.checkDockerLogs")}{" "}
                                  <a
                                    href="https://discord.com/invite/jVQGdvHDrf"
                                    target="_blank"
                                    rel="noopener noreferrer"
                                    className="underline text-blue-600 dark:text-blue-400"
                                  >
                                    {t("tunnels.discord")}
                                  </a>{" "}
                                  {t("tunnels.orCreate")}{" "}
                                  <a
                                    href="https://github.com/Termix-SSH/Termix/issues/new"
                                    target="_blank"
                                    rel="noopener noreferrer"
                                    className="underline text-blue-600 dark:text-blue-400"
                                  >
                                    {t("tunnels.githubIssue")}
                                  </a>{" "}
                                  {t("tunnels.forHelp")}.
                                </div>
                              </>
                            )}
                        </div>
                      )}

                    {(statusValue === "RETRYING" ||
                      statusValue === "WAITING") &&
                      status?.retryCount &&
                      status?.maxRetries && (
                        <div className="mt-2 text-xs text-yellow-700 dark:text-yellow-300 bg-yellow-500/10 dark:bg-yellow-400/10 rounded px-3 py-2 border border-yellow-500/20 dark:border-yellow-400/20">
                          <div className="font-medium mb-1">
                            {statusValue === "WAITING"
                              ? t("tunnels.waitingForRetry")
                              : t("tunnels.retryingConnection")}
                          </div>
                          <div>
                            {t("tunnels.attempt", {
                              current: status.retryCount,
                              max: status.maxRetries,
                            })}
                            {status.nextRetryIn && (
                              <span>
                                {" "}
                                •{" "}
                                {t("tunnels.nextRetryIn", {
                                  seconds: status.nextRetryIn,
                                })}
                              </span>
                            )}
                          </div>
                        </div>
                      )}
                  </div>
                );
              })}
            </div>
          ) : (
            <div className="text-center py-4 text-muted-foreground">
              <Network className="h-8 w-8 mx-auto mb-2 opacity-50" />
              <p className="text-sm">{t("tunnels.noTunnelConnections")}</p>
            </div>
          )}
        </div>
      </div>
    );
  }

  return (
    <Card className="w-full bg-card border-border shadow-sm hover:shadow-md transition-shadow relative group p-0">
      <div className="p-4">
        {!compact && (
          <div className="flex items-center justify-between gap-2 mb-3">
            <div className="flex items-center gap-2 flex-1 min-w-0">
              {host.pin && (
                <Pin className="h-4 w-4 text-yellow-500 flex-shrink-0" />
              )}
              <div className="flex-1 min-w-0">
                <h3 className="font-semibold text-card-foreground truncate">
                  {host.name || `${host.username}@${host.ip}`}
                </h3>
                <p className="text-xs text-muted-foreground truncate">
                  {host.ip}:{host.port} • {host.username}
                </p>
              </div>
            </div>
          </div>
        )}

        {!compact && host.tags && host.tags.length > 0 && (
          <div className="flex flex-wrap gap-1 mb-3">
            {host.tags.slice(0, 3).map((tag, index) => (
              <Badge
                key={index}
                variant="secondary"
                className="text-xs px-1 py-0"
              >
                <Tag className="h-2 w-2 mr-0.5" />
                {tag}
              </Badge>
            ))}
            {host.tags.length > 3 && (
              <Badge variant="outline" className="text-xs px-1 py-0">
                +{host.tags.length - 3}
              </Badge>
            )}
          </div>
        )}

        {!compact && <Separator className="mb-3" />}

        <div className="space-y-3">
          {!compact && (
            <h4 className="text-sm font-medium text-card-foreground flex items-center gap-2">
              <Network className="h-4 w-4" />
              {t("tunnels.tunnelConnections")} (
              {tunnelIndex !== undefined ? 1 : host.tunnelConnections.length})
            </h4>
          )}
          {host.tunnelConnections && host.tunnelConnections.length > 0 ? (
            <div className="space-y-3">
              {(tunnelIndex !== undefined
                ? [tunnelIndex]
                : host.tunnelConnections.map((_, idx) => idx)
              ).map((idx) => {
                const tunnel = host.tunnelConnections[idx];
                const status = getTunnelStatus(idx);
                const statusDisplay = getTunnelStatusDisplay(status);
                const tunnelName = `${host.id}::${idx}::${host.name || `${host.username}@${host.ip}`}::${tunnel.sourcePort}::${tunnel.endpointHost}::${tunnel.endpointPort}`;
                const isActionLoading = tunnelActions[tunnelName];
                const statusValue =
                  status?.status?.toUpperCase() || "DISCONNECTED";
                const isConnected = statusValue === "CONNECTED";
                const isConnecting = statusValue === "CONNECTING";
                const isDisconnecting = statusValue === "DISCONNECTING";
                const isRetrying = statusValue === "RETRYING";
                const isWaiting = statusValue === "WAITING";

                return (
                  <div
                    key={idx}
                    className={`border rounded-lg p-3 ${statusDisplay.bgColor} ${statusDisplay.borderColor}`}
                  >
                    <div className="flex items-start justify-between gap-2">
                      <div className="flex items-start gap-2 flex-1 min-w-0">
                        <span
                          className={`${statusDisplay.color} mt-0.5 flex-shrink-0`}
                        >
                          {statusDisplay.icon}
                        </span>
                        <div className="flex-1 min-w-0">
                          <div className="text-sm font-medium break-words">
                            {t("tunnels.port")} {tunnel.sourcePort} →{" "}
                            {tunnel.endpointHost}:{tunnel.endpointPort}
                          </div>
                          <div
                            className={`text-xs ${statusDisplay.color} font-medium`}
                          >
                            {statusDisplay.text}
                          </div>
                        </div>
                      </div>
                      <div className="flex items-center gap-1 flex-shrink-0">
                        {!isActionLoading && (
                          <div className="flex flex-col gap-1">
                            {isConnected ? (
                              <>
                                <Button
                                  size="sm"
                                  variant="outline"
                                  onClick={() =>
                                    onTunnelAction("disconnect", host, idx)
                                  }
                                  className="h-7 px-2 text-red-600 dark:text-red-400 border-red-500/30 dark:border-red-400/30 hover:bg-red-500/10 dark:hover:bg-red-400/10 hover:border-red-500/50 dark:hover:border-red-400/50 text-xs"
                                >
                                  <Square className="h-3 w-3 mr-1" />
                                  {t("tunnels.disconnect")}
                                </Button>
                              </>
                            ) : isRetrying || isWaiting ? (
                              <Button
                                size="sm"
                                variant="outline"
                                onClick={() =>
                                  onTunnelAction("cancel", host, idx)
                                }
                                className="h-7 px-2 text-orange-600 dark:text-orange-400 border-orange-500/30 dark:border-orange-400/30 hover:bg-orange-500/10 dark:hover:bg-orange-400/10 hover:border-orange-500/50 dark:hover:border-orange-400/50 text-xs"
                              >
                                <X className="h-3 w-3 mr-1" />
                                {t("tunnels.cancel")}
                              </Button>
                            ) : (
                              <Button
                                size="sm"
                                variant="outline"
                                onClick={() =>
                                  onTunnelAction("connect", host, idx)
                                }
                                disabled={isConnecting || isDisconnecting}
                                className="h-7 px-2 text-green-600 dark:text-green-400 border-green-500/30 dark:border-green-400/30 hover:bg-green-500/10 dark:hover:bg-green-400/10 hover:border-green-500/50 dark:hover:border-green-400/50 text-xs"
                              >
                                <Play className="h-3 w-3 mr-1" />
                                {t("tunnels.connect")}
                              </Button>
                            )}
                          </div>
                        )}
                        {isActionLoading && (
                          <Button
                            size="sm"
                            variant="outline"
                            disabled
                            className="h-7 px-2 text-muted-foreground border-border text-xs"
                          >
                            <Loader2 className="h-3 w-3 mr-1 animate-spin" />
                            {isConnected
                              ? t("tunnels.disconnecting")
                              : isRetrying || isWaiting
                                ? t("tunnels.canceling")
                                : t("tunnels.connecting")}
                          </Button>
                        )}
                      </div>
                    </div>

                    {(statusValue === "ERROR" || statusValue === "FAILED") &&
                      status?.reason && (
                        <div className="mt-2 text-xs text-red-600 dark:text-red-400 bg-red-500/10 dark:bg-red-400/10 rounded px-3 py-2 border border-red-500/20 dark:border-red-400/20">
                          <div className="font-medium mb-1">
                            {t("tunnels.error")}:
                          </div>
                          {status.reason}
                          {status.reason &&
                            status.reason.includes("Max retries exhausted") && (
                              <>
                                <div className="mt-2 pt-2 border-t border-red-500/20 dark:border-red-400/20">
                                  {t("tunnels.checkDockerLogs")}{" "}
                                  <a
                                    href="https://discord.com/invite/jVQGdvHDrf"
                                    target="_blank"
                                    rel="noopener noreferrer"
                                    className="underline text-blue-600 dark:text-blue-400"
                                  >
                                    {t("tunnels.discord")}
                                  </a>{" "}
                                  {t("tunnels.orCreate")}{" "}
                                  <a
                                    href="https://github.com/Termix-SSH/Termix/issues/new"
                                    target="_blank"
                                    rel="noopener noreferrer"
                                    className="underline text-blue-600 dark:text-blue-400"
                                  >
                                    {t("tunnels.githubIssue")}
                                  </a>{" "}
                                  {t("tunnels.forHelp")}.
                                </div>
                              </>
                            )}
                        </div>
                      )}

                    {(statusValue === "RETRYING" ||
                      statusValue === "WAITING") &&
                      status?.retryCount &&
                      status?.maxRetries && (
                        <div className="mt-2 text-xs text-yellow-700 dark:text-yellow-300 bg-yellow-500/10 dark:bg-yellow-400/10 rounded px-3 py-2 border border-yellow-500/20 dark:border-yellow-400/20">
                          <div className="font-medium mb-1">
                            {statusValue === "WAITING"
                              ? t("tunnels.waitingForRetry")
                              : t("tunnels.retryingConnection")}
                          </div>
                          <div>
                            {t("tunnels.attempt", {
                              current: status.retryCount,
                              max: status.maxRetries,
                            })}
                            {status.nextRetryIn && (
                              <span>
                                {" "}
                                •{" "}
                                {t("tunnels.nextRetryIn", {
                                  seconds: status.nextRetryIn,
                                })}
                              </span>
                            )}
                          </div>
                        </div>
                      )}
                  </div>
                );
              })}
            </div>
          ) : (
            <div className="text-center py-4 text-muted-foreground">
              <Network className="h-8 w-8 mx-auto mb-2 opacity-50" />
              <p className="text-sm">{t("tunnels.noTunnelConnections")}</p>
            </div>
          )}
        </div>
      </div>
    </Card>
  );
}