/**
 * Settings Page - Standalone settings window content
 * This component is rendered in a separate Electron window
 */
import { AppWindow, Cloud, FileType, HardDrive, Keyboard, Palette, Sparkles, TerminalSquare, X } from "lucide-react";
import React, { useCallback, useEffect, useMemo, useState } from "react";
import { useSettingsState } from "../application/state/useSettingsState";
import { useAISettingsState } from "../application/state/useAISettingsState";
import { useAvailableFonts } from "../application/state/fontStore";
import { usePortForwardingState } from "../application/state/usePortForwardingState";
import { useVaultState } from "../application/state/useVaultState";
import { useWindowControls } from "../application/state/useWindowControls";
import { useUpdateCheck } from "../application/state/useUpdateCheck";
import { I18nProvider, useI18n } from "../application/i18n/I18nProvider";
import { sanitizePortForwardingRulesForSync } from "../application/syncPayload";
import { toast } from "./ui/toast";
import SettingsApplicationTab from "./SettingsApplicationTab";
import SettingsAppearanceTab from "./settings/tabs/SettingsAppearanceTab";
import SettingsFileAssociationsTab from "./settings/tabs/SettingsFileAssociationsTab";
import SettingsShortcutsTab from "./settings/tabs/SettingsShortcutsTab";
import SettingsAITab from "./settings/tabs/SettingsAITab";
import SettingsSyncTab from "./settings/tabs/SettingsSyncTab";
import SettingsTerminalTab from "./settings/tabs/SettingsTerminalTab";
import SettingsSystemTab from "./settings/tabs/SettingsSystemTab";
import { Tabs, TabsList, TabsTrigger } from "./ui/tabs";
import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";

const isMac = typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform);

class AITabErrorBoundary extends React.Component<
  { children: React.ReactNode },
  { error: Error | null }
> {
  state: { error: Error | null } = { error: null };
  static getDerivedStateFromError(error: Error) {
    return { error };
  }
  render() {
    if (this.state.error) {
      return (
        <div style={{ padding: 32, color: "#f87171", fontFamily: "monospace", whiteSpace: "pre-wrap" }}>
          <h3 style={{ marginBottom: 8 }}>AI Settings Error</h3>
          <div>{this.state.error.message}</div>
          <div style={{ marginTop: 8, fontSize: 12, color: "#888" }}>{this.state.error.stack}</div>
        </div>
      );
    }
    return (this.props as { children: React.ReactNode }).children;
  }
}

type SettingsState = ReturnType<typeof useSettingsState>;

const settingsTabTriggerClassName =
    "w-full justify-start gap-2 px-3 py-2 text-sm data-[state=active]:bg-background hover:bg-background/60 rounded-md transition-colors overflow-hidden";
const settingsTabIconClassName = "shrink-0";
const settingsTabLabelClassName = "min-w-0 truncate";

type TerminalTabSettingsProps = Pick<
    SettingsState,
    | 'terminalThemeId'
    | 'setTerminalThemeId'
    | 'followAppTerminalTheme'
    | 'setFollowAppTerminalTheme'
    | 'terminalThemeDarkId'
    | 'setTerminalThemeDarkId'
    | 'terminalThemeLightId'
    | 'setTerminalThemeLightId'
    | 'lightUiThemeId'
    | 'darkUiThemeId'
    | 'terminalFontFamilyId'
    | 'setTerminalFontFamilyId'
    | 'terminalFontSize'
    | 'setTerminalFontSize'
    | 'terminalSettings'
    | 'updateTerminalSetting'
    | 'workspaceFocusStyle'
    | 'setWorkspaceFocusStyle'
>;

