metona-ai-desktop/src/components/settings/SearXNGSettings.tsx

/**
 * SearXNGSettings — SearXNG 元搜索配置 Tab
 *
 * 从 SettingsModal.tsx 提取（v0.4.1 拆分）。
 * 功能：SearXNG 实例配置（12 项）+ 连接测试。
 */

import { useState } from 'react';
import {
  Button,
  TextField,
  Select,
  MenuItem,
  Stack,
  Typography,
  Divider,
  Chip,
  Switch,
  Alert,
  Box,
  FormControlLabel,
  InputLabel,
  FormControl,
  IconButton,
  CircularProgress,
} from '@mui/material';
import { Eye, EyeOff } from 'lucide-react';
import { useConfig } from './useConfig';

export function SearXNGSettings() {
  // ===== 12 项配置（useConfig 实时持久化） =====
  const [enabled, setEnabled] = useConfig('searxng.enabled', false);
  const [url, setUrl] = useConfig('searxng.url', '');
  const [engines, setEngines] = useConfig('searxng.engines', '');
  const [language, setLanguage] = useConfig('searxng.language', 'zh-CN');
  const [safesearch, setSafesearch] = useConfig('searxng.safesearch', 1);
  const [timeRange, setTimeRange] = useConfig('searxng.time_range', '');
  const [maxResults, setMaxResults] = useConfig('searxng.max_results', 0);
  const [authKey, setAuthKey] = useConfig('searxng.auth_key', '');
  const [authType, setAuthType] = useConfig('searxng.auth_type', 'bearer');
  const [format, setFormat] = useConfig('searxng.format', 'json');
  const [fetchCount, setFetchCount] = useConfig('searxng.fetch_count', 0);
  const [fetchMode, setFetchMode] = useConfig('searxng.fetch_mode', 'sequential');

  const [showKey, setShowKey] = useState(false);
  const [testing, setTesting] = useState(false);
  const [testResult, setTestResult] = useState<{ success: boolean; message: string } | null>(null);

  const urlError = !!url && !/^https?:\/\//.test(url);

  const handleTest = async () => {
    if (!url.trim() || urlError) return;
    setTesting(true);
    setTestResult(null);
    try {
      const result = await window.metona?.searxng?.testConnection(url.trim(), authKey, authType);
      if (result?.success) {
        setTestResult({ success: true, message: `连接成功（${result.latencyMs}ms）` });
      } else {
        setTestResult({
          success: false,
          message: result?.error || `连接失败（HTTP ${result?.statusCode}）`,
        });
      }
    } catch (e) {
      setTestResult({ success: false, message: (e as Error).message });
    }
    setTesting(false);
  };

  return (
    <Stack spacing={2}>
      {/* 标题 + 状态徽章 */}
      <Stack direction="row" sx={{ justifyContent: 'space-between', alignItems: 'center' }}>
        <Typography variant="subtitle2" sx={{ fontWeight: 600 }}>
          SearXNG 元搜索
        </Typography>
        <Chip
          label={enabled ? '已启用' : '未启用'}
          size="small"
          color={enabled ? 'success' : 'default'}
          variant={enabled ? 'filled' : 'outlined'}
        />
      </Stack>
      <Typography variant="body2" sx={{ color: 'text.secondary' }}>
        SearXNG 是开源元搜索引擎，支持 70+
        搜索引擎聚合。启用后替代内置四引擎搜索通道，未启用时回退到 Bing + 百度 + 搜狗 + 360 搜索。
      </Typography>

      {/* 启用开关 */}
      <FormControlLabel
        control={
          <Switch checked={enabled} onChange={(e) => setEnabled(e.target.checked)} size="small" />
        }
        label={<Typography variant="body2">启用 SearXNG</Typography>}
      />

      <Divider />

      {/* API 地址 + 连接测试 */}
      <Stack direction="row" spacing={1} sx={{ alignItems: 'flex-start' }}>
        <TextField
          size="small"
          label="API 地址"
          value={url}
          onChange={(e) => setUrl(e.target.value)}
          placeholder="如 https://searxng.example.com"
          error={urlError}
          helperText={
            urlError ? '需以 http:// 或 https:// 开头' : '实例根地址（不含 /search 路径）'
          }
          sx={{ flex: 1 }}
        />
        <Button
          variant="outlined"
          size="small"
          onClick={handleTest}
          disabled={!url.trim() || urlError || testing}
          sx={{ mt: 0.5, minWidth: 90, height: 40 }}
        >
          {testing ? <CircularProgress size={14} /> : '测试连接'}
        </Button>
      </Stack>

      {/* 测试结果 */}
      {testResult && (
        <Alert
          severity={testResult.success ? 'success' : 'error'}
          sx={{ py: 0.5, '& .MuiAlert-message': { fontSize: 12 } }}
        >
          {testResult.message}
        </Alert>
      )}

      {/* 搜索引擎 */}
      <TextField
        size="small"
        label="搜索引擎（逗号分隔）"
        value={engines}
        onChange={(e) => setEngines(e.target.value)}
        placeholder="如 google,bing,duckduckgo（留空使用实例默认）"
      />

      {/* 语言 + 安全搜索 */}
      <Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 2 }}>
        <FormControl size="small">
          <InputLabel>语言</InputLabel>
          <Select value={language} label="语言" onChange={(e) => setLanguage(e.target.value)}>
            <MenuItem value="zh-CN">简体中文</MenuItem>
            <MenuItem value="zh-TW">繁體中文</MenuItem>
            <MenuItem value="en">English</MenuItem>
            <MenuItem value="ja">日本語</MenuItem>
            <MenuItem value="ko">한국어</MenuItem>
            <MenuItem value="auto">自动检测</MenuItem>
          </Select>
        </FormControl>
        <FormControl size="small">
          <InputLabel>安全搜索</InputLabel>
          <Select
            value={safesearch}
            label="安全搜索"
            onChange={(e) => setSafesearch(e.target.value as number)}
          >
            <MenuItem value={0}>关闭</MenuItem>
            <MenuItem value={1}>中等</MenuItem>
            <MenuItem value={2}>严格</MenuItem>
          </Select>
        </FormControl>
      </Box>

      {/* 时间范围 + 返回格式 */}
      <Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 2 }}>
        <FormControl size="small">
          <InputLabel>时间范围</InputLabel>
          <Select value={timeRange} label="时间范围" onChange={(e) => setTimeRange(e.target.value)}>
            <MenuItem value="">不限</MenuItem>
            <MenuItem value="day">一天</MenuItem>
            <MenuItem value="week">一周</MenuItem>
            <MenuItem value="month">一月</MenuItem>
            <MenuItem value="year">一年</MenuItem>
          </Select>
        </FormControl>
        <FormControl size="small">
          <InputLabel>返回格式</InputLabel>
          <Select value={format} label="返回格式" onChange={(e) => setFormat(e.target.value)}>
            <MenuItem value="json">JSON（结构化解析）</MenuItem>
            <MenuItem value="html">HTML（原始网页）</MenuItem>
          </Select>
        </FormControl>
      </Box>

      {/* 最大结果数 + 自动抓取条数 */}
      <Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 2 }}>
        <TextField
          size="small"
          label="最大结果数"
          type="number"
          value={maxResults}
          onChange={(e) => setMaxResults(Number(e.target.value))}
          placeholder="0 表示使用默认"
          slotProps={{ htmlInput: { min: 0, max: 50 } }}
        />
        <TextField
          size="small"
          label="自动抓取条数"
          type="number"
          value={fetchCount}
          onChange={(e) => setFetchCount(Number(e.target.value))}
          placeholder="0 表示由 AI 决定"
          slotProps={{ htmlInput: { min: 0, max: 8 } }}
        />
      </Box>

      {/* 抓取类型 */}
      <FormControl size="small">
        <InputLabel>抓取类型</InputLabel>
        <Select value={fetchMode} label="抓取类型" onChange={(e) => setFetchMode(e.target.value)}>
          <MenuItem value="sequential">顺序抓取</MenuItem>
          <MenuItem value="random">随机抓取</MenuItem>
        </Select>
      </FormControl>

      <Divider />

      {/* 认证设置 */}
      <Typography variant="caption" sx={{ fontWeight: 600, color: 'text.secondary' }}>
        认证设置
      </Typography>
      <Box sx={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 2 }}>
        <FormControl size="small">
          <InputLabel>认证类型</InputLabel>
          <Select value={authType} label="认证类型" onChange={(e) => setAuthType(e.target.value)}>
            <MenuItem value="bearer">Bearer Token</MenuItem>
            <MenuItem value="basic">Basic Auth</MenuItem>
          </Select>
        </FormControl>
        <TextField
          size="small"
          label={authType === 'bearer' ? 'Token' : '用户名:密码'}
          type={showKey ? 'text' : 'password'}
          value={authKey}
          onChange={(e) => setAuthKey(e.target.value)}
          placeholder={authType === 'bearer' ? '访问令牌原值' : 'username:password'}
          slotProps={{
            input: {
              endAdornment: (
                <IconButton size="small" onClick={() => setShowKey(!showKey)}>
                  {showKey ? <EyeOff size={14} /> : <Eye size={14} />}
                </IconButton>
              ),
            },
          }}
        />
      </Box>
      <Typography variant="caption" sx={{ color: 'text.disabled' }}>
        {authType === 'bearer'
          ? 'Bearer: 直接填写令牌原值，原样透传到 Authorization 头。建议配合 HTTPS 使用。'
          : 'Basic: 填写 username:password 明文串，系统自动 Base64 编码。必须配合 HTTPS 使用。'}
      </Typography>
    </Stack>
  );
}