NetMesh/components/settings/tabs/SettingsSystemTab.tsx

/**
 * Settings System Tab - System information, temp file management, session logs, and global hotkey
 */
import { ChevronDown, ChevronRight, Download, ExternalLink, FolderOpen, RefreshCw, RotateCcw, Trash2 } from "lucide-react";
import React, { useCallback, useEffect, useState } from "react";
import { useI18n } from "../../../application/i18n/I18nProvider";
import type { AppLockSystemUnlockStatus } from "../../../application/state/useAppLockState";
import type { AppLockSettings, AppLockSettingsChangeError, AppLockTimeoutMinutes } from "../../../domain/appLock";
import { getCredentialProtectionAvailability } from "../../../infrastructure/services/credentialProtection";
import { netcattyBridge } from "../../../infrastructure/services/netcattyBridge";
import type { UpdateState } from '../../../application/state/useUpdateCheck';
import { SessionLogFormat, keyEventToString } from "../../../domain/models";
import type { HttpNetworkProxyMode, HttpNetworkProxySettings } from "../../../domain/httpNetworkProxy";
import { Button } from "../../ui/button";
import { Tooltip, TooltipContent, TooltipTrigger } from "../../ui/tooltip";
import { Toggle, Select, SettingRow, SectionHeader, SettingCard, SettingHint, SettingsAnchor, SettingsTabContent } from "../settings-ui";
import { cn } from "../../../lib/utils";
import { isAppLockOverlayActive } from '../../../infrastructure/appLockOverlayDom';
import { AppLockSettingsSection } from './AppLockSettingsSection';

interface CrashLogFile {
  fileName: string;
  date: string;
  size: number;
  entryCount: number;
}

interface CrashLogEntry {
  timestamp: string;
  source: string;
  message: string;
  stack?: string;
  errorMeta?: Record<string, unknown>;
  extra?: Record<string, unknown>;
  pid?: number;
  platform?: string;
  arch?: string;
  version?: string;
  electronVersion?: string;
  osVersion?: string;
  memoryMB?: { rss: number; heapUsed: number; heapTotal: number };
  activeSessionCount?: number;
  uptimeSeconds?: number;
}

interface TempDirInfo {
  path: string;
  fileCount: number;
  totalSize: number;
}

interface SshDebugLogInfo {
  enabled: boolean;
  path: string;
  exists: boolean;
  size: number;
}

function formatBytes(bytes: number): string {
  if (bytes === 0) return "0 B";
  const k = 1024;
  const sizes = ["B", "KB", "MB", "GB"];
  const i = Math.floor(Math.log(bytes) / Math.log(k));
  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;
}

/** Returns a locale-agnostic relative time string for the given timestamp. */
function formatLastChecked(
  timestamp: number | null,
  t: (key: string) => string,
): string {
  if (!timestamp) return '';
  const diffMs = Date.now() - timestamp;
  if (diffMs < 0) return t('settings.update.lastCheckedJustNow');
  const diffMins = Math.floor(diffMs / 60000);
  if (diffMins < 1) return t('settings.update.lastCheckedJustNow');
  if (diffMins < 60)
    return t('settings.update.lastCheckedMinutesAgo').replace('{n}', String(diffMins));
  const diffHours = Math.floor(diffMins / 60);
  return t('settings.update.lastCheckedHoursAgo').replace('{n}', String(diffHours));
}

interface SettingsSystemTabProps {
  appLockSettings: AppLockSettings;
  setAppLockTimeoutMinutes: (timeoutMinutes: AppLockTimeoutMinutes) => void;
  requestAppLockDisable: (currentPassword: string) => Promise<AppLockSettings | { ok: false; error: AppLockSettingsChangeError }>;
  requestAppLockPasswordChange: (input: {
    currentPassword?: string;
    nextPassword: string;
  }) => Promise<AppLockSettings | { ok: false; error: AppLockSettingsChangeError }>;
  appLockSystemUnlockStatus?: AppLockSystemUnlockStatus;
  setAppLockSystemUnlockEnabled?: (input: {
    enabled: boolean;
    currentPassword?: string;
    autoPromptEnabled?: boolean;
  }) => Promise<AppLockSettings | { ok: false; error: 'empty-current' | 'incorrect' | 'locked' | 'unsupported' | 'unavailable' | 'cancelled' | 'failed' }>;
  sessionLogsEnabled: boolean;
  setSessionLogsEnabled: (enabled: boolean) => void;
  sessionLogsDir: string;
  setSessionLogsDir: (dir: string) => void;
  sessionLogsFormat: SessionLogFormat;
  setSessionLogsFormat: (format: SessionLogFormat) => void;
  sessionLogsTimestampsEnabled: boolean;
  setSessionLogsTimestampsEnabled: (enabled: boolean) => void;
  sshDebugLogsEnabled: boolean;
  setSshDebugLogsEnabled: (enabled: boolean) => void;
  sshDeepLinkEnabled: boolean;
  setSshDeepLinkEnabled: (enabled: boolean) => void;
  jmsDeepLinkEnabled: boolean;
  setJmsDeepLinkEnabled: (enabled: boolean) => void;
  explorerContextMenuEnabled: boolean;
  setExplorerContextMenuEnabled: (enabled: boolean) => void;
  explorerContextMenuSupported: boolean;
  restorePreviousSession: boolean;
  setRestorePreviousSession: (enabled: boolean) => void;
  restoreTerminalCwd: boolean;
  setRestoreTerminalCwd: (enabled: boolean) => void;
  startupLanding: "vault" | "local-terminal";
  setStartupLanding: (landing: "vault" | "local-terminal") => void;
  toggleWindowHotkey: string;
  setToggleWindowHotkey: (hotkey: string) => void;
  closeToTray: boolean;
  setCloseToTray: (enabled: boolean) => void;
  autoLaunchEnabled: boolean;
  setAutoLaunchEnabled: (enabled: boolean) => void;
  autoLaunchSupported: boolean;
  httpNetworkProxy: HttpNetworkProxySettings;
  setHttpNetworkProxy: (settings: HttpNetworkProxySettings | ((prev: HttpNetworkProxySettings) => HttpNetworkProxySettings)) => void;
  hotkeyRegistrationError: string | null;
  globalHotkeyEnabled: boolean;
  setGlobalHotkeyEnabled: (enabled: boolean) => void;
  autoUpdateEnabled: boolean;
  setAutoUpdateEnabled: (enabled: boolean) => void;
  // Unified update state — from useUpdateCheck hook in SettingsPageContent
  updateState: UpdateState;
  checkNow: () => Promise<unknown>;
  installUpdate: () => void;
  openReleasePage: () => void;
  startDownload: () => void;
}

