import React from "react";
import { Button } from "@/components/button.tsx";
import { Input } from "@/components/input.tsx";
import { Label } from "@/components/label.tsx";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/select.tsx";
import { Switch } from "@/components/switch.tsx";
import { TunnelInlineControls } from "@/features/tunnel/TunnelInlineControls.tsx";
import { TunnelModeSelector } from "@/features/tunnel/TunnelModeSelector.tsx";
import {
  getTunnelModeDescription,
  getTunnelPortLabels,
  getTunnelTypeForMode,
} from "@/features/tunnel/tunnel-form-utils.ts";
import {
  createC2STunnelPreset,
  deleteC2STunnelPreset,
  getC2STunnelPresets,
  getSSHHosts,
  updateC2STunnelPreset,
} from "@/main-axios.ts";
import type {
  C2STunnelPreset,
  SSHHost,
  TunnelConnection,
  TunnelStatus,
} from "@/types/index.js";
import { Activity, Download, Pencil, Plus, Save, Trash2 } from "lucide-react";
import { useTranslation } from "react-i18next";
import { toast } from "sonner";

type ClientTunnel = TunnelConnection & {
  bindHost: string;
  sourceHostId?: number;
  sourceHostName?: string;
  displayName?: string;
  lastStartedAt?: string;
  lastTestedAt?: string;
  lastError?: string;
};

function sortPresets(presets: C2STunnelPreset[]) {
  return [...presets].sort((a, b) => a.name.localeCompare(b.name));
}

function sameConfig(a: TunnelConnection[], b: TunnelConnection[]) {
  return JSON.stringify(a) === JSON.stringify(b);
}

function isValidIPv4(value: string) {
  const parts = value.split(".");
  return (
    parts.length === 4 &&
    parts.every((part) => {
      if (!/^\d+$/.test(part)) return false;
      const value = Number(part);
      return value >= 0 && value <= 255;
    })
  );
}

function isValidPort(value: unknown) {
  const port = Number(value);
  return Number.isInteger(port) && port >= 1 && port <= 65535;
}

function getEffectiveBindHost(bindHost?: string) {
  const trimmedBindHost = bindHost?.trim();
  return trimmedBindHost || "127.0.0.1";
}

function getTunnelMode(tunnel: Partial<TunnelConnection>) {
  return tunnel.mode || tunnel.tunnelType || "local";
}

function formatDateTime(value?: string) {
  if (!value) return "";
  const date = new Date(value);
  if (Number.isNaN(date.getTime())) return "";
  return date.toLocaleString();
}

function createClientTunnel(): ClientTunnel {
  return {
    scope: "c2s",
    mode: "local",
    tunnelType: "local",
    bindHost: "",
    sourcePort: 8080,
    endpointPort: 22,
    endpointHost: "",
    maxRetries: 3,
    retryInterval: 10,
    autoStart: false,
  };
}

function normalizeClientTunnel(
  tunnel: Partial<TunnelConnection>,
): ClientTunnel {
  const mode = getTunnelMode(tunnel);
  const metadata = tunnel as Partial<ClientTunnel>;

  return {
    ...tunnel,
    scope: "c2s",
    mode,
    tunnelType: mode === "dynamic" ? "local" : mode,
    bindHost: tunnel.bindHost?.trim() || "",
    sourcePort: Number(tunnel.sourcePort) || 8080,
    endpointPort: Number(tunnel.endpointPort) || 22,
    endpointHost: tunnel.endpointHost || tunnel.sourceHostName || "",
    maxRetries: Number(tunnel.maxRetries) || 3,
    retryInterval: Number(tunnel.retryInterval) || 10,
    autoStart: Boolean(tunnel.autoStart),
    displayName: metadata.displayName?.trim() || "",
    lastStartedAt: metadata.lastStartedAt,
    lastTestedAt: metadata.lastTestedAt,
    lastError: metadata.lastError,
  };
}

function stripClientTunnelDiagnostics(tunnel: ClientTunnel): TunnelConnection {
  const presetTunnel = normalizeClientTunnel(tunnel);
  delete presetTunnel.lastStartedAt;
  delete presetTunnel.lastTestedAt;
  delete presetTunnel.lastError;

  return presetTunnel;
}

