import { useState, useEffect, useCallback, useRef, useMemo } from 'react';
import {
  X,
  Key,
  Server,
  Brain,
  Check,
  AlertCircle,
  Eye,
  EyeOff,
  RefreshCw,
  ChevronDown,
  Loader2,
  Search,
} from '@/lib/lucide-icons';
import {
  loadSettings,
  saveSettings,
  getProviderDisplayName,
  getAvailableModels,
  fetchOpenRouterModels,
} from '../core/llm/settings-service';
import type { LLMSettings, LLMProvider } from '../core/llm/types';
import { DEFAULT_OLLAMA_BASE_URL } from '../config/ui-constants';
import { ProviderConfigCard } from './settings/ProviderConfigCard';
import { useTranslation } from 'react-i18next';

interface SettingsPanelProps {
  isOpen: boolean;
  onClose: () => void;
  onSettingsSaved?: () => void;
  backendUrl?: string;
  isBackendConnected?: boolean;
  onBackendUrlChange?: (url: string) => void;
}

/**
 * Searchable combobox for OpenRouter model selection
 */
interface OpenRouterModelComboboxProps {
  value: string;
  onChange: (model: string) => void;
  models: Array<{ id: string; name: string }>;
  isLoading: boolean;
  onLoadModels: () => void;
}

const OpenRouterModelCombobox = ({
  value,
  onChange,
  models,
  isLoading,
  onLoadModels,
}: OpenRouterModelComboboxProps) => {
  const { t } = useTranslation('settings');
  const [isOpen, setIsOpen] = useState(false);
  const [searchTerm, setSearchTerm] = useState('');
  const inputRef = useRef<HTMLInputElement>(null);
  const containerRef = useRef<HTMLDivElement>(null);

  // Filter models based on search term
  const filteredModels = useMemo(() => {
    if (!searchTerm.trim()) return models;
    const lower = searchTerm.toLowerCase();
    return models.filter(
      (m) => m.id.toLowerCase().includes(lower) || m.name.toLowerCase().includes(lower),
    );
  }, [models, searchTerm]);

  // Find display name for current value
  const displayValue = useMemo(() => {
    if (!value) return '';
    const found = models.find((m) => m.id === value);
    return found ? found.name : value;
  }, [value, models]);

  // Close dropdown when clicking outside
  useEffect(() => {
    const handleClickOutside = (e: MouseEvent) => {
      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
        setIsOpen(false);
        setSearchTerm('');
      }
    };
    document.addEventListener('mousedown', handleClickOutside);
    return () => document.removeEventListener('mousedown', handleClickOutside);
  }, []);

  // Load models when opening
  const handleOpen = () => {
    setIsOpen(true);
    if (models.length === 0 && !isLoading) {
      onLoadModels();
    }
    setTimeout(() => inputRef.current?.focus(), 10);
  };

  const handleSelect = (modelId: string) => {
    onChange(modelId);
    setIsOpen(false);
    setSearchTerm('');
  };

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const val = e.target.value;
    setSearchTerm(val);
    // Also allow direct typing of model ID
    if (val && models.length === 0) {
      onChange(val);
    }
  };

  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter' && searchTerm) {
      // If exact match in filtered, select it; otherwise use raw input
      const exact = filteredModels.find((m) => m.id.toLowerCase() === searchTerm.toLowerCase());
      if (exact) {
        handleSelect(exact.id);
      } else if (filteredModels.length === 1) {
        handleSelect(filteredModels[0].id);
      } else {
        // Allow custom model ID input
        onChange(searchTerm);
        setIsOpen(false);
        setSearchTerm('');
      }
    } else if (e.key === 'Escape') {
      setIsOpen(false);
      setSearchTerm('');
    }
  };

  return (
    <div ref={containerRef} className="relative">
      {/* Main input/button */}
      <div
        onClick={handleOpen}
        className={`flex w-full cursor-pointer items-center gap-2 rounded-xl border bg-elevated px-4 py-3 transition-all ${isOpen ? 'border-accent ring-2 ring-accent/20' : 'border-border-subtle hover:border-accent/50'}`}
      >
        {isOpen ? (
          <input
            ref={inputRef}
            type="text"
            value={searchTerm}
            onChange={handleInputChange}
            onKeyDown={handleKeyDown}
            placeholder={t('searchModelPlaceholder')}
            className="flex-1 bg-transparent font-mono text-sm text-text-primary outline-none placeholder:text-text-muted"
            onClick={(e) => e.stopPropagation()}
          />
        ) : (
          <span
            className={`flex-1 truncate font-mono text-sm ${value ? 'text-text-primary' : 'text-text-muted'}`}
          >
            {displayValue || t('selectModelPlaceholder')}
          </span>
        )}
        <div className="flex items-center gap-1">
          {isLoading && <Loader2 className="h-4 w-4 animate-spin text-text-muted" />}
          <ChevronDown
            className={`h-4 w-4 text-text-muted transition-transform ${isOpen ? 'rotate-180' : ''}`}
          />
        </div>
      </div>

      {/* Dropdown */}
      {isOpen && (
        <div className="absolute z-50 mt-1 w-full overflow-hidden rounded-xl border border-border-subtle bg-elevated shadow-xl">
          {isLoading ? (
            <div className="flex items-center justify-center gap-2 px-4 py-6 text-center text-sm text-text-muted">
              <Loader2 className="h-4 w-4 animate-spin" />
              {t('loadingModels')}
            </div>
          ) : filteredModels.length === 0 ? (
            <div className="px-4 py-4 text-center">
              {models.length === 0 ? (
                <div className="text-sm text-text-muted">
                  <Search className="mx-auto mb-2 h-5 w-5 opacity-50" />
                  <p>{t('customModelHint')}</p>
                  <p className="mt-1 text-xs">{t('customModelExample')}</p>
                </div>
              ) : (
                <div className="text-sm text-text-muted">
                  <p>{t('noModelsMatch', { searchTerm })}</p>
                  <p className="mt-1 text-xs">{t('pressEnterCustom')}</p>
                </div>
              )}
            </div>
          ) : (
            <div className="max-h-64 overflow-y-auto">
              {filteredModels.slice(0, 50).map((model) => (
                <button
                  key={model.id}
                  onClick={() => handleSelect(model.id)}
                  className={`flex w-full flex-col px-4 py-2.5 text-left transition-colors hover:bg-hover ${model.id === value ? 'bg-accent/10' : ''}`}
                >
                  <span className="truncate text-sm text-text-primary">{model.name}</span>
                  <span className="truncate font-mono text-xs text-text-muted">{model.id}</span>
                </button>
              ))}
              {filteredModels.length > 50 && (
                <div className="border-t border-border-subtle px-4 py-2 text-center text-xs text-text-muted">
                  {t('moreModels', { count: filteredModels.length - 50 })}
                </div>
              )}
            </div>
          )}
        </div>
      )}
    </div>
  );
};