const SettingsSystemTab: React.FC<SettingsSystemTabProps> = ({
  appLockSettings,
  setAppLockTimeoutMinutes,
  requestAppLockDisable,
  requestAppLockPasswordChange,
  appLockSystemUnlockStatus,
  setAppLockSystemUnlockEnabled,
  sessionLogsEnabled,
  setSessionLogsEnabled,
  sessionLogsDir,
  setSessionLogsDir,
  sessionLogsFormat,
  setSessionLogsFormat,
  sessionLogsTimestampsEnabled,
  setSessionLogsTimestampsEnabled,
  sshDebugLogsEnabled,
  setSshDebugLogsEnabled,
  sshDeepLinkEnabled,
  setSshDeepLinkEnabled,
  jmsDeepLinkEnabled,
  setJmsDeepLinkEnabled,
  explorerContextMenuEnabled,
  setExplorerContextMenuEnabled,
  explorerContextMenuSupported,
  restorePreviousSession,
  setRestorePreviousSession,
  restoreTerminalCwd,
  setRestoreTerminalCwd,
  startupLanding,
  setStartupLanding,
  toggleWindowHotkey,
  setToggleWindowHotkey,
  closeToTray,
  setCloseToTray,
  autoLaunchEnabled,
  setAutoLaunchEnabled,
  autoLaunchSupported,
  httpNetworkProxy,
  setHttpNetworkProxy,
  hotkeyRegistrationError,
  globalHotkeyEnabled,
  setGlobalHotkeyEnabled,
  autoUpdateEnabled,
  setAutoUpdateEnabled,
  updateState,
  checkNow,
  installUpdate,
  openReleasePage,
  startDownload,
}) => {
  const { t } = useI18n();
  const isMac = typeof navigator !== "undefined" && /Mac/i.test(navigator.platform);

  const [tempDirInfo, setTempDirInfo] = useState<TempDirInfo | null>(null);
  const [isLoading, setIsLoading] = useState(false);
  const [isClearing, setIsClearing] = useState(false);
  const [clearResult, setClearResult] = useState<{ deletedCount: number; failedCount: number } | null>(null);
  const [isRecordingHotkey, setIsRecordingHotkey] = useState(false);
  const [hotkeyError, setHotkeyError] = useState<string | null>(null);
  const [credentialsAvailable, setCredentialsAvailable] = useState<boolean | null>(null);
  const [isCheckingCredentials, setIsCheckingCredentials] = useState(false);
  const [crashLogs, setCrashLogs] = useState<CrashLogFile[]>([]);
  const [isLoadingCrashLogs, setIsLoadingCrashLogs] = useState(false);
  const [expandedLog, setExpandedLog] = useState<string | null>(null);
  const [logEntries, setLogEntries] = useState<CrashLogEntry[]>([]);
  const [isClearingCrashLogs, setIsClearingCrashLogs] = useState(false);
  const [crashLogClearResult, setCrashLogClearResult] = useState<{ deletedCount: number } | null>(null);
  const [sshDebugLogInfo, setSshDebugLogInfo] = useState<SshDebugLogInfo | null>(null);
  const [isLoadingSshDebugLogInfo, setIsLoadingSshDebugLogInfo] = useState(false);
  const [isClearingSessionLogs, setIsClearingSessionLogs] = useState(false);
  const [sessionLogsClearResult, setSessionLogsClearResult] = useState<{ deletedCount: number; failedCount: number } | null>(null);

  const [appVersion, setAppVersion] = useState('');

  // Load app version on mount
  useEffect(() => {
    const promise = netcattyBridge.get()?.getAppInfo?.();
    if (promise) {
      promise.then((info) => {
        setAppVersion(info?.version ?? '');
      }).catch(() => {});
    }
  }, []);

  const loadTempDirInfo = useCallback(async () => {
    const bridge = netcattyBridge.get();
    if (!bridge?.getTempDirInfo) return;

    setIsLoading(true);
    try {
      const info = await bridge.getTempDirInfo();
      setTempDirInfo(info);
    } catch (err) {
      console.error("[SettingsSystemTab] Failed to get temp dir info:", err);
    } finally {
      setIsLoading(false);
    }
  }, []);

  useEffect(() => {
    loadTempDirInfo();
  }, [loadTempDirInfo]);

  const loadCredentialProtectionStatus = useCallback(async () => {
    setIsCheckingCredentials(true);
    try {
      const available = await getCredentialProtectionAvailability();
      setCredentialsAvailable(available);
    } finally {
      setIsCheckingCredentials(false);
    }
  }, []);

  useEffect(() => {
    void loadCredentialProtectionStatus();
  }, [loadCredentialProtectionStatus]);

  const loadCrashLogs = useCallback(async () => {
    const bridge = netcattyBridge.get();
    if (!bridge?.getCrashLogs) return;
    setIsLoadingCrashLogs(true);
    try {
      const logs = await bridge.getCrashLogs();
      setCrashLogs(logs);
    } catch (err) {
      console.error("[SettingsSystemTab] Failed to load crash logs:", err);
    } finally {
      setIsLoadingCrashLogs(false);
    }
  }, []);

  useEffect(() => {
    void loadCrashLogs();
  }, [loadCrashLogs]);

  const loadSshDebugLogInfo = useCallback(async () => {
    const bridge = netcattyBridge.get();
    if (!bridge?.getSshDebugLogInfo) return;
    setIsLoadingSshDebugLogInfo(true);
    try {
      const info = await bridge.getSshDebugLogInfo();
      setSshDebugLogInfo(info);
    } catch (err) {
      console.error("[SettingsSystemTab] Failed to load SSH debug log info:", err);
    } finally {
      setIsLoadingSshDebugLogInfo(false);
    }
  }, []);

  useEffect(() => {
    void loadSshDebugLogInfo();
  }, [loadSshDebugLogInfo, sshDebugLogsEnabled]);

  const expandRequestRef = React.useRef(0);
  const handleExpandCrashLog = useCallback(async (fileName: string) => {
    if (expandedLog === fileName) {
      setExpandedLog(null);
      setLogEntries([]);
      return;
    }
    const bridge = netcattyBridge.get();
    if (!bridge?.readCrashLog) return;
    const requestId = ++expandRequestRef.current;
    // Optimistically show expanded state while loading
    setExpandedLog(fileName);
    setLogEntries([]);
    try {
      const entries = await bridge.readCrashLog(fileName);
      // Discard if user clicked a different file while awaiting
      if (expandRequestRef.current !== requestId) return;
      setLogEntries(entries);
    } catch (err) {
      if (expandRequestRef.current !== requestId) return;
      console.error("[SettingsSystemTab] Failed to read crash log:", err);
    }
  }, [expandedLog]);

  const handleClearCrashLogs = useCallback(async () => {
    const bridge = netcattyBridge.get();
    if (!bridge?.clearCrashLogs) return;
    setIsClearingCrashLogs(true);
    setCrashLogClearResult(null);
    try {
      const result = await bridge.clearCrashLogs();
      setCrashLogClearResult(result);
      setExpandedLog(null);
      setLogEntries([]);
      // Reload the list so partial failures still show remaining files
      await loadCrashLogs();
    } catch (err) {
      console.error("[SettingsSystemTab] Failed to clear crash logs:", err);
    } finally {
      setIsClearingCrashLogs(false);
    }
  }, [loadCrashLogs]);

  const handleOpenCrashLogsDir = useCallback(async () => {
    const bridge = netcattyBridge.get();
    if (!bridge?.openCrashLogsDir) return;
    await bridge.openCrashLogsDir();
  }, []);

  const handleClearTempFiles = useCallback(async () => {
    const bridge = netcattyBridge.get();
    if (!bridge?.clearTempDir) return;

    setIsClearing(true);
    setClearResult(null);
    try {
      const result = await bridge.clearTempDir();
      setClearResult(result);
      // Refresh info after clearing
      await loadTempDirInfo();
    } catch (err) {
      console.error("[SettingsSystemTab] Failed to clear temp dir:", err);
    } finally {
      setIsClearing(false);
    }
  }, [loadTempDirInfo]);

  const handleOpenTempDir = useCallback(async () => {
    const bridge = netcattyBridge.get();
    if (!tempDirInfo?.path || !bridge?.openTempDir) return;
    await bridge.openTempDir();
  }, [tempDirInfo]);

  const handleSelectSessionLogsDir = useCallback(async () => {
    const bridge = netcattyBridge.get();
    if (!bridge?.selectSessionLogsDir) return;

    try {
      const result = await bridge.selectSessionLogsDir();
      if (result.success && result.directory) {
        setSessionLogsDir(result.directory);
      }
    } catch (err) {
      console.error("[SettingsSystemTab] Failed to select directory:", err);
    }
  }, [setSessionLogsDir]);

  const handleOpenSessionLogsDir = useCallback(async () => {
    const bridge = netcattyBridge.get();
    if (!sessionLogsDir || !bridge?.openSessionLogsDir) return;

    try {
      await bridge.openSessionLogsDir(sessionLogsDir);
    } catch (err) {
      console.error("[SettingsSystemTab] Failed to open directory:", err);
    }
  }, [sessionLogsDir]);

  const handleClearSessionLogs = useCallback(async () => {
    const bridge = netcattyBridge.get();
    if (!sessionLogsDir || !bridge?.clearSessionLogsDir) return;
    if (!window.confirm(t("settings.sessionLogs.clearConfirm"))) return;

    setIsClearingSessionLogs(true);
    setSessionLogsClearResult(null);
    try {
      const result = await bridge.clearSessionLogsDir(sessionLogsDir);
      if (result.success) {
        setSessionLogsClearResult({ deletedCount: result.deletedCount, failedCount: result.failedCount });
      }
    } catch (err) {
      console.error("[SettingsSystemTab] Failed to clear session logs:", err);
    } finally {
      setIsClearingSessionLogs(false);
    }
  }, [sessionLogsDir, t]);

  const handleOpenSshDebugLogDir = useCallback(async () => {
    const bridge = netcattyBridge.get();
    if (!bridge?.openSshDebugLogDir) return;
    await bridge.openSshDebugLogDir();
  }, []);

  // Handle global toggle hotkey recording
  const cancelHotkeyRecording = useCallback(() => {
    setIsRecordingHotkey(false);
  }, []);

  const handleResetHotkey = useCallback(() => {
    // Reset to default hotkey (Ctrl+` or ⌃+` on Mac)
    const defaultHotkey = isMac ? '⌃ + `' : 'Ctrl + `';
    setToggleWindowHotkey(defaultHotkey);
    setHotkeyError(null);
  }, [isMac, setToggleWindowHotkey]);

  // Hotkey recording effect
  useEffect(() => {
    if (!isRecordingHotkey) return;

    const handleKeyDown = (e: KeyboardEvent) => {
      if (isAppLockOverlayActive()) return;
      e.preventDefault();
      e.stopPropagation();

      if (e.key === "Escape") {
        cancelHotkeyRecording();
        return;
      }

      // Ignore modifier-only keys
      if (["Meta", "Control", "Alt", "Shift"].includes(e.key)) return;

      const keyString = keyEventToString(e, isMac);
      setToggleWindowHotkey(keyString);
      setHotkeyError(null);
      cancelHotkeyRecording();
    };

    const handleClick = () => {
      cancelHotkeyRecording();
    };

    const timer = setTimeout(() => {
      window.addEventListener("click", handleClick, true);
    }, 100);

    window.addEventListener("keydown", handleKeyDown, true);
    return () => {
      clearTimeout(timer);
      window.removeEventListener("keydown", handleKeyDown, true);
      window.removeEventListener("click", handleClick, true);
    };
  }, [isRecordingHotkey, isMac, setToggleWindowHotkey, cancelHotkeyRecording]);

  const formatOptions = [
    { value: "txt", label: t("settings.sessionLogs.formatTxt") },
    { value: "raw", label: t("settings.sessionLogs.formatRaw") },
    { value: "html", label: t("settings.sessionLogs.formatHtml") },
  ];
  return (
    <SettingsTabContent value="system">
          <SectionHeader title={t('settings.update.title')} anchorId="system-update" />
            <SettingCard className="space-y-3 py-4">
              {/* Current version */}
              <div className="flex items-center justify-between">
                <span className="text-sm text-muted-foreground">
                  {t('settings.update.currentVersion')}
                </span>
                <span className="text-sm font-mono">
                  {updateState.currentVersion || appVersion || '...'}
                </span>
              </div>

              {/* Status message — priority: autoDownloadStatus > isChecking/manualCheckStatus */}
              {updateState.autoDownloadStatus === 'downloading' && (
                <div className="space-y-2">
                  <p className="text-sm text-muted-foreground">
                    {t('settings.update.downloading').replace('{percent}', String(updateState.downloadPercent))}
                  </p>
                  <div className="h-2 w-full rounded-full bg-muted overflow-hidden">
                    <div
                      className="h-full rounded-full bg-primary transition-all duration-300"
                      style={{ width: `${updateState.downloadPercent}%` }}
                    />
                  </div>
                </div>
              )}
              {updateState.autoDownloadStatus === 'ready' && (
                <p className="text-sm text-green-600 dark:text-green-400">
                  {t('settings.update.readyToInstall')}
                </p>
              )}
              {updateState.autoDownloadStatus === 'error' && (
                <p className="text-sm text-destructive">
                  {updateState.downloadError || t('settings.update.error')}
                </p>
              )}
              {updateState.autoDownloadStatus === 'idle' && (
                <>
                  {updateState.manualCheckStatus === 'up-to-date' && (
                    <p className="text-sm text-green-600 dark:text-green-400">
                      {t('settings.update.upToDate')}
                    </p>
                  )}
                  {(updateState.manualCheckStatus === 'available' || (updateState.manualCheckStatus === 'idle' && updateState.hasUpdate)) && (
                    <p className="text-sm text-blue-600 dark:text-blue-400">
                      {t('settings.update.available').replace(
                        '{version}',
                        updateState.latestRelease?.version ?? ''
                      )}
                    </p>
                  )}
                  {updateState.manualCheckStatus === 'error' && (
                    <p className="text-sm text-destructive">
                      {updateState.error || t('settings.update.error')}
                    </p>
                  )}
                </>
              )}

              {/* Action buttons */}
              <div className="flex items-center gap-2 pt-1">
                {/* Checking spinner — shown when isChecking OR manualCheckStatus=checking, but no active download */}
                {(updateState.autoDownloadStatus === 'idle' || updateState.autoDownloadStatus === 'error') &&
                  (updateState.isChecking || updateState.manualCheckStatus === 'checking') ? (
                  <Button variant="outline" size="sm" disabled>
                    <RefreshCw size={14} className="mr-1.5 animate-spin" />
                    {t('settings.update.checking')}
                  </Button>
                ) : (updateState.autoDownloadStatus === 'idle' || updateState.autoDownloadStatus === 'error') ? (
                  /* Check button — shown in idle states and in error state (allows retry) */
                  <Button
                    variant="outline"
                    size="sm"
                    onClick={() => void checkNow()}
                  >
                    <RefreshCw size={14} className="mr-1.5" />
                    {t('settings.update.checkForUpdates')}
                  </Button>
                ) : null}

                {/* Install button — shown when download is complete */}
                {updateState.autoDownloadStatus === 'ready' && (
                  <Button variant="default" size="sm" onClick={installUpdate}>
                    <RotateCcw size={14} className="mr-1.5" />
                    {t('settings.update.restartNow')}
                  </Button>
                )}

                {/* Open releases — shown on download error */}
                {updateState.autoDownloadStatus === 'error' && (
                  <Button variant="ghost" size="sm" onClick={openReleasePage}>
                    <ExternalLink size={14} className="mr-1.5" />
                    {t('settings.update.manualDownload')}
                  </Button>
                )}

                {/* Download button — shown when update found and no download in progress */}
                {updateState.autoDownloadStatus === 'idle' &&
                  updateState.manualCheckStatus === 'available' && (
                  <Button variant="outline" size="sm" onClick={startDownload}>
                    <Download size={14} className="mr-1.5" />
                    {t('update.downloadNow')}
                  </Button>
                )}

                {/* Open releases — fallback for unsupported platforms or check errors */}
                {updateState.autoDownloadStatus === 'idle' &&
                  (updateState.manualCheckStatus === 'available' || updateState.manualCheckStatus === 'error' || (updateState.manualCheckStatus === 'idle' && updateState.hasUpdate)) && (
                  <Button variant="ghost" size="sm" onClick={openReleasePage}>
                    <ExternalLink size={14} className="mr-1.5" />
                    {t('settings.update.manualDownload')}
                  </Button>
                )}
              </div>
              <SettingRow
                anchorId="system-auto-update"
                label={t('settings.update.autoUpdateEnabled')}
                description={t('settings.update.autoUpdateEnabledDesc')}
              >
                <Toggle
                  checked={autoUpdateEnabled}
                  onChange={setAutoUpdateEnabled}
                />
              </SettingRow>
            </SettingCard>
            <SettingHint>
              {updateState.lastCheckedAt && (
                <span>
                  {t('settings.update.lastCheckedPrefix')}
                  {formatLastChecked(updateState.lastCheckedAt, t)}
                  {'　'}
                </span>
              )}
              {t('settings.update.hint')}
            </SettingHint>

          <SectionHeader title={t("settings.autoLaunch.title")} />
            <SettingCard className="py-4">
              <SettingRow
                anchorId="system-auto-launch"
                label={t("settings.autoLaunch.enabled")}
                description={
                  autoLaunchSupported
                    ? t("settings.autoLaunch.enabledDesc")
                    : t("settings.autoLaunch.unsupportedDesc")
                }
              >
                <Toggle
                  checked={autoLaunchEnabled}
                  onChange={setAutoLaunchEnabled}
                  disabled={!autoLaunchSupported}
                />
              </SettingRow>
            </SettingCard>

          <SectionHeader title={t("settings.system.networkProxy.title")} />
            <SettingCard className="space-y-4 py-4">
              <SettingRow
                anchorId="system-network-proxy-mode"
                label={t("settings.system.networkProxy.mode")}
                description={t("settings.system.networkProxy.description")}
              >
                <Select
                  value={httpNetworkProxy.mode}
                  onChange={(value) => {
                    const mode = value as HttpNetworkProxyMode;
                    setHttpNetworkProxy((prev) => ({ ...prev, mode }));
                  }}
                  options={[
                    { value: "system", label: t("settings.system.networkProxy.mode.system") },
                    { value: "direct", label: t("settings.system.networkProxy.mode.direct") },
                    { value: "custom", label: t("settings.system.networkProxy.mode.custom") },
                  ]}
                />
              </SettingRow>
              {httpNetworkProxy.mode === "custom" && (
                <>
                  <SettingRow
                    label={t("settings.system.networkProxy.url")}
                    description={t("settings.system.networkProxy.url.desc")}
                  >
                    <input
                      type="text"
                      value={httpNetworkProxy.url}
                      onChange={(e) => {
                        const url = e.target.value;
                        setHttpNetworkProxy((prev) => ({ ...prev, url }));
                      }}
                      placeholder={t("settings.system.networkProxy.url.placeholder")}
                      className="w-64 h-9 rounded-md border border-input bg-background px-3 text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
                      spellCheck={false}
                      autoComplete="off"
                    />
                  </SettingRow>
                  <SettingRow
                    label={t("settings.system.networkProxy.bypass")}
                    description={t("settings.system.networkProxy.bypass.desc")}
                  >
                    <input
                      type="text"
                      value={httpNetworkProxy.bypass}
                      onChange={(e) => {
                        const bypass = e.target.value;
                        setHttpNetworkProxy((prev) => ({ ...prev, bypass }));
                      }}
                      placeholder={t("settings.system.networkProxy.bypass.placeholder")}
                      className="w-64 h-9 rounded-md border border-input bg-background px-3 text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
                      spellCheck={false}
                      autoComplete="off"
                    />
                  </SettingRow>
                </>
              )}
            </SettingCard>
            <SettingHint>
              {t("settings.system.networkProxy.hint")}
            </SettingHint>

          <AppLockSettingsSection
            appLockSettings={appLockSettings}
            setAppLockTimeoutMinutes={setAppLockTimeoutMinutes}
            requestAppLockDisable={requestAppLockDisable}
            requestAppLockPasswordChange={requestAppLockPasswordChange}
            appLockSystemUnlockStatus={appLockSystemUnlockStatus}
            setAppLockSystemUnlockEnabled={setAppLockSystemUnlockEnabled}
          />

          <SectionHeader title={t("settings.system.credentials.title")} />
            <SettingsAnchor anchorId="system-credentials">
            <SettingCard className="space-y-3 py-4">
              <div className="flex items-start justify-between gap-4">
                <div>
                  <p className="text-sm text-muted-foreground">
                    {t("settings.system.credentials.status")}
                  </p>
                  <p
                    className={cn(
                      "text-sm font-medium mt-1",
                      credentialsAvailable === true && "text-emerald-600 dark:text-emerald-400",
                      credentialsAvailable === false && "text-amber-600 dark:text-amber-400",
                    )}
                  >
                    {isCheckingCredentials
                      ? t("settings.system.credentials.checking")
                      : credentialsAvailable === true
                        ? t("settings.system.credentials.available")
                        : credentialsAvailable === false
                          ? t("settings.system.credentials.unavailable")
                          : t("settings.system.credentials.unknown")}
                  </p>
                </div>
                <Button
                  variant="outline"
                  size="sm"
                  onClick={loadCredentialProtectionStatus}
                  disabled={isCheckingCredentials}
                  className="gap-1.5"
                >
                  <RefreshCw size={14} className={isCheckingCredentials ? "animate-spin" : ""} />
                  {t("settings.system.refresh")}
                </Button>
              </div>

              {credentialsAvailable === false && (
                <p className="text-xs text-amber-700 dark:text-amber-400">
                  {t("settings.system.credentials.unavailableHint")}
                </p>
              )}

              <p className="text-xs text-muted-foreground">
                {t("settings.system.credentials.portabilityHint")}
              </p>
            </SettingCard>
            </SettingsAnchor>

          <SectionHeader title={t("settings.system.crashLogs.title")} />
            <SettingsAnchor anchorId="system-crash-logs">
            <SettingCard className="space-y-3 py-4">
              <p className="text-sm text-muted-foreground">
                {t("settings.system.crashLogs.description")}
              </p>

              {crashLogs.length === 0 && !isLoadingCrashLogs && (
                <p className="text-sm text-muted-foreground italic">
                  {t("settings.system.crashLogs.noLogs")}
                </p>
              )}

              {crashLogs.length > 0 && (
                <div className="space-y-2">
                  {crashLogs.map((log) => (
                    <div key={log.fileName} className="border border-border/60 rounded-md overflow-hidden">
                      <button
                        onClick={() => handleExpandCrashLog(log.fileName)}
                        className="w-full flex items-center justify-between px-3 py-2 text-sm hover:bg-muted/50 transition-colors"
                      >
                        <div className="flex items-center gap-2">
                          {expandedLog === log.fileName ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
                          <span className="font-mono">{log.date}</span>
                          <span className="text-muted-foreground">
                            ({t("settings.system.crashLogs.entries").replace("{count}", String(log.entryCount))})
                          </span>
                        </div>
                        <span className="text-xs text-muted-foreground">{formatBytes(log.size)}</span>
                      </button>

                      {expandedLog === log.fileName && logEntries.length > 0 && (
                        <div className="border-t border-border/60 max-h-64 overflow-y-auto">
                          {logEntries.map((entry, idx) => (
                            <div key={idx} className="px-3 py-2 text-xs border-b border-border/30 last:border-b-0 space-y-1">
                              <div className="flex items-center gap-3 flex-wrap">
                                <span className="font-mono text-muted-foreground">
                                  {new Date(entry.timestamp).toLocaleTimeString()}
                                </span>
                                <span className="px-1.5 py-0.5 rounded bg-destructive/10 text-destructive font-medium">
                                  {entry.source}
                                </span>
                              </div>
                              <p className="font-mono break-all">{entry.message}</p>
                              {entry.errorMeta && Object.keys(entry.errorMeta).length > 0 && (
                                <div className="flex items-center gap-2 flex-wrap">
                                  {Object.entries(entry.errorMeta).map(([k, v]) => (
                                    <span key={k} className="px-1.5 py-0.5 rounded bg-muted font-mono">
                                      {k}={String(v)}
                                    </span>
                                  ))}
                                </div>
                              )}
                              {entry.extra && Object.keys(entry.extra).length > 0 && (
                                <div className="flex items-center gap-2 flex-wrap">
                                  {Object.entries(entry.extra).map(([k, v]) => (
                                    <span key={k} className="px-1.5 py-0.5 rounded bg-muted font-mono">
                                      {k}={String(v)}
                                    </span>
                                  ))}
                                </div>
                              )}
                              {(() => {
                                const parts: string[] = [];
                                if (entry.version) parts.push(`v${entry.version}`);
                                if (entry.electronVersion) parts.push(`Electron ${entry.electronVersion}`);
                                if (entry.platform) parts.push(`${entry.platform}/${entry.arch}`);
                                if (entry.osVersion) parts.push(`OS ${entry.osVersion}`);
                                if (entry.pid) parts.push(`PID ${entry.pid}`);
                                if (entry.activeSessionCount != null && entry.activeSessionCount >= 0) parts.push(`Sessions: ${entry.activeSessionCount}`);
                                if (entry.memoryMB) parts.push(`RAM: ${entry.memoryMB.rss}MB`);
                                if (entry.uptimeSeconds != null) parts.push(`Uptime: ${entry.uptimeSeconds}s`);
                                const text = parts.join('  ');
                                return text ? (
                                  <Tooltip>
                                    <TooltipTrigger asChild>
                                      <div className="text-muted-foreground truncate cursor-default">
                                        {text}
                                      </div>
                                    </TooltipTrigger>
                                    <TooltipContent>{text}</TooltipContent>
                                  </Tooltip>
                                ) : null;
                              })()}
                              {entry.stack && (
                                <pre className="mt-1 p-2 bg-muted rounded text-[11px] leading-relaxed overflow-x-auto whitespace-pre-wrap break-all text-muted-foreground">
                                  {entry.stack}
                                </pre>
                              )}
                            </div>
                          ))}
                        </div>
                      )}
                    </div>
                  ))}
                </div>
              )}

              {/* Actions */}
              <div className="flex items-center gap-2 pt-2">
                <Button
                  variant="outline"
                  size="sm"
                  onClick={loadCrashLogs}
                  disabled={isLoadingCrashLogs}
                  className="gap-1.5"
                >
                  <RefreshCw size={14} className={isLoadingCrashLogs ? "animate-spin" : ""} />
                  {t("settings.system.refresh")}
                </Button>
                <Button
                  variant="outline"
                  size="sm"
                  onClick={handleClearCrashLogs}
                  disabled={isClearingCrashLogs || crashLogs.length === 0}
                  className="gap-1.5 text-destructive hover:text-destructive hover:bg-destructive/10"
                >
                  <Trash2 size={14} />
                  {t("settings.system.crashLogs.clear")}
                </Button>
                <Tooltip>
                  <TooltipTrigger asChild>
                    <Button
                      variant="ghost"
                      size="icon"
                      onClick={handleOpenCrashLogsDir}
                    >
                      <FolderOpen size={16} />
                    </Button>
                  </TooltipTrigger>
                  <TooltipContent>{t("settings.system.openFolder")}</TooltipContent>
                </Tooltip>
              </div>

              {crashLogClearResult && (
                <p className="text-sm text-muted-foreground">
                  {t("settings.system.crashLogs.cleared").replace("{count}", String(crashLogClearResult.deletedCount))}
                </p>
              )}
            </SettingCard>

            <SettingHint>
              {t("settings.system.crashLogs.hint")}
            </SettingHint>
            </SettingsAnchor>

          <SectionHeader title={t("settings.system.tempDirectory")} />
            <SettingsAnchor anchorId="system-temp-directory">
            <SettingCard className="space-y-3 py-4">
              {/* Path */}
              <div className="flex items-start justify-between gap-4">
                <div className="min-w-0 flex-1">
                  <p className="text-sm text-muted-foreground">{t("settings.system.location")}</p>
                  <p className="text-sm font-mono mt-1 break-all">
                    {isLoading ? "..." : (tempDirInfo?.path ?? "-")}
                  </p>
                </div>
                <Tooltip>
                  <TooltipTrigger asChild>
                    <Button
                      variant="ghost"
                      size="icon"
                      className="shrink-0"
                      onClick={handleOpenTempDir}
                      disabled={!tempDirInfo?.path}
                    >
                      <FolderOpen size={16} />
                    </Button>
                  </TooltipTrigger>
                  <TooltipContent>{t("settings.system.openFolder")}</TooltipContent>
                </Tooltip>
              </div>

              {/* Stats */}
              <div className="flex items-center gap-6 text-sm">
                <div>
                  <span className="text-muted-foreground">{t("settings.system.fileCount")}:</span>{" "}
                  <span className="font-medium">
                    {isLoading ? "..." : (tempDirInfo?.fileCount ?? 0)}
                  </span>
                </div>
                <div>
                  <span className="text-muted-foreground">{t("settings.system.totalSize")}:</span>{" "}
                  <span className="font-medium">
                    {isLoading ? "..." : formatBytes(tempDirInfo?.totalSize ?? 0)}
                  </span>
                </div>
              </div>

              {/* Actions */}
              <div className="flex items-center gap-2 pt-2">
                <Button
                  variant="outline"
                  size="sm"
                  onClick={loadTempDirInfo}
                  disabled={isLoading}
                  className="gap-1.5"
                >
                  <RefreshCw size={14} className={isLoading ? "animate-spin" : ""} />
                  {t("settings.system.refresh")}
                </Button>
                <Button
                  variant="outline"
                  size="sm"
                  onClick={handleClearTempFiles}
                  disabled={isClearing || (tempDirInfo?.fileCount ?? 0) === 0}
                  className="gap-1.5 text-destructive hover:text-destructive hover:bg-destructive/10"
                >
                  <Trash2 size={14} />
                  {isClearing ? t("settings.system.clearing") : t("settings.system.clearTempFiles")}
                </Button>
              </div>

              {/* Clear Result */}
              {clearResult && (
                <p className="text-sm text-muted-foreground">
                  {t("settings.system.clearResult", {
                    deleted: clearResult.deletedCount,
                    failed: clearResult.failedCount,
                  })}
                </p>
              )}
            </SettingCard>

            <SettingHint>
              {t("settings.system.tempDirectoryHint")}
            </SettingHint>
            </SettingsAnchor>

          <SectionHeader title={t("settings.sessionRestore.title")} />
            <SettingCard className="space-y-4 py-4">
              <SettingRow
                anchorId="system-startup-landing"
                label={t("settings.sessionRestore.startupLanding")}
                description={t("settings.sessionRestore.startupLandingDesc")}
              >
                <Select
                  value={startupLanding}
                  onChange={(value) => {
                    if (value === "vault" || value === "local-terminal") {
                      setStartupLanding(value);
                    }
                  }}
                  options={[
                    { value: "vault", label: t("settings.sessionRestore.startupLanding.vault") },
                    { value: "local-terminal", label: t("settings.sessionRestore.startupLanding.localTerminal") },
                  ]}
                />
              </SettingRow>
              <SettingRow
                anchorId="system-session-restore"
                label={t("settings.sessionRestore.restorePreviousSession")}
                description={t("settings.sessionRestore.restorePreviousSessionDesc")}
              >
                <Toggle
                  checked={restorePreviousSession}
                  onChange={setRestorePreviousSession}
                />
              </SettingRow>
              <SettingRow
                anchorId="system-restore-terminal-cwd"
                label={t("settings.sessionRestore.restoreTerminalCwd")}
                description={t("settings.sessionRestore.restoreTerminalCwdDesc")}
              >
                <Toggle
                  checked={restoreTerminalCwd}
                  onChange={setRestoreTerminalCwd}
                />
              </SettingRow>
            </SettingCard>

          <SectionHeader title={t("settings.sessionLogs.title")} />
            <SettingCard className="space-y-4 py-4">
              {/* Enable Toggle */}
              <SettingRow
                anchorId="system-session-logs-enable"
                label={t("settings.sessionLogs.enableAutoSave")}
                description={t("settings.sessionLogs.enableAutoSaveDesc")}
              >
                <Toggle
                  checked={sessionLogsEnabled}
                  onChange={setSessionLogsEnabled}
                />
              </SettingRow>

              {/* Directory Selection */}
              <div className="space-y-2">
                <div className="flex items-center gap-2">
                  <span className="text-sm font-medium">{t("settings.sessionLogs.directory")}</span>
                </div>
                <div className="flex items-center gap-2">
                  <div className="flex-1 min-w-0">
                    <div className="bg-background border border-input rounded-md px-3 py-2 text-sm font-mono truncate">
                      {sessionLogsDir || t("settings.sessionLogs.noDirectory")}
                    </div>
                  </div>
                  <Button
                    variant="outline"
                    size="sm"
                    onClick={handleSelectSessionLogsDir}
                    className="shrink-0"
                  >
                    {t("settings.sessionLogs.browse")}
                  </Button>
                  {sessionLogsDir && (
                    <Tooltip>
                      <TooltipTrigger asChild>
                        <Button
                          variant="ghost"
                          size="icon"
                          onClick={handleOpenSessionLogsDir}
                          className="shrink-0"
                        >
                          <FolderOpen size={16} />
                        </Button>
                      </TooltipTrigger>
                      <TooltipContent>{t("settings.sessionLogs.openFolder")}</TooltipContent>
                    </Tooltip>
                  )}
                </div>
                <p className="text-xs text-muted-foreground">
                  {t("settings.sessionLogs.directoryHint")}
                </p>
              </div>

              {/* Format Selection */}
              <SettingRow
                label={t("settings.sessionLogs.format")}
                description={t("settings.sessionLogs.formatDesc")}
              >
                <Select
                  value={sessionLogsFormat}
                  options={formatOptions}
                  onChange={(val) => setSessionLogsFormat(val as SessionLogFormat)}
                  className="w-44"
                />
              </SettingRow>

              <SettingRow
                label={t("settings.sessionLogs.timestamps")}
                description={t("settings.sessionLogs.timestampsDesc")}
              >
                <Toggle
                  checked={sessionLogsTimestampsEnabled}
                  onChange={setSessionLogsTimestampsEnabled}
                />
              </SettingRow>

              {/* Clear All Logs */}
              <div className="space-y-2 pt-2 border-t border-border/60">
                <div className="flex items-center justify-between gap-4">
                  <div>
                    <p className="text-sm font-medium">{t("settings.sessionLogs.clearAll")}</p>
                    <p className="text-xs text-muted-foreground">{t("settings.sessionLogs.clearAllDesc")}</p>
                  </div>
                  <Button
                    variant="outline"
                    size="sm"
                    onClick={handleClearSessionLogs}
                    disabled={isClearingSessionLogs || !sessionLogsDir}
                    className="gap-1.5 shrink-0 text-destructive hover:text-destructive hover:bg-destructive/10"
                  >
                    <Trash2 size={14} />
                    {isClearingSessionLogs ? t("settings.system.clearing") : t("settings.sessionLogs.clearAll")}
                  </Button>
                </div>
                {sessionLogsClearResult && (
                  <p className="text-sm text-muted-foreground">
                    {t("settings.system.clearResult", {
                      deleted: sessionLogsClearResult.deletedCount,
                      failed: sessionLogsClearResult.failedCount,
                    })}
                  </p>
                )}
              </div>
            </SettingCard>

            <SettingHint>
              {t("settings.sessionLogs.hint")}
            </SettingHint>

          <SectionHeader title={t('settings.sshDeepLink.title')} />
            <SettingCard>
              <SettingRow
                anchorId="system-ssh-deep-link"
                label={t('settings.sshDeepLink.enable')}
                description={t('settings.sshDeepLink.enableDesc')}
              >
                <Toggle
                  checked={sshDeepLinkEnabled}
                  onChange={setSshDeepLinkEnabled}
                  ariaLabel={t('settings.sshDeepLink.enable')}
                />
              </SettingRow>
            </SettingCard>

          <SectionHeader title={t('settings.jmsDeepLink.title')} />
            <SettingCard>
              <SettingRow
                anchorId="system-jms-deep-link"
                label={t('settings.jmsDeepLink.enable')}
                description={t('settings.jmsDeepLink.enableDesc')}
              >
                <Toggle
                  checked={jmsDeepLinkEnabled}
                  onChange={setJmsDeepLinkEnabled}
                  ariaLabel={t('settings.jmsDeepLink.enable')}
                />
              </SettingRow>
            </SettingCard>

          {explorerContextMenuSupported ? (
            <>
              <SectionHeader title={t('settings.explorerContextMenu.title')} />
              <SettingCard>
                <SettingRow
                  anchorId="system-explorer-context-menu"
                  label={t('settings.explorerContextMenu.enable')}
                  description={t('settings.explorerContextMenu.enableDesc')}
                >
                  <Toggle
                    checked={explorerContextMenuEnabled}
                    onChange={setExplorerContextMenuEnabled}
                    ariaLabel={t('settings.explorerContextMenu.enable')}
                  />
                </SettingRow>
              </SettingCard>
            </>
          ) : (
            <SettingsAnchor anchorId="system-explorer-context-menu" />
          )}

          <SectionHeader title={t("settings.sshDebugLogs.title")} />
            <SettingCard className="min-w-0 max-w-full overflow-hidden space-y-4 py-4">
              <SettingRow
                anchorId="system-ssh-debug-logs"
                label={t("settings.sshDebugLogs.enable")}
                description={t("settings.sshDebugLogs.enableDesc")}
              >
                <Toggle
                  checked={sshDebugLogsEnabled}
                  onChange={setSshDebugLogsEnabled}
                />
              </SettingRow>

              <div className="space-y-2">
                <span className="text-sm font-medium">{t("settings.sshDebugLogs.location")}</span>
                <div className="grid w-full min-w-0 max-w-full grid-cols-[minmax(0,1fr)_auto_auto] items-center gap-2">
                  <div className="min-w-0 overflow-hidden">
                    <div
                      className="w-full min-w-0 overflow-hidden truncate rounded-md border border-input bg-background px-3 py-2 font-mono text-sm"
                      title={isLoadingSshDebugLogInfo ? "..." : (sshDebugLogInfo?.path || "-")}
                    >
                      {isLoadingSshDebugLogInfo ? "..." : (sshDebugLogInfo?.path || "-")}
                    </div>
                  </div>
                  <Button
                    variant="outline"
                    size="sm"
                    onClick={loadSshDebugLogInfo}
                    disabled={isLoadingSshDebugLogInfo}
                    className="shrink-0 gap-1.5"
                  >
                    <RefreshCw size={14} className={isLoadingSshDebugLogInfo ? "animate-spin" : ""} />
                    {t("settings.system.refresh")}
                  </Button>
                  <Tooltip>
                    <TooltipTrigger asChild>
                      <Button
                        variant="ghost"
                        size="icon"
                        onClick={handleOpenSshDebugLogDir}
                        className="shrink-0"
                      >
                        <FolderOpen size={16} />
                      </Button>
                    </TooltipTrigger>
                    <TooltipContent>{t("settings.system.openFolder")}</TooltipContent>
                  </Tooltip>
                </div>
                <div className="flex items-center gap-3 text-xs text-muted-foreground">
                  <span>
                    {t("settings.sshDebugLogs.status")}:{" "}
                    {sshDebugLogsEnabled ? t("settings.sshDebugLogs.statusOn") : t("settings.sshDebugLogs.statusOff")}
                  </span>
                  <span>
                    {t("settings.sshDebugLogs.size")}: {formatBytes(sshDebugLogInfo?.size ?? 0)}
                  </span>
                </div>
              </div>
            </SettingCard>

            <SettingHint>
              {t("settings.sshDebugLogs.hint")}
            </SettingHint>

          <SectionHeader title={t("settings.globalHotkey.title")} />
            <SettingCard className="space-y-4 py-4">
              {/* Enable/Disable Global Hotkey */}
              <SettingRow
                anchorId="system-global-hotkey-enabled"
                label={t('settings.globalHotkey.enabled')}
                description={t('settings.globalHotkey.enabledDesc')}
              >
                <Toggle
                  checked={globalHotkeyEnabled}
                  onChange={setGlobalHotkeyEnabled}
                />
              </SettingRow>

              <div className={cn(!globalHotkeyEnabled && "opacity-50 pointer-events-none")}>
                {/* Toggle Window Hotkey */}
                <SettingRow
                  anchorId="system-global-hotkey-toggle"
                  label={t("settings.globalHotkey.toggleWindow")}
                  description={t("settings.globalHotkey.toggleWindowDesc")}
                >
                  <div className="flex items-center gap-2">
                    <button
                      onClick={(e) => {
                        e.stopPropagation();
                        setIsRecordingHotkey(true);
                      }}
                      className={cn(
                        "px-3 py-1.5 text-sm font-mono rounded border transition-colors min-w-[100px] text-center",
                        isRecordingHotkey
                          ? "border-primary bg-primary/10 animate-pulse"
                          : "border-border hover:border-primary/50",
                      )}
                    >
                      {isRecordingHotkey
                        ? t("settings.shortcuts.recording")
                        : toggleWindowHotkey || t("settings.globalHotkey.notSet")}
                    </button>
                    {toggleWindowHotkey && (
                      <Tooltip>
                        <TooltipTrigger asChild>
                          <button
                            onClick={handleResetHotkey}
                            className="p-1 hover:bg-muted rounded"
                          >
                            <RotateCcw size={14} />
                          </button>
                        </TooltipTrigger>
                        <TooltipContent>{t("settings.globalHotkey.reset")}</TooltipContent>
                      </Tooltip>
                    )}
                  </div>
                </SettingRow>
                {(hotkeyError || hotkeyRegistrationError) && (
                  <p className="text-sm text-destructive mt-2">{hotkeyError || hotkeyRegistrationError}</p>
                )}
              </div>

              {/* Close to Tray */}
              <SettingRow
                anchorId="system-close-to-tray"
                label={t("settings.globalHotkey.closeToTray")}
                description={t("settings.globalHotkey.closeToTrayDesc")}
              >
                <Toggle
                  checked={closeToTray}
                  onChange={setCloseToTray}
                />
              </SettingRow>
            </SettingCard>

            <SettingHint>
              {t("settings.globalHotkey.hint")}
            </SettingHint>
    </SettingsTabContent>
  );
};

export default React.memo(SettingsSystemTab);