import React from "react";
import { ChevronDown, ChevronRight, ChevronUp, Eye, EyeOff, FileKey, FolderOpen, Globe, Key, Link2, MoreHorizontal, Plus, Shield, TerminalSquare, Trash2, Variable, X } from "lucide-react";
import { AlgorithmOverridesPanel } from "./host-details/AlgorithmOverridesPanel";
import { Badge } from "./ui/badge";
import { Button } from "./ui/button";
import { HostDetailsSection, HostDetailsSettingRow } from "./host-details";
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./ui/collapsible";
import { Combobox } from "./ui/combobox";
import { Dropdown, DropdownContent, DropdownTrigger } from "./ui/dropdown";
import { Input } from "./ui/input";
import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select";
import { Switch } from "./ui/switch";
import { Textarea } from "./ui/textarea";
import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";

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

const ToggleRow: React.FC<{ label: string; hint?: React.ReactNode; enabled: boolean; onToggle: () => void }> = ({ label, hint, enabled, onToggle }) => {
  return (
    <HostDetailsSettingRow label={label} hint={hint}>
      <Switch checked={enabled} onCheckedChange={() => onToggle()} />
    </HostDetailsSettingRow>
  );
};

export const GroupSshSettingsSection: React.FC<GroupSshSettingsSectionProps> = ({
  sshEnabled,
  t,
  removeSsh,
  form,
  update,
  showPassword,
  setShowPassword,
  availableKeys,
  identities,
  identityOptions,
  updateSshIdentity,
  effectiveSshIdentityId,
  setSelectedCredentialType,
  selectedCredentialType,
  credentialPopoverOpen,
  setCredentialPopoverOpen,
  keysByCategory,
  newKeyFilePath,
  setNewKeyFilePath,
  inheritedLegacyAlgorithms,
  inheritedSkipEcdsaHostKey,
  inheritedStartupCommandRunMode,
  showAlgorithmOverrides,
  setShowAlgorithmOverrides,
  inheritedAlgorithmOverrides,
  proxySummaryLabel,
  setActiveSubPanel,
  chainedHosts,
}) => {
  if (!sshEnabled) return null;
  const startupCommandRunModeFallback = inheritedStartupCommandRunMode ?? "paste";
  const effectiveStartupCommandRunMode = form.startupCommandRunMode ?? startupCommandRunModeFallback;

  return (
          <HostDetailsSection
            icon={<TerminalSquare size={14} className="text-muted-foreground" />}
            title={t("vault.groups.details.ssh")}
            className="overflow-hidden"
            action={
              <Dropdown>
                <DropdownTrigger asChild>
                  <Button variant="ghost" size="icon" className="h-6 w-6">
                    <MoreHorizontal size={14} />
                  </Button>
                </DropdownTrigger>
                <DropdownContent align="end" className="min-w-[160px]">
                  <button
                    className="w-full flex items-center gap-2 px-3 py-2 text-sm text-destructive hover:bg-secondary rounded-md transition-colors"
                    onClick={removeSsh}
                  >
                    <Trash2 size={14} />
                    {t("vault.groups.details.removeProtocol")}
                  </button>
                </DropdownContent>
              </Dropdown>
            }
          >

            <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"
                    placeholder="22"
                    value={form.port ?? ""}
                    onChange={(e) =>
                      update("port", e.target.value ? Number(e.target.value) : undefined)
                    }
                    className="h-8 flex-1 min-w-0 text-center"
                  />
                  <span className="text-xs text-muted-foreground">
                    {t("hostDetails.port")}
                  </span>
                </div>
              </div>
            </div>

            {(identities.length > 0 || effectiveSshIdentityId) && (
              <Combobox
                options={identityOptions}
                value={effectiveSshIdentityId || ""}
                onValueChange={updateSshIdentity}
                placeholder={t("hostDetails.identity.suggestions")}
                emptyText={t("common.noResultsFound")}
                className="w-full"
              />
            )}

            {!effectiveSshIdentityId && (<>
              <Input
                placeholder={t("hostDetails.username.placeholder")}
                value={form.username || ""}
                onChange={(e) => update("username", e.target.value || undefined)}
                className="h-10"
              />

              <div className="relative">
                <Input
                  placeholder={t("hostDetails.password.placeholder")}
                  type={showPassword ? "text" : "password"}
                  value={form.password || ""}
                  onChange={(e) => update("password", e.target.value || undefined)}
                  className="h-10 pr-10"
                />
                <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>
              </div>
            </>)}

            {/* Selected credential display */}
            {!effectiveSshIdentityId && 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", undefined);
                    setSelectedCredentialType(null);
                  }}
                >
                  <X size={12} />
                </Button>
              </div>
            )}

            {/* Local key file paths display */}
            {!effectiveSshIdentityId && !form.identityFileId && form.identityFilePaths && form.identityFilePaths.length > 0 && (
              <div className="space-y-1">
                {form.identityFilePaths.map((keyPath, idx) => (
                  <div key={idx} className="flex items-center gap-2 h-8 px-2 rounded-md bg-secondary/50 border border-border/60" style={{ maxWidth: '100%' }}>
                    <FileKey size={12} className="text-muted-foreground shrink-0" />
                    <span className="text-xs font-mono truncate" style={{ maxWidth: '320px' }}>{keyPath}</span>
                    <Button
                      variant="ghost"
                      size="icon"
                      className="h-5 w-5 shrink-0"
                      onClick={() => {
                        const paths = (form.identityFilePaths || []).filter((_, i) => i !== idx);
                        update("identityFilePaths", paths.length > 0 ? paths : undefined);
                        if (paths.length === 0) update("authMethod", undefined);
                      }}
                    >
                      <X size={10} />
                    </Button>
                  </div>
                ))}
              </div>
            )}

            {/* Credential type selection with inline popover - hidden when credential is selected */}
            {!effectiveSshIdentityId && !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 */}
            {selectedCredentialType === "key" &&
              !effectiveSshIdentityId && !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");
                      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 */}
            {selectedCredentialType === "certificate" &&
              !effectiveSshIdentityId && !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");
                      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 */}
            {!effectiveSshIdentityId && !form.identityFileId && selectedCredentialType === "localKeyFile" && (
              <div className="space-y-1.5">
                <div className="flex items-center gap-1 w-full">
                  <input
                    type="text"
                    className="flex-1 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();
                        const paths = [...(form.identityFilePaths || []), newKeyFilePath.trim()];
                        update("identityFilePaths", paths);
                        update("identityFileId", undefined);
                        update("authMethod", "key");
                        setNewKeyFilePath("");
                      }
                    }}
                  />
                  <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) {
                            const paths = [...(form.identityFilePaths || []), filePath];
                            update("identityFilePaths", paths);
                            update("identityFileId", undefined);
                            update("authMethod", "key");
                          }
                        }}
                      >
                        <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)}
                  >
                    <X size={14} />
                  </Button>
                </div>
              </div>
            )}

            <ToggleRow
              label={t("hostDetails.agentForwarding")}
              hint={t("hostDetails.agentForwarding.desc")}
              enabled={!!form.agentForwarding}
              onToggle={() => update("agentForwarding", !form.agentForwarding)}
            />

            {/* Startup Command — Textarea so multi-line sequences are typeable
                here just like on the per-host details panel (#1083 follow-up). */}
            <Textarea
              placeholder={t("hostDetails.startupCommand.placeholder")}
              value={form.startupCommand || ""}
              onChange={(e) => update("startupCommand", e.target.value || undefined)}
              className="min-h-[80px] font-mono text-sm"
              rows={3}
            />
            <HostDetailsSettingRow
              label={t("hostDetails.startupCommand.runMode")}
              hint={t("hostDetails.startupCommand.runMode.help")}
            >
              <Select
                value={effectiveStartupCommandRunMode}
                onValueChange={(value) => update(
                  "startupCommandRunMode",
                  value === startupCommandRunModeFallback ? undefined : value,
                )}
              >
                <SelectTrigger className="h-8 w-[180px]">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="lineDelay">{t("hostDetails.startupCommand.runMode.lineDelay")}</SelectItem>
                  <SelectItem value="paste">{t("hostDetails.startupCommand.runMode.paste")}</SelectItem>
                </SelectContent>
              </Select>
            </HostDetailsSettingRow>

            {/* Display the *effective* value (this group's field falling
                back to the resolved parent default). Same rationale as
                in HostDetailsPanel — without the fallback, a child group
                that inherits a flag from a parent would show "off" in
                the UI while connections still applied it. */}
            <ToggleRow
              label={t("hostDetails.legacyAlgorithms")}
              hint={t("hostDetails.legacyAlgorithms.desc")}
              enabled={!!(form.legacyAlgorithms ?? inheritedLegacyAlgorithms)}
              onToggle={() => update(
                "legacyAlgorithms",
                !(form.legacyAlgorithms ?? inheritedLegacyAlgorithms),
              )}
            />

            <ToggleRow
              label={t("hostDetails.skipEcdsaHostKey")}
              hint={t("hostDetails.skipEcdsaHostKey.desc")}
              enabled={!!(form.skipEcdsaHostKey ?? inheritedSkipEcdsaHostKey)}
              onToggle={() => update(
                "skipEcdsaHostKey",
                !(form.skipEcdsaHostKey ?? inheritedSkipEcdsaHostKey),
              )}
            />
            <Collapsible open={showAlgorithmOverrides} onOpenChange={setShowAlgorithmOverrides}>
              <CollapsibleTrigger asChild>
                <Button
                  variant="ghost"
                  className="w-full justify-between h-8 px-2 hover:bg-accent/50"
                >
                  <span className="text-xs font-medium text-muted-foreground">
                    {t("hostDetails.algorithms.advanced")}
                    {form.algorithms && Object.keys(form.algorithms).length > 0 && (
                      <span className="ml-1.5 text-[10px] text-yellow-600 dark:text-yellow-400">
                        ({t("hostDetails.algorithms.customized")})
                      </span>
                    )}
                  </span>
                  {showAlgorithmOverrides
                    ? <ChevronUp size={14} className="text-muted-foreground" />
                    : <ChevronDown size={14} className="text-muted-foreground" />}
                </Button>
              </CollapsibleTrigger>
              <CollapsibleContent className="mt-2">
                <AlgorithmOverridesPanel
                  value={form.algorithms}
                  legacyEnabled={!!(form.legacyAlgorithms ?? inheritedLegacyAlgorithms)}
                  inheritedFromGroup={inheritedAlgorithmOverrides}
                  onChange={(next) => update("algorithms", next)}
                />
              </CollapsibleContent>
            </Collapsible>

            {/* Proxy */}
            <button
              type="button"
              className="w-full flex min-h-12 items-center justify-between gap-3 rounded-lg border border-border/60 bg-secondary/40 px-3 py-2 transition-colors hover:bg-secondary/70"
              onClick={() => setActiveSubPanel("proxy")}
            >
              <div className="flex items-center gap-2">
                <Globe size={14} className="text-muted-foreground" />
                <span className="text-sm">{t("hostDetails.proxy")}</span>
              </div>
              <div className="flex min-w-0 items-center gap-2">
                {(form.proxyConfig?.host || form.proxyConfig?.command || form.proxyProfileId) && (
                  <Tooltip>
                    <TooltipTrigger asChild>
                      <div className="min-w-0 cursor-default">
                        <Badge
                          variant="secondary"
                          className="max-w-[160px] truncate text-xs"
                        >
                          {proxySummaryLabel}
                        </Badge>
                      </div>
                    </TooltipTrigger>
                    <TooltipContent>{proxySummaryLabel}</TooltipContent>
                  </Tooltip>
                )}
                <ChevronRight size={14} className="text-muted-foreground" />
              </div>
            </button>

            {/* Host Chaining */}
            <button
              type="button"
              className="w-full flex min-h-12 items-center justify-between gap-3 rounded-lg border border-border/60 bg-secondary/40 px-3 py-2 transition-colors hover:bg-secondary/70"
              onClick={() => setActiveSubPanel("chain")}
            >
              <div className="flex items-center gap-2">
                <Link2 size={14} className="text-muted-foreground" />
                <span className="text-sm">{t("hostDetails.jumpHosts")}</span>
              </div>
              <div className="flex items-center gap-2">
                {chainedHosts.length > 0 && (
                  <Badge variant="secondary" className="text-xs">
                    {t("hostDetails.jumpHosts.hops", { count: chainedHosts.length })}
                  </Badge>
                )}
                <ChevronRight size={14} className="text-muted-foreground" />
              </div>
            </button>

            {/* Environment Variables */}
            <button
              type="button"
              className="w-full flex min-h-12 items-center justify-between gap-3 rounded-lg border border-border/60 bg-secondary/40 px-3 py-2 transition-colors hover:bg-secondary/70"
              onClick={() => setActiveSubPanel("env-vars")}
            >
              <div className="flex items-center gap-2">
                <Variable size={14} className="text-muted-foreground" />
                <span className="text-sm">{t("hostDetails.envVars")}</span>
              </div>
              <div className="flex items-center gap-2">
                {(form.environmentVariables?.length || 0) > 0 && (
                  <Badge variant="secondary" className="text-xs">
                    {form.environmentVariables!.length}
                  </Badge>
                )}
                <ChevronRight size={14} className="text-muted-foreground" />
              </div>
            </button>

            {/* Mosh */}
            <ToggleRow
              label="Mosh"
              enabled={!!form.moshEnabled}
              onToggle={() => update("moshEnabled", !form.moshEnabled)}
            />
            {form.moshEnabled && (
              <Input
                placeholder={t("hostDetails.moshServerPath") || "mosh-server path"}
                value={form.moshServerPath || ""}
                onChange={(e) => update("moshServerPath", e.target.value || undefined)}
                className="h-10"
              />
            )}

            {/* EternalTerminal */}
            <ToggleRow
              label="EternalTerminal"
              enabled={!!form.etEnabled}
              onToggle={() => update("etEnabled", !form.etEnabled)}
            />
            {form.etEnabled && (
              <Input
                type="number"
                placeholder={t("hostDetails.et.port") || "ET server port (2022)"}
                value={form.etPort ?? ""}
                onChange={(e) => {
                  const v = e.target.value.trim();
                  update("etPort", v === "" ? undefined : Number(v));
                }}
                className="h-10"
              />
            )}

            {/* Backspace behavior — terminal input mapping, lives at the
                bottom of the SSH section so it doesn't get visually
                grouped with the algorithm controls above. */}
            <HostDetailsSettingRow label={t("hostDetails.backspaceBehavior")}>
              <Select
                value={form.backspaceBehavior ?? "default"}
                onValueChange={(v) => update("backspaceBehavior", v === "default" ? undefined : v)}
              >
                <SelectTrigger className="h-8 w-auto text-xs">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="default">{t("hostDetails.backspaceBehavior.default")}</SelectItem>
                  <SelectItem value="ctrl-h">^H (0x08)</SelectItem>
                </SelectContent>
              </Select>
            </HostDetailsSettingRow>
          </HostDetailsSection>
  );
};