import React from "react";
import { ChevronDown, Eye, EyeOff, FileKey, FolderLock, FolderOpen, Key, KeyRound, MapPin, Plus, Shield, Trash2, User, X } from "lucide-react";
import type { Host } from "../types";
import { cn } from "../lib/utils";
import { DistroAvatar } from "./DistroAvatar";
import { Button } from "./ui/button";
import { Combobox } from "./ui/combobox";
import { HostDetailsSection, HostDetailsSettingRow } from "./host-details";
import { Input } from "./ui/input";
import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
import { ScrollArea } from "./ui/scroll-area";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select";
import { Switch } from "./ui/switch";
import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";

// eslint-disable-next-line @typescript-eslint/no-explicit-any
type HostDetailsConnectionSectionsProps = Record<string, any>;

export const HostDetailsConnectionSections: React.FC<HostDetailsConnectionSectionsProps> = ({
  t,
  form,
  update,
  groupDefaults,
  selectedIdentity,
  clearIdentity,
  identities,
  identitySuggestionsOpen,
  filteredIdentitySuggestions,
  setIdentitySuggestionsOpen,
  availableKeys,
  applyIdentity,
  showPassword,
  setShowPassword,
  pendingReferenceKeyPath,
  setPendingReferenceKeyPath,
  selectedCredentialType,
  setSelectedCredentialType,
  credentialPopoverOpen,
  setCredentialPopoverOpen,
  keysByCategory,
  newKeyFilePath,
  setNewKeyFilePath,
  addLocalKeyFilePath,
  handleDistroModeChange,
  distroOptions,
  effectiveFormDistro,
  getDistroOptionLabel,
}) => {
  return (
  <>
        <HostDetailsSection
          icon={<MapPin size={14} className="text-muted-foreground" />}
          title={t("hostDetails.section.address")}
        >
          <div className="flex items-center gap-2">
            <DistroAvatar
              host={form as Host}
              fallback={
                form.label?.slice(0, 2).toUpperCase() ||
                form.hostname?.slice(0, 2).toUpperCase() ||
                "H"
              }
              className="h-10 w-10"
            />
            <Input
              placeholder={t("hostDetails.hostname.placeholder")}
              value={form.hostname}
              onChange={(e) => update("hostname", e.target.value)}
              className="h-10 flex-1"
            />
          </div>
        </HostDetailsSection>

        <HostDetailsSection
          icon={<KeyRound size={14} className="text-muted-foreground" />}
          title={t("hostDetails.section.portCredentials")}
          className="overflow-hidden"
        >
          <div className="flex items-center gap-2">
            <div className="flex-1 min-w-0 h-10 flex items-center gap-2 bg-secondary/70 border border-border/70 rounded-md px-3">
              <span className="text-xs text-muted-foreground">SSH on</span>
              <div className="ml-auto w-1/2 min-w-0 flex items-center gap-2 justify-end">
                <Input
                  type="number"
                  value={form.port ?? ""}
                  onChange={(e) => update("port", e.target.value ? Number(e.target.value) : undefined)}
                  placeholder={groupDefaults?.port ? String(groupDefaults.port) : "22"}
                  className="h-8 flex-1 min-w-0 text-center"
                />
                <span className="text-xs text-muted-foreground">
                  {t("hostDetails.port")}
                </span>
              </div>
            </div>
          </div>
          <div className="grid gap-2">
            {selectedIdentity ? (
              <div className="flex items-center gap-2 h-10 px-3 rounded-md border border-border/70 bg-secondary/60">
                <User size={16} className="text-muted-foreground" />
                <div className="min-w-0 flex-1">
                  <div className="text-sm font-medium truncate">
                    {selectedIdentity.label}
                  </div>
                </div>
                <Tooltip>
                  <TooltipTrigger asChild>
                    <Button
                      variant="ghost"
                      size="icon"
                      className="h-8 w-8 shrink-0"
                      onClick={clearIdentity}
                    >
                      <X size={14} />
                    </Button>
                  </TooltipTrigger>
                  <TooltipContent>{t("common.clear")}</TooltipContent>
                </Tooltip>
              </div>
            ) : form.identityId ? (
              <div className="flex items-center gap-2 h-10 px-3 rounded-md border border-border/70 bg-secondary/60">
                <User size={16} className="text-muted-foreground" />
                <div className="min-w-0 flex-1">
                  <div className="text-sm font-medium truncate">
                    {t("hostDetails.identity.missing")}
                  </div>
                </div>
                <Tooltip>
                  <TooltipTrigger asChild>
                    <Button
                      variant="ghost"
                      size="icon"
                      className="h-8 w-8 shrink-0"
                      onClick={clearIdentity}
                    >
                      <X size={14} />
                    </Button>
                  </TooltipTrigger>
                  <TooltipContent>{t("common.clear")}</TooltipContent>
                </Tooltip>
              </div>
            ) : (
              (() => {
                const hasIdentities = identities.length > 0;
                if (!hasIdentities) {
                  return (
                    <Input
                      placeholder={groupDefaults?.username || t("hostDetails.username.placeholder")}
                      value={form.username}
                      onChange={(e) => update("username", e.target.value)}
                      className="h-10"
                    />
                  );
                }

                return (
                  <Popover
                    open={
                      identitySuggestionsOpen &&
                      filteredIdentitySuggestions.length > 0
                    }
                    onOpenChange={setIdentitySuggestionsOpen}
                  >
                    <PopoverTrigger asChild>
                      <div className="relative">
                        <Input
                          placeholder={groupDefaults?.username || t("hostDetails.username.placeholder")}
                          value={form.username}
                          onChange={(e) => {
                            const next = e.target.value;
                            update("username", next);
                            const q = next.toLowerCase().trim();
                            const matches = q
                              ? identities.filter(
                                (i) =>
                                  i.label.toLowerCase().includes(q) ||
                                  i.username.toLowerCase().includes(q),
                              )
                              : identities;
                            setIdentitySuggestionsOpen(matches.length > 0);
                          }}
                          onFocus={() => {
                            const q = (form.username || "").toLowerCase().trim();
                            const matches = q
                              ? identities.filter(
                                (i) =>
                                  i.label.toLowerCase().includes(q) ||
                                  i.username.toLowerCase().includes(q),
                              )
                              : identities;
                            setIdentitySuggestionsOpen(matches.length > 0);
                          }}
                          className="h-10 pr-9"
                        />
                        <Tooltip>
                          <TooltipTrigger asChild>
                            <button
                              type="button"
                              className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors"
                              onClick={() => {
                                setIdentitySuggestionsOpen((prev) => {
                                  if (prev) return false;
                                  const q = (form.username || "")
                                    .toLowerCase()
                                    .trim();
                                  const matches = q
                                    ? identities.filter(
                                      (i) =>
                                        i.label.toLowerCase().includes(q) ||
                                        i.username.toLowerCase().includes(q),
                                    )
                                    : identities;
                                  return matches.length > 0;
                                });
                              }}
                            >
                              <ChevronDown size={16} />
                            </button>
                          </TooltipTrigger>
                          <TooltipContent>{t("hostDetails.identity.suggestions")}</TooltipContent>
                        </Tooltip>
                      </div>
                    </PopoverTrigger>
                    <PopoverContent
                      className="p-0 border-border/60"
                      align="start"
                      sideOffset={4}
                      onOpenAutoFocus={(e) => e.preventDefault()}
                      style={{ width: "var(--radix-popover-trigger-width)" }}
                    >
                      <ScrollArea className="max-h-[280px]">
                        <div className="p-1">
                          {filteredIdentitySuggestions.length === 0 ? (
                            <div className="py-4 text-center text-sm text-muted-foreground">
                              {t("common.noResultsFound")}
                            </div>
                          ) : (
                            <div className="space-y-1">
                              {filteredIdentitySuggestions.map((identity) => {
                                const keyLabel = identity.keyId
                                  ? availableKeys.find(
                                    (k) => k.id === identity.keyId,
                                  )?.label
                                  : undefined;
                                const methodLabel =
                                  identity.authMethod === "certificate"
                                    ? t("hostDetails.credential.certificate")
                                    : identity.authMethod === "key"
                                      ? t("hostDetails.credential.key")
                                      : t("keychain.identity.method.passwordOnly");
                                const summaryParts = [
                                  identity.username,
                                  identity.password ? "******" : undefined,
                                  keyLabel,
                                ].filter(Boolean);

                                return (
                                  <button
                                    key={identity.id}
                                    type="button"
                                    className="w-full flex items-center gap-3 px-3 py-2 rounded-md hover:bg-secondary/80 transition-colors text-left"
                                    onMouseDown={(e) => {
                                      e.preventDefault();
                                      applyIdentity(identity);
                                    }}
                                  >
                                    <div className="h-8 w-8 rounded-md bg-green-500/15 text-green-500 flex items-center justify-center shrink-0">
                                      <User size={16} />
                                    </div>
                                    <div className="min-w-0 flex-1">
                                      <div className="text-sm font-medium truncate">
                                        {identity.label}
                                      </div>
                                      <div className="text-xs text-muted-foreground truncate">
                                        {methodLabel}
                                        {summaryParts.length
                                          ? ` - ${summaryParts.join(", ")}`
                                          : ""}
                                      </div>
                                    </div>
                                  </button>
                                );
                              })}
                            </div>
                          )}
                        </div>
                      </ScrollArea>
                    </PopoverContent>
                  </Popover>
                );
              })()
            )}

            {!selectedIdentity && !form.identityId && (
              <div className="relative">
                <Input
                  placeholder={t("hostDetails.password.placeholder")}
                  type={showPassword ? "text" : "password"}
                  value={form.password || ""}
                  onChange={(e) => update("password", e.target.value)}
                  className="h-10 pr-10"
                />
                <Tooltip>
                  <TooltipTrigger asChild>
                    <button
                      type="button"
                      onClick={() => setShowPassword(!showPassword)}
                      className="absolute right-2 top-1/2 -translate-y-1/2 p-1 text-muted-foreground hover:text-foreground transition-colors"
                    >
                      {showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
                    </button>
                  </TooltipTrigger>
                  <TooltipContent>{showPassword ? t("hostDetails.password.hide") : t("hostDetails.password.show")}</TooltipContent>
                </Tooltip>
              </div>
            )}

            {/* Save Password toggle - shown when password is entered */}
            {!selectedIdentity && !form.identityId && form.password && (
              <div className="flex items-center justify-between py-1">
                <span className="text-xs text-muted-foreground">
                  {t("hostDetails.password.save")}
                </span>
                <Switch
                  checked={form.savePassword ?? true}
                  onCheckedChange={(val) => update("savePassword" as keyof Host, val)}
                />
              </div>
            )}

            {/* Local key file paths display */}
            {!selectedIdentity && !form.identityFileId && form.identityFilePaths && form.identityFilePaths.length > 0 && (
              <div className="space-y-1.5">
                {form.identityFilePaths.map((keyPath, idx) => (
                  <div key={idx} className="flex items-center gap-2 p-2 rounded-md bg-secondary/50 border border-border/60 overflow-hidden">
                    <FileKey size={14} className="text-primary shrink-0" />
                    <Tooltip>
                      <TooltipTrigger asChild>
                        <span className="text-xs w-0 flex-1 truncate font-mono cursor-default">
                          {keyPath}
                        </span>
                      </TooltipTrigger>
                      <TooltipContent>{keyPath}</TooltipContent>
                    </Tooltip>
                    <Button
                      variant="ghost"
                      size="icon"
                      className="h-6 w-6 shrink-0"
                      onClick={() => {
                        const paths = form.identityFilePaths?.filter((_, i) => i !== idx) || [];
                        update("identityFilePaths", paths.length > 0 ? paths : undefined);
                        if (keyPath === pendingReferenceKeyPath) {
                          setPendingReferenceKeyPath(null);
                        }
                      }}
                    >
                      <Trash2 size={12} />
                    </Button>
                  </div>
                ))}
              </div>
            )}

            {/* Selected credential display */}
            {!selectedIdentity && form.identityFileId && (
              <div className="flex items-center gap-2 p-2 rounded-md bg-secondary/50 border border-border/60">
                {form.authMethod === "certificate" ? (
                  <Shield size={14} className="text-primary" />
                ) : (
                  <Key size={14} className="text-primary" />
                )}
                <span className="text-sm flex-1 truncate">
                  {availableKeys.find((k) => k.id === form.identityFileId)
                    ?.label || "Key"}
                </span>
                <Button
                  variant="ghost"
                  size="icon"
                  className="h-6 w-6"
                  onClick={() => {
                    update("identityFileId", undefined);
                    update("authMethod", "password");
                    setPendingReferenceKeyPath(null);
                    setSelectedCredentialType(null);
                  }}
                >
                  <X size={12} />
                </Button>
              </div>
            )}

            {/* Credential type selection with inline popover - hidden when credential is selected */}
            {!selectedIdentity &&
              !form.identityFileId &&
              !selectedCredentialType && (
                <Popover
                  open={credentialPopoverOpen}
                  onOpenChange={setCredentialPopoverOpen}
                >
                  <PopoverTrigger asChild>
                    <button
                      type="button"
                      className="flex items-center gap-2 text-xs text-muted-foreground hover:text-foreground transition-colors py-1"
                    >
                      <Plus size={12} />
                      <span>{t("hostDetails.credential.keyCertificate")}</span>
                    </button>
                  </PopoverTrigger>
                  <PopoverContent
                    className="w-[200px] p-1"
                    align="start"
                    sideOffset={4}
                  >
                    <div className="space-y-0.5">
                      <button
                        type="button"
                        className="w-full flex items-center gap-3 px-3 py-2.5 rounded-md hover:bg-secondary/80 transition-colors text-left"
                        onClick={() => {
                          setSelectedCredentialType("key");
                          setCredentialPopoverOpen(false);
                        }}
                      >
                        <Key size={16} className="text-muted-foreground" />
                        <span className="text-sm font-medium">
                          {t("hostDetails.credential.key")}
                        </span>
                      </button>

                      <button
                        type="button"
                        className="w-full flex items-center gap-3 px-3 py-2.5 rounded-md hover:bg-secondary/80 transition-colors text-left"
                        onClick={() => {
                          setSelectedCredentialType("certificate");
                          setCredentialPopoverOpen(false);
                        }}
                      >
                        <Shield size={16} className="text-muted-foreground" />
                        <span className="text-sm font-medium">
                          {t("hostDetails.credential.certificate")}
                        </span>
                      </button>

                      <button
                        type="button"
                        className="w-full flex items-center gap-3 px-3 py-2.5 rounded-md hover:bg-secondary/80 transition-colors text-left"
                        onClick={() => {
                          setSelectedCredentialType("localKeyFile");
                          setCredentialPopoverOpen(false);
                        }}
                      >
                        <FileKey size={16} className="text-muted-foreground" />
                        <span className="text-sm font-medium">
                          {t("hostDetails.credential.localKeyFile")}
                        </span>
                      </button>
                    </div>
                  </PopoverContent>
                </Popover>
              )}

            {/* Key selection combobox - appears after selecting "Key" type */}
            {!selectedIdentity &&
              selectedCredentialType === "key" &&
              !form.identityFileId && (
                <div className="flex items-center gap-1">
                  <Combobox
                    options={keysByCategory.key.map((k) => ({
                      value: k.id,
                      label: k.label,
                      sublabel: `${k.type}${k.keySize ? ` ${k.keySize}` : ""}`,
                      icon: <Key size={14} className="text-muted-foreground" />,
                    }))}
                    value={form.identityFileId}
                    onValueChange={(val) => {
                      update("identityFileId", val);
                      update("authMethod", "key");
                      update("identityFilePaths", undefined);
                      setPendingReferenceKeyPath(null);
                      setSelectedCredentialType(null);
                    }}
                    placeholder={t("hostDetails.keys.search")}
                    emptyText={t("hostDetails.keys.empty")}
                    icon={<Key size={14} className="text-muted-foreground" />}
                    className="flex-1"
                  />
                  <Button
                    variant="ghost"
                    size="icon"
                    className="h-8 w-8 shrink-0"
                    onClick={() => setSelectedCredentialType(null)}
                  >
                    <X size={14} />
                  </Button>
                </div>
              )}

            {/* Certificate selection combobox - appears after selecting "Certificate" type */}
            {!selectedIdentity &&
              selectedCredentialType === "certificate" &&
              !form.identityFileId && (
                <div className="flex items-center gap-1">
                  <Combobox
                    options={keysByCategory.certificate.map((k) => ({
                      value: k.id,
                      label: k.label,
                      icon: (
                        <Shield size={14} className="text-muted-foreground" />
                      ),
                    }))}
                    value={form.identityFileId}
                    onValueChange={(val) => {
                      update("identityFileId", val);
                      update("authMethod", "certificate");
                      update("identityFilePaths", undefined);
                      setPendingReferenceKeyPath(null);
                      setSelectedCredentialType(null);
                    }}
                    placeholder={t("hostDetails.certs.search")}
                    emptyText={t("hostDetails.certs.empty")}
                    icon={
                      <Shield size={14} className="text-muted-foreground" />
                    }
                    className="flex-1"
                  />
                  <Button
                    variant="ghost"
                    size="icon"
                    className="h-8 w-8 shrink-0"
                    onClick={() => setSelectedCredentialType(null)}
                  >
                    <X size={14} />
                  </Button>
                </div>
              )}

            {/* Local key file path input - appears after selecting "Local Key File" type */}
            {!selectedIdentity &&
              selectedCredentialType === "localKeyFile" &&
              !form.identityFileId && (
                <div className="space-y-1.5">
                  <div className="flex items-center gap-1 min-w-0">
                    <input
                      type="text"
                      className="flex-1 min-w-0 h-8 px-2 text-xs font-mono bg-background border border-border/60 rounded-md focus:outline-none focus:ring-1 focus:ring-ring"
                      placeholder={t("hostDetails.credential.localKeyFilePlaceholder")}
                      value={newKeyFilePath}
                      onChange={(e) => setNewKeyFilePath(e.target.value)}
                      onKeyDown={(e) => {
                        if (e.key === "Enter" && newKeyFilePath.trim()) {
                          e.preventDefault();
                          addLocalKeyFilePath(newKeyFilePath);
                        }
                      }}
                    />
                    <Tooltip>
                      <TooltipTrigger asChild>
                        <Button
                          variant="secondary"
                          size="icon"
                          className="h-8 w-8 shrink-0"
                          onClick={async () => {
                            const bridge = (window as unknown as { netcatty?: NetcattyBridge }).netcatty;
                            if (!bridge?.selectFile) return;
                            const filePath = await bridge.selectFile(
                              "Select SSH Private Key",
                              undefined,
                              [{ name: "All Files", extensions: ["*"] }]
                            );
                            if (filePath) {
                              addLocalKeyFilePath(filePath);
                            }
                          }}
                        >
                          <FolderOpen size={14} />
                        </Button>
                      </TooltipTrigger>
                      <TooltipContent>{t("hostDetails.credential.browseKeyFile")}</TooltipContent>
                    </Tooltip>
                    <Button
                      variant="ghost"
                      size="icon"
                      className="h-8 w-8 shrink-0"
                      onClick={() => {
                        setSelectedCredentialType(null);
                        setNewKeyFilePath("");
                      }}
                    >
                      <X size={14} />
                    </Button>
                  </div>
                </div>
              )}
          </div>
        </HostDetailsSection>

        <HostDetailsSection
          icon={<FolderLock size={14} className="text-muted-foreground" />}
          title={t("hostDetails.section.sftp")}
        >
          <HostDetailsSettingRow
            label={t("hostDetails.sftp.sudo")}
            hint={t("hostDetails.sftp.sudo.desc")}
          >
            <Switch
              checked={form.sftpSudo || false}
              onCheckedChange={(val) => update("sftpSudo", val)}
            />
          </HostDetailsSettingRow>
          {form.sftpSudo && !form.password && !selectedIdentity?.password && (
            <p className="text-xs text-amber-500">
              {t("hostDetails.sftp.sudo.passwordWarning")}
            </p>
          )}
          <HostDetailsSettingRow
            label={t("hostDetails.sftp.encoding")}
            hint={t("hostDetails.sftp.encoding.desc")}
          >
            <Select
              value={form.sftpEncoding || "auto"}
              onValueChange={(val) => update("sftpEncoding", val as Host["sftpEncoding"])}
            >
              <SelectTrigger className="h-10 w-32">
                <SelectValue placeholder={t("sftp.encoding.label")} />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="auto">{t("sftp.encoding.auto")}</SelectItem>
                <SelectItem value="utf-8">{t("sftp.encoding.utf8")}</SelectItem>
                <SelectItem value="gb18030">{t("sftp.encoding.gb18030")}</SelectItem>
              </SelectContent>
            </Select>
          </HostDetailsSettingRow>
        </HostDetailsSection>

        {form.os === "linux" && (
          <HostDetailsSection
            icon={<img src="/distro/linux.svg" alt="Linux" className="h-3.5 w-3.5 opacity-70 dark:invert" />}
            title={t("hostDetails.distro.title")}
            hint={t("hostDetails.distro.desc")}
          >
            <div className="grid gap-2 md:grid-cols-2">
              <div className="space-y-1">
                <span className="text-xs text-muted-foreground">{t("hostDetails.distro.mode")}</span>
                <Select
                  value={form.distroMode || "auto"}
                  onValueChange={(val) => handleDistroModeChange(val as "auto" | "manual")}
                >
                  <SelectTrigger className="h-8" aria-label={t("hostDetails.distro.mode")}>
                    <span className="truncate whitespace-nowrap pr-2 text-left">
                      {form.distroMode === "manual"
                        ? t("hostDetails.distro.mode.manual")
                        : t("hostDetails.distro.mode.auto")}
                    </span>
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="auto">{t("hostDetails.distro.mode.auto")}</SelectItem>
                    <SelectItem value="manual">{t("hostDetails.distro.mode.manual")}</SelectItem>
                  </SelectContent>
                </Select>
              </div>

              {form.distroMode === "manual" ? (
                <div className="space-y-1">
                  <span className="text-xs text-muted-foreground">{t("hostDetails.distro.manualLabel")}</span>
                  <Select
                    value={form.manualDistro}
                    onValueChange={(val) => update("manualDistro", val)}
                  >
                    <SelectTrigger className="h-8" aria-label={t("hostDetails.distro.manualLabel")}>
                      {(() => {
                        const selectedOption = distroOptions.find((option) => option.value === form.manualDistro);
                        return selectedOption ? (
                          <div className="flex min-w-0 items-center gap-2 pr-2">
                            <div
                              className={cn(
                                "flex h-4 w-4 shrink-0 items-center justify-center overflow-hidden rounded-[2px]",
                                selectedOption.bgClass,
                              )}
                            >
                              {selectedOption.icon ? (
                                <img
                                  src={selectedOption.icon}
                                  alt={selectedOption.label}
                                  className="h-3 w-3 object-contain invert brightness-0"
                                />
                              ) : (
                                <div className="h-2 w-2 rounded-full bg-white/70" />
                              )}
                            </div>
                            <span className="truncate whitespace-nowrap">{selectedOption.label}</span>
                          </div>
                        ) : (
                          <SelectValue placeholder={t("hostDetails.distro.unknown")} />
                        );
                      })()}
                    </SelectTrigger>
                    <SelectContent className="min-w-[14rem]">
                      {distroOptions.map((option) => (
                        <SelectItem key={option.value} value={option.value}>
                          <div className="flex items-center gap-2">
                            <div
                              className={cn(
                                "flex h-4 w-4 shrink-0 items-center justify-center overflow-hidden rounded-[2px]",
                                option.bgClass,
                              )}
                            >
                              {option.icon ? (
                                <img
                                  src={option.icon}
                                  alt={option.label}
                                  className="h-3 w-3 object-contain invert brightness-0"
                                />
                              ) : (
                                <div className="h-2 w-2 rounded-full bg-white/70" />
                              )}
                            </div>
                            <span className="whitespace-nowrap">{option.label}</span>
                          </div>
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
              ) : (
                <div className="space-y-1">
                  <span className="text-xs text-muted-foreground">{t("hostDetails.distro.detectedLabel")}</span>
                  <div className="flex h-8 items-center rounded-md border border-border/60 bg-background/50 px-3 text-sm">
                    {effectiveFormDistro
                      ? getDistroOptionLabel(effectiveFormDistro)
                      : t("hostDetails.distro.unknown")}
                  </div>
                </div>
              )}
            </div>
          </HostDetailsSection>
        )}
  </>
  );
};