/**
 * Check connection to local Ollama instance
 */
const checkOllamaStatus = async (
  baseUrl: string,
): Promise<{ ok: boolean; error: string | null }> => {
  try {
    const response = await fetch(`${baseUrl}/api/tags`, {
      method: 'GET',
      headers: { 'Content-Type': 'application/json' },
    });

    if (!response.ok) {
      if (response.status === 0 || response.status === 404) {
        return {
          ok: false,
          error: "Cannot connect to Ollama. Make sure it's running with `ollama serve`",
        };
      }
      return { ok: false, error: `Ollama API error: ${response.status}` };
    }

    return { ok: true, error: null };
  } catch (error) {
    return {
      ok: false,
      error: "Cannot connect to Ollama. Make sure it's running with `ollama serve`",
    };
  }
};

export const SettingsPanel = ({
  isOpen,
  onClose,
  onSettingsSaved,
  backendUrl,
  isBackendConnected,
  onBackendUrlChange,
}: SettingsPanelProps) => {
  const { t } = useTranslation(['common', 'settings']);
  const [settings, setSettings] = useState<LLMSettings>(loadSettings);
  const [showApiKey, setShowApiKey] = useState<Record<string, boolean>>({});
  const [saveStatus, setSaveStatus] = useState<'idle' | 'saved' | 'error'>('idle');
  const saveTimerRef = useRef<ReturnType<typeof setTimeout>>(undefined);
  // Ollama connection state
  const [ollamaError, setOllamaError] = useState<string | null>(null);
  const [isCheckingOllama, setIsCheckingOllama] = useState(false);
  // OpenRouter models state
  const [openRouterModels, setOpenRouterModels] = useState<Array<{ id: string; name: string }>>([]);
  const [isLoadingModels, setIsLoadingModels] = useState(false);

  // Clean up save timer on unmount
  useEffect(() => {
    return () => {
      if (saveTimerRef.current) {
        clearTimeout(saveTimerRef.current);
      }
    };
  }, []);

  // Load settings when panel opens
  useEffect(() => {
    if (isOpen) {
      setSettings(loadSettings());
      setSaveStatus('idle');
      setOllamaError(null);
    }
  }, [isOpen]);

  // Check Ollama connection when provider is selected or base URL changes
  const checkOllamaConnection = useCallback(async (baseUrl: string) => {
    setIsCheckingOllama(true);
    setOllamaError(null);

    const { error } = await checkOllamaStatus(baseUrl);
    setIsCheckingOllama(false);
    setOllamaError(error);
  }, []);

  // Load OpenRouter models
  const loadOpenRouterModels = useCallback(async () => {
    setIsLoadingModels(true);
    const models = await fetchOpenRouterModels();
    setOpenRouterModels(models);
    setIsLoadingModels(false);
  }, []);

  useEffect(() => {
    if (settings.activeProvider === 'ollama') {
      const baseUrl = settings.ollama?.baseUrl ?? DEFAULT_OLLAMA_BASE_URL;
      const timer = setTimeout(() => {
        checkOllamaConnection(baseUrl);
      }, 300);
      return () => clearTimeout(timer);
    }
  }, [settings.ollama?.baseUrl, settings.activeProvider, checkOllamaConnection]);

  const handleProviderChange = (provider: LLMProvider) => {
    setSettings((prev) => ({ ...prev, activeProvider: provider }));
  };

  const handleSave = () => {
    try {
      saveSettings(settings);
      setSaveStatus('saved');
      onSettingsSaved?.();
      if (saveTimerRef.current) {
        clearTimeout(saveTimerRef.current);
      }
      saveTimerRef.current = setTimeout(() => setSaveStatus('idle'), 2000);
    } catch {
      setSaveStatus('error');
    }
  };

  const toggleApiKeyVisibility = (key: string) => {
    setShowApiKey((prev) => ({ ...prev, [key]: !prev[key] }));
  };

  if (!isOpen) return null;

  const providers: LLMProvider[] = [
    'openai',
    'gemini',
    'anthropic',
    'azure-openai',
    'ollama',
    'openrouter',
    'minimax',
    'glm',
    'deepseek',
  ];

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center">
      {/* Backdrop */}
      <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" onClick={onClose} />

      {/* Panel */}
      <div className="relative mx-4 flex max-h-[90vh] w-full max-w-lg flex-col overflow-hidden rounded-2xl border border-border-subtle bg-surface shadow-2xl">
        {/* Header */}
        <div className="flex items-center justify-between border-b border-border-subtle bg-elevated/50 px-6 py-4">
          <div className="flex items-center gap-3">
            <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-accent/20">
              <Brain className="h-5 w-5 text-accent" />
            </div>
            <div>
              <h2 className="text-lg font-semibold text-text-primary">{t('settings:title')}</h2>
              <p className="text-xs text-text-muted">{t('settings:subtitle')}</p>
            </div>
          </div>
          <button
            onClick={onClose}
            className="rounded-lg p-2 text-text-muted transition-colors hover:bg-hover hover:text-text-primary"
          >
            <X className="h-5 w-5" />
          </button>
        </div>

        {/* Content */}
        <div className="flex-1 space-y-6 overflow-y-auto p-6">
          {/* Local Server */}
          {backendUrl !== undefined && onBackendUrlChange && (
            <div className="space-y-3">
              <label className="block text-sm font-medium text-text-secondary">
                {t('settings:localServer')}
              </label>
              <div className="space-y-2">
                <div className="mb-2 flex items-center gap-2">
                  <Server className="h-4 w-4 text-text-muted" />
                  <span className="text-sm text-text-secondary">{t('settings:backendUrl')}</span>
                  <span
                    className={`h-2 w-2 rounded-full ${isBackendConnected ? 'bg-green-400' : 'bg-red-400'}`}
                  />
                  <span className="text-xs text-text-muted">
                    {isBackendConnected ? t('settings:connected') : t('settings:notConnected')}
                  </span>
                </div>
                <input
                  type="url"
                  value={backendUrl}
                  onChange={(e) => onBackendUrlChange(e.target.value)}
                  placeholder="http://localhost:4747"
                  className="w-full rounded-xl border border-border-subtle bg-elevated px-4 py-3 font-mono text-sm text-text-primary transition-all outline-none placeholder:text-text-muted focus:border-accent focus:ring-2 focus:ring-accent/20"
                />
                <p className="text-xs text-text-muted">{t('settings:runServeHint')}</p>
              </div>
            </div>
          )}

          {/* Provider Selection */}
          <div className="space-y-3">
            <label className="block text-sm font-medium text-text-secondary">
              {t('settings:provider')}
            </label>
            <div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
              {providers.map((provider) => (
                <button
                  key={provider}
                  onClick={() => handleProviderChange(provider)}
                  className={`flex items-center gap-3 rounded-xl border-2 p-4 transition-all ${
                    settings.activeProvider === provider
                      ? 'border-accent bg-accent/10 text-text-primary'
                      : 'border-border-subtle bg-elevated text-text-secondary hover:border-accent/50'
                  } `}
                >
                  <div
                    className={`flex h-8 w-8 items-center justify-center rounded-lg text-lg ${settings.activeProvider === provider ? 'bg-accent/20' : 'bg-surface'} `}
                  >
                    {provider === 'openai'
                      ? '🤖'
                      : provider === 'gemini'
                        ? '💎'
                        : provider === 'anthropic'
                          ? '🧠'
                          : provider === 'ollama'
                            ? '🦙'
                            : provider === 'openrouter'
                              ? '🌐'
                              : provider === 'minimax'
                                ? '⚡'
                                : provider === 'glm'
                                  ? '🔮'
                                  : provider === 'deepseek'
                                    ? '🐋'
                                    : '☁️'}
                  </div>
                  <span className="font-medium">{getProviderDisplayName(provider)}</span>
                </button>
              ))}
            </div>
          </div>

          <div className="rounded-xl border border-amber-500/30 bg-amber-500/10 p-3 text-xs text-amber-200">
            {t('settings:apiKeySession')}
          </div>

          {/* OpenAI Settings */}
          {settings.activeProvider === 'openai' && (
            <ProviderConfigCard
              title="OpenAI"
              apiKey={{
                value: settings.openai?.apiKey ?? '',
                placeholder: t('settings:providers.openai.apiKeyPlaceholder'),
                helperText: t('settings:providers.openai.helperText'),
                helperLink: 'https://platform.openai.com/api-keys',
                helperLinkLabel: t('settings:providers.openai.helperLinkLabel'),
                isVisible: !!showApiKey['openai'],
                onChange: (value) =>
                  setSettings((prev) => ({
                    ...prev,
                    openai: { ...prev.openai!, apiKey: value },
                  })),
                onToggleVisibility: () => toggleApiKeyVisibility('openai'),
              }}
              model={{
                value: settings.openai?.model ?? 'gpt-5.2-chat',
                placeholder: t('settings:providers.openai.modelPlaceholder'),
                onChange: (value) =>
                  setSettings((prev) => ({
                    ...prev,
                    openai: { ...prev.openai!, model: value },
                  })),
              }}
            >
              <div className="space-y-2">
                <label className="flex items-center gap-2 text-sm font-medium text-text-secondary">
                  <Server className="h-4 w-4" />
                  {t('settings:baseUrl')}{' '}
                  <span className="font-normal text-text-muted">({t('settings:optional')})</span>
                </label>
                <input
                  type="url"
                  value={settings.openai?.baseUrl ?? ''}
                  onChange={(e) =>
                    setSettings((prev) => ({
                      ...prev,
                      openai: { ...prev.openai!, baseUrl: e.target.value },
                    }))
                  }
                  placeholder={t('settings:providers.openai.baseUrlPlaceholder')}
                  className="w-full rounded-xl border border-border-subtle bg-elevated px-4 py-3 text-text-primary transition-all outline-none placeholder:text-text-muted focus:border-accent focus:ring-2 focus:ring-accent/20"
                />
                <p className="text-xs text-text-muted">
                  {t('settings:providers.openai.baseUrlHint')}
                </p>
              </div>
            </ProviderConfigCard>
          )}

          {/* Gemini Settings */}
          {settings.activeProvider === 'gemini' && (
            <ProviderConfigCard
              title="Google Gemini"
              apiKey={{
                value: settings.gemini?.apiKey ?? '',
                placeholder: t('settings:providers.gemini.apiKeyPlaceholder'),
                helperText: t('settings:providers.gemini.helperText'),
                helperLink: 'https://aistudio.google.com/app/apikey',
                helperLinkLabel: t('settings:providers.gemini.helperLinkLabel'),
                isVisible: !!showApiKey['gemini'],
                onChange: (value) =>
                  setSettings((prev) => ({
                    ...prev,
                    gemini: { ...prev.gemini!, apiKey: value },
                  })),
                onToggleVisibility: () => toggleApiKeyVisibility('gemini'),
              }}
              model={{
                value: settings.gemini?.model ?? 'gemini-2.0-flash',
                placeholder: t('settings:providers.gemini.modelPlaceholder'),
                onChange: (value) =>
                  setSettings((prev) => ({
                    ...prev,
                    gemini: { ...prev.gemini!, model: value },
                  })),
              }}
            />
          )}

          {/* Anthropic Settings */}
          {settings.activeProvider === 'anthropic' && (
            <ProviderConfigCard
              title="Anthropic"
              apiKey={{
                value: settings.anthropic?.apiKey ?? '',
                placeholder: t('settings:providers.anthropic.apiKeyPlaceholder'),
                helperText: t('settings:providers.anthropic.helperText'),
                helperLink: 'https://console.anthropic.com/settings/keys',
                helperLinkLabel: t('settings:providers.anthropic.helperLinkLabel'),
                isVisible: !!showApiKey['anthropic'],
                onChange: (value) =>
                  setSettings((prev) => ({
                    ...prev,
                    anthropic: { ...prev.anthropic!, apiKey: value },
                  })),
                onToggleVisibility: () => toggleApiKeyVisibility('anthropic'),
              }}
              model={{
                value: settings.anthropic?.model ?? 'claude-sonnet-4-20250514',
                placeholder: t('settings:providers.anthropic.modelPlaceholder'),
                onChange: (value) =>
                  setSettings((prev) => ({
                    ...prev,
                    anthropic: { ...prev.anthropic!, model: value },
                  })),
              }}
            />
          )}

          {/* Azure OpenAI Settings */}
          {settings.activeProvider === 'azure-openai' && (
            <div className="animate-fade-in space-y-4">
              <div className="space-y-2">
                <label className="flex items-center gap-2 text-sm font-medium text-text-secondary">
                  <Key className="h-4 w-4" />
                  {t('settings:apiKey')}
                </label>
                <div className="relative">
                  <input
                    type={showApiKey['azure'] ? 'text' : 'password'}
                    value={settings.azureOpenAI?.apiKey ?? ''}
                    onChange={(e) =>
                      setSettings((prev) => ({
                        ...prev,
                        azureOpenAI: { ...prev.azureOpenAI!, apiKey: e.target.value },
                      }))
                    }
                    placeholder={t('settings:providers.azure.apiKeyPlaceholder')}
                    className="w-full rounded-xl border border-border-subtle bg-elevated px-4 py-3 pr-12 text-text-primary transition-all outline-none placeholder:text-text-muted focus:border-accent focus:ring-2 focus:ring-accent/20"
                  />
                  <button
                    type="button"
                    onClick={() => toggleApiKeyVisibility('azure')}
                    className="absolute top-1/2 right-3 -translate-y-1/2 p-1 text-text-muted transition-colors hover:text-text-primary"
                  >
                    {showApiKey['azure'] ? (
                      <EyeOff className="h-4 w-4" />
                    ) : (
                      <Eye className="h-4 w-4" />
                    )}
                  </button>
                </div>
              </div>

              <div className="space-y-2">
                <label className="flex items-center gap-2 text-sm font-medium text-text-secondary">
                  <Server className="h-4 w-4" />
                  {t('settings:endpoint')}
                </label>
                <input
                  type="url"
                  value={settings.azureOpenAI?.endpoint ?? ''}
                  onChange={(e) =>
                    setSettings((prev) => ({
                      ...prev,
                      azureOpenAI: { ...prev.azureOpenAI!, endpoint: e.target.value },
                    }))
                  }
                  placeholder="https://your-resource.openai.azure.com"
                  className="w-full rounded-xl border border-border-subtle bg-elevated px-4 py-3 text-text-primary transition-all outline-none placeholder:text-text-muted focus:border-accent focus:ring-2 focus:ring-accent/20"
                />
              </div>

              <div className="space-y-2">
                <label className="text-sm font-medium text-text-secondary">
                  {t('settings:deploymentName')}
                </label>
                <input
                  type="text"
                  value={settings.azureOpenAI?.deploymentName ?? ''}
                  onChange={(e) =>
                    setSettings((prev) => ({
                      ...prev,
                      azureOpenAI: { ...prev.azureOpenAI!, deploymentName: e.target.value },
                    }))
                  }
                  placeholder={t('settings:providers.azure.deploymentNamePlaceholder')}
                  className="w-full rounded-xl border border-border-subtle bg-elevated px-4 py-3 text-text-primary transition-all outline-none placeholder:text-text-muted focus:border-accent focus:ring-2 focus:ring-accent/20"
                />
              </div>

              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <label className="text-sm font-medium text-text-secondary">
                    {t('settings:model')}
                  </label>
                  <input
                    type="text"
                    value={settings.azureOpenAI?.model ?? 'gpt-4o'}
                    onChange={(e) =>
                      setSettings((prev) => ({
                        ...prev,
                        azureOpenAI: { ...prev.azureOpenAI!, model: e.target.value },
                      }))
                    }
                    placeholder="gpt-4o"
                    className="w-full rounded-xl border border-border-subtle bg-elevated px-4 py-3 text-text-primary transition-all outline-none placeholder:text-text-muted focus:border-accent focus:ring-2 focus:ring-accent/20"
                  />
                </div>

                <div className="space-y-2">
                  <label className="text-sm font-medium text-text-secondary">
                    {t('settings:apiVersion')}
                  </label>
                  <input
                    type="text"
                    value={settings.azureOpenAI?.apiVersion ?? '2024-08-01-preview'}
                    onChange={(e) =>
                      setSettings((prev) => ({
                        ...prev,
                        azureOpenAI: { ...prev.azureOpenAI!, apiVersion: e.target.value },
                      }))
                    }
                    placeholder="2024-08-01-preview"
                    className="w-full rounded-xl border border-border-subtle bg-elevated px-4 py-3 text-text-primary transition-all outline-none placeholder:text-text-muted focus:border-accent focus:ring-2 focus:ring-accent/20"
                  />
                </div>
              </div>

              <p className="text-xs text-text-muted">
                {t('settings:azureHint')}{' '}
                <a
                  href="https://portal.azure.com/#view/Microsoft_Azure_ProjectOxford/CognitiveServicesHub/~/OpenAI"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-accent hover:underline"
                >
                  {t('settings:azurePortal')}
                </a>
              </p>
            </div>
          )}

          {/* Ollama Settings */}
          {settings.activeProvider === 'ollama' && (
            <div className="animate-fade-in space-y-4">
              {/* How to run Ollama */}
              <div className="rounded-xl border border-amber-500/30 bg-amber-500/10 p-3">
                <p className="text-xs leading-relaxed text-amber-300">
                  <span className="font-medium">{t('settings:providers.ollama.quickStart')}</span>{' '}
                  {t('settings:providers.ollama.installFrom')}{' '}
                  <a
                    href="https://ollama.ai"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="text-accent hover:underline"
                  >
                    ollama.ai
                  </a>
                  {t('settings:providers.ollama.thenRun')}
                </p>
                <code className="mt-2 block rounded-lg bg-black/30 px-3 py-2 font-mono text-sm text-amber-200">
                  ollama serve
                </code>
              </div>

              <div className="space-y-2">
                <label className="flex items-center gap-2 text-sm font-medium text-text-secondary">
                  <Server className="h-4 w-4" />
                  {t('settings:baseUrl')}
                </label>
                <div className="flex gap-2">
                  <input
                    type="url"
                    value={settings.ollama?.baseUrl ?? DEFAULT_OLLAMA_BASE_URL}
                    onChange={(e) =>
                      setSettings((prev) => ({
                        ...prev,
                        ollama: { ...prev.ollama!, baseUrl: e.target.value },
                      }))
                    }
                    placeholder={DEFAULT_OLLAMA_BASE_URL}
                    className="flex-1 rounded-xl border border-border-subtle bg-elevated px-4 py-3 font-mono text-sm text-text-primary transition-all outline-none placeholder:text-text-muted focus:border-accent focus:ring-2 focus:ring-accent/20"
                  />
                  <button
                    type="button"
                    onClick={() =>
                      checkOllamaConnection(settings.ollama?.baseUrl ?? DEFAULT_OLLAMA_BASE_URL)
                    }
                    disabled={isCheckingOllama}
                    className="rounded-xl border border-border-subtle bg-elevated px-3 py-3 text-text-secondary transition-colors hover:border-accent/50 hover:text-text-primary disabled:opacity-50"
                    title={t('settings:checkConnection')}
                  >
                    <RefreshCw className={`h-4 w-4 ${isCheckingOllama ? 'animate-spin' : ''}`} />
                  </button>
                </div>
                <p className="text-xs text-text-muted">
                  {t('settings:defaultPort')}{' '}
                  <code className="rounded bg-elevated px-1 py-0.5">11434</code>.
                </p>
              </div>

              <div className="space-y-2">
                <label className="text-sm font-medium text-text-secondary">
                  {t('settings:model')}
                </label>

                {ollamaError && !isCheckingOllama && (
                  <div className="rounded-lg border border-red-500/30 bg-red-500/10 p-2">
                    <p className="flex items-center gap-1 text-xs text-red-400">
                      <AlertCircle className="h-3 w-3" />
                      {ollamaError}
                    </p>
                  </div>
                )}

                <input
                  type="text"
                  value={settings.ollama?.model ?? ''}
                  onChange={(e) =>
                    setSettings((prev) => ({
                      ...prev,
                      ollama: { ...prev.ollama!, model: e.target.value },
                    }))
                  }
                  placeholder={t('settings:providers.ollama.modelPlaceholder')}
                  className="w-full rounded-xl border border-border-subtle bg-elevated px-4 py-3 font-mono text-sm text-text-primary transition-all outline-none placeholder:text-text-muted focus:border-accent focus:ring-2 focus:ring-accent/20"
                />
                <p className="text-xs text-text-muted">
                  {t('settings:pullModel')}{' '}
                  <code className="rounded bg-elevated px-1 py-0.5">ollama pull llama3.2</code>
                </p>
              </div>
            </div>
          )}

          {/* OpenRouter Settings */}
          {settings.activeProvider === 'openrouter' && (
            <ProviderConfigCard
              title="OpenRouter"
              apiKey={{
                value: settings.openrouter?.apiKey ?? '',
                placeholder: t('settings:providers.openrouter.apiKeyPlaceholder'),
                helperText: t('settings:providers.openrouter.helperText'),
                helperLink: 'https://openrouter.ai/keys',
                helperLinkLabel: t('settings:providers.openrouter.helperLinkLabel'),
                isVisible: !!showApiKey['openrouter'],
                onChange: (value) =>
                  setSettings((prev) => ({
                    ...prev,
                    openrouter: { ...prev.openrouter!, apiKey: value },
                  })),
                onToggleVisibility: () => toggleApiKeyVisibility('openrouter'),
              }}
            >
              <div className="space-y-2">
                <label className="text-sm font-medium text-text-secondary">
                  {t('settings:model')}
                </label>
                <OpenRouterModelCombobox
                  value={settings.openrouter?.model ?? ''}
                  onChange={(model) =>
                    setSettings((prev) => ({
                      ...prev,
                      openrouter: { ...prev.openrouter!, model },
                    }))
                  }
                  models={openRouterModels}
                  isLoading={isLoadingModels}
                  onLoadModels={loadOpenRouterModels}
                />
                <p className="text-xs text-text-muted">
                  {t('settings:browseModels')}{' '}
                  <a
                    href="https://openrouter.ai/models"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="text-accent hover:underline"
                  >
                    {t('settings:openRouterModels')}
                  </a>
                </p>
              </div>
            </ProviderConfigCard>
          )}

          {/* MiniMax Settings */}
          {settings.activeProvider === 'minimax' && (
            <ProviderConfigCard
              title="MiniMax"
              apiKey={{
                value: settings.minimax?.apiKey ?? '',
                placeholder: t('settings:providers.minimax.apiKeyPlaceholder'),
                helperText: t('settings:providers.minimax.helperText'),
                helperLink: 'https://platform.minimax.io',
                helperLinkLabel: t('settings:providers.minimax.helperLinkLabel'),
                isVisible: !!showApiKey['minimax'],
                onChange: (value) =>
                  setSettings((prev) => ({
                    ...prev,
                    minimax: { ...prev.minimax!, apiKey: value },
                  })),
                onToggleVisibility: () => toggleApiKeyVisibility('minimax'),
              }}
              model={{
                value: settings.minimax?.model ?? 'MiniMax-M2.5',
                placeholder: t('settings:providers.minimax.modelPlaceholder'),
                onChange: (value) =>
                  setSettings((prev) => ({
                    ...prev,
                    minimax: { ...prev.minimax!, model: value },
                  })),
                helperText: t('settings:providers.minimax.helperModel'),
              }}
            />
          )}

          {/* DeepSeek Settings */}
          {settings.activeProvider === 'deepseek' && (
            <ProviderConfigCard
              title="DeepSeek"
              apiKey={{
                value: settings.deepseek?.apiKey ?? '',
                placeholder: 'Enter your DeepSeek API key',
                helperText: 'Get your API key from',
                helperLink: 'https://platform.deepseek.com/api_keys',
                helperLinkLabel: 'DeepSeek Platform',
                isVisible: !!showApiKey['deepseek'],
                onChange: (value) =>
                  setSettings((prev) => ({
                    ...prev,
                    deepseek: { ...prev.deepseek!, apiKey: value },
                  })),
                onToggleVisibility: () => toggleApiKeyVisibility('deepseek'),
              }}
              model={{
                value: settings.deepseek?.model ?? 'deepseek-v4-flash',
                placeholder: 'e.g., deepseek-v4-flash, deepseek-v4-pro, deepseek-chat',
                onChange: (value) =>
                  setSettings((prev) => ({
                    ...prev,
                    deepseek: { ...prev.deepseek!, model: value },
                  })),
                helperText:
                  'deepseek-v4-flash (default), deepseek-v4-pro, deepseek-chat (V3), deepseek-reasoner (R1)',
              }}
            >
              <p className="text-xs text-text-muted">
                Compatible via OpenAI API format. The deepseek-reasoner model uses thinking mode and
                requires round-tripping reasoning content.
              </p>
            </ProviderConfigCard>
          )}

          {/* GLM Settings */}
          {settings.activeProvider === 'glm' && (
            <div className="animate-fade-in space-y-4">
              <div className="space-y-2">
                <label className="flex items-center gap-2 text-sm font-medium text-text-secondary">
                  <Key className="h-4 w-4" />
                  {t('settings:apiKey')}
                </label>
                <div className="relative">
                  <input
                    type={showApiKey['glm'] ? 'text' : 'password'}
                    value={settings.glm?.apiKey ?? ''}
                    onChange={(e) =>
                      setSettings((prev) => ({
                        ...prev,
                        glm: { ...prev.glm!, apiKey: e.target.value },
                      }))
                    }
                    placeholder={t('settings:providers.glm.apiKeyPlaceholder')}
                    className="w-full rounded-xl border border-border-subtle bg-elevated px-4 py-3 pr-12 text-text-primary transition-all outline-none placeholder:text-text-muted focus:border-accent focus:ring-2 focus:ring-accent/20"
                  />
                  <button
                    type="button"
                    onClick={() => toggleApiKeyVisibility('glm')}
                    className="absolute top-1/2 right-3 -translate-y-1/2 p-1 text-text-muted transition-colors hover:text-text-primary"
                  >
                    {showApiKey['glm'] ? (
                      <EyeOff className="h-4 w-4" />
                    ) : (
                      <Eye className="h-4 w-4" />
                    )}
                  </button>
                </div>
                <p className="text-xs text-text-muted">
                  {t('settings:providers.openai.helperText')}{' '}
                  <a
                    href="https://docs.z.ai"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="text-accent hover:underline"
                  >
                    {t('settings:zaiPlatform')}
                  </a>
                </p>
              </div>

              <div className="space-y-2">
                <label className="text-sm font-medium text-text-secondary">
                  {t('settings:model')}
                </label>
                <select
                  value={settings.glm?.model ?? 'GLM-5'}
                  onChange={(e) =>
                    setSettings((prev) => ({
                      ...prev,
                      glm: { ...prev.glm!, model: e.target.value },
                    }))
                  }
                  className="w-full rounded-xl border border-border-subtle bg-elevated px-4 py-3 font-mono text-sm text-text-primary transition-all outline-none focus:border-accent focus:ring-2 focus:ring-accent/20"
                >
                  {getAvailableModels('glm').map((model) => (
                    <option key={model} value={model}>
                      {model}
                    </option>
                  ))}
                </select>
              </div>

              <div className="space-y-2">
                <label className="text-sm font-medium text-text-secondary">
                  {t('settings:baseUrl')}
                </label>
                <input
                  type="text"
                  value={settings.glm?.baseUrl ?? 'https://api.z.ai/api/coding/paas/v4'}
                  onChange={(e) =>
                    setSettings((prev) => ({
                      ...prev,
                      glm: { ...prev.glm!, baseUrl: e.target.value },
                    }))
                  }
                  placeholder="https://api.z.ai/api/coding/paas/v4"
                  className="w-full rounded-xl border border-border-subtle bg-elevated px-4 py-3 font-mono text-sm text-text-primary transition-all outline-none placeholder:text-text-muted focus:border-accent focus:ring-2 focus:ring-accent/20"
                />
                <p className="text-xs text-text-muted">{t('settings:glmCodingApi')}</p>
              </div>
            </div>
          )}

          {/* Privacy Note */}
          <div className="rounded-xl border border-border-subtle bg-elevated/50 p-4">
            <div className="flex gap-3">
              <div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-green-500/20 text-green-400">
                🔒
              </div>
              <div className="text-xs leading-relaxed text-text-muted">
                <span className="font-medium text-text-secondary">
                  {t('settings:privacyLabel')}
                </span>{' '}
                {t('settings:privacyFull')}
              </div>
            </div>
          </div>
        </div>

        {/* Footer */}
        <div className="flex items-center justify-between border-t border-border-subtle bg-elevated/30 px-6 py-4">
          <div className="flex items-center gap-2 text-sm">
            {saveStatus === 'saved' && (
              <span className="flex animate-fade-in items-center gap-1.5 text-green-400">
                <Check className="h-4 w-4" />
                {t('settings:settingsSaved')}
              </span>
            )}
            {saveStatus === 'error' && (
              <span className="flex animate-fade-in items-center gap-1.5 text-red-400">
                <AlertCircle className="h-4 w-4" />
                {t('settings:failedToSave')}
              </span>
            )}
          </div>
          <div className="flex items-center gap-3">
            <button
              onClick={onClose}
              className="px-4 py-2 text-sm text-text-secondary transition-colors hover:text-text-primary"
            >
              {t('common:actions.cancel')}
            </button>
            <button
              onClick={handleSave}
              className="rounded-lg bg-accent px-5 py-2 text-sm font-medium text-white transition-colors hover:bg-accent-dim"
            >
              {t('settings:saveSettings')}
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};