export function C2STunnelPresetManager(): React.ReactElement {
  const { t } = useTranslation();
  const [localConfig, setLocalConfig] = React.useState<ClientTunnel[]>([]);
  const [savedLocalConfig, setSavedLocalConfig] = React.useState<
    ClientTunnel[]
  >([]);
  const [hosts, setHosts] = React.useState<SSHHost[]>([]);
  const [presets, setPresets] = React.useState<C2STunnelPreset[]>([]);
  const [tunnelStatuses, setTunnelStatuses] = React.useState<
    Record<string, TunnelStatus>
  >({});
  const [tunnelActions, setTunnelActions] = React.useState<
    Record<string, boolean>
  >({});
  const [tunnelTests, setTunnelTests] = React.useState<Record<string, boolean>>(
    {},
  );
  const previousTunnelStatusesRef = React.useRef<Record<string, TunnelStatus>>(
    {},
  );
  const [selectedPresetId, setSelectedPresetId] = React.useState("");
  const [presetName, setPresetName] = React.useState("");
  const isElectron =
    typeof window !== "undefined" && window.electronAPI?.isElectron === true;

  const sshHosts = React.useMemo(
    () =>
      hosts.filter(
        (host) => host.id && (host.connectionType || "ssh") === "ssh",
      ),
    [hosts],
  );

  const selectedPreset = React.useMemo(
    () =>
      presets.find((preset) => String(preset.id) === selectedPresetId) || null,
    [presets, selectedPresetId],
  );
  const selectedMatchesCurrent = React.useMemo(() => {
    return selectedPreset
      ? sameConfig(
          selectedPreset.config.map(normalizeClientTunnel),
          localConfig.map(stripClientTunnelDiagnostics),
        )
      : false;
  }, [localConfig, selectedPreset]);
  const hasUnsavedLocalChanges = React.useMemo(
    () => !sameConfig(savedLocalConfig, localConfig),
    [savedLocalConfig, localConfig],
  );
  const hasPresets = presets.length > 0;

  const getTunnelName = React.useCallback(
    (tunnel: ClientTunnel, index: number) =>
      [
        "c2s",
        index,
        tunnel.sourceHostId || 0,
        tunnel.mode || tunnel.tunnelType || "local",
        getEffectiveBindHost(tunnel.bindHost),
        tunnel.sourcePort,
        tunnel.endpointPort || 0,
      ].join("::"),
    [],
  );

  const getEndpointName = React.useCallback(
    (tunnel: ClientTunnel) => {
      const host = sshHosts.find((item) => item.id === tunnel.sourceHostId);
      return (
        tunnel.sourceHostName ||
        host?.name ||
        tunnel.endpointHost ||
        t("tunnels.endpointSshHost")
      );
    },
    [sshHosts, t],
  );

  const getTunnelDisplayName = React.useCallback(
    (tunnel: ClientTunnel, index: number) => {
      if (tunnel.displayName?.trim()) return tunnel.displayName.trim();

      const mode = getTunnelMode(tunnel);
      const endpointName = getEndpointName(tunnel);
      if (mode === "remote") {
        return t("tunnels.autoNameClientRemote", {
          endpoint: endpointName,
          remotePort: tunnel.sourcePort,
          localPort: tunnel.endpointPort,
        });
      }
      if (mode === "dynamic") {
        return t("tunnels.autoNameClientDynamic", {
          localPort: tunnel.sourcePort,
          endpoint: endpointName,
        });
      }
      return t("tunnels.autoNameClientLocal", {
        localPort: tunnel.sourcePort,
        endpoint: endpointName,
        remotePort: tunnel.endpointPort,
        index: index + 1,
      });
    },
    [getEndpointName, t],
  );

  const getBindPlaceholder = React.useCallback(
    (mode: string) => {
      if (mode === "remote") return t("placeholders.localTargetHost");
      if (mode === "dynamic") return t("placeholders.socksListenerHost");
      return t("placeholders.localListenerHost");
    },
    [t],
  );

  const getTunnelSummary = React.useCallback(
    (tunnel: ClientTunnel) => {
      const mode = getTunnelMode(tunnel);
      const bindHost = getEffectiveBindHost(tunnel.bindHost);
      const endpointName = getEndpointName(tunnel);

      if (mode === "remote") {
        return t("tunnels.summaryClientRemote", {
          endpoint: endpointName,
          remotePort: tunnel.sourcePort,
          localHost: bindHost,
          localPort: tunnel.endpointPort,
        });
      }
      if (mode === "dynamic") {
        return t("tunnels.summaryClientDynamic", {
          localHost: bindHost,
          localPort: tunnel.sourcePort,
          endpoint: endpointName,
        });
      }
      return t("tunnels.summaryClientLocal", {
        localHost: bindHost,
        localPort: tunnel.sourcePort,
        endpoint: endpointName,
        remotePort: tunnel.endpointPort,
      });
    },
    [getEndpointName, t],
  );

  const refreshPresets = React.useCallback(async () => {
    const nextPresets = await getC2STunnelPresets();
    setPresets(sortPresets(nextPresets));
  }, []);

  const refreshLocalConfig = React.useCallback(async () => {
    if (!isElectron) return;

    const [config, defaultName, nextHosts] = await Promise.all([
      window.electronAPI.getC2STunnelConfig(),
      window.electronAPI.getC2STunnelPresetDefaultName(),
      getSSHHosts(),
    ]);
    setHosts(nextHosts);
    const normalizedConfig = Array.isArray(config)
      ? (config as TunnelConnection[])
          .filter((tunnel) => tunnel.scope === "c2s")
          .map(normalizeClientTunnel)
      : [];
    setLocalConfig(normalizedConfig);
    setSavedLocalConfig(normalizedConfig);
    setPresetName((current) => current || defaultName);
  }, [isElectron]);

  React.useEffect(() => {
    if (!isElectron) return;

    Promise.all([refreshLocalConfig(), refreshPresets()]).catch(() => {
      setPresets([]);
    });
  }, [isElectron, refreshLocalConfig, refreshPresets]);

  React.useEffect(() => {
    if (!isElectron) return;

    const refreshStatuses = async () => {
      const statuses = await window.electronAPI.getC2STunnelStatuses();
      setTunnelStatuses(statuses as Record<string, TunnelStatus>);
    };

    refreshStatuses().catch(() => {});
    const unsubscribe = window.electronAPI.onC2STunnelStatuses?.((statuses) => {
      setTunnelStatuses(statuses as Record<string, TunnelStatus>);
    });

    return () => unsubscribe?.();
  }, [isElectron]);

  React.useEffect(() => {
    const previousStatuses = previousTunnelStatusesRef.current;

    for (const [tunnelName, status] of Object.entries(tunnelStatuses)) {
      const previous = previousStatuses[tunnelName];
      const statusChanged =
        previous?.status !== status.status ||
        previous?.reason !== status.reason ||
        previous?.retryCount !== status.retryCount;

      if (!statusChanged) continue;

      console.info("[tunnels] Client tunnel status changed", {
        tunnelName,
        status,
      });

      const statusValue = status.status?.toUpperCase();
      const hasFailureDetail =
        statusValue === "ERROR" ||
        statusValue === "FAILED" ||
        (Boolean(status.errorType) &&
          Boolean(status.reason) &&
          previous?.reason !== status.reason);

      if (hasFailureDetail) {
        const message = status.reason || t("tunnels.manualControlError");
        console.error("[tunnels] Client tunnel failed", {
          tunnelName,
          status,
        });
        toast.error(message, {
          id: `client-tunnel-error-${tunnelName}`,
        });
      }
    }

    previousTunnelStatusesRef.current = tunnelStatuses;
  }, [t, tunnelStatuses]);

  const validateLocalConfig = (config: ClientTunnel[]) => {
    const autoStartListeners = new Set<string>();

    for (const tunnel of config) {
      const bindHost = getEffectiveBindHost(tunnel.bindHost);
      const mode = getTunnelMode(tunnel);

      if (!isValidIPv4(bindHost)) {
        return mode === "remote"
          ? t("tunnels.invalidLocalTargetIp")
          : t("tunnels.invalidBindIp");
      }
      if (!isValidPort(tunnel.sourcePort)) {
        return mode === "remote"
          ? t("tunnels.invalidRemotePort")
          : t("tunnels.invalidLocalPort");
      }
      if (mode !== "dynamic" && !isValidPort(tunnel.endpointPort)) {
        return mode === "remote"
          ? t("tunnels.invalidLocalTargetPort")
          : t("tunnels.invalidEndpointPort");
      }
      if (!tunnel.sourceHostId) {
        return t("tunnels.endpointSshHostRequired");
      }
      if (tunnel.autoStart) {
        const listenerKey =
          mode === "remote"
            ? `${tunnel.sourceHostId}:${tunnel.sourcePort}`
            : `${bindHost}:${tunnel.sourcePort}`;
        if (autoStartListeners.has(listenerKey)) {
          return t("tunnels.duplicateAutoStartBind", {
            bind:
              mode === "remote"
                ? `${tunnel.sourceHostName || tunnel.sourceHostId}:${tunnel.sourcePort}`
                : listenerKey,
          });
        }
        autoStartListeners.add(listenerKey);
      }
    }

    return null;
  };

  const saveLocalConfig = async (config: ClientTunnel[]) => {
    const normalizedConfig = config.map(normalizeClientTunnel);
    const validationError = validateLocalConfig(normalizedConfig);
    if (validationError) {
      throw new Error(validationError);
    }

    const result =
      await window.electronAPI.saveC2STunnelConfig(normalizedConfig);
    if (!result.success) {
      throw new Error(result.error || t("tunnels.localSaveError"));
    }
    setLocalConfig(normalizedConfig);
    setSavedLocalConfig(normalizedConfig);
  };

  const updateTunnel = (
    index: number,
    updates: Partial<ClientTunnel>,
  ): void => {
    setLocalConfig((current) =>
      current.map((tunnel, tunnelIndex) =>
        tunnelIndex === index
          ? normalizeClientTunnel({ ...tunnel, ...updates })
          : tunnel,
      ),
    );
  };

  const handleEndpointChange = (index: number, hostId: string) => {
    const host = sshHosts.find((item) => String(item.id) === hostId);
    if (!host) return;

    updateTunnel(index, {
      sourceHostId: host.id,
      sourceHostName: host.name,
      endpointHost: host.name,
      endpointPort: 22,
    });
  };

  const handleSaveLocal = async () => {
    try {
      await saveLocalConfig(localConfig);
      toast.success(t("tunnels.localSaved"));
    } catch (error) {
      toast.error(
        error instanceof Error ? error.message : t("tunnels.localSaveError"),
      );
    }
  };

  const setTunnelMetadata = (
    index: number,
    updates: Partial<ClientTunnel>,
  ): void => {
    setLocalConfig((current) =>
      current.map((tunnel, tunnelIndex) =>
        tunnelIndex === index
          ? normalizeClientTunnel({ ...tunnel, ...updates })
          : tunnel,
      ),
    );
  };

  const handleTunnelTest = async (tunnel: ClientTunnel, index: number) => {
    const tunnelName = getTunnelName(tunnel, index);
    const normalizedTunnel = {
      ...normalizeClientTunnel(tunnel),
      name: tunnelName,
    };
    const validationError = validateLocalConfig([normalizedTunnel]);
    if (validationError) {
      toast.error(validationError);
      setTunnelMetadata(index, { lastError: validationError });
      return;
    }

    setTunnelTests((current) => ({ ...current, [tunnelName]: true }));
    console.info("[tunnels] Testing client tunnel", {
      tunnelName,
      tunnel: normalizedTunnel,
    });

    try {
      const result = await window.electronAPI.testC2STunnel(
        normalizedTunnel,
        index,
      );
      if (!result.success) {
        throw new Error(result.error || t("tunnels.tunnelTestFailed"));
      }

      setTunnelMetadata(index, {
        lastTestedAt: new Date().toISOString(),
        lastError: "",
      });
      toast.success(t("tunnels.tunnelTestSucceeded"));
    } catch (error) {
      const message =
        error instanceof Error ? error.message : t("tunnels.tunnelTestFailed");
      console.error("[tunnels] Client tunnel test failed", {
        tunnelName,
        error,
      });
      setTunnelMetadata(index, { lastError: message });
      toast.error(message);
    } finally {
      setTunnelTests((current) => ({ ...current, [tunnelName]: false }));
    }
  };

  const handleTunnelStart = async (tunnel: ClientTunnel, index: number) => {
    const tunnelName = getTunnelName(tunnel, index);
    const normalizedTunnel = {
      ...normalizeClientTunnel(tunnel),
      name: tunnelName,
    };
    const validationError = validateLocalConfig([normalizedTunnel]);
    if (validationError) {
      toast.error(validationError);
      setTunnelMetadata(index, { lastError: validationError });
      return;
    }

    setTunnelActions((current) => ({ ...current, [tunnelName]: true }));
    console.info("[tunnels] Starting client tunnel", {
      tunnelName,
      tunnel: normalizedTunnel,
    });

    try {
      const result = await window.electronAPI.startC2STunnel(
        normalizedTunnel,
        index,
      );
      if (!result.success) {
        throw new Error(result.error || t("tunnels.manualControlError"));
      }
      const statuses = await window.electronAPI.getC2STunnelStatuses();
      setTunnelStatuses(statuses as Record<string, TunnelStatus>);
      setTunnelMetadata(index, {
        lastStartedAt: new Date().toISOString(),
        lastError: "",
      });
      toast.success(t("tunnels.clientTunnelStarted"));
    } catch (error) {
      const message =
        error instanceof Error
          ? error.message
          : t("tunnels.manualControlError");
      console.error("[tunnels] Failed to start client tunnel", {
        tunnelName,
        error,
      });
      setTunnelMetadata(index, { lastError: message });
      toast.error(message);
    } finally {
      setTunnelActions((current) => ({ ...current, [tunnelName]: false }));
    }
  };

  const handleTunnelStop = async (tunnel: ClientTunnel, index: number) => {
    const tunnelName = getTunnelName(tunnel, index);
    setTunnelActions((current) => ({ ...current, [tunnelName]: true }));

    try {
      const result = await window.electronAPI.stopC2STunnel(tunnelName);
      if (!result.success) {
        throw new Error(result.error || t("tunnels.manualControlError"));
      }
      const statuses = await window.electronAPI.getC2STunnelStatuses();
      setTunnelStatuses(statuses as Record<string, TunnelStatus>);
      toast.success(t("tunnels.clientTunnelStopped"));
    } catch (error) {
      toast.error(
        error instanceof Error
          ? error.message
          : t("tunnels.manualControlError"),
      );
    } finally {
      setTunnelActions((current) => ({ ...current, [tunnelName]: false }));
    }
  };

  const handleSavePreset = async () => {
    if (!presetName.trim()) return;

    try {
      await saveLocalConfig(localConfig);
      await createC2STunnelPreset({
        name: presetName.trim(),
        config: localConfig.map(stripClientTunnelDiagnostics),
      });
      await refreshPresets();
      toast.success(t("profile.c2sPresetSaved"));
    } catch (error) {
      toast.error(
        error instanceof Error ? error.message : t("tunnels.localSaveError"),
      );
    }
  };

  const handleLoadPreset = async () => {
    if (!selectedPreset || selectedMatchesCurrent) return;

    try {
      await saveLocalConfig(selectedPreset.config.map(normalizeClientTunnel));
      toast.success(t("profile.c2sPresetLoaded"));
    } catch (error) {
      toast.error(
        error instanceof Error
          ? error.message
          : t("profile.c2sPresetLoadError"),
      );
    }
  };

  const handleRenamePreset = async () => {
    if (!selectedPreset || !presetName.trim()) return;

    try {
      await updateC2STunnelPreset(selectedPreset.id, {
        name: presetName.trim(),
      });
      await refreshPresets();
      toast.success(t("profile.c2sPresetRenamed"));
    } catch {
      // API helper already surfaces the error.
    }
  };

  const handleDeletePreset = async () => {
    if (!selectedPreset) return;

    try {
      await deleteC2STunnelPreset(selectedPreset.id);
      setSelectedPresetId("");
      await refreshPresets();
      toast.success(t("profile.c2sPresetDeleted"));
    } catch {
      // API helper already surfaces the error.
    }
  };

  if (!isElectron) {
    return (
      <div className="rounded-lg border-2 border-edge bg-elevated p-4">
        <h3 className="text-lg font-semibold mb-2">
          {t("profile.c2sTunnelPresets")}
        </h3>
        <p className="text-sm text-muted-foreground">
          {t("profile.c2sTunnelPresetsUnavailable")}
        </p>
      </div>
    );
  }

  return (
    <div className="space-y-4">
      <div className="rounded-lg border-2 border-edge bg-elevated p-4">
        <div className="mb-4 flex flex-wrap items-center justify-between gap-3">
          <div>
            <h3 className="text-lg font-semibold">
              {t("tunnels.clientTunnels")}
            </h3>
            <p className="text-sm text-muted-foreground mt-1">
              {t("profile.c2sTunnelConfigDesc")}
            </p>
          </div>
          <div className="flex flex-wrap gap-2">
            <Button
              type="button"
              variant="outline"
              onClick={() =>
                setLocalConfig((current) => [...current, createClientTunnel()])
              }
            >
              <Plus className="w-4 h-4 mr-2" />
              {t("tunnels.addClientTunnel")}
            </Button>
            {hasUnsavedLocalChanges && (
              <span className="self-center text-xs text-muted-foreground">
                {t("common.unsavedChanges")}
              </span>
            )}
            <Button type="button" onClick={handleSaveLocal}>
              <Save className="w-4 h-4 mr-2" />
              {t("common.save")}
            </Button>
          </div>
        </div>

        <div className="space-y-4">
          {localConfig.length > 0 ? (
            localConfig.map((tunnel, index) => {
              const mode = getTunnelMode(tunnel);
              const modeDescription = getTunnelModeDescription(
                "client",
                mode,
                {
                  sourcePort: tunnel.sourcePort,
                  endpointPort: tunnel.endpointPort,
                },
                t,
              );
              const tunnelName = getTunnelName(tunnel, index);
              const tunnelStatus = tunnelStatuses[tunnelName];
              const isTunnelActionLoading = Boolean(tunnelActions[tunnelName]);
              const isTunnelTestLoading = Boolean(tunnelTests[tunnelName]);
              const startDisabled = !tunnel.sourceHostId;
              const startDisabledReason = t("tunnels.endpointSshHostRequired");
              const { sourcePortLabel, endpointPortLabel } =
                getTunnelPortLabels("client", mode, t);
              const tunnelSummary = getTunnelSummary(tunnel);
              const statusError =
                tunnelStatus?.reason ||
                (tunnelStatus?.errorType ? String(tunnelStatus.errorType) : "");
              const lastError = statusError || tunnel.lastError || "";
              const lastStarted = formatDateTime(tunnel.lastStartedAt);
              const lastTested = formatDateTime(tunnel.lastTestedAt);

              return (
                <div key={index} className="p-4 border rounded-lg bg-muted/50">
                  <div className="flex flex-wrap items-center justify-between gap-3">
                    <div className="min-w-[240px] flex-1 space-y-1">
                      <Label className="text-xs text-muted-foreground">
                        {t("tunnels.tunnelName")}
                      </Label>
                      <Input
                        value={tunnel.displayName || ""}
                        onChange={(event) =>
                          updateTunnel(index, {
                            displayName: event.target.value,
                          })
                        }
                        placeholder={getTunnelDisplayName(tunnel, index)}
                        className="h-8 max-w-md bg-background"
                      />
                    </div>
                    <div className="flex flex-wrap items-center justify-end gap-2">
                      <Button
                        type="button"
                        size="sm"
                        variant="outline"
                        disabled={startDisabled || isTunnelTestLoading}
                        title={startDisabled ? startDisabledReason : undefined}
                        onClick={() => handleTunnelTest(tunnel, index)}
                        className="h-8 px-3 text-xs"
                      >
                        <Activity
                          className={`h-3 w-3 mr-1 ${
                            isTunnelTestLoading ? "animate-pulse" : ""
                          }`}
                        />
                        {t("tunnels.test")}
                      </Button>
                      <TunnelInlineControls
                        status={tunnelStatus}
                        loading={isTunnelActionLoading}
                        onStart={() => handleTunnelStart(tunnel, index)}
                        onStop={() => handleTunnelStop(tunnel, index)}
                        startDisabled={startDisabled}
                        startDisabledReason={startDisabledReason}
                      />
                      <Button
                        type="button"
                        variant="ghost"
                        size="sm"
                        onClick={() =>
                          setLocalConfig((current) =>
                            current.filter(
                              (_, tunnelIndex) => tunnelIndex !== index,
                            ),
                          )
                        }
                      >
                        <Trash2 className="w-4 h-4 mr-2" />
                        {t("common.delete")}
                      </Button>
                    </div>
                  </div>

                  <div className="grid gap-4 mb-4 mt-4">
                    <div>
                      <Label>{t("tunnels.type")}</Label>
                      <div className="mt-2">
                        <TunnelModeSelector
                          mode={mode}
                          scope="client"
                          onChange={(mode) =>
                            updateTunnel(index, {
                              mode,
                              tunnelType: getTunnelTypeForMode(mode),
                            })
                          }
                        />
                      </div>
                    </div>
                  </div>

                  <div className="grid grid-cols-12 gap-4">
                    <div className="col-span-12 md:col-span-6 space-y-2">
                      <Label>{t("tunnels.endpointSshConfig")}</Label>
                      <Select
                        value={
                          tunnel.sourceHostId
                            ? String(tunnel.sourceHostId)
                            : undefined
                        }
                        onValueChange={(value) =>
                          handleEndpointChange(index, value)
                        }
                      >
                        <SelectTrigger>
                          <SelectValue
                            placeholder={t(
                              "tunnels.endpointSshHostPlaceholder",
                            )}
                          />
                        </SelectTrigger>
                        <SelectContent>
                          {sshHosts.map((host) => (
                            <SelectItem key={host.id} value={String(host.id)}>
                              {host.name}
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                    </div>

                    {tunnel.mode !== "dynamic" && (
                      <div className="col-span-12 md:col-span-6 space-y-2">
                        <Label>{endpointPortLabel}</Label>
                        <Input
                          value={tunnel.endpointPort}
                          onChange={(event) =>
                            updateTunnel(index, {
                              endpointPort: Number(event.target.value),
                            })
                          }
                          placeholder={t("placeholders.defaultEndpointPort")}
                        />
                      </div>
                    )}
                    {tunnel.mode === "dynamic" && (
                      <div className="hidden md:block md:col-span-6" />
                    )}

                    <div className="col-span-12 md:col-span-6 space-y-2">
                      <Label>{t("tunnels.bindIp")}</Label>
                      <Input
                        value={tunnel.bindHost}
                        onChange={(event) =>
                          updateTunnel(index, {
                            bindHost: event.target.value.trim(),
                          })
                        }
                        placeholder={getBindPlaceholder(mode)}
                      />
                    </div>

                    <div className="col-span-12 md:col-span-6 space-y-2">
                      <Label>{sourcePortLabel}</Label>
                      <Input
                        value={tunnel.sourcePort}
                        onChange={(event) =>
                          updateTunnel(index, {
                            sourcePort: Number(event.target.value),
                          })
                        }
                        placeholder={t("placeholders.defaultPort")}
                      />
                    </div>
                  </div>

                  <p className="text-sm text-muted-foreground mt-2">
                    {modeDescription}
                  </p>
                  <div
                    className="mt-2 rounded-md border bg-canvasX px-3 py-2 text-xs text-muted-foreground"
                    title={tunnelSummary}
                  >
                    <span className="font-medium text-foreground">
                      {t("tunnels.route")}
                    </span>{" "}
                    {tunnelSummary}
                  </div>
                  {mode === "remote" && (
                    <p className="mt-2 text-xs text-muted-foreground">
                      {t("tunnels.clientRemoteServerNote")}
                    </p>
                  )}
                  {(lastError || lastStarted || lastTested) && (
                    <div className="mt-2 flex flex-wrap gap-x-4 gap-y-1 text-xs text-muted-foreground">
                      {lastStarted && (
                        <span>
                          {t("tunnels.lastStarted")}: {lastStarted}
                        </span>
                      )}
                      {lastTested && (
                        <span>
                          {t("tunnels.lastTested")}: {lastTested}
                        </span>
                      )}
                      {lastError && (
                        <span
                          className="text-red-600 dark:text-red-400"
                          title={lastError}
                        >
                          {t("tunnels.lastError")}: {lastError}
                        </span>
                      )}
                    </div>
                  )}

                  <div className="grid grid-cols-12 gap-4 mt-4">
                    <div className="col-span-12 md:col-span-6 space-y-2">
                      <Label>{t("tunnels.maxRetries")}</Label>
                      <Input
                        value={tunnel.maxRetries}
                        onChange={(event) =>
                          updateTunnel(index, {
                            maxRetries: Number(event.target.value),
                          })
                        }
                        placeholder={t("placeholders.maxRetries")}
                      />
                      <p className="text-xs text-muted-foreground">
                        {t("tunnels.maxRetriesDescription")}
                      </p>
                    </div>

                    <div className="col-span-12 md:col-span-6 space-y-2">
                      <Label>{t("tunnels.retryInterval")}</Label>
                      <Input
                        value={tunnel.retryInterval}
                        onChange={(event) =>
                          updateTunnel(index, {
                            retryInterval: Number(event.target.value),
                          })
                        }
                        placeholder={t("placeholders.retryInterval")}
                      />
                      <p className="text-xs text-muted-foreground">
                        {t("tunnels.retryIntervalDescription")}
                      </p>
                    </div>

                    <div className="col-span-12 space-y-2">
                      <div className="flex items-center justify-between gap-3 rounded-md border bg-canvas p-3">
                        <Label>{t("tunnels.autoStart")}</Label>
                        <Switch
                          checked={tunnel.autoStart}
                          onCheckedChange={(checked) =>
                            updateTunnel(index, { autoStart: checked })
                          }
                        />
                      </div>
                      <p className="text-xs text-muted-foreground">
                        {t(
                          tunnel.autoStart
                            ? "tunnels.clientAutoStartDesc"
                            : "tunnels.clientManualStartDesc",
                        )}
                      </p>
                    </div>
                  </div>
                </div>
              );
            })
          ) : (
            <p className="text-sm text-muted-foreground rounded-md border border-dashed p-3">
              {t("tunnels.noClientTunnels")}
            </p>
          )}
        </div>
      </div>

      <div className="rounded-lg border-2 border-edge bg-elevated p-4">
        <div className="mb-4">
          <h3 className="text-lg font-semibold">
            {t("profile.c2sTunnelPresets")}
          </h3>
          <p className="text-sm text-muted-foreground mt-1">
            {t("profile.c2sTunnelPresetsDesc")}
          </p>
        </div>

        <div className="grid gap-4 xl:grid-cols-[minmax(260px,1fr)_minmax(260px,1fr)]">
          <div className="space-y-2">
            <Label>{t("profile.c2sPresetName")}</Label>
            <div className="flex flex-col sm:flex-row gap-2">
              <Input
                value={presetName}
                onChange={(event) => setPresetName(event.target.value)}
                placeholder={t("profile.c2sPresetNamePlaceholder")}
              />
              <Button onClick={handleSavePreset} disabled={!presetName.trim()}>
                <Save className="w-4 h-4 mr-2" />
                {t("common.save")}
              </Button>
            </div>
            <p className="text-xs text-muted-foreground">
              {t("profile.c2sCurrentLocalConfig", {
                count: localConfig.length,
              })}
            </p>
          </div>

          <div className="space-y-2">
            <Label>{t("profile.c2sPresetToLoad")}</Label>
            <div className="flex flex-col lg:flex-row gap-2">
              <Select
                value={selectedPresetId}
                disabled={!hasPresets}
                onValueChange={(value) => {
                  setSelectedPresetId(value);
                  const preset = presets.find(
                    (item) => String(item.id) === value,
                  );
                  if (preset) setPresetName(preset.name);
                }}
              >
                <SelectTrigger className="min-w-0 lg:w-[260px]">
                  <SelectValue
                    placeholder={
                      hasPresets
                        ? t("profile.c2sNoPresetSelected")
                        : t("profile.c2sNoPresets")
                    }
                  />
                </SelectTrigger>
                {hasPresets && (
                  <SelectContent>
                    {presets.map((preset) => (
                      <SelectItem key={preset.id} value={String(preset.id)}>
                        {preset.name}
                      </SelectItem>
                    ))}
                  </SelectContent>
                )}
              </Select>
              <Button
                variant="outline"
                onClick={handleLoadPreset}
                disabled={!selectedPreset || selectedMatchesCurrent}
              >
                <Download className="w-4 h-4 mr-2" />
                {t("profile.c2sLoadPreset")}
              </Button>
              <Button
                variant="outline"
                onClick={handleRenamePreset}
                disabled={!selectedPreset || !presetName.trim()}
              >
                <Pencil className="w-4 h-4 mr-2" />
                {t("common.rename")}
              </Button>
              <Button
                variant="ghost"
                onClick={handleDeletePreset}
                disabled={!selectedPreset}
              >
                <Trash2 className="w-4 h-4 mr-2" />
                {t("common.delete")}
              </Button>
            </div>
            <p className="text-xs text-muted-foreground">
              {t("profile.c2sPresetSyncNote")}
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}