import React, { useState, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router-dom';
import ChangePasswordForm from '@/components/ChangePasswordForm';
import { Switch } from '@/components/ui/ToggleGroup';
import { MultiSelect } from '@/components/ui/MultiSelect';
import { useSettingsData } from '@/hooks/useSettingsData';
import { useToast } from '@/contexts/ToastContext';
import { generateRandomKey } from '@/utils/key';
import { PermissionChecker } from '@/components/PermissionChecker';
import { PERMISSIONS } from '@/constants/permissions';
import { Copy, Check, Download, Edit, Trash2 } from 'lucide-react';
import type { BearerKey } from '@/types';
import { useServerContext } from '@/contexts/ServerContext';
import { useGroupData } from '@/hooks/useGroupData';

interface BearerKeyRowProps {
  keyData: BearerKey;
  loading: boolean;
  availableServers: { value: string; label: string }[];
  availableGroups: { value: string; label: string }[];
  onSave: (
    id: string,
    payload: {
      name: string;
      token: string;
      enabled: boolean;
      accessType: 'all' | 'groups' | 'servers' | 'custom';
      allowedGroups: string;
      allowedServers: string;
    },
  ) => Promise<void>;
  onDelete: (id: string) => Promise<void>;
}

const BearerKeyRow: React.FC<BearerKeyRowProps> = ({
  keyData,
  loading,
  availableServers,
  availableGroups,
  onSave,
  onDelete,
}) => {
  const { t } = useTranslation();
  const { showToast } = useToast();
  const [isEditing, setIsEditing] = useState(false);
  const [name, setName] = useState(keyData.name);
  const [token, setToken] = useState(keyData.token);
  const [enabled, setEnabled] = useState<boolean>(keyData.enabled);
  const [accessType, setAccessType] = useState<'all' | 'groups' | 'servers' | 'custom'>(
    keyData.accessType || 'all',
  );
  const [selectedGroups, setSelectedGroups] = useState<string[]>(keyData.allowedGroups || []);
  const [selectedServers, setSelectedServers] = useState<string[]>(keyData.allowedServers || []);
  const [saving, setSaving] = useState(false);
  const [deleting, setDeleting] = useState(false);

  useEffect(() => {
    if (!isEditing) {
      setName(keyData.name);
      setToken(keyData.token);
      setEnabled(keyData.enabled);
      setAccessType(keyData.accessType || 'all');
      setSelectedGroups(keyData.allowedGroups || []);
      setSelectedServers(keyData.allowedServers || []);
    }
  }, [keyData, isEditing]);

  const handleCopyToken = async () => {
    try {
      if (navigator.clipboard && window.isSecureContext) {
        await navigator.clipboard.writeText(keyData.token);
        showToast(t('common.copySuccess') || 'Copied to clipboard', 'success');
      } else {
        const textArea = document.createElement('textarea');
        textArea.value = keyData.token;
        textArea.style.position = 'fixed';
        textArea.style.left = '-9999px';
        document.body.appendChild(textArea);
        textArea.focus();
        textArea.select();
        try {
          document.execCommand('copy');
          showToast(t('common.copySuccess') || 'Copied to clipboard', 'success');
        } catch (err) {
          showToast(t('common.copyFailed') || 'Copy failed', 'error');
        }
        document.body.removeChild(textArea);
      }
    } catch (error) {
      console.error('Failed to copy', error);
      showToast(t('common.copyFailed') || 'Copy failed', 'error');
    }
  };

  const handleSave = async () => {
    if (accessType === 'groups' && selectedGroups.length === 0) {
      showToast(t('settings.selectAtLeastOneGroup') || 'Please select at least one group', 'error');
      return;
    }
    if (accessType === 'servers' && selectedServers.length === 0) {
      showToast(
        t('settings.selectAtLeastOneServer') || 'Please select at least one server',
        'error',
      );
      return;
    }
    if (accessType === 'custom' && selectedGroups.length === 0 && selectedServers.length === 0) {
      showToast(
        t('settings.selectAtLeastOneGroupOrServer') || 'Please select at least one group or server',
        'error',
      );
      return;
    }

    setSaving(true);
    try {
      await onSave(keyData.id, {
        name,
        token,
        enabled,
        accessType,
        allowedGroups: selectedGroups.join(', '),
        allowedServers: selectedServers.join(', '),
      });
      setIsEditing(false);
    } finally {
      setSaving(false);
    }
  };

  const handleDelete = async () => {
    if (!window.confirm(t('settings.deleteBearerKeyConfirm') || 'Delete this key?')) {
      return;
    }
    setDeleting(true);
    try {
      await onDelete(keyData.id);
    } finally {
      setDeleting(false);
    }
  };

  const isGroupsMode = accessType === 'groups';
  const isCustomMode = accessType === 'custom';

  // Helper function to format access type display text
  const formatAccessTypeDisplay = (key: BearerKey): string => {
    if (key.accessType === 'all') {
      return t('settings.bearerKeyAccessAll') || 'All Resources';
    }
    if (key.accessType === 'groups') {
      return `${t('settings.bearerKeyAccessGroups') || 'Groups'}: ${key.allowedGroups}`;
    }
    if (key.accessType === 'servers') {
      return `${t('settings.bearerKeyAccessServers') || 'Servers'}: ${key.allowedServers}`;
    }
    if (key.accessType === 'custom') {
      const parts: string[] = [];
      if (key.allowedGroups && key.allowedGroups.length > 0) {
        parts.push(`${t('settings.bearerKeyAccessGroups') || 'Groups'}: ${key.allowedGroups}`);
      }
      if (key.allowedServers && key.allowedServers.length > 0) {
        parts.push(`${t('settings.bearerKeyAccessServers') || 'Servers'}: ${key.allowedServers}`);
      }
      return `${t('settings.bearerKeyAccessCustom') || 'Custom'}: ${parts.join('; ')}`;
    }
    return '';
  };

  if (isEditing) {
    return (
      <tr>
        <td colSpan={5} className="p-0 border-b border-gray-200">
          <div className="bg-gray-50 p-5">
            <div className="grid grid-cols-1 md:grid-cols-12 gap-4 mb-4">
              <div className="md:col-span-3">
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  {t('settings.bearerKeyName') || 'Name'}
                </label>
                <input
                  type="text"
                  className="block w-full py-2 px-3 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm form-input transition-shadow duration-200"
                  value={name}
                  onChange={(e) => setName(e.target.value)}
                  disabled={loading}
                />
              </div>
              <div className="md:col-span-9">
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  {t('settings.bearerKeyToken') || 'Token'}
                </label>
                <input
                  type="text"
                  className="block w-full py-2 px-3 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm form-input transition-shadow duration-200"
                  value={token}
                  onChange={(e) => setToken(e.target.value)}
                  disabled={loading}
                />
              </div>
            </div>

            <div className="flex flex-wrap items-end gap-4">
              <div className="w-40">
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  {t('settings.bearerKeyEnabled') || 'Status'}
                </label>
                <div className="flex items-center h-[38px] px-3 bg-white border border-gray-300 rounded-md">
                  <span
                    className={`text-sm mr-3 ${enabled ? 'text-green-600 font-medium' : 'text-gray-500'}`}
                  >
                    {enabled ? 'Active' : 'Inactive'}
                  </span>
                  <Switch
                    disabled={loading}
                    checked={enabled}
                    onCheckedChange={(checked) => setEnabled(checked)}
                  />
                </div>
              </div>

              <div className="w-48">
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  {t('settings.bearerKeyAccessType') || 'Access scope'}
                </label>
                <select
                  className="block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm form-select transition-shadow duration-200"
                  value={accessType}
                  onChange={(e) =>
                    setAccessType(e.target.value as 'all' | 'groups' | 'servers' | 'custom')
                  }
                  disabled={loading}
                >
                  <option value="all">{t('settings.bearerKeyAccessAll') || 'All Resources'}</option>
                  <option value="groups">
                    {t('settings.bearerKeyAccessGroups') || 'Specific Groups'}
                  </option>
                  <option value="servers">
                    {t('settings.bearerKeyAccessServers') || 'Specific Servers'}
                  </option>
                  <option value="custom">
                    {t('settings.bearerKeyAccessCustom') || 'Custom (Groups & Servers)'}
                  </option>
                </select>
              </div>

              {/* Show single selector for groups or servers mode */}
              {!isCustomMode && (
                <div className="flex-1 min-w-[200px]">
                  <label
                    className={`block text-sm font-medium mb-1 ${accessType === 'all' ? 'text-gray-400' : 'text-gray-700'}`}
                  >
                    {isGroupsMode
                      ? t('settings.bearerKeyAllowedGroups') || 'Allowed groups'
                      : t('settings.bearerKeyAllowedServers') || 'Allowed servers'}
                  </label>
                  <MultiSelect
                    options={isGroupsMode ? availableGroups : availableServers}
                    selected={isGroupsMode ? selectedGroups : selectedServers}
                    onChange={isGroupsMode ? setSelectedGroups : setSelectedServers}
                    placeholder={
                      isGroupsMode
                        ? t('settings.selectGroups') || 'Select groups...'
                        : t('settings.selectServers') || 'Select servers...'
                    }
                    disabled={loading || accessType === 'all'}
                  />
                </div>
              )}

              {/* Show both selectors for custom mode */}
              {isCustomMode && (
                <>
                  <div className="flex-1 min-w-[200px]">
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                      {t('settings.bearerKeyAllowedGroups') || 'Allowed groups'}
                    </label>
                    <MultiSelect
                      options={availableGroups}
                      selected={selectedGroups}
                      onChange={setSelectedGroups}
                      placeholder={t('settings.selectGroups') || 'Select groups...'}
                      disabled={loading}
                    />
                  </div>
                  <div className="flex-1 min-w-[200px]">
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                      {t('settings.bearerKeyAllowedServers') || 'Allowed servers'}
                    </label>
                    <MultiSelect
                      options={availableServers}
                      selected={selectedServers}
                      onChange={setSelectedServers}
                      placeholder={t('settings.selectServers') || 'Select servers...'}
                      disabled={loading}
                    />
                  </div>
                </>
              )}

              <div className="flex justify-end gap-2">
                <button
                  type="button"
                  onClick={() => setIsEditing(false)}
                  className="px-4 py-2 bg-white border border-gray-300 text-gray-700 rounded-md text-sm font-medium hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 h-[38px]"
                >
                  {t('common.cancel') || 'Cancel'}
                </button>
                <button
                  type="button"
                  onClick={handleSave}
                  disabled={loading || saving}
                  className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-md text-sm font-medium disabled:opacity-50 btn-primary h-[38px]"
                >
                  {saving ? t('common.saving') || 'Saving...' : t('common.save') || 'Save'}
                </button>
              </div>
            </div>
          </div>
        </td>
      </tr>
    );
  }

  return (
    <tr className="hover:bg-gray-50">
      <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
        {keyData.name}
      </td>
      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 font-mono">
        <div className="flex items-center gap-2">
          <span>
            {keyData.token.length > 12
              ? `${keyData.token.substring(0, 8)}...${keyData.token.substring(keyData.token.length - 4)}`
              : keyData.token}
          </span>
          <button
            onClick={handleCopyToken}
            className="text-gray-400 hover:text-gray-600 transition-colors"
            title={t('common.copy') || 'Copy'}
          >
            <Copy className="h-3.5 w-3.5" />
          </button>
        </div>
      </td>
      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
        <span
          className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${keyData.enabled ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'}`}
        >
          {keyData.enabled ? t('common.active') || 'Active' : t('common.inactive') || 'Inactive'}
        </span>
      </td>
      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
        {formatAccessTypeDisplay(keyData)}
      </td>
      <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
        <button
          onClick={() => setIsEditing(true)}
          className="text-blue-600 hover:text-blue-900 mr-4 inline-flex items-center"
          title={t('common.edit') || 'Edit'}
        >
          <Edit className="h-4 w-4" />
        </button>
        <button
          onClick={handleDelete}
          disabled={deleting}
          className="text-red-600 hover:text-red-900 inline-flex items-center"
          title={t('common.delete') || 'Delete'}
        >
          <Trash2 className="h-4 w-4" />
        </button>
      </td>
    </tr>
  );
};

const SettingsPage: React.FC = () => {
  const { t } = useTranslation();
  const navigate = useNavigate();
  const { showToast } = useToast();
  const { servers } = useServerContext();
  const { groups } = useGroupData();

  const [installConfig, setInstallConfig] = useState<{
    pythonIndexUrl: string;
    npmRegistry: string;
    baseUrl: string;
  }>({
    pythonIndexUrl: '',
    npmRegistry: '',
    baseUrl: 'http://localhost:3000',
  });

  const [tempSmartRoutingConfig, setTempSmartRoutingConfig] = useState<{
    dbUrl: string;
    openaiApiBaseUrl: string;
    openaiApiKey: string;
    openaiApiEmbeddingModel: string;
  }>({
    dbUrl: '',
    openaiApiBaseUrl: '',
    openaiApiKey: '',
    openaiApiEmbeddingModel: '',
  });

  const [tempMCPRouterConfig, setTempMCPRouterConfig] = useState<{
    apiKey: string;
    referer: string;
    title: string;
    baseUrl: string;
  }>({
    apiKey: '',
    referer: 'https://www.mcphubx.com',
    title: 'MCPHub',
    baseUrl: 'https://api.mcprouter.to/v1',
  });

  const [tempOAuthServerConfig, setTempOAuthServerConfig] = useState<{
    accessTokenLifetime: string;
    refreshTokenLifetime: string;
    authorizationCodeLifetime: string;
    allowedScopes: string;
    dynamicRegistrationAllowedGrantTypes: string;
  }>({
    accessTokenLifetime: '3600',
    refreshTokenLifetime: '1209600',
    authorizationCodeLifetime: '300',
    allowedScopes: 'read, write',
    dynamicRegistrationAllowedGrantTypes: 'authorization_code, refresh_token',
  });

  const [tempNameSeparator, setTempNameSeparator] = useState<string>('-');
  const [showAddBearerKeyForm, setShowAddBearerKeyForm] = useState(false);

  const {
    routingConfig,
    tempRoutingConfig,
    setTempRoutingConfig,
    installConfig: savedInstallConfig,
    smartRoutingConfig,
    mcpRouterConfig,
    oauthServerConfig,
    nameSeparator,
    enableSessionRebuild,
    loading,
    bearerKeys,
    updateRoutingConfig,
    updateRoutingConfigBatch,
    updateInstallConfig,
    updateSmartRoutingConfig,
    updateSmartRoutingConfigBatch,
    updateMCPRouterConfig,
    updateOAuthServerConfig,
    updateNameSeparator,
    updateSessionRebuild,
    exportMCPSettings,
    createBearerKey,
    updateBearerKey,
    deleteBearerKey,
    refreshBearerKeys,
  } = useSettingsData();

  // Update local installConfig when savedInstallConfig changes
  useEffect(() => {
    if (savedInstallConfig) {
      setInstallConfig(savedInstallConfig);
    }
  }, [savedInstallConfig]);

  // Update local tempSmartRoutingConfig when smartRoutingConfig changes
  useEffect(() => {
    if (smartRoutingConfig) {
      setTempSmartRoutingConfig({
        dbUrl: smartRoutingConfig.dbUrl || '',
        openaiApiBaseUrl: smartRoutingConfig.openaiApiBaseUrl || '',
        openaiApiKey: smartRoutingConfig.openaiApiKey || '',
        openaiApiEmbeddingModel: smartRoutingConfig.openaiApiEmbeddingModel || '',
      });
    }
  }, [smartRoutingConfig]);

  // Update local tempMCPRouterConfig when mcpRouterConfig changes
  useEffect(() => {
    if (mcpRouterConfig) {
      setTempMCPRouterConfig({
        apiKey: mcpRouterConfig.apiKey || '',
        referer: mcpRouterConfig.referer || 'https://www.mcphubx.com',
        title: mcpRouterConfig.title || 'MCPHub',
        baseUrl: mcpRouterConfig.baseUrl || 'https://api.mcprouter.to/v1',
      });
    }
  }, [mcpRouterConfig]);

  useEffect(() => {
    if (oauthServerConfig) {
      setTempOAuthServerConfig({
        accessTokenLifetime:
          oauthServerConfig.accessTokenLifetime !== undefined
            ? String(oauthServerConfig.accessTokenLifetime)
            : '',
        refreshTokenLifetime:
          oauthServerConfig.refreshTokenLifetime !== undefined
            ? String(oauthServerConfig.refreshTokenLifetime)
            : '',
        authorizationCodeLifetime:
          oauthServerConfig.authorizationCodeLifetime !== undefined
            ? String(oauthServerConfig.authorizationCodeLifetime)
            : '',
        allowedScopes:
          oauthServerConfig.allowedScopes && oauthServerConfig.allowedScopes.length > 0
            ? oauthServerConfig.allowedScopes.join(', ')
            : '',
        dynamicRegistrationAllowedGrantTypes: oauthServerConfig.dynamicRegistration
          ?.allowedGrantTypes?.length
          ? oauthServerConfig.dynamicRegistration.allowedGrantTypes.join(', ')
          : '',
      });
    }
  }, [oauthServerConfig]);

  // Update local tempNameSeparator when nameSeparator changes
  useEffect(() => {
    setTempNameSeparator(nameSeparator);
  }, [nameSeparator]);

  // Refresh bearer keys when component mounts
  useEffect(() => {
    refreshBearerKeys();
  }, []);

  const [sectionsVisible, setSectionsVisible] = useState({
    routingConfig: false,
    installConfig: false,
    smartRoutingConfig: false,
    oauthServerConfig: false,
    mcpRouterConfig: false,
    nameSeparator: false,
    password: false,
    exportConfig: false,
    bearerKeys: false,
  });

  const toggleSection = (
    section:
      | 'routingConfig'
      | 'installConfig'
      | 'smartRoutingConfig'
      | 'oauthServerConfig'
      | 'mcpRouterConfig'
      | 'nameSeparator'
      | 'password'
      | 'exportConfig'
      | 'bearerKeys',
  ) => {
    setSectionsVisible((prev) => ({
      ...prev,
      [section]: !prev[section],
    }));
  };

  const handleRoutingConfigChange = async (
    key:
      | 'enableGlobalRoute'
      | 'enableGroupNameRoute'
      | 'enableBearerAuth'
      | 'bearerAuthKey'
      | 'skipAuth',
    value: boolean | string,
  ) => {
    // If enableBearerAuth is turned on and there's no key, generate one first
    if (key === 'enableBearerAuth' && value === true) {
      if (!tempRoutingConfig.bearerAuthKey && !routingConfig.bearerAuthKey) {
        const newKey = generateRandomKey();
        handleBearerAuthKeyChange(newKey);

        // Update both enableBearerAuth and bearerAuthKey in a single call
        const success = await updateRoutingConfigBatch({
          enableBearerAuth: true,
          bearerAuthKey: newKey,
        });

        if (success) {
          // Update tempRoutingConfig to reflect the saved values
          setTempRoutingConfig((prev) => ({
            ...prev,
            bearerAuthKey: newKey,
          }));
        }
        return;
      }
    }

    await updateRoutingConfig(key, value);
  };

  const handleBearerAuthKeyChange = (value: string) => {
    setTempRoutingConfig((prev) => ({
      ...prev,
      bearerAuthKey: value,
    }));
  };

  const handleInstallConfigChange = (
    key: 'pythonIndexUrl' | 'npmRegistry' | 'baseUrl',
    value: string,
  ) => {
    setInstallConfig({
      ...installConfig,
      [key]: value,
    });
  };

  const saveInstallConfig = async (key: 'pythonIndexUrl' | 'npmRegistry' | 'baseUrl') => {
    await updateInstallConfig(key, installConfig[key]);
  };

  const handleSmartRoutingConfigChange = (
    key: 'dbUrl' | 'openaiApiBaseUrl' | 'openaiApiKey' | 'openaiApiEmbeddingModel',
    value: string,
  ) => {
    setTempSmartRoutingConfig({
      ...tempSmartRoutingConfig,
      [key]: value,
    });
  };

  const handleMCPRouterConfigChange = (
    key: 'apiKey' | 'referer' | 'title' | 'baseUrl',
    value: string,
  ) => {
    setTempMCPRouterConfig({
      ...tempMCPRouterConfig,
      [key]: value,
    });
  };

  const saveMCPRouterConfig = async (key: 'apiKey' | 'referer' | 'title' | 'baseUrl') => {
    await updateMCPRouterConfig(key, tempMCPRouterConfig[key]);
  };

  type OAuthServerNumberField =
    | 'accessTokenLifetime'
    | 'refreshTokenLifetime'
    | 'authorizationCodeLifetime';

  const handleOAuthServerNumberChange = (key: OAuthServerNumberField, value: string) => {
    setTempOAuthServerConfig((prev) => ({
      ...prev,
      [key]: value,
    }));
  };

  const handleOAuthServerTextChange = (
    key: 'allowedScopes' | 'dynamicRegistrationAllowedGrantTypes',
    value: string,
  ) => {
    setTempOAuthServerConfig((prev) => ({
      ...prev,
      [key]: value,
    }));
  };

  const saveOAuthServerNumberConfig = async (key: OAuthServerNumberField) => {
    const rawValue = tempOAuthServerConfig[key];
    if (!rawValue || rawValue.trim() === '') {
      showToast(t('settings.invalidNumberInput') || 'Please enter a valid number', 'error');
      return;
    }

    const parsedValue = Number(rawValue);
    if (Number.isNaN(parsedValue) || parsedValue < 0) {
      showToast(t('settings.invalidNumberInput') || 'Please enter a valid number', 'error');
      return;
    }

    await updateOAuthServerConfig(key, parsedValue);
  };

  const saveOAuthServerAllowedScopes = async () => {
    const scopes = tempOAuthServerConfig.allowedScopes
      .split(',')
      .map((scope) => scope.trim())
      .filter((scope) => scope.length > 0);

    await updateOAuthServerConfig('allowedScopes', scopes);
  };

  const saveOAuthServerGrantTypes = async () => {
    const grantTypes = tempOAuthServerConfig.dynamicRegistrationAllowedGrantTypes
      .split(',')
      .map((grant) => grant.trim())
      .filter((grant) => grant.length > 0);

    await updateOAuthServerConfig('dynamicRegistration', {
      ...oauthServerConfig.dynamicRegistration,
      allowedGrantTypes: grantTypes,
    });
  };

  const handleOAuthServerToggle = async (
    key: 'enabled' | 'requireClientSecret' | 'requireState',
    value: boolean,
  ) => {
    await updateOAuthServerConfig(key, value);
  };

  const handleDynamicRegistrationToggle = async (
    updates: Partial<typeof oauthServerConfig.dynamicRegistration>,
  ) => {
    await updateOAuthServerConfig('dynamicRegistration', {
      ...oauthServerConfig.dynamicRegistration,
      ...updates,
    });
  };

  const saveNameSeparator = async () => {
    await updateNameSeparator(tempNameSeparator);
  };

  const handleSmartRoutingEnabledChange = async (value: boolean) => {
    // If enabling Smart Routing, validate required fields and save any unsaved changes
    if (value) {
      const currentDbUrl = tempSmartRoutingConfig.dbUrl || smartRoutingConfig.dbUrl;
      const currentOpenaiApiKey =
        tempSmartRoutingConfig.openaiApiKey || smartRoutingConfig.openaiApiKey;

      if (!currentDbUrl || !currentOpenaiApiKey) {
        const missingFields = [];
        if (!currentDbUrl) missingFields.push(t('settings.dbUrl'));
        if (!currentOpenaiApiKey) missingFields.push(t('settings.openaiApiKey'));

        showToast(
          t('settings.smartRoutingValidationError', {
            fields: missingFields.join(', '),
          }),
        );
        return;
      }

      // Prepare updates object with unsaved changes and enabled status
      const updates: any = { enabled: value };

      // Check for unsaved changes and include them in the batch update
      if (tempSmartRoutingConfig.dbUrl !== smartRoutingConfig.dbUrl) {
        updates.dbUrl = tempSmartRoutingConfig.dbUrl;
      }
      if (tempSmartRoutingConfig.openaiApiBaseUrl !== smartRoutingConfig.openaiApiBaseUrl) {
        updates.openaiApiBaseUrl = tempSmartRoutingConfig.openaiApiBaseUrl;
      }
      if (tempSmartRoutingConfig.openaiApiKey !== smartRoutingConfig.openaiApiKey) {
        updates.openaiApiKey = tempSmartRoutingConfig.openaiApiKey;
      }
      if (
        tempSmartRoutingConfig.openaiApiEmbeddingModel !==
        smartRoutingConfig.openaiApiEmbeddingModel
      ) {
        updates.openaiApiEmbeddingModel = tempSmartRoutingConfig.openaiApiEmbeddingModel;
      }

      // Save all changes in a single batch update
      await updateSmartRoutingConfigBatch(updates);
    } else {
      // If disabling, just update the enabled status
      await updateSmartRoutingConfig('enabled', value);
    }
  };

  const handleSaveSmartRoutingConfig = async () => {
    const updates: any = {};

    if (tempSmartRoutingConfig.dbUrl !== smartRoutingConfig.dbUrl) {
      updates.dbUrl = tempSmartRoutingConfig.dbUrl;
    }
    if (tempSmartRoutingConfig.openaiApiBaseUrl !== smartRoutingConfig.openaiApiBaseUrl) {
      updates.openaiApiBaseUrl = tempSmartRoutingConfig.openaiApiBaseUrl;
    }
    if (tempSmartRoutingConfig.openaiApiKey !== smartRoutingConfig.openaiApiKey) {
      updates.openaiApiKey = tempSmartRoutingConfig.openaiApiKey;
    }
    if (
      tempSmartRoutingConfig.openaiApiEmbeddingModel !== smartRoutingConfig.openaiApiEmbeddingModel
    ) {
      updates.openaiApiEmbeddingModel = tempSmartRoutingConfig.openaiApiEmbeddingModel;
    }

    if (Object.keys(updates).length > 0) {
      await updateSmartRoutingConfigBatch(updates);
    } else {
      showToast(t('settings.noChanges') || 'No changes to save', 'info');
    }
  };

  const handlePasswordChangeSuccess = () => {
    setTimeout(() => {
      navigate('/');
    }, 2000);
  };

  const [copiedConfig, setCopiedConfig] = useState(false);
  const [mcpSettingsJson, setMcpSettingsJson] = useState<string>('');

  const [newBearerKey, setNewBearerKey] = useState<{
    name: string;
    token: string;
    enabled: boolean;
    accessType: 'all' | 'groups' | 'servers' | 'custom';
    allowedGroups: string;
    allowedServers: string;
  }>({
    name: '',
    token: '',
    enabled: true,
    accessType: 'all',
    allowedGroups: '',
    allowedServers: '',
  });

  const [newSelectedGroups, setNewSelectedGroups] = useState<string[]>([]);
  const [newSelectedServers, setNewSelectedServers] = useState<string[]>([]);

  // Prepare options for MultiSelect
  const availableServers = servers.map((server) => ({
    value: server.name,
    label: server.name,
  }));

  const availableGroups = groups.map((group) => ({
    value: group.name,
    label: group.name,
  }));

  // Reset selected arrays when accessType changes
  useEffect(() => {
    if (newBearerKey.accessType !== 'groups' && newBearerKey.accessType !== 'custom') {
      setNewSelectedGroups([]);
    }
    if (newBearerKey.accessType !== 'servers' && newBearerKey.accessType !== 'custom') {
      setNewSelectedServers([]);
    }
  }, [newBearerKey.accessType]);

  const fetchMcpSettings = async () => {
    try {
      const result = await exportMCPSettings();
      console.log('Fetched MCP settings:', result);
      const configJson = JSON.stringify(result.data, null, 2);
      setMcpSettingsJson(configJson);
    } catch (error) {
      console.error('Error fetching MCP settings:', error);
      showToast(t('settings.exportError') || 'Failed to fetch settings', 'error');
    }
  };

  useEffect(() => {
    if (sectionsVisible.exportConfig && !mcpSettingsJson) {
      fetchMcpSettings();
    }
  }, [sectionsVisible.exportConfig]);

  const handleCopyConfig = async () => {
    if (!mcpSettingsJson) return;

    try {
      if (navigator.clipboard && window.isSecureContext) {
        await navigator.clipboard.writeText(mcpSettingsJson);
        setCopiedConfig(true);
        showToast(t('common.copySuccess') || 'Copied to clipboard', 'success');
        setTimeout(() => setCopiedConfig(false), 2000);
      } else {
        // Fallback for HTTP or unsupported clipboard API
        const textArea = document.createElement('textarea');
        textArea.value = mcpSettingsJson;
        textArea.style.position = 'fixed';
        textArea.style.left = '-9999px';
        document.body.appendChild(textArea);
        textArea.focus();
        textArea.select();
        try {
          document.execCommand('copy');
          setCopiedConfig(true);
          showToast(t('common.copySuccess') || 'Copied to clipboard', 'success');
          setTimeout(() => setCopiedConfig(false), 2000);
        } catch (err) {
          showToast(t('common.copyFailed') || 'Copy failed', 'error');
          console.error('Copy to clipboard failed:', err);
        }
        document.body.removeChild(textArea);
      }
    } catch (error) {
      console.error('Error copying configuration:', error);
      showToast(t('common.copyFailed') || 'Copy failed', 'error');
    }
  };

  const handleDownloadConfig = () => {
    if (!mcpSettingsJson) return;

    const blob = new Blob([mcpSettingsJson], { type: 'application/json' });
    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.download = 'mcp_settings.json';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(url);
    showToast(t('settings.exportSuccess') || 'Settings exported successfully', 'success');
  };

  const parseCommaSeparated = (value: string): string[] | undefined => {
    const parts = value
      .split(',')
      .map((item) => item.trim())
      .filter((item) => item.length > 0);
    return parts.length > 0 ? parts : undefined;
  };

  const handleCreateBearerKey = async () => {
    if (!newBearerKey.name || !newBearerKey.token) {
      showToast(t('settings.bearerKeyRequired') || 'Name and token are required', 'error');
      return;
    }

    if (newBearerKey.accessType === 'groups' && newSelectedGroups.length === 0) {
      showToast(t('settings.selectAtLeastOneGroup') || 'Please select at least one group', 'error');
      return;
    }
    if (newBearerKey.accessType === 'servers' && newSelectedServers.length === 0) {
      showToast(
        t('settings.selectAtLeastOneServer') || 'Please select at least one server',
        'error',
      );
      return;
    }
    if (
      newBearerKey.accessType === 'custom' &&
      newSelectedGroups.length === 0 &&
      newSelectedServers.length === 0
    ) {
      showToast(
        t('settings.selectAtLeastOneGroupOrServer') || 'Please select at least one group or server',
        'error',
      );
      return;
    }

    await createBearerKey({
      name: newBearerKey.name,
      token: newBearerKey.token,
      enabled: newBearerKey.enabled,
      accessType: newBearerKey.accessType,
      allowedGroups:
        (newBearerKey.accessType === 'groups' || newBearerKey.accessType === 'custom') &&
        newSelectedGroups.length > 0
          ? newSelectedGroups
          : undefined,
      allowedServers:
        (newBearerKey.accessType === 'servers' || newBearerKey.accessType === 'custom') &&
        newSelectedServers.length > 0
          ? newSelectedServers
          : undefined,
    } as any);

    setNewBearerKey({
      name: '',
      token: '',
      enabled: true,
      accessType: 'all',
      allowedGroups: '',
      allowedServers: '',
    });
    setNewSelectedGroups([]);
    setNewSelectedServers([]);
    await refreshBearerKeys();
  };

  const handleSaveExistingBearerKey = async (
    id: string,
    payload: {
      name: string;
      token: string;
      enabled: boolean;
      accessType: 'all' | 'groups' | 'servers' | 'custom';
      allowedGroups: string;
      allowedServers: string;
    },
  ) => {
    await updateBearerKey(id, {
      name: payload.name,
      token: payload.token,
      enabled: payload.enabled,
      accessType: payload.accessType,
      allowedGroups: parseCommaSeparated(payload.allowedGroups),
      allowedServers: parseCommaSeparated(payload.allowedServers),
    } as any);
    await refreshBearerKeys();
  };

  const handleDeleteExistingBearerKey = async (id: string) => {
    await deleteBearerKey(id);
    await refreshBearerKeys();
  };

  return (
    <div className="container mx-auto">
      <h1 className="text-2xl font-bold text-gray-900 mb-8">{t('pages.settings.title')}</h1>

      {/* Bearer Keys Settings */}
      <PermissionChecker permissions={PERMISSIONS.SETTINGS_ROUTE_CONFIG}>
        <div className="bg-white shadow rounded-lg mb-6 page-card dashboard-card">
          <div
            className="flex justify-between items-center cursor-pointer transition-colors duration-200 hover:text-blue-600 py-4 px-6"
            onClick={() => toggleSection('bearerKeys')}
          >
            <h2 className="font-semibold text-gray-800">
              {t('settings.bearerKeysSectionTitle') || 'Bearer authentication keys'}
            </h2>
            <span className="text-gray-500 transition-transform duration-200">
              {sectionsVisible.bearerKeys ? '▼' : '►'}
            </span>
          </div>

          {sectionsVisible.bearerKeys && (
            <div className="space-y-4 pb-4 px-6">
              <div className="flex justify-between items-center">
                <p className="text-sm text-gray-600">
                  {t('settings.bearerKeysSectionDescription') ||
                    'Manage multiple bearer authentication keys with different access scopes.'}
                </p>
                {!showAddBearerKeyForm && (
                  <button
                    type="button"
                    onClick={() => setShowAddBearerKeyForm(true)}
                    className="flex items-center text-blue-600 hover:text-blue-800 font-medium transition-colors duration-200"
                  >
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      className="h-5 w-5 mr-1"
                      viewBox="0 0 20 20"
                      fill="currentColor"
                    >
                      <path
                        fillRule="evenodd"
                        d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"
                        clipRule="evenodd"
                      />
                    </svg>
                    {t('settings.addBearerKey') || 'Add bearer key'}
                  </button>
                )}
              </div>

              {/* Existing keys */}
              {bearerKeys.length === 0 ? (
                <p className="text-sm text-gray-500">
                  {t('settings.noBearerKeys') || 'No bearer keys configured yet.'}
                </p>
              ) : (
                <div className="mt-2 overflow-x-auto">
                  <table className="min-w-full divide-y divide-gray-200 border border-gray-200 rounded-lg">
                    <thead className="bg-gray-50">
                      <tr>
                        <th
                          scope="col"
                          className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                        >
                          {t('settings.bearerKeyName') || 'Name'}
                        </th>
                        <th
                          scope="col"
                          className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                        >
                          {t('settings.bearerKeyToken') || 'Token'}
                        </th>
                        <th
                          scope="col"
                          className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                        >
                          {t('settings.bearerKeyEnabled') || 'Status'}
                        </th>
                        <th
                          scope="col"
                          className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                        >
                          {t('settings.bearerKeyAccessType') || 'Access Scope'}
                        </th>
                        <th
                          scope="col"
                          className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider"
                        >
                          {t('common.actions') || 'Actions'}
                        </th>
                      </tr>
                    </thead>
                    <tbody className="bg-white divide-y divide-gray-200">
                      {bearerKeys.map((key) => (
                        <BearerKeyRow
                          key={key.id}
                          keyData={key}
                          loading={loading}
                          availableServers={availableServers}
                          availableGroups={availableGroups}
                          onSave={handleSaveExistingBearerKey}
                          onDelete={handleDeleteExistingBearerKey}
                        />
                      ))}
                    </tbody>
                  </table>
                </div>
              )}

              {/* New key form */}
              {showAddBearerKeyForm && (
                <div className="mt-6 border-t border-gray-200 pt-6">
                  <div className="bg-gray-50 rounded-lg p-5 border border-gray-200">
                    <h3 className="font-medium text-gray-900 mb-4 flex items-center gap-2">
                      <span className="bg-blue-100 text-blue-600 p-1 rounded">
                        <svg
                          xmlns="http://www.w3.org/2000/svg"
                          className="h-4 w-4"
                          viewBox="0 0 20 20"
                          fill="currentColor"
                        >
                          <path
                            fillRule="evenodd"
                            d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"
                            clipRule="evenodd"
                          />
                        </svg>
                      </span>
                      {t('settings.addBearerKey') || 'Add bearer key'}
                    </h3>

                    <div className="grid grid-cols-1 md:grid-cols-12 gap-4 mb-4">
                      <div className="md:col-span-3">
                        <label className="block text-sm font-medium text-gray-700 mb-1">
                          {t('settings.bearerKeyName') || 'Name'}
                        </label>
                        <input
                          type="text"
                          className="block w-full py-2 px-3 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm form-input transition-shadow duration-200"
                          placeholder="e.g. My API Key"
                          value={newBearerKey.name}
                          onChange={(e) =>
                            setNewBearerKey((prev) => ({ ...prev, name: e.target.value }))
                          }
                          disabled={loading}
                        />
                      </div>
                      <div className="md:col-span-9">
                        <label className="block text-sm font-medium text-gray-700 mb-1">
                          {t('settings.bearerKeyToken') || 'Token'}
                        </label>
                        <div className="flex rounded-md shadow-sm">
                          <input
                            type="text"
                            className="flex-1 block w-full py-2 px-3 border border-gray-300 rounded-l-md rounded-r-none border-r-0 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm form-input transition-shadow duration-200"
                            placeholder="sk-..."
                            value={newBearerKey.token}
                            onChange={(e) =>
                              setNewBearerKey((prev) => ({ ...prev, token: e.target.value }))
                            }
                            disabled={loading}
                          />
                          <button
                            type="button"
                            onClick={() =>
                              setNewBearerKey((prev) => ({ ...prev, token: generateRandomKey() }))
                            }
                            disabled={loading}
                            className="relative -ml-[5px] inline-flex items-center px-4 py-2 border border-gray-300 bg-gray-100 text-gray-700 text-sm font-medium rounded-r-md rounded-l-none hover:bg-gray-200 focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 transition-colors duration-200 z-10"
                          >
                            {t('settings.generate') || 'Generate'}
                          </button>
                        </div>
                      </div>
                    </div>

                    <div className="flex flex-wrap items-end gap-4 mb-2">
                      <div className="w-40">
                        <label className="block text-sm font-medium text-gray-700 mb-1">
                          {t('settings.bearerKeyEnabled') || 'Status'}
                        </label>
                        <div className="flex items-center h-[38px] px-3 bg-white border border-gray-300 rounded-md">
                          <span
                            className={`text-sm mr-3 ${newBearerKey.enabled ? 'text-green-600 font-medium' : 'text-gray-500'}`}
                          >
                            {newBearerKey.enabled ? 'Active' : 'Inactive'}
                          </span>
                          <Switch
                            disabled={loading}
                            checked={newBearerKey.enabled}
                            onCheckedChange={(checked) =>
                              setNewBearerKey((prev) => ({ ...prev, enabled: checked }))
                            }
                          />
                        </div>
                      </div>

                      <div className="w-48">
                        <label className="block text-sm font-medium text-gray-700 mb-1">
                          {t('settings.bearerKeyAccessType') || 'Access scope'}
                        </label>
                        <select
                          className="block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm form-select transition-shadow duration-200"
                          value={newBearerKey.accessType}
                          onChange={(e) =>
                            setNewBearerKey((prev) => ({
                              ...prev,
                              accessType: e.target.value as 'all' | 'groups' | 'servers' | 'custom',
                            }))
                          }
                          disabled={loading}
                        >
                          <option value="all">
                            {t('settings.bearerKeyAccessAll') || 'All Resources'}
                          </option>
                          <option value="groups">
                            {t('settings.bearerKeyAccessGroups') || 'Specific Groups'}
                          </option>
                          <option value="servers">
                            {t('settings.bearerKeyAccessServers') || 'Specific Servers'}
                          </option>
                          <option value="custom">
                            {t('settings.bearerKeyAccessCustom') || 'Custom (Groups & Servers)'}
                          </option>
                        </select>
                      </div>

                      {newBearerKey.accessType !== 'custom' && (
                        <div className="flex-1 min-w-[200px]">
                          <label
                            className={`block text-sm font-medium mb-1 ${newBearerKey.accessType === 'all' ? 'text-gray-400' : 'text-gray-700'}`}
                          >
                            {newBearerKey.accessType === 'groups'
                              ? t('settings.bearerKeyAllowedGroups') || 'Allowed groups'
                              : t('settings.bearerKeyAllowedServers') || 'Allowed servers'}
                          </label>
                          <MultiSelect
                            options={
                              newBearerKey.accessType === 'groups'
                                ? availableGroups
                                : availableServers
                            }
                            selected={
                              newBearerKey.accessType === 'groups'
                                ? newSelectedGroups
                                : newSelectedServers
                            }
                            onChange={
                              newBearerKey.accessType === 'groups'
                                ? setNewSelectedGroups
                                : setNewSelectedServers
                            }
                            placeholder={
                              newBearerKey.accessType === 'groups'
                                ? t('settings.selectGroups') || 'Select groups...'
                                : t('settings.selectServers') || 'Select servers...'
                            }
                            disabled={loading || newBearerKey.accessType === 'all'}
                          />
                        </div>
                      )}

                      {newBearerKey.accessType === 'custom' && (
                        <>
                          <div className="flex-1 min-w-[200px]">
                            <label className="block text-sm font-medium text-gray-700 mb-1">
                              {t('settings.bearerKeyAllowedGroups') || 'Allowed groups'}
                            </label>
                            <MultiSelect
                              options={availableGroups}
                              selected={newSelectedGroups}
                              onChange={setNewSelectedGroups}
                              placeholder={t('settings.selectGroups') || 'Select groups...'}
                              disabled={loading}
                            />
                          </div>
                          <div className="flex-1 min-w-[200px]">
                            <label className="block text-sm font-medium text-gray-700 mb-1">
                              {t('settings.bearerKeyAllowedServers') || 'Allowed servers'}
                            </label>
                            <MultiSelect
                              options={availableServers}
                              selected={newSelectedServers}
                              onChange={setNewSelectedServers}
                              placeholder={t('settings.selectServers') || 'Select servers...'}
                              disabled={loading}
                            />
                          </div>
                        </>
                      )}

                      <div className="flex justify-end gap-2">
                        <button
                          type="button"
                          onClick={() => setShowAddBearerKeyForm(false)}
                          className="px-4 py-2 bg-white border border-gray-300 text-gray-700 rounded-md text-sm font-medium hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 h-[38px]"
                        >
                          {t('common.cancel') || 'Cancel'}
                        </button>
                        <button
                          type="button"
                          onClick={handleCreateBearerKey}
                          disabled={loading}
                          className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-md text-sm font-medium disabled:opacity-50 btn-primary h-[38px]"
                        >
                          {t('settings.addBearerKeyButton') || 'Create Key'}
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              )}
            </div>
          )}
        </div>
      </PermissionChecker>

      {/* Smart Routing Configuration Settings */}
      <PermissionChecker permissions={PERMISSIONS.SETTINGS_SMART_ROUTING}>
        <div className="bg-white shadow rounded-lg mb-6 page-card dashboard-card">
          <div
            className="flex justify-between items-center cursor-pointer transition-colors duration-200 hover:text-blue-600 py-4 px-6"
            onClick={() => toggleSection('smartRoutingConfig')}
          >
            <h2 className="font-semibold text-gray-800">{t('pages.settings.smartRouting')}</h2>
            <span className="text-gray-500 transition-transform duration-200">
              {sectionsVisible.smartRoutingConfig ? '▼' : '►'}
            </span>
          </div>

          {sectionsVisible.smartRoutingConfig && (
            <div className="space-y-4 pb-4 px-6">
              <div className="flex items-center justify-between p-3 bg-gray-50 rounded-md">
                <div>
                  <h3 className="font-medium text-gray-700">{t('settings.enableSmartRouting')}</h3>
                  <p className="text-sm text-gray-500">
                    {t('settings.enableSmartRoutingDescription')}
                  </p>
                </div>
                <Switch
                  disabled={loading}
                  checked={smartRoutingConfig.enabled}
                  onCheckedChange={(checked) => handleSmartRoutingEnabledChange(checked)}
                />
              </div>

              {/* hide when DB_URL env is set */}
              {smartRoutingConfig.dbUrl !== '${DB_URL}' && (
                <div className="p-3 bg-gray-50 rounded-md">
                  <div className="mb-2">
                    <h3 className="font-medium text-gray-700">
                      <span className="text-red-500 px-1">*</span>
                      {t('settings.dbUrl')}
                    </h3>
                  </div>
                  <div className="flex items-center gap-3">
                    <input
                      type="text"
                      value={tempSmartRoutingConfig.dbUrl}
                      onChange={(e) => handleSmartRoutingConfigChange('dbUrl', e.target.value)}
                      placeholder={t('settings.dbUrlPlaceholder')}
                      className="flex-1 mt-1 block w-full py-2 px-3 border rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm border-gray-300 form-input"
                      disabled={loading}
                    />
                  </div>
                </div>
              )}

              <div className="p-3 bg-gray-50 rounded-md">
                <div className="mb-2">
                  <h3 className="font-medium text-gray-700">
                    <span className="text-red-500 px-1">*</span>
                    {t('settings.openaiApiKey')}
                  </h3>
                </div>
                <div className="flex items-center gap-3">
                  <input
                    type="password"
                    value={tempSmartRoutingConfig.openaiApiKey}
                    onChange={(e) => handleSmartRoutingConfigChange('openaiApiKey', e.target.value)}
                    placeholder={t('settings.openaiApiKeyPlaceholder')}
                    className="flex-1 mt-1 block w-full py-2 px-3 border rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm border-gray-300"
                    disabled={loading}
                  />
                </div>
              </div>

              <div className="p-3 bg-gray-50 rounded-md">
                <div className="mb-2">
                  <h3 className="font-medium text-gray-700">{t('settings.openaiApiBaseUrl')}</h3>
                </div>
                <div className="flex items-center gap-3">
                  <input
                    type="text"
                    value={tempSmartRoutingConfig.openaiApiBaseUrl}
                    onChange={(e) =>
                      handleSmartRoutingConfigChange('openaiApiBaseUrl', e.target.value)
                    }
                    placeholder={t('settings.openaiApiBaseUrlPlaceholder')}
                    className="flex-1 mt-1 block w-full py-2 px-3 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm form-input"
                    disabled={loading}
                  />
                </div>
              </div>

              <div className="p-3 bg-gray-50 rounded-md">
                <div className="mb-2">
                  <h3 className="font-medium text-gray-700">
                    {t('settings.openaiApiEmbeddingModel')}
                  </h3>
                </div>
                <div className="flex items-center gap-3">
                  <input
                    type="text"
                    value={tempSmartRoutingConfig.openaiApiEmbeddingModel}
                    onChange={(e) =>
                      handleSmartRoutingConfigChange('openaiApiEmbeddingModel', e.target.value)
                    }
                    placeholder={t('settings.openaiApiEmbeddingModelPlaceholder')}
                    className="flex-1 mt-1 block w-full py-2 px-3 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm form-input"
                    disabled={loading}
                  />
                </div>
              </div>

              <div className="flex justify-end pt-2">
                <button
                  onClick={handleSaveSmartRoutingConfig}
                  disabled={loading}
                  className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-md text-sm font-medium disabled:opacity-50 btn-primary"
                >
                  {t('common.save')}
                </button>
              </div>
            </div>
          )}
        </div>
      </PermissionChecker>

      {/* OAuth Server Configuration Settings */}
      <PermissionChecker permissions={PERMISSIONS.SETTINGS_OAUTH_SERVER}>
        <div className="bg-white shadow rounded-lg mb-6 dashboard-card">
          <div
            className="flex justify-between items-center cursor-pointer transition-colors duration-200 hover:text-blue-600 py-4 px-6"
            onClick={() => toggleSection('oauthServerConfig')}
          >
            <h2 className="font-semibold text-gray-800">{t('pages.settings.oauthServer')}</h2>
            <span className="text-gray-500">{sectionsVisible.oauthServerConfig ? '▼' : '►'}</span>
          </div>

          {sectionsVisible.oauthServerConfig && (
            <div className="space-y-4 pb-4 px-6">
              <div className="flex items-center justify-between p-3 bg-gray-50 rounded-md">
                <div>
                  <h3 className="font-medium text-gray-700">{t('settings.enableOauthServer')}</h3>
                  <p className="text-sm text-gray-500">
                    {t('settings.enableOauthServerDescription')}
                  </p>
                </div>
                <Switch
                  disabled={loading}
                  checked={oauthServerConfig.enabled}
                  onCheckedChange={(checked) => handleOAuthServerToggle('enabled', checked)}
                />
              </div>

              <div className="flex items-center justify-between p-3 bg-gray-50 rounded-md">
                <div>
                  <h3 className="font-medium text-gray-700">{t('settings.requireClientSecret')}</h3>
                  <p className="text-sm text-gray-500">
                    {t('settings.requireClientSecretDescription')}
                  </p>
                </div>
                <Switch
                  disabled={loading || !oauthServerConfig.enabled}
                  checked={oauthServerConfig.requireClientSecret}
                  onCheckedChange={(checked) =>
                    handleOAuthServerToggle('requireClientSecret', checked)
                  }
                />
              </div>

              <div className="flex items-center justify-between p-3 bg-gray-50 rounded-md">
                <div>
                  <h3 className="font-medium text-gray-700">{t('settings.requireState')}</h3>
                  <p className="text-sm text-gray-500">{t('settings.requireStateDescription')}</p>
                </div>
                <Switch
                  disabled={loading || !oauthServerConfig.enabled}
                  checked={oauthServerConfig.requireState}
                  onCheckedChange={(checked) => handleOAuthServerToggle('requireState', checked)}
                />
              </div>

              <div className="p-3 bg-gray-50 rounded-md">
                <div className="mb-2">
                  <h3 className="font-medium text-gray-700">{t('settings.accessTokenLifetime')}</h3>
                  <p className="text-sm text-gray-500">
                    {t('settings.accessTokenLifetimeDescription')}
                  </p>
                </div>
                <div className="flex items-center gap-3">
                  <input
                    type="number"
                    value={tempOAuthServerConfig.accessTokenLifetime}
                    onChange={(e) =>
                      handleOAuthServerNumberChange('accessTokenLifetime', e.target.value)
                    }
                    placeholder={t('settings.accessTokenLifetimePlaceholder')}
                    className="flex-1 mt-1 block w-full py-2 px-3 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm form-input"
                    disabled={loading}
                  />
                  <button
                    onClick={() => saveOAuthServerNumberConfig('accessTokenLifetime')}
                    disabled={loading}
                    className="mt-1 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-md text-sm font-medium disabled:opacity-50 btn-primary"
                  >
                    {t('common.save')}
                  </button>
                </div>
              </div>

              <div className="p-3 bg-gray-50 rounded-md">
                <div className="mb-2">
                  <h3 className="font-medium text-gray-700">
                    {t('settings.refreshTokenLifetime')}
                  </h3>
                  <p className="text-sm text-gray-500">
                    {t('settings.refreshTokenLifetimeDescription')}
                  </p>
                </div>
                <div className="flex items-center gap-3">
                  <input
                    type="number"
                    value={tempOAuthServerConfig.refreshTokenLifetime}
                    onChange={(e) =>
                      handleOAuthServerNumberChange('refreshTokenLifetime', e.target.value)
                    }
                    placeholder={t('settings.refreshTokenLifetimePlaceholder')}
                    className="flex-1 mt-1 block w-full py-2 px-3 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm form-input"
                    disabled={loading}
                  />
                  <button
                    onClick={() => saveOAuthServerNumberConfig('refreshTokenLifetime')}
                    disabled={loading}
                    className="mt-1 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-md text-sm font-medium disabled:opacity-50 btn-primary"
                  >
                    {t('common.save')}
                  </button>
                </div>
              </div>

              <div className="p-3 bg-gray-50 rounded-md">
                <div className="mb-2">
                  <h3 className="font-medium text-gray-700">
                    {t('settings.authorizationCodeLifetime')}
                  </h3>
                  <p className="text-sm text-gray-500">
                    {t('settings.authorizationCodeLifetimeDescription')}
                  </p>
                </div>
                <div className="flex items-center gap-3">
                  <input
                    type="number"
                    value={tempOAuthServerConfig.authorizationCodeLifetime}
                    onChange={(e) =>
                      handleOAuthServerNumberChange('authorizationCodeLifetime', e.target.value)
                    }
                    placeholder={t('settings.authorizationCodeLifetimePlaceholder')}
                    className="flex-1 mt-1 block w-full py-2 px-3 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm form-input"
                    disabled={loading}
                  />
                  <button
                    onClick={() => saveOAuthServerNumberConfig('authorizationCodeLifetime')}
                    disabled={loading}
                    className="mt-1 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-md text-sm font-medium disabled:opacity-50 btn-primary"
                  >
                    {t('common.save')}
                  </button>
                </div>
              </div>

              <div className="p-3 bg-gray-50 rounded-md">
                <div className="mb-2">
                  <h3 className="font-medium text-gray-700">{t('settings.allowedScopes')}</h3>
                  <p className="text-sm text-gray-500">{t('settings.allowedScopesDescription')}</p>
                </div>
                <div className="flex items-center gap-3">
                  <input
                    type="text"
                    value={tempOAuthServerConfig.allowedScopes}
                    onChange={(e) => handleOAuthServerTextChange('allowedScopes', e.target.value)}
                    placeholder={t('settings.allowedScopesPlaceholder')}
                    className="flex-1 mt-1 block w-full py-2 px-3 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm form-input"
                    disabled={loading}
                  />
                  <button
                    onClick={saveOAuthServerAllowedScopes}
                    disabled={loading}
                    className="mt-1 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-md text-sm font-medium disabled:opacity-50 btn-primary"
                  >
                    {t('common.save')}
                  </button>
                </div>
              </div>

              <div className="p-3 bg-gray-50 rounded-md space-y-4">
                <div className="flex justify-between items-center">
                  <div>
                    <h3 className="font-medium text-gray-700">
                      {t('settings.enableDynamicRegistration')}
                    </h3>
                    <p className="text-sm text-gray-500">
                      {t('settings.dynamicRegistrationDescription')}
                    </p>
                  </div>
                  <Switch
                    disabled={loading || !oauthServerConfig.enabled}
                    checked={oauthServerConfig.dynamicRegistration.enabled}
                    onCheckedChange={(checked) =>
                      handleDynamicRegistrationToggle({ enabled: checked })
                    }
                  />
                </div>

                <div>
                  <div className="mb-2">
                    <h3 className="font-medium text-gray-700">
                      {t('settings.dynamicRegistrationAllowedGrantTypes')}
                    </h3>
                    <p className="text-sm text-gray-500">
                      {t('settings.dynamicRegistrationAllowedGrantTypesDescription')}
                    </p>
                  </div>
                  <div className="flex items-center gap-3">
                    <input
                      type="text"
                      value={tempOAuthServerConfig.dynamicRegistrationAllowedGrantTypes}
                      onChange={(e) =>
                        handleOAuthServerTextChange(
                          'dynamicRegistrationAllowedGrantTypes',
                          e.target.value,
                        )
                      }
                      placeholder={t('settings.dynamicRegistrationAllowedGrantTypesPlaceholder')}
                      className="flex-1 mt-1 block w-full py-2 px-3 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm form-input"
                      disabled={
                        loading ||
                        !oauthServerConfig.enabled ||
                        !oauthServerConfig.dynamicRegistration.enabled
                      }
                    />
                    <button
                      onClick={saveOAuthServerGrantTypes}
                      disabled={
                        loading ||
                        !oauthServerConfig.enabled ||
                        !oauthServerConfig.dynamicRegistration.enabled
                      }
                      className="mt-1 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-md text-sm font-medium disabled:opacity-50 btn-primary"
                    >
                      {t('common.save')}
                    </button>
                  </div>
                </div>

                <div className="flex items-center justify-between">
                  <div>
                    <h3 className="font-medium text-gray-700">
                      {t('settings.dynamicRegistrationAuth')}
                    </h3>
                    <p className="text-sm text-gray-500">
                      {t('settings.dynamicRegistrationAuthDescription')}
                    </p>
                  </div>
                  <Switch
                    disabled={
                      loading ||
                      !oauthServerConfig.enabled ||
                      !oauthServerConfig.dynamicRegistration.enabled
                    }
                    checked={oauthServerConfig.dynamicRegistration.requiresAuthentication}
                    onCheckedChange={(checked) =>
                      handleDynamicRegistrationToggle({ requiresAuthentication: checked })
                    }
                  />
                </div>
              </div>
            </div>
          )}
        </div>
      </PermissionChecker>

      {/* MCPRouter Configuration Settings */}
      <PermissionChecker permissions={PERMISSIONS.SETTINGS_INSTALL_CONFIG}>
        <div className="bg-white shadow rounded-lg mb-6 page-card dashboard-card">
          <div
            className="flex justify-between items-center cursor-pointer transition-colors duration-200 hover:text-blue-600 py-4 px-6"
            onClick={() => toggleSection('mcpRouterConfig')}
          >
            <h2 className="font-semibold text-gray-800">{t('settings.mcpRouterConfig')}</h2>
            <span className="text-gray-500 transition-transform duration-200">
              {sectionsVisible.mcpRouterConfig ? '▼' : '►'}
            </span>
          </div>

          {sectionsVisible.mcpRouterConfig && (
            <div className="space-y-4 pb-4 px-6">
              <div className="p-3 bg-gray-50 rounded-md">
                <div className="mb-2">
                  <h3 className="font-medium text-gray-700">{t('settings.mcpRouterApiKey')}</h3>
                  <p className="text-sm text-gray-500">
                    {t('settings.mcpRouterApiKeyDescription')}
                  </p>
                </div>
                <div className="flex items-center gap-3">
                  <input
                    type="password"
                    value={tempMCPRouterConfig.apiKey}
                    onChange={(e) => handleMCPRouterConfigChange('apiKey', e.target.value)}
                    placeholder={t('settings.mcpRouterApiKeyPlaceholder')}
                    className="flex-1 mt-1 block w-full py-2 px-3 border rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm border-gray-300 form-input"
                    disabled={loading}
                  />
                  <button
                    onClick={() => saveMCPRouterConfig('apiKey')}
                    disabled={loading}
                    className="mt-1 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-md text-sm font-medium disabled:opacity-50 btn-primary"
                  >
                    {t('common.save')}
                  </button>
                </div>
              </div>

              <div className="p-3 bg-gray-50 rounded-md">
                <div className="mb-2">
                  <h3 className="font-medium text-gray-700">{t('settings.mcpRouterBaseUrl')}</h3>
                  <p className="text-sm text-gray-500">
                    {t('settings.mcpRouterBaseUrlDescription')}
                  </p>
                </div>
                <div className="flex items-center gap-3">
                  <input
                    type="text"
                    value={tempMCPRouterConfig.baseUrl}
                    onChange={(e) => handleMCPRouterConfigChange('baseUrl', e.target.value)}
                    placeholder={t('settings.mcpRouterBaseUrlPlaceholder')}
                    className="flex-1 mt-1 block w-full py-2 px-3 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm form-input"
                    disabled={loading}
                  />
                  <button
                    onClick={() => saveMCPRouterConfig('baseUrl')}
                    disabled={loading}
                    className="mt-1 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-md text-sm font-medium disabled:opacity-50 btn-primary"
                  >
                    {t('common.save')}
                  </button>
                </div>
              </div>
            </div>
          )}
        </div>
      </PermissionChecker>

      {/* System Settings */}
      <PermissionChecker permissions={PERMISSIONS.SETTINGS_SYSTEM_CONFIG}>
        <div className="bg-white shadow rounded-lg mb-6 dashboard-card">
          <div
            className="flex justify-between items-center cursor-pointer transition-colors duration-200 hover:text-blue-600 py-4 px-6"
            onClick={() => toggleSection('nameSeparator')}
          >
            <h2 className="font-semibold text-gray-800">{t('settings.systemSettings')}</h2>
            <span className="text-gray-500">{sectionsVisible.nameSeparator ? '▼' : '►'}</span>
          </div>

          {sectionsVisible.nameSeparator && (
            <div className="space-y-4 pb-4 px-6">
              <div className="p-3 bg-gray-50 rounded-md">
                <div className="mb-2">
                  <h3 className="font-medium text-gray-700">{t('settings.nameSeparatorLabel')}</h3>
                  <p className="text-sm text-gray-500">{t('settings.nameSeparatorDescription')}</p>
                </div>
                <div className="flex items-center gap-3">
                  <input
                    type="text"
                    value={tempNameSeparator}
                    onChange={(e) => setTempNameSeparator(e.target.value)}
                    placeholder="-"
                    className="flex-1 mt-1 block w-full py-2 px-3 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm form-input"
                    disabled={loading}
                    maxLength={5}
                  />
                  <button
                    onClick={saveNameSeparator}
                    disabled={loading}
                    className="mt-1 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-md text-sm font-medium disabled:opacity-50 btn-primary"
                  >
                    {t('common.save')}
                  </button>
                </div>
              </div>

              <div className="flex items-center justify-between p-3 bg-gray-50 rounded-md">
                <div>
                  <h3 className="font-medium text-gray-700">
                    {t('settings.enableSessionRebuild')}
                  </h3>
                  <p className="text-sm text-gray-500">
                    {t('settings.enableSessionRebuildDescription')}
                  </p>
                </div>
                <Switch
                  disabled={loading}
                  checked={enableSessionRebuild}
                  onCheckedChange={(checked) => updateSessionRebuild(checked)}
                />
              </div>
            </div>
          )}
        </div>
      </PermissionChecker>

      {/* Route Configuration Settings */}
      <PermissionChecker permissions={PERMISSIONS.SETTINGS_ROUTE_CONFIG}>
        <div className="bg-white shadow rounded-lg mb-6 dashboard-card">
          <div
            className="flex justify-between items-center cursor-pointer transition-colors duration-200 hover:text-blue-600 py-4 px-6"
            onClick={() => toggleSection('routingConfig')}
          >
            <h2 className="font-semibold text-gray-800">{t('pages.settings.routeConfig')}</h2>
            <span className="text-gray-500">{sectionsVisible.routingConfig ? '▼' : '►'}</span>
          </div>

          {sectionsVisible.routingConfig && (
            <div className="space-y-4 pb-4 px-6">
              <div className="flex items-center justify-between p-3 bg-gray-50 rounded-md">
                <div>
                  <h3 className="font-medium text-gray-700">{t('settings.enableGlobalRoute')}</h3>
                  <p className="text-sm text-gray-500">
                    {t('settings.enableGlobalRouteDescription')}
                  </p>
                </div>
                <Switch
                  disabled={loading}
                  checked={routingConfig.enableGlobalRoute}
                  onCheckedChange={(checked) =>
                    handleRoutingConfigChange('enableGlobalRoute', checked)
                  }
                />
              </div>

              <div className="flex items-center justify-between p-3 bg-gray-50 rounded-md">
                <div>
                  <h3 className="font-medium text-gray-700">
                    {t('settings.enableGroupNameRoute')}
                  </h3>
                  <p className="text-sm text-gray-500">
                    {t('settings.enableGroupNameRouteDescription')}
                  </p>
                </div>
                <Switch
                  disabled={loading}
                  checked={routingConfig.enableGroupNameRoute}
                  onCheckedChange={(checked) =>
                    handleRoutingConfigChange('enableGroupNameRoute', checked)
                  }
                />
              </div>

              <div className="flex items-center justify-between p-3 bg-gray-50 rounded-md">
                <div>
                  <h3 className="font-medium text-gray-700">{t('settings.skipAuth')}</h3>
                  <p className="text-sm text-gray-500">{t('settings.skipAuthDescription')}</p>
                </div>
                <Switch
                  disabled={loading}
                  checked={routingConfig.skipAuth}
                  onCheckedChange={(checked) => handleRoutingConfigChange('skipAuth', checked)}
                />
              </div>
            </div>
          )}
        </div>
      </PermissionChecker>

      {/* Installation Configuration Settings */}
      <PermissionChecker permissions={PERMISSIONS.SETTINGS_INSTALL_CONFIG}>
        <div className="bg-white shadow rounded-lg mb-6 dashboard-card">
          <div
            className="flex justify-between items-center cursor-pointer transition-colors duration-200 hover:text-blue-600 py-4 px-6"
            onClick={() => toggleSection('installConfig')}
          >
            <h2 className="font-semibold text-gray-800">{t('settings.installConfig')}</h2>
            <span className="text-gray-500">{sectionsVisible.installConfig ? '▼' : '►'}</span>
          </div>

          {sectionsVisible.installConfig && (
            <div className="space-y-4 pb-4 px-6">
              <div className="p-3 bg-gray-50 rounded-md">
                <div className="mb-2">
                  <h3 className="font-medium text-gray-700">{t('settings.baseUrl')}</h3>
                  <p className="text-sm text-gray-500">{t('settings.baseUrlDescription')}</p>
                </div>
                <div className="flex items-center gap-3">
                  <input
                    type="text"
                    value={installConfig.baseUrl}
                    onChange={(e) => handleInstallConfigChange('baseUrl', e.target.value)}
                    placeholder={t('settings.baseUrlPlaceholder')}
                    className="flex-1 mt-1 block w-full py-2 px-3 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm form-input"
                    disabled={loading}
                  />
                  <button
                    onClick={() => saveInstallConfig('baseUrl')}
                    disabled={loading}
                    className="mt-1 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-md text-sm font-medium disabled:opacity-50 btn-primary"
                  >
                    {t('common.save')}
                  </button>
                </div>
              </div>

              <div className="p-3 bg-gray-50 rounded-md">
                <div className="mb-2">
                  <h3 className="font-medium text-gray-700">{t('settings.pythonIndexUrl')}</h3>
                  <p className="text-sm text-gray-500">{t('settings.pythonIndexUrlDescription')}</p>
                </div>
                <div className="flex items-center gap-3">
                  <input
                    type="text"
                    value={installConfig.pythonIndexUrl}
                    onChange={(e) => handleInstallConfigChange('pythonIndexUrl', e.target.value)}
                    placeholder={t('settings.pythonIndexUrlPlaceholder')}
                    className="flex-1 mt-1 block w-full py-2 px-3 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm form-input"
                    disabled={loading}
                  />
                  <button
                    onClick={() => saveInstallConfig('pythonIndexUrl')}
                    disabled={loading}
                    className="mt-1 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-md text-sm font-medium disabled:opacity-50 btn-primary"
                  >
                    {t('common.save')}
                  </button>
                </div>
              </div>

              <div className="p-3 bg-gray-50 rounded-md">
                <div className="mb-2">
                  <h3 className="font-medium text-gray-700">{t('settings.npmRegistry')}</h3>
                  <p className="text-sm text-gray-500">{t('settings.npmRegistryDescription')}</p>
                </div>
                <div className="flex items-center gap-3">
                  <input
                    type="text"
                    value={installConfig.npmRegistry}
                    onChange={(e) => handleInstallConfigChange('npmRegistry', e.target.value)}
                    placeholder={t('settings.npmRegistryPlaceholder')}
                    className="flex-1 mt-1 block w-full py-2 px-3 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm form-input"
                    disabled={loading}
                  />
                  <button
                    onClick={() => saveInstallConfig('npmRegistry')}
                    disabled={loading}
                    className="mt-1 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-md text-sm font-medium disabled:opacity-50 btn-primary"
                  >
                    {t('common.save')}
                  </button>
                </div>
              </div>
            </div>
          )}
        </div>
      </PermissionChecker>

      {/* Change Password */}
      <div className="bg-white shadow rounded-lg mb-6 dashboard-card" data-section="password">
        <div
          className="flex justify-between items-center cursor-pointer transition-colors duration-200 hover:text-blue-600 py-4 px-6"
          onClick={() => toggleSection('password')}
          role="button"
        >
          <h2 className="font-semibold text-gray-800">{t('auth.changePassword')}</h2>
          <span className="text-gray-500">{sectionsVisible.password ? '▼' : '►'}</span>
        </div>

        {sectionsVisible.password && (
          <div className="max-w-lg pb-4 px-6">
            <ChangePasswordForm onSuccess={handlePasswordChangeSuccess} />
          </div>
        )}
      </div>

      {/* Export MCP Settings */}
      <PermissionChecker permissions={PERMISSIONS.SETTINGS_EXPORT_CONFIG}>
        <div className="bg-white shadow rounded-lg mb-6 dashboard-card">
          <div
            className="flex justify-between items-center cursor-pointer transition-colors duration-200 hover:text-blue-600 py-4 px-6"
            onClick={() => toggleSection('exportConfig')}
          >
            <h2 className="font-semibold text-gray-800">{t('settings.exportMcpSettings')}</h2>
            <span className="text-gray-500">{sectionsVisible.exportConfig ? '▼' : '►'}</span>
          </div>

          {sectionsVisible.exportConfig && (
            <div className="space-y-4 pb-4 px-6">
              <div className="p-3 bg-gray-50 rounded-md">
                <div className="mb-4">
                  <h3 className="font-medium text-gray-700">{t('settings.mcpSettingsJson')}</h3>
                  <p className="text-sm text-gray-500">
                    {t('settings.mcpSettingsJsonDescription')}
                  </p>
                </div>
                <div className="space-y-3">
                  <div className="flex items-center gap-3">
                    <button
                      onClick={handleCopyConfig}
                      disabled={!mcpSettingsJson}
                      className="flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-md text-sm font-medium disabled:opacity-50 btn-primary"
                    >
                      {copiedConfig ? <Check size={16} /> : <Copy size={16} />}
                      {copiedConfig ? t('common.copied') : t('settings.copyToClipboard')}
                    </button>
                    <button
                      onClick={handleDownloadConfig}
                      disabled={!mcpSettingsJson}
                      className="flex items-center gap-2 px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-md text-sm font-medium disabled:opacity-50 btn-primary"
                    >
                      <Download size={16} />
                      {t('settings.downloadJson')}
                    </button>
                  </div>
                  {mcpSettingsJson && (
                    <div className="mt-3">
                      <pre className="bg-gray-900 text-gray-100 p-4 rounded-md overflow-x-auto text-xs max-h-96">
                        {mcpSettingsJson}
                      </pre>
                    </div>
                  )}
                </div>
              </div>
            </div>
          )}
        </div>
      </PermissionChecker>
    </div>
  );
};

export default SettingsPage;