const SettingsTerminalTabContainer = React.memo<TerminalTabSettingsProps>(function SettingsTerminalTabContainer({
    terminalThemeId,
    setTerminalThemeId,
    followAppTerminalTheme,
    setFollowAppTerminalTheme,
    terminalThemeDarkId,
    setTerminalThemeDarkId,
    terminalThemeLightId,
    setTerminalThemeLightId,
    lightUiThemeId,
    darkUiThemeId,
    terminalFontFamilyId,
    setTerminalFontFamilyId,
    terminalFontSize,
    setTerminalFontSize,
    terminalSettings,
    updateTerminalSetting,
    workspaceFocusStyle,
    setWorkspaceFocusStyle,
}) {
    const availableFonts = useAvailableFonts();

    return (
        <SettingsTerminalTab
            terminalThemeId={terminalThemeId}
            setTerminalThemeId={setTerminalThemeId}
            followAppTerminalTheme={followAppTerminalTheme}
            setFollowAppTerminalTheme={setFollowAppTerminalTheme}
            terminalThemeDarkId={terminalThemeDarkId}
            setTerminalThemeDarkId={setTerminalThemeDarkId}
            terminalThemeLightId={terminalThemeLightId}
            setTerminalThemeLightId={setTerminalThemeLightId}
            lightUiThemeId={lightUiThemeId}
            darkUiThemeId={darkUiThemeId}
            terminalFontFamilyId={terminalFontFamilyId}
            setTerminalFontFamilyId={setTerminalFontFamilyId}
            terminalFontSize={terminalFontSize}
            setTerminalFontSize={setTerminalFontSize}
            terminalSettings={terminalSettings}
            updateTerminalSetting={updateTerminalSetting}
            availableFonts={availableFonts}
            workspaceFocusStyle={workspaceFocusStyle}
            setWorkspaceFocusStyle={setWorkspaceFocusStyle}
        />
    );
});

const SettingsAITabContainer: React.FC = () => {
    const aiState = useAISettingsState();

    return (
        <AITabErrorBoundary>
            <SettingsAITab
                providers={aiState.providers}
                addProvider={aiState.addProvider}
                updateProvider={aiState.updateProvider}
                removeProvider={aiState.removeProvider}
                activeProviderId={aiState.activeProviderId}
                setActiveProviderId={aiState.setActiveProviderId}
                activeModelId={aiState.activeModelId}
                setActiveModelId={aiState.setActiveModelId}
                globalPermissionMode={aiState.globalPermissionMode}
                setGlobalPermissionMode={aiState.setGlobalPermissionMode}
                toolIntegrationMode={aiState.toolIntegrationMode}
                setToolIntegrationMode={aiState.setToolIntegrationMode}
                externalAgents={aiState.externalAgents}
                setExternalAgents={aiState.setExternalAgents}
                defaultAgentId={aiState.defaultAgentId}
                setDefaultAgentId={aiState.setDefaultAgentId}
                commandBlocklist={aiState.commandBlocklist}
                setCommandBlocklist={aiState.setCommandBlocklist}
                commandTimeout={aiState.commandTimeout}
                setCommandTimeout={aiState.setCommandTimeout}
                maxIterations={aiState.maxIterations}
                setMaxIterations={aiState.setMaxIterations}
                webSearchConfig={aiState.webSearchConfig}
                setWebSearchConfig={aiState.setWebSearchConfig}
                quickMessages={aiState.quickMessages}
                setQuickMessages={aiState.setQuickMessages}
                showTerminalSelectionAIAction={aiState.showTerminalSelectionAIAction}
                setShowTerminalSelectionAIAction={aiState.setShowTerminalSelectionAIAction}
            />
        </AITabErrorBoundary>
    );
};

const SettingsSyncTabWithVault: React.FC<{ onSettingsApplied?: () => void }> = ({ onSettingsApplied }) => {
    const {
        hosts,
        keys,
        identities,
        proxyProfiles,
        snippets,
        customGroups,
        snippetPackages,
        knownHosts,
        groupConfigs,
        importDataFromString,
        clearVaultData,
    } = useVaultState();

    const { rules: portForwardingRules, importRules: importPortForwardingRules } = usePortForwardingState();

    // Strip transient runtime fields before passing to sync
    const portForwardingRulesForSync = useMemo(
        () => sanitizePortForwardingRulesForSync(portForwardingRules) ?? [],
        [portForwardingRules],
    );

    const vault = useMemo(
        () => ({ hosts, keys, identities, proxyProfiles, snippets, customGroups, snippetPackages, knownHosts, groupConfigs }),
        [hosts, keys, identities, proxyProfiles, snippets, customGroups, snippetPackages, knownHosts, groupConfigs],
    );

    return (
        <SettingsSyncTab
            vault={vault}
            portForwardingRules={portForwardingRulesForSync}
            importDataFromString={importDataFromString}
            importPortForwardingRules={importPortForwardingRules}
            clearVaultData={clearVaultData}
            onSettingsApplied={onSettingsApplied}
        />
    );
};

const SettingsPageContent: React.FC<{ settings: SettingsState }> = ({ settings }) => {
    const { t } = useI18n();
    const { notifyRendererReady, closeSettingsWindow, onWindowCommandCloseRequested } = useWindowControls();
    const { updateState, checkNow, installUpdate, openReleasePage, startDownload, isUpdateDemoMode } = useUpdateCheck({
        autoUpdateEnabled: settings.autoUpdateEnabled,
        // Install blocked by unsaved editors in the main window — surface a toast
        // here so a click from the Settings window isn't a silent no-op (#1215).
        onNeedsSave: () => toast.warning(t('update.needsSave.message'), t('update.needsSave.title')),
    });
    const [activeTab, setActiveTab] = useState("application");
    const [mountedTabs, setMountedTabs] = useState(() => new Set(["application"]));

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

    useEffect(() => {
        const unsubscribe = onWindowCommandCloseRequested(() => {
            void closeSettingsWindow();
        });
        return () => unsubscribe?.();
    }, [closeSettingsWindow, onWindowCommandCloseRequested]);

    useEffect(() => {
        setMountedTabs((prev) => {
            if (prev.has(activeTab)) return prev;
            const next = new Set(prev);
            next.add(activeTab);
            return next;
        });
    }, [activeTab]);

    const handleClose = useCallback(() => {
        closeSettingsWindow();
    }, [closeSettingsWindow]);

    return (
        <div className="h-screen flex flex-col bg-background text-foreground font-sans">
            <div className="shrink-0 border-b border-border app-drag">
                <div className="flex items-center justify-between px-4 pt-3">
                    {isMac && <div className="h-6" />}
                </div>
                <div className="flex items-center justify-between px-4 py-2">
                    <h1 className="text-lg font-semibold">{t("settings.title")}</h1>
                    {!isMac && (
                        <Tooltip>
                            <TooltipTrigger asChild>
                                <button
                                    onClick={handleClose}
                                    className="app-no-drag w-8 h-8 flex items-center justify-center rounded-md hover:bg-destructive/20 hover:text-destructive transition-colors text-muted-foreground"
                                >
                                    <X size={16} />
                                </button>
                            </TooltipTrigger>
                            <TooltipContent>{t("common.close")}</TooltipContent>
                        </Tooltip>
                    )}
                </div>
            </div>

            <Tabs
                value={activeTab}
                onValueChange={setActiveTab}
                orientation="vertical"
                className="flex-1 flex overflow-hidden"
            >
                <div className="w-56 border-r border-border flex flex-col shrink-0 px-3 py-3">
                    <TabsList className="flex flex-col h-auto bg-transparent gap-1 p-0 justify-start">
                        <TabsTrigger
                            value="application"
                            className={settingsTabTriggerClassName}
                        >
                            <AppWindow size={14} className={settingsTabIconClassName} />
                            <span className={settingsTabLabelClassName}>{t("settings.tab.application")}</span>
                        </TabsTrigger>
                        <TabsTrigger
                            value="appearance"
                            className={settingsTabTriggerClassName}
                        >
                            <Palette size={14} className={settingsTabIconClassName} />
                            <span className={settingsTabLabelClassName}>{t("settings.tab.appearance")}</span>
                        </TabsTrigger>
                        <TabsTrigger
                            value="terminal"
                            className={settingsTabTriggerClassName}
                        >
                            <TerminalSquare size={14} className={settingsTabIconClassName} />
                            <span className={settingsTabLabelClassName}>{t("settings.tab.terminal")}</span>
                        </TabsTrigger>
                        <TabsTrigger
                            value="shortcuts"
                            className={settingsTabTriggerClassName}
                        >
                            <Keyboard size={14} className={settingsTabIconClassName} />
                            <span className={settingsTabLabelClassName}>{t("settings.tab.shortcuts")}</span>
                        </TabsTrigger>
                        <TabsTrigger
                            value="file-associations"
                            className={settingsTabTriggerClassName}
                        >
                            <FileType size={14} className={settingsTabIconClassName} />
                            <span className={settingsTabLabelClassName}>{t("settings.tab.sftpFileAssociations")}</span>
                        </TabsTrigger>
                        <TabsTrigger
                            value="ai"
                            className={settingsTabTriggerClassName}
                        >
                            <Sparkles size={14} className={settingsTabIconClassName} />
                            <span className={settingsTabLabelClassName}>AI</span>
                        </TabsTrigger>
                        <TabsTrigger
                            value="sync"
                            className={settingsTabTriggerClassName}
                        >
                            <Cloud size={14} className={settingsTabIconClassName} />
                            <span className={settingsTabLabelClassName}>{t("settings.tab.syncCloud")}</span>
                        </TabsTrigger>
                        <TabsTrigger
                            value="system"
                            className={settingsTabTriggerClassName}
                        >
                            <HardDrive size={14} className={settingsTabIconClassName} />
                            <span className={settingsTabLabelClassName}>{t("settings.tab.system")}</span>
                        </TabsTrigger>
                    </TabsList>
                </div>

                <div className="flex-1 h-full flex flex-col min-h-0 bg-muted/10">
                    {mountedTabs.has("application") && (
                        <SettingsApplicationTab
                            updateState={updateState}
                            checkNow={checkNow}
                            openReleasePage={openReleasePage}
                            installUpdate={installUpdate}
                            startDownload={startDownload}
                            isUpdateDemoMode={isUpdateDemoMode}
                        />
                    )}

                    {mountedTabs.has("appearance") && (
                        <SettingsAppearanceTab
                            theme={settings.theme}
                            setTheme={settings.setTheme}
                            lightUiThemeId={settings.lightUiThemeId}
                            setLightUiThemeId={settings.setLightUiThemeId}
                            darkUiThemeId={settings.darkUiThemeId}
                            setDarkUiThemeId={settings.setDarkUiThemeId}
                            accentMode={settings.accentMode}
                            setAccentMode={settings.setAccentMode}
                            customAccent={settings.customAccent}
                            setCustomAccent={settings.setCustomAccent}
                            uiFontFamilyId={settings.uiFontFamilyId}
                            setUiFontFamilyId={settings.setUiFontFamilyId}
                            uiLanguage={settings.uiLanguage}
                            setUiLanguage={settings.setUiLanguage}
                            customCSS={settings.customCSS}
                            setCustomCSS={settings.setCustomCSS}
                            showRecentHosts={settings.showRecentHosts}
                            setShowRecentHosts={settings.setShowRecentHosts}
                            showOnlyUngroupedHostsInRoot={settings.showOnlyUngroupedHostsInRoot}
                            setShowOnlyUngroupedHostsInRoot={settings.setShowOnlyUngroupedHostsInRoot}
                            showSftpTab={settings.showSftpTab}
                            setShowSftpTab={settings.setShowSftpTab}
                            showHostTreeSidebar={settings.showHostTreeSidebar}
                            setShowHostTreeSidebar={settings.setShowHostTreeSidebar}
                            windowOpacity={settings.windowOpacity}
                            setWindowOpacity={settings.setWindowOpacity}
                          />
                    )}

                    {mountedTabs.has("terminal") && (
                        <SettingsTerminalTabContainer
                            terminalThemeId={settings.terminalThemeId}
                            setTerminalThemeId={settings.setTerminalThemeId}
                            followAppTerminalTheme={settings.followAppTerminalTheme}
                            setFollowAppTerminalTheme={settings.setFollowAppTerminalTheme}
                            terminalThemeDarkId={settings.terminalThemeDarkId}
                            setTerminalThemeDarkId={settings.setTerminalThemeDarkId}
                            terminalThemeLightId={settings.terminalThemeLightId}
                            setTerminalThemeLightId={settings.setTerminalThemeLightId}
                            lightUiThemeId={settings.lightUiThemeId}
                            darkUiThemeId={settings.darkUiThemeId}
                            terminalFontFamilyId={settings.terminalFontFamilyId}
                            setTerminalFontFamilyId={settings.setTerminalFontFamilyId}
                            terminalFontSize={settings.terminalFontSize}
                            setTerminalFontSize={settings.setTerminalFontSize}
                            terminalSettings={settings.terminalSettings}
                            updateTerminalSetting={settings.updateTerminalSetting}
                            workspaceFocusStyle={settings.workspaceFocusStyle}
                            setWorkspaceFocusStyle={settings.setWorkspaceFocusStyle}
                        />
                    )}

                    {mountedTabs.has("shortcuts") && (
                        <SettingsShortcutsTab
                            hotkeyScheme={settings.hotkeyScheme}
                            setHotkeyScheme={settings.setHotkeyScheme}
                            shellOnlyTabNumberShortcuts={settings.shellOnlyTabNumberShortcuts}
                            setShellOnlyTabNumberShortcuts={settings.setShellOnlyTabNumberShortcuts}
                            keyBindings={settings.keyBindings}
                            updateKeyBinding={settings.updateKeyBinding}
                            resetKeyBinding={settings.resetKeyBinding}
                            resetAllKeyBindings={settings.resetAllKeyBindings}
                            setIsHotkeyRecording={settings.setIsHotkeyRecording}
                        />
                    )}

                    {mountedTabs.has("file-associations") && (
                        <SettingsFileAssociationsTab />
                    )}

                    {mountedTabs.has("ai") && (
                        <SettingsAITabContainer />
                    )}

                    {mountedTabs.has("sync") && (
                        <SettingsSyncTabWithVault onSettingsApplied={settings.rehydrateAllFromStorage} />
                    )}

                    {mountedTabs.has("system") && (
                        <SettingsSystemTab
                            sessionLogsEnabled={settings.sessionLogsEnabled}
                            setSessionLogsEnabled={settings.setSessionLogsEnabled}
                            sessionLogsDir={settings.sessionLogsDir}
                            setSessionLogsDir={settings.setSessionLogsDir}
                            sessionLogsFormat={settings.sessionLogsFormat}
                            setSessionLogsFormat={settings.setSessionLogsFormat}
                            sessionLogsTimestampsEnabled={settings.sessionLogsTimestampsEnabled}
                            setSessionLogsTimestampsEnabled={settings.setSessionLogsTimestampsEnabled}
                            sshDebugLogsEnabled={settings.sshDebugLogsEnabled}
                            setSshDebugLogsEnabled={settings.setSshDebugLogsEnabled}
                            toggleWindowHotkey={settings.toggleWindowHotkey}
                            setToggleWindowHotkey={settings.setToggleWindowHotkey}
                            closeToTray={settings.closeToTray}
                            setCloseToTray={settings.setCloseToTray}
                            hotkeyRegistrationError={settings.hotkeyRegistrationError}
                            globalHotkeyEnabled={settings.globalHotkeyEnabled}
                            setGlobalHotkeyEnabled={settings.setGlobalHotkeyEnabled}
                            autoUpdateEnabled={settings.autoUpdateEnabled}
                            setAutoUpdateEnabled={settings.setAutoUpdateEnabled}
                            updateState={updateState}
                            checkNow={checkNow}
                            installUpdate={installUpdate}
                            openReleasePage={openReleasePage}
                            startDownload={startDownload}
                        />
                    )}
                </div>
            </Tabs>
        </div>
    );
};

export default function SettingsPage() {
    const settings = useSettingsState();

    return (
        <I18nProvider locale={settings.uiLanguage}>
            <SettingsPageContent settings={settings} />
        </I18nProvider>
    );
}
