import { useState, useEffect } from "react";
import { Link, useNavigate } from "react-router-dom";
import {
  Settings as SettingsIcon, Loader2, CheckCircle2, AlertCircle, AlertTriangle,
  MessageSquare, Activity, Github, Globe,
  ChevronRight, Info, Sparkles, Building2, Upload, Link2, RefreshCw, Trash2,
  Files, LayoutTemplate, History, ShieldCheck, Settings2
} from "lucide-react";
import { apiBaseURL, getAuthToken } from "@/lib/api";
import {
  Card, CardContent, CardDescription, CardHeader, CardTitle,
} from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Badge } from "@/components/ui/badge";
import { Switch } from "@/components/ui/switch";
import PromptRoleSettings from "@/components/ai-steward/PromptRoleSettings";
import {
  FEISHU_EVENT_MODE_OPTIONS,
  type FeishuEventMode,
  getFeishuEventModeLabel,
} from "@/lib/feishuEventMode";

// ==================== Types ====================

interface IntegrationSource {
  id: string;
  name: string;
  description: string;
  icon: any;
  status: "available" | "configured" | "needs_setup" | "unavailable";
  priority: "high" | "medium" | "low";
  estimated_benefit: string;
  setup_time: string;
  auto_detected: boolean;
  config_fields?: ConfigField[];
  setup_guide?: string[];
}

interface ConfigField {
  key: string;
  label: string;
  type: "text" | "password" | "url" | "toggle";
  placeholder?: string;
  required: boolean;
  description?: string;
}

interface AIConfigSuggestion {
  recommended_sources: string[];
  reasoning: string;
  estimated_impact: string;
}

interface ConfigStatus {
  feishu: {
    configured: boolean;
    app_id?: string;
    event_mode?: FeishuEventMode;
  };
  wecom: {
    configured: boolean;
    corp_id?: string;
    agent_id?: string;
    token_preview?: string;
    encoding_aes_key_preview?: string;
  };
  github: { configured: boolean; repos?: string[] };
  browser: { installed: boolean };
  hn_monitor: { active: boolean; last_run?: string };
}

interface KnowledgeDoc {
  id: number;
  title: string;
  file_type: string;
  source_type: string;
  file_url?: string | null;
  status: "processing" | "complete" | "failed";
  created_at?: string | null;
  last_fetched_at?: string | null;
  error_message?: string | null;
}

export default function AIConfigPage() {
  const navigate = useNavigate();

  const [, setLoading] = useState(true);
  const [checking, setChecking] = useState<string | null>(null);
  const [status, setStatus] = useState<ConfigStatus | null>(null);
  const [suggestion, setSuggestion] = useState<AIConfigSuggestion | null>(null);
  const [activeTab, setActiveTab] = useState("overview");
  const [scrollToSection, setScrollToSection] = useState<string | null>(null);

  // Feishu config form
  const [feishuConfig, setFeishuConfig] = useState({
    app_id: "",
    app_secret: "",
    event_mode: "long_connection" as FeishuEventMode
  });

  // WeChat Work config form
  const [wecomConfig, setWecomConfig] = useState({
    corp_id: "",
    agent_id: "",
    app_secret: "",
    token: "",
    encoding_aes_key: ""
  });

  // GitHub config form
  const [githubConfig, setGithubConfig] = useState({
    repo_url: "",
    webhook_url: "",
    access_token: ""
  });

  // Monitor settings
  const [monitorSettings, setMonitorSettings] = useState({
    hn_enabled: false,
    hn_interval: 30,
    browser_enabled: false
  });

  const [message, setMessage] = useState<{ type: "success" | "error"; text: string } | null>(null);
  const [wecomCopyTip, setWecomCopyTip] = useState("");
  const [knowledgeDocs, setKnowledgeDocs] = useState<KnowledgeDoc[]>([]);
  const [knowledgeFile, setKnowledgeFile] = useState<File | null>(null);
  const [knowledgeURL, setKnowledgeURL] = useState("");
  const [knowledgeURLTitle, setKnowledgeURLTitle] = useState("");

  // Guide expansion state
  const [showFeishuGuide, setShowFeishuGuide] = useState(false);
  const [showWecomGuide, setShowWecomGuide] = useState(false);
  const [editingFeishu, setEditingFeishu] = useState(false);
  const [editingWecom, setEditingWecom] = useState(false);
  const [editingGithub, setEditingGithub] = useState(false);

  const governanceTools = [
    {
      id: "brief-center",
      name: "增量任务包中心",
      description: "生成与查看任务包卡片",
      to: "/ai-config/task-brief-center",
      icon: Files,
    },
    {
      id: "brief-template",
      name: "任务包模板管理",
      description: "统一维护模板与规范",
      to: "/ai-config/task-brief-templates",
      icon: LayoutTemplate,
    },
    {
      id: "brief-runs",
      name: "任务包生成记录",
      description: "查看生成历史与状态",
      to: "/ai-config/task-brief-runs",
      icon: History,
    },
    {
      id: "contract-board",
      name: "契约同步看板",
      description: "检查契约文档同步状态",
      to: "/ai-config/contract-sync-board",
      icon: ShieldCheck,
    },
    {
      id: "model-routing",
      name: "模型路由配置",
      description: "动态切换函数模型路由",
      to: "/ai-config/model-routing-config",
      icon: Settings2,
    },
  ];

  // ==================== Integration Sources ====================

  const integrationSources: IntegrationSource[] = [
    {
      id: "feishu",
      name: "飞书群聊",
      description: "自动捕获群聊中的需求讨论，AI 分析价值",
      icon: MessageSquare,
      status: status?.feishu?.configured ? "configured" : "needs_setup",
      priority: "high",
      estimated_benefit: "每天自动捕获 5-10 个需求信号",
      setup_time: "5 分钟",
      auto_detected: true,
      config_fields: [
        { key: "app_id", label: "应用编号", type: "text", placeholder: "cli_xxxxxxxxxxxxx", required: true },
        { key: "app_secret", label: "应用密钥", type: "password", placeholder: "应用密钥", required: true },
      ],
      setup_guide: [
        "访问 https://open.feishu.cn/ 创建自建应用",
        "在「凭证与基础信息」获取应用编号和应用密钥",
        "飞书接入已统一为长连接模式，无需再配置回调地址",
        "添加权限：im:message, im:message:group_at_msg, im:chat",
        "订阅事件：接收消息 v1 (message.receive_v1)",
        "保存后后端会自动重启飞书长连接"
      ]
    },
    {
      id: "wecom",
      name: "企业微信",
      description: "自动捕获企业微信群消息，AI 分析需求价值",
      icon: Building2,
      status: status?.wecom?.configured ? "configured" : "needs_setup",
      priority: "high",
      estimated_benefit: "每天自动捕获 5-10 个需求信号",
      setup_time: "5 分钟",
      auto_detected: true,
      config_fields: [
        { key: "corp_id", label: "企业编号", type: "text", placeholder: "wwxxxxxxxxxxxxxx", required: true },
        { key: "agent_id", label: "应用编号", type: "text", placeholder: "1000002", required: true },
        { key: "app_secret", label: "应用密钥", type: "password", placeholder: "应用密钥", required: true },
        { key: "token", label: "验证令牌", type: "text", placeholder: "回调验证令牌", required: true },
        { key: "encoding_aes_key", label: "消息加密密钥", type: "text", placeholder: "消息加密密钥（43位）", required: true }
      ],
      setup_guide: [
        "访问 https://work.weixin.qq.com/ 创建应用",
        "在「应用管理」获取应用编号和应用密钥",
        "在「我的企业」获取企业编号",
        "在「应用管理」-「接收消息」设置验证令牌和消息加密密钥",
        "添加权限：通讯录权限、消息权限",
        "点击保存后，复制回调地址到企业微信配置"
      ]
    },
    {
      id: "hn",
      name: "技术资讯监控（HN）",
      description: "定时抓取技术前沿，分析行业趋势",
      icon: Activity,
      status: status?.hn_monitor?.active ? "configured" : "available",
      priority: "medium",
      estimated_benefit: "每周捕获 2-3 个高价值技术趋势",
      setup_time: "1 分钟",
      auto_detected: true,
      config_fields: [
        { key: "hn_interval", label: "抓取间隔（分钟）", type: "text", placeholder: "30", required: false }
      ]
    },
    {
      id: "github",
      name: "代码仓监控",
      description: "跟踪竞品仓库、上游依赖更新",
      icon: Github,
      status: status?.github?.configured ? "configured" : "available",
      priority: "medium",
      estimated_benefit: "及时获知竞品动态和依赖更新",
      setup_time: "10 分钟",
      auto_detected: true,
      config_fields: [
        { key: "repo_url", label: "仓库地址", type: "url", placeholder: "https://github.com/user/repo", required: true },
        { key: "access_token", label: "访问令牌", type: "password", placeholder: "ghp_xxxxxxxxxxxx", required: false }
      ]
    },
    {
      id: "browser",
      name: "浏览器扩展",
      description: "监控访问的技术文档、竞品页面",
      icon: Globe,
      status: status?.browser?.installed ? "configured" : "needs_setup",
      priority: "low",
      estimated_benefit: "自动捕获浏览时的有价值内容",
      setup_time: "2 分钟",
      auto_detected: false,
      config_fields: [],
      setup_guide: [
        "从 Chrome 应用商店安装 PMFlow 扩展",
        "登录您的 PMFlow 账号",
        "扩展会自动监控技术文档和竞品页面"
      ]
    }
  ];

  // ==================== API Calls ====================

  const loadStatus = async () => {
    setLoading(true);
    try {
      const token = getAuthToken();
      if (!token) {
        navigate("/login");
        return;
      }

      // Check Feishu config
      const feishuRes = await fetch(`${apiBaseURL}/feishu/config`, {
        headers: { Authorization: `Bearer ${token}` }
      });
      if (feishuRes.ok) {
        const feishuData = await feishuRes.json();
        const mode = "long_connection" as FeishuEventMode;
        setStatus(prev => ({
          ...prev!,
          feishu: {
            configured: feishuData.is_configured,
            app_id: feishuData.app_id,
            event_mode: mode,
          },
        }));
        setFeishuConfig({
          app_id: feishuData.app_id || "",
          app_secret: feishuData.app_secret || "",
          event_mode: mode,
        });
      }

      // Check WeChat Work config
      const wecomRes = await fetch(`${apiBaseURL}/wecom/config`, {
        headers: { Authorization: `Bearer ${token}` }
      });
      if (wecomRes.ok) {
        const wecomData = await wecomRes.json();
        setStatus(prev => ({
          ...prev!,
          wecom: {
            configured: wecomData.is_configured,
            corp_id: wecomData.corp_id,
            agent_id: wecomData.agent_id,
            token_preview: wecomData.token_preview || "",
            encoding_aes_key_preview: wecomData.encoding_aes_key_preview || "",
          },
        }));
        setWecomConfig({
          corp_id: wecomData.corp_id || "",
          agent_id: wecomData.agent_id || "",
          app_secret: wecomData.app_secret || "",
          token: wecomData.token || "",
          encoding_aes_key: wecomData.encoding_aes_key || "",
        });
      }

      // Get AI suggestions
      const suggestRes = await fetch(`${apiBaseURL}/ai-steward/config/suggest`, {
        headers: { Authorization: `Bearer ${token}` }
      });
      if (suggestRes.ok) {
        const suggestData = await suggestRes.json();
        setSuggestion(suggestData);
      }

    } catch (err) {
      console.error("Failed to load status:", err);
    } finally {
      setLoading(false);
    }
  };

  const saveFeishuConfig = async () => {
    setChecking("feishu");
    setMessage(null);
    if (!feishuConfig.app_id || !feishuConfig.app_secret) {
      setMessage({ type: "error", text: "请填写应用编号和应用密钥" });
      setChecking(null);
      return;
    }

    try {
      const token = getAuthToken();
      const response = await fetch(`${apiBaseURL}/feishu/config`, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${token}`
        },
        body: JSON.stringify(feishuConfig)
      });

      if (response.ok) {
        setMessage({ type: "success", text: "飞书配置已保存" });
        setEditingFeishu(false);
        await loadStatus();
      } else {
        const error = await response.json();
        setMessage({ type: "error", text: error.detail || "保存失败" });
      }
    } catch (err) {
      setMessage({ type: "error", text: "网络错误，请重试" });
    } finally {
      setChecking(null);
    }
  };

  const testFeishuConnection = async () => {
    setChecking("feishu-test");
    setMessage(null);

    try {
      const token = getAuthToken();
      const response = await fetch(`${apiBaseURL}/feishu/test-connection`, {
        method: "POST",
        headers: { Authorization: `Bearer ${token}` }
      });

      const data = await response.json();
      if (data.status === "success") {
        setMessage({ type: "success", text: "飞书连接测试成功！" });
      } else {
        setMessage({ type: "error", text: data.message || "连接测试失败" });
      }
    } catch (err) {
      setMessage({ type: "error", text: "测试失败" });
    } finally {
      setChecking(null);
    }
  };

  const deleteFeishuConfig = async () => {
    if (!confirm("确定要删除飞书配置吗？删除后将无法从飞书群聊捕获信号。")) return;

    setChecking("feishu-delete");
    setMessage(null);

    try {
      const token = getAuthToken();
      const response = await fetch(`${apiBaseURL}/feishu/config`, {
        method: "DELETE",
        headers: { Authorization: `Bearer ${token}` }
      });

      if (response.ok) {
        setMessage({ type: "success", text: "配置已删除" });
        setFeishuConfig({ app_id: "", app_secret: "", event_mode: "long_connection" });
        setEditingFeishu(false);
        await loadStatus();
      } else {
        setMessage({ type: "error", text: "删除失败" });
      }
    } catch (err) {
      setMessage({ type: "error", text: "网络错误" });
    } finally {
      setChecking(null);
    }
  };

  const saveWecomConfig = async () => {
    setChecking("wecom");
    setMessage(null);

    try {
      const token = getAuthToken();
      const response = await fetch(`${apiBaseURL}/wecom/config`, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${token}`
        },
        body: JSON.stringify(wecomConfig)
      });

      if (response.ok) {
        setMessage({ type: "success", text: "企业微信配置已保存" });
        setEditingWecom(false);
        await loadStatus();
      } else {
        const error = await response.json();
        setMessage({ type: "error", text: error.detail || "保存失败" });
      }
    } catch (err) {
      setMessage({ type: "error", text: "网络错误，请重试" });
    } finally {
      setChecking(null);
    }
  };

  const testWecomConnection = async () => {
    setChecking("wecom-test");
    setMessage(null);

    try {
      const token = getAuthToken();
      const response = await fetch(`${apiBaseURL}/wecom/test-connection`, {
        method: "POST",
        headers: { Authorization: `Bearer ${token}` }
      });

      const data = await response.json();
      if (data.status === "success") {
        setMessage({ type: "success", text: "企业微信连接测试成功！" });
      } else {
        setMessage({ type: "error", text: data.message || "连接测试失败" });
      }
    } catch (err) {
      setMessage({ type: "error", text: "测试失败" });
    } finally {
      setChecking(null);
    }
  };

  const deleteWecomConfig = async () => {
    if (!confirm("确定要删除企业微信配置吗？删除后将无法从企业微信群聊捕获信号。")) return;

    setChecking("wecom-delete");
    setMessage(null);

    try {
      const token = getAuthToken();
      const response = await fetch(`${apiBaseURL}/wecom/config`, {
        method: "DELETE",
        headers: { Authorization: `Bearer ${token}` }
      });

      if (response.ok) {
        setMessage({ type: "success", text: "配置已删除" });
        setWecomConfig({ corp_id: "", agent_id: "", app_secret: "", token: "", encoding_aes_key: "" });
        setEditingWecom(false);
        await loadStatus();
      } else {
        setMessage({ type: "error", text: "删除失败" });
      }
    } catch (err) {
      setMessage({ type: "error", text: "网络错误" });
    } finally {
      setChecking(null);
    }
  };

  const getPublicBaseUrl = () => {
    const normalized = apiBaseURL.replace(/\/api\/?$/, "");
    if (/^https?:\/\//i.test(normalized)) {
      return normalized.replace(/\/$/, "");
    }
    return window.location.origin.replace(/\/$/, "");
  };

  const getWecomWebhookUrl = () => `${getPublicBaseUrl()}/wecom/webhook`;

  const startHNMonitor = async () => {
    setChecking("hn");
    setMessage(null);

    try {
      const token = getAuthToken();
      const response = await fetch(`${apiBaseURL}/ai-steward/signal/start-hn-monitor?interval_minutes=${monitorSettings.hn_interval}`, {
        method: "POST",
        headers: { Authorization: `Bearer ${token}` }
      });

      if (response.ok) {
        setMessage({ type: "success", text: "技术资讯监控已启动" });
        setMonitorSettings(prev => ({ ...prev!, hn_enabled: true }));
      } else {
        setMessage({ type: "error", text: "启动失败" });
      }
    } catch (err) {
      setMessage({ type: "error", text: "网络错误" });
    } finally {
      setChecking(null);
    }
  };

  const copyText = async (text: string) => {
    try {
      if (navigator.clipboard && window.isSecureContext) {
        await navigator.clipboard.writeText(text);
        return true;
      }
    } catch {
      // fallback below
    }

    try {
      const input = document.createElement("textarea");
      input.value = text;
      input.style.position = "fixed";
      input.style.opacity = "0";
      input.style.left = "-9999px";
      document.body.appendChild(input);
      input.focus();
      input.select();
      const ok = document.execCommand("copy");
      document.body.removeChild(input);
      return ok;
    } catch {
      return false;
    }
  };

  const handleCopyWebhook = async (text: string) => {
    const ok = await copyText(text);
    if (ok) {
      setMessage({ type: "success", text: "已复制到剪切板" });
      setWecomCopyTip("已复制到剪切板");
      setTimeout(() => setWecomCopyTip(""), 1500);
      return;
    }
    setMessage({ type: "error", text: "复制失败，请手动复制地址" });
    setWecomCopyTip("复制失败");
    setTimeout(() => setWecomCopyTip(""), 1500);
  };

  const loadKnowledgeDocs = async () => {
    try {
      const token = getAuthToken();
      const response = await fetch(`${apiBaseURL}/rag/knowledge-base/docs`, {
        headers: { Authorization: `Bearer ${token}` }
      });
      if (!response.ok) return;
      const payload = await response.json();
      const docs = (payload?.data ?? payload) || [];
      setKnowledgeDocs(Array.isArray(docs) ? docs : []);
    } catch (err) {
      console.error("Failed to load knowledge docs:", err);
    }
  };

  const uploadKnowledgeFile = async () => {
    if (!knowledgeFile) {
      setMessage({ type: "error", text: "请先选择文件" });
      return;
    }
    setChecking("knowledge-upload");
    try {
      const token = getAuthToken();
      const formData = new FormData();
      formData.append("file", knowledgeFile);
      const response = await fetch(`${apiBaseURL}/rag/knowledge-base/upload`, {
        method: "POST",
        headers: { Authorization: `Bearer ${token}` },
        body: formData,
      });
      const payload = await response.json().catch(() => ({}));
      if (!response.ok) {
        setMessage({ type: "error", text: payload?.detail || "上传失败" });
        return;
      }
      setKnowledgeFile(null);
      setMessage({ type: "success", text: "文件已提交，正在向量化处理" });
      await loadKnowledgeDocs();
    } catch (err) {
      setMessage({ type: "error", text: "上传失败，请检查网络" });
    } finally {
      setChecking(null);
    }
  };

  const addKnowledgeURL = async () => {
    if (!knowledgeURL.trim()) {
      setMessage({ type: "error", text: "请输入 URL" });
      return;
    }
    setChecking("knowledge-url");
    try {
      const token = getAuthToken();
      const response = await fetch(`${apiBaseURL}/rag/knowledge-base/urls`, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${token}`,
        },
        body: JSON.stringify({
          url: knowledgeURL.trim(),
          title: knowledgeURLTitle.trim() || undefined,
        }),
      });
      const payload = await response.json().catch(() => ({}));
      if (!response.ok) {
        setMessage({ type: "error", text: payload?.detail || "URL 添加失败" });
        return;
      }
      setKnowledgeURL("");
      setKnowledgeURLTitle("");
      setMessage({ type: "success", text: "URL 已加入知识库，正在抓取与向量化" });
      await loadKnowledgeDocs();
    } catch (err) {
      setMessage({ type: "error", text: "URL 添加失败，请稍后重试" });
    } finally {
      setChecking(null);
    }
  };

  const refreshKnowledgeDoc = async (docId: number) => {
    setChecking(`knowledge-refresh-${docId}`);
    try {
      const token = getAuthToken();
      const response = await fetch(`${apiBaseURL}/rag/knowledge-base/docs/${docId}/refresh`, {
        method: "POST",
        headers: { Authorization: `Bearer ${token}` },
      });
      if (!response.ok) {
        const payload = await response.json().catch(() => ({}));
        setMessage({ type: "error", text: payload?.detail || "刷新失败" });
        return;
      }
      setMessage({ type: "success", text: "已触发刷新，正在处理" });
      await loadKnowledgeDocs();
    } catch (err) {
      setMessage({ type: "error", text: "刷新失败，请稍后重试" });
    } finally {
      setChecking(null);
    }
  };

  const deleteKnowledgeDoc = async (docId: number) => {
    if (!confirm("确认删除该知识库条目及其向量数据？")) return;
    setChecking(`knowledge-delete-${docId}`);
    try {
      const token = getAuthToken();
      const response = await fetch(`${apiBaseURL}/rag/knowledge-base/docs/${docId}`, {
        method: "DELETE",
        headers: { Authorization: `Bearer ${token}` },
      });
      if (!response.ok) {
        const payload = await response.json().catch(() => ({}));
        setMessage({ type: "error", text: payload?.detail || "删除失败" });
        return;
      }
      setMessage({ type: "success", text: "已删除知识库条目" });
      await loadKnowledgeDocs();
    } catch (err) {
      setMessage({ type: "error", text: "删除失败，请稍后重试" });
    } finally {
      setChecking(null);
    }
  };

  // ==================== Initial Load ====================

  // Scroll to section when tab changes to configure
  useEffect(() => {
    if (activeTab === "configure" && scrollToSection) {
      // Small delay to ensure the tab content is rendered
      setTimeout(() => {
        const element = document.getElementById(`config-${scrollToSection}`);
        if (element) {
          element.scrollIntoView({ behavior: "smooth", block: "start" });
        }
        setScrollToSection(null);
      }, 100);
    }
  }, [activeTab, scrollToSection]);

  const handleConfigureClick = (sourceId: string) => {
    setScrollToSection(sourceId);
    setActiveTab("configure");
  };

  useEffect(() => {
    setStatus({
      feishu: { configured: false },
      wecom: { configured: false },
      github: { configured: false },
      browser: { installed: false },
      hn_monitor: { active: false }
    });
    loadStatus();
  }, []);

  useEffect(() => {
    if (activeTab !== "knowledge") return;
    loadKnowledgeDocs();
  }, [activeTab]);

  useEffect(() => {
    if (activeTab !== "knowledge") return;
    if (!knowledgeDocs.some((item) => item.status === "processing")) return;
    const timer = setInterval(() => {
      loadKnowledgeDocs();
    }, 3000);
    return () => clearInterval(timer);
  }, [activeTab, knowledgeDocs]);

  // ==================== Helper Components ====================

  const StatusBadge = ({ status }: { status: IntegrationSource["status"] }) => {
    const config = {
      configured: { label: "已配置", variant: "default" as const, icon: CheckCircle2, color: "text-green-600" },
      available: { label: "可用", variant: "secondary" as const, icon: Sparkles, color: "text-blue-600" },
      needs_setup: { label: "待配置", variant: "outline" as const, icon: AlertTriangle, color: "text-orange-600" },
      unavailable: { label: "不可用", variant: "secondary" as const, icon: AlertCircle, color: "text-slate-400" }
    };
    const { label, variant, icon: Icon, color } = config[status];
    return (
      <Badge variant={variant} className="gap-1">
        <Icon className={`w-3 h-3 ${color}`} />
        {label}
      </Badge>
    );
  };

  const PriorityBadge = ({ priority }: { priority: IntegrationSource["priority"] }) => {
    const config = {
      high: { label: "高优先级", className: "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300" },
      medium: { label: "中优先级", className: "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300" },
      low: { label: "低优先级", className: "bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-300" }
    };
    const { label, className } = config[priority];
    return <span className={`px-2 py-0.5 rounded text-xs ${className}`}>{label}</span>;
  };

  // ==================== Render ====================

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 p-3 dark:from-slate-950 dark:to-slate-900 sm:p-4 md:p-6">
      <div className="max-w-6xl mx-auto">
        {/* Header */}
        <div className="text-center mb-8">
          <div className="flex items-center justify-center gap-3 mb-4">
            <SettingsIcon className="w-10 h-10 text-violet-500" />
            <h1 className="text-3xl font-bold text-slate-900 dark:text-slate-100">
              AI 智能配置中心
            </h1>
          </div>
          <p className="text-slate-600 dark:text-slate-400">
            AI 自动识别可配置的集成源，一键启用主动捕获能力
          </p>
        </div>

        {/* AI Suggestion Card */}
        {suggestion && (
          <Card className="mb-6 border-violet-200 dark:border-violet-800 bg-violet-50 dark:bg-violet-900/20">
            <CardContent className="pt-6">
              <div className="flex items-start gap-3">
                <Sparkles className="w-5 h-5 text-violet-500 mt-0.5" />
                <div>
                  <h3 className="font-semibold text-violet-900 dark:text-violet-100">AI 建议配置方案</h3>
                  <p className="text-sm text-violet-700 dark:text-violet-300 mt-1">{suggestion.reasoning}</p>
                  <p className="text-xs text-violet-600 dark:text-violet-400 mt-2">预期影响: {suggestion.estimated_impact}</p>
                </div>
              </div>
            </CardContent>
          </Card>
        )}

        {/* Message */}
        {message && (
          <div className={`mb-4 p-3 rounded-lg flex items-center gap-2 ${
            message.type === "success"
              ? "bg-green-50 dark:bg-green-900/20 text-green-700 dark:text-green-300"
              : "bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-300"
          }`}>
            {message.type === "success" ? (
              <CheckCircle2 className="w-4 h-4" />
            ) : (
              <AlertCircle className="w-4 h-4" />
            )}
            {message.text}
          </div>
        )}

        <Card className="mb-6 border-slate-200/80 bg-white/80 shadow-sm backdrop-blur dark:border-slate-800 dark:bg-slate-900/70">
          <CardHeader>
            <CardTitle className="text-lg">配置治理工具</CardTitle>
            <CardDescription>新增治理页面统一收敛到智能配置中心入口，避免侧栏信息过载。</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-5">
              {governanceTools.map(({ id, name, description, to, icon: Icon }) => (
                <Link
                  key={id}
                  to={to}
                  className="group rounded-2xl border border-slate-200 bg-white p-3 transition-all hover:-translate-y-0.5 hover:border-blue-300 hover:shadow-sm dark:border-slate-800 dark:bg-slate-900 dark:hover:border-blue-800"
                >
                  <div className="mb-2 inline-flex h-8 w-8 items-center justify-center rounded-lg bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300">
                    <Icon className="h-4 w-4" />
                  </div>
                  <p className="text-sm font-semibold text-slate-900 dark:text-slate-100">{name}</p>
                  <p className="mt-1 text-xs leading-relaxed text-slate-500 dark:text-slate-400">{description}</p>
                </Link>
              ))}
            </div>
          </CardContent>
        </Card>

        {/* Main Content */}
        <Tabs value={activeTab} onValueChange={setActiveTab}>
          <TabsList className="flex w-full min-w-0 flex-nowrap gap-2 overflow-x-auto rounded-lg p-1 [-webkit-overflow-scrolling:touch]">
            <TabsTrigger value="overview" className="shrink-0 whitespace-nowrap">集成源概览</TabsTrigger>
            <TabsTrigger value="configure" className="shrink-0 whitespace-nowrap">快速配置</TabsTrigger>
            <TabsTrigger value="knowledge" className="shrink-0 whitespace-nowrap">知识库</TabsTrigger>
            <TabsTrigger value="advanced" className="shrink-0 whitespace-nowrap">高级设置</TabsTrigger>
            <TabsTrigger value="prompts" className="shrink-0 whitespace-nowrap">Prompt 设置</TabsTrigger>
          </TabsList>

          {/* Overview Tab */}
          <TabsContent value="overview" className="mt-6">
            <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
              {integrationSources.map((source) => {
                const Icon = source.icon;
                return (
                  <Card key={source.id} className="hover:shadow-lg transition-shadow">
                    <CardHeader>
                      <div className="flex items-start justify-between">
                        <div className="flex items-center gap-3">
                          <div className={`w-10 h-10 rounded-lg flex items-center justify-center ${
                            source.status === "configured" ? "bg-green-100 dark:bg-green-900/30" :
                            source.status === "needs_setup" ? "bg-orange-100 dark:bg-orange-900/30" :
                            "bg-slate-100 dark:bg-slate-800"
                          }`}>
                            <Icon className={`w-5 h-5 ${
                              source.status === "configured" ? "text-green-600 dark:text-green-400" :
                              source.status === "needs_setup" ? "text-orange-600 dark:text-orange-400" :
                              "text-slate-600 dark:text-slate-400"
                            }`} />
                          </div>
                          <div>
                            <CardTitle className="text-lg">{source.name}</CardTitle>
                            <CardDescription className="text-sm">{source.description}</CardDescription>
                          </div>
                        </div>
                        <StatusBadge status={source.status} />
                      </div>
                    </CardHeader>
                    <CardContent>
                      <div className="space-y-3">
                        <div className="flex items-center justify-between">
                          <span className="text-xs text-slate-500">优先级</span>
                          <PriorityBadge priority={source.priority} />
                        </div>
                        <div className="flex items-center justify-between">
                          <span className="text-xs text-slate-500">预计收益</span>
                          <span className="text-xs text-slate-700 dark:text-slate-300">{source.estimated_benefit}</span>
                        </div>
                        <div className="flex items-center justify-between">
                          <span className="text-xs text-slate-500">配置耗时</span>
                          <span className="text-xs text-slate-700 dark:text-slate-300">{source.setup_time}</span>
                        </div>
                        <Button
                          variant="outline"
                          size="sm"
                          className="w-full mt-2"
                          onClick={() => handleConfigureClick(source.id)}
                        >
                          {source.status === "configured" ? "查看配置" : "开始配置"}
                          <ChevronRight className="w-4 h-4 ml-1" />
                        </Button>
                      </div>
                    </CardContent>
                  </Card>
                );
              })}
            </div>
          </TabsContent>

          {/* Quick Configure Tab */}
          <TabsContent value="configure" className="mt-6">
            <div className="space-y-6">
              {/* Feishu Config */}
              <Card id="config-feishu" className={status?.feishu?.configured ? "border-green-200 dark:border-green-800" : ""}>
                <CardHeader>
                  <div className="flex items-center justify-between">
                    <div className="flex items-center gap-2">
                      <MessageSquare className="w-5 h-5 text-blue-500" />
                      <CardTitle>飞书群聊集成</CardTitle>
                      {status?.feishu?.configured && (
                        <Badge className="ml-2" variant="default">已配置</Badge>
                      )}
                    </div>
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={() => setShowFeishuGuide(!showFeishuGuide)}
                    >
                      {showFeishuGuide ? "收起指南" : "配置指南"}
                      <ChevronRight className={`w-4 h-4 ml-1 transition-transform ${showFeishuGuide ? "rotate-90" : ""}`} />
                    </Button>
                  </div>
                  <CardDescription>
                    AI 自动从飞书群聊捕获需求信号，无需手动录入
                  </CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  {/* Setup Guide */}
                  {showFeishuGuide && (
                    <div className="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
                      <h4 className="font-semibold text-blue-900 dark:text-blue-100 mb-3 flex items-center gap-2">
                        <Info className="w-4 h-4" />
                        飞书配置指南（6 步完成）
                      </h4>
                      <div className="space-y-2">
                        {integrationSources.find(s => s.id === "feishu")?.setup_guide?.map((step, index) => (
                          <div key={index} className="flex items-start gap-2">
                            <div className="flex-shrink-0 w-5 h-5 rounded-full bg-blue-500 text-white text-xs flex items-center justify-center">
                              {index + 1}
                            </div>
                            <span className="text-sm text-blue-800 dark:text-blue-200">{step}</span>
                          </div>
                        ))}
                      </div>
                      <div className="mt-3 p-2 bg-amber-50 dark:bg-amber-900/20 rounded text-xs text-amber-800 dark:text-amber-200">
                        ⚠️ 配置完成后，请点击下方"测试连接"按钮验证
                      </div>
                    </div>
                  )}

                  {status?.feishu?.configured && !editingFeishu ? (
                    <div className="p-4 bg-green-50 dark:bg-green-900/20 rounded-lg">
                      <div className="flex items-center gap-2 text-green-700 dark:text-green-300">
                        <CheckCircle2 className="w-4 h-4" />
                        <span className="font-medium">飞书已配置</span>
                        {status.feishu.app_id && (
                          <span className="text-xs ml-2 text-green-600 dark:text-green-400">
                            (应用编号: {status.feishu.app_id})
                          </span>
                        )}
                      </div>
                      <p className="text-xs text-green-700/80 dark:text-green-300/80 mt-2">
                        当前接收模式：{getFeishuEventModeLabel(status.feishu.event_mode || "long_connection")}
                      </p>
                      <div className="mt-3 flex gap-2">
                        <Button onClick={testFeishuConnection} disabled={checking === "feishu-test"} size="sm">
                          {checking === "feishu-test" ? <Loader2 className="w-4 h-4 animate-spin" /> : "测试连接"}
                        </Button>
                        <Button
                          variant="outline"
                          size="sm"
                          onClick={() => {
                            setEditingFeishu(true);
                            void loadStatus();
                          }}
                        >
                          修改配置
                        </Button>
                        <Button
                          variant="outline"
                          size="sm"
                          onClick={deleteFeishuConfig}
                          disabled={checking === "feishu-delete"}
                          className="text-red-600 hover:text-red-700"
                        >
                          {checking === "feishu-delete" ? <Loader2 className="w-4 h-4 animate-spin" /> : "删除配置"}
                        </Button>
                      </div>
                    </div>
                  ) : (
                    <div className="space-y-3">
                      {status?.feishu?.configured && (
                        <div className="p-2 rounded bg-amber-50 dark:bg-amber-900/20 text-xs text-amber-800 dark:text-amber-200">
                          正在修改已有配置：已自动回填当前配置，可直接核对并修改后保存。
                        </div>
                      )}
                      <div>
                        <Label className="mb-2 block">事件接收方式 *</Label>
                        <p className="text-xs text-slate-500 mb-2">
                          飞书接入已统一为 <code>long_connection</code>
                        </p>
                        <div className="grid grid-cols-1 gap-2">
                          {FEISHU_EVENT_MODE_OPTIONS.map((option) => (
                            <label key={option.value} className="flex items-center gap-2 rounded border px-3 py-2 text-sm cursor-pointer">
                              <input
                                type="radio"
                                name="feishu_event_mode"
                                value={option.value}
                                checked={feishuConfig.event_mode === option.value}
                                onChange={() => setFeishuConfig({ ...feishuConfig, event_mode: option.value })}
                              />
                              <span>{option.label}</span>
                              <code className="text-[11px] text-slate-500">({option.value})</code>
                            </label>
                          ))}
                        </div>
                      </div>
                      <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
                        <div>
                          <Label htmlFor="feishu_app_id">应用编号 *</Label>
                          <Input
                            id="feishu_app_id"
                            placeholder="cli_xxxxxxxxxxxxx"
                            value={feishuConfig.app_id}
                            onChange={(e) => setFeishuConfig({ ...feishuConfig, app_id: e.target.value })}
                          />
                        </div>
                        <div>
                          <Label htmlFor="feishu_app_secret">应用密钥 *</Label>
                          <Input
                            id="feishu_app_secret"
                            type="password"
                            placeholder="应用密钥"
                            value={feishuConfig.app_secret}
                            onChange={(e) => setFeishuConfig({ ...feishuConfig, app_secret: e.target.value })}
                          />
                        </div>
                      </div>
                      <div className="rounded-md border border-slate-200 bg-slate-50 px-3 py-2 text-sm text-slate-600 dark:border-slate-800 dark:bg-slate-900 dark:text-slate-300">
                        已切换到飞书长连接模式。无需配置 Webhook、Encrypt Key 或 Verification Token。
                      </div>
                      <div className="flex gap-2">
                        <Button
                          onClick={saveFeishuConfig}
                          disabled={checking === "feishu" || !feishuConfig.app_id || !feishuConfig.app_secret}
                          className="w-full"
                        >
                          {checking === "feishu" ? (
                            <Loader2 className="w-4 h-4 mr-2 animate-spin" />
                          ) : (
                            status?.feishu?.configured ? "更新配置" : "保存配置"
                          )}
                        </Button>
                        {status?.feishu?.configured && (
                          <Button
                            variant="outline"
                            onClick={() => setEditingFeishu(false)}
                            disabled={checking === "feishu"}
                          >
                            取消
                          </Button>
                        )}
                      </div>
                    </div>
                  )}

                  <div className="p-3 bg-slate-100 dark:bg-slate-800 rounded-lg text-xs text-slate-600 dark:text-slate-300">
                    当前选择的是「长连接」模式，无需配置 Webhook 请求地址。
                  </div>
                </CardContent>
              </Card>

              {/* WeChat Work Config */}
              <Card id="config-wecom" className={status?.wecom?.configured ? "border-green-200 dark:border-green-800" : ""}>
                <CardHeader>
                  <div className="flex items-center justify-between">
                    <div className="flex items-center gap-2">
                      <Building2 className="w-5 h-5 text-emerald-500" />
                      <CardTitle>企业微信集成</CardTitle>
                      {status?.wecom?.configured && (
                        <Badge className="ml-2" variant="default">已配置</Badge>
                      )}
                    </div>
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={() => setShowWecomGuide(!showWecomGuide)}
                    >
                      {showWecomGuide ? "收起指南" : "配置指南"}
                      <ChevronRight className={`w-4 h-4 ml-1 transition-transform ${showWecomGuide ? "rotate-90" : ""}`} />
                    </Button>
                  </div>
                  <CardDescription>
                    AI 自动从企业微信群聊捕获需求信号，无需手动录入
                  </CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  {/* Setup Guide */}
                  {showWecomGuide && (
                    <div className="p-4 bg-emerald-50 dark:bg-emerald-900/20 rounded-lg border border-emerald-200 dark:border-emerald-800">
                      <h4 className="font-semibold text-emerald-900 dark:text-emerald-100 mb-3 flex items-center gap-2">
                        <Info className="w-4 h-4" />
                        企业微信配置指南（6 步完成）
                      </h4>
                      <div className="space-y-2">
                        {integrationSources.find(s => s.id === "wecom")?.setup_guide?.map((step, index) => (
                          <div key={index} className="flex items-start gap-2">
                            <div className="flex-shrink-0 w-5 h-5 rounded-full bg-emerald-500 text-white text-xs flex items-center justify-center">
                              {index + 1}
                            </div>
                            <span className="text-sm text-emerald-800 dark:text-emerald-200">{step}</span>
                          </div>
                        ))}
                      </div>
                      <div className="mt-3 p-2 bg-amber-50 dark:bg-amber-900/20 rounded text-xs text-amber-800 dark:text-amber-200">
                        ⚠️ 配置完成后，请点击下方"测试连接"按钮验证
                      </div>
                    </div>
                  )}

                  {status?.wecom?.configured && !editingWecom ? (
                    <div className="p-4 bg-green-50 dark:bg-green-900/20 rounded-lg">
                      <div className="flex items-center gap-2 text-green-700 dark:text-green-300">
                        <CheckCircle2 className="w-4 h-4" />
                        <span className="font-medium">企业微信已配置</span>
                        {status.wecom.corp_id && (
                          <span className="text-xs ml-2 text-green-600 dark:text-green-400">
                            (企业编号: {status.wecom.corp_id})
                          </span>
                        )}
                      </div>
                      {status.wecom.agent_id && (
                        <p className="text-xs text-green-700/80 dark:text-green-300/80 mt-2">
                          应用编号：{status.wecom.agent_id}
                        </p>
                      )}
                      <p className="text-xs text-green-700/80 dark:text-green-300/80 mt-1">
                        Token: {status.wecom.token_preview || "未设置"}，EncodingAESKey: {status.wecom.encoding_aes_key_preview || "未设置"}
                      </p>
                      <div className="mt-3 flex gap-2">
                        <Button onClick={testWecomConnection} disabled={checking === "wecom-test"} size="sm">
                          {checking === "wecom-test" ? <Loader2 className="w-4 h-4 animate-spin" /> : "测试连接"}
                        </Button>
                        <Button
                          variant="outline"
                          size="sm"
                          onClick={() => {
                            setEditingWecom(true);
                            void loadStatus();
                          }}
                        >
                          修改配置
                        </Button>
                        <Button
                          variant="outline"
                          size="sm"
                          onClick={deleteWecomConfig}
                          disabled={checking === "wecom-delete"}
                          className="text-red-600 hover:text-red-700"
                        >
                          {checking === "wecom-delete" ? <Loader2 className="w-4 h-4 animate-spin" /> : "删除配置"}
                        </Button>
                      </div>
                    </div>
                  ) : (
                    <div className="space-y-3">
                      {status?.wecom?.configured && (
                        <div className="p-2 rounded bg-amber-50 dark:bg-amber-900/20 text-xs text-amber-800 dark:text-amber-200">
                          正在修改已有配置：已自动回填当前配置，可直接核对并修改后保存。
                        </div>
                      )}
                      <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
                        <div>
                          <Label htmlFor="wecom_corp_id">企业编号 *</Label>
                          <Input
                            id="wecom_corp_id"
                            placeholder="wwxxxxxxxxxxxxxx"
                            value={wecomConfig.corp_id}
                            onChange={(e) => setWecomConfig({ ...wecomConfig, corp_id: e.target.value })}
                          />
                        </div>
                        <div>
                          <Label htmlFor="wecom_agent_id">应用编号 *</Label>
                          <Input
                            id="wecom_agent_id"
                            placeholder="1000002"
                            value={wecomConfig.agent_id}
                            onChange={(e) => setWecomConfig({ ...wecomConfig, agent_id: e.target.value })}
                          />
                        </div>
                      </div>
                      <div>
                        <Label htmlFor="wecom_app_secret">应用密钥 *</Label>
                        <Input
                          id="wecom_app_secret"
                          type="password"
                          placeholder="应用密钥"
                          value={wecomConfig.app_secret}
                          onChange={(e) => setWecomConfig({ ...wecomConfig, app_secret: e.target.value })}
                        />
                      </div>
                      <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
                        <div>
                          <Label htmlFor="wecom_token">验证令牌 *</Label>
                          <Input
                            id="wecom_token"
                            placeholder="回调验证令牌"
                            value={wecomConfig.token}
                            onChange={(e) => setWecomConfig({ ...wecomConfig, token: e.target.value })}
                          />
                        </div>
                        <div>
                          <Label htmlFor="wecom_encoding_aes_key">消息加密密钥 *</Label>
                          <Input
                            id="wecom_encoding_aes_key"
                            placeholder="消息加密密钥（43位）"
                            value={wecomConfig.encoding_aes_key}
                            onChange={(e) => setWecomConfig({ ...wecomConfig, encoding_aes_key: e.target.value })}
                          />
                        </div>
                      </div>
                      <div className="flex gap-2">
                        <Button
                          onClick={saveWecomConfig}
                          disabled={checking === "wecom" || !wecomConfig.corp_id || !wecomConfig.agent_id || !wecomConfig.app_secret}
                          className="w-full"
                        >
                          {checking === "wecom" ? (
                            <Loader2 className="w-4 h-4 mr-2 animate-spin" />
                          ) : (
                            status?.wecom?.configured ? "更新配置" : "保存配置"
                          )}
                        </Button>
                        {status?.wecom?.configured && (
                          <Button
                            variant="outline"
                            onClick={() => {
                              setEditingWecom(false);
                              void loadStatus();
                            }}
                            disabled={checking === "wecom"}
                          >
                            取消
                          </Button>
                        )}
                      </div>
                    </div>
                  )}

                  {/* 回调地址 */}
                  <div className="p-3 bg-slate-100 dark:bg-slate-800 rounded-lg">
                    <div className="flex items-center justify-between mb-2">
                      <Label className="text-sm">回调地址</Label>
                      <div className="flex items-center gap-2">
                        {wecomCopyTip && <span className="text-xs text-green-600">{wecomCopyTip}</span>}
                        <Button
                          variant="ghost"
                          size="sm"
                          onClick={() => handleCopyWebhook(getWecomWebhookUrl())}
                        >
                          复制
                        </Button>
                      </div>
                    </div>
                    <code className="text-xs break-all block">{getWecomWebhookUrl()}</code>
                    <p className="text-xs text-slate-500 mt-2">
                      复制此回调地址到企业微信管理后台 - 应用管理 - 接收消息 - 请求地址
                    </p>
                  </div>
                </CardContent>
              </Card>

              {/* HN Monitor */}
              <Card id="config-hn">
                <CardHeader>
                  <div className="flex items-center gap-2">
                    <Activity className="w-5 h-5 text-purple-500" />
                    <CardTitle>技术资讯监控（HN）</CardTitle>
                    {status?.hn_monitor?.active && (
                      <Badge className="ml-auto" variant="default">运行中</Badge>
                    )}
                  </div>
                  <CardDescription>
                    定时抓取 HN 首页，AI 分析技术趋势
                  </CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="flex items-center justify-between">
                    <div>
                      <Label>启用监控</Label>
                      <p className="text-xs text-slate-500">每 {monitorSettings.hn_interval} 分钟抓取一次</p>
                    </div>
                    <Switch
                      checked={monitorSettings.hn_enabled}
                      onCheckedChange={(checked) => {
                        if (checked) startHNMonitor();
                        setMonitorSettings({ ...monitorSettings, hn_enabled: checked });
                      }}
                    />
                  </div>
                  {!monitorSettings.hn_enabled && (
                    <Button
                      onClick={startHNMonitor}
                      disabled={checking === "hn"}
                      className="w-full"
                    >
                      {checking === "hn" ? <Loader2 className="w-4 h-4 mr-2 animate-spin" /> : "启动监控"}
                    </Button>
                  )}
                </CardContent>
              </Card>

              {/* GitHub */}
              <Card id="config-github" className={status?.github?.configured ? "border-green-200 dark:border-green-800" : ""}>
                <CardHeader>
                  <div className="flex items-center gap-2">
                    <Github className="w-5 h-5 text-slate-700 dark:text-slate-300" />
                    <CardTitle>代码仓监控</CardTitle>
                    {status?.github?.configured && (
                      <Badge className="ml-2" variant="default">已配置</Badge>
                    )}
                  </div>
                  <CardDescription>
                    跟踪竞品仓库更新、上游依赖变更
                  </CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  {status?.github?.configured && !editingGithub ? (
                    <div className="p-4 bg-green-50 dark:bg-green-900/20 rounded-lg">
                      <div className="flex items-center gap-2 text-green-700 dark:text-green-300">
                        <CheckCircle2 className="w-4 h-4" />
                        <span className="font-medium">代码仓监控已配置</span>
                        {status.github.repos && (
                          <span className="text-xs ml-2 text-green-600 dark:text-green-400">
                            ({status.github.repos.length} 个仓库)
                          </span>
                        )}
                      </div>
                      <div className="mt-3 flex gap-2">
                        <Button
                          variant="outline"
                          size="sm"
                          onClick={() => {
                            setGithubConfig((prev) => ({
                              ...prev,
                              repo_url: status?.github?.repos?.join(",") || prev.repo_url,
                            }));
                            setEditingGithub(true);
                          }}
                        >
                          修改配置
                        </Button>
                        <Button
                          variant="outline"
                          size="sm"
                          onClick={() => {
                            setGithubConfig({ repo_url: "", webhook_url: "", access_token: "" });
                            setStatus(prev => ({ ...prev!, github: { configured: false } }));
                            setEditingGithub(false);
                          }}
                          className="text-red-600 hover:text-red-700"
                        >
                          删除配置
                        </Button>
                      </div>
                    </div>
                  ) : (
                    <div className="space-y-3">
                      <div>
                        <Label htmlFor="github_repo_url">仓库地址 *</Label>
                        <Input
                          id="github_repo_url"
                          placeholder="https://github.com/user/repo"
                          value={githubConfig.repo_url}
                          onChange={(e) => setGithubConfig({ ...githubConfig, repo_url: e.target.value })}
                        />
                        <p className="text-xs text-slate-500 mt-1">支持输入多个仓库，用逗号分隔</p>
                      </div>
                      <div>
                        <Label htmlFor="github_webhook_url">回调地址</Label>
                        <Input
                          id="github_webhook_url"
                          placeholder="https://your-domain.com/api/github/webhook"
                          value={githubConfig.webhook_url}
                          onChange={(e) => setGithubConfig({ ...githubConfig, webhook_url: e.target.value })}
                        />
                        <p className="text-xs text-slate-500 mt-1">仓库侧配置的回调地址</p>
                      </div>
                      <div>
                        <Label htmlFor="github_token">访问令牌</Label>
                        <Input
                          id="github_token"
                          type="password"
                          placeholder="ghp_xxxxxxxxxxxx"
                          value={githubConfig.access_token}
                          onChange={(e) => setGithubConfig({ ...githubConfig, access_token: e.target.value })}
                        />
                        <p className="text-xs text-slate-500 mt-1">用于获取仓库信息的个人访问令牌</p>
                      </div>
                      <Button
                        onClick={() => {
                          setMessage({ type: "success", text: "代码仓监控配置已保存" });
                          setStatus(prev => ({ ...prev!, github: { configured: true, repos: githubConfig.repo_url.split(",") } }));
                          setEditingGithub(false);
                        }}
                        disabled={!githubConfig.repo_url}
                        className="w-full"
                      >
                        {status?.github?.configured ? "更新配置" : "保存配置"}
                      </Button>
                      {status?.github?.configured && (
                        <Button
                          variant="outline"
                          onClick={() => setEditingGithub(false)}
                          className="w-full"
                        >
                          取消
                        </Button>
                      )}
                    </div>
                  )}
                </CardContent>
              </Card>

              {/* Browser Extension */}
              <Card id="config-browser">
                <CardHeader>
                  <div className="flex items-center gap-2">
                    <Globe className="w-5 h-5 text-green-500" />
                    <CardTitle>浏览器扩展</CardTitle>
                    <Badge className="ml-auto" variant="secondary">敬请期待</Badge>
                  </div>
                  <CardDescription>
                    自动监控访问的技术文档、竞品页面
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="p-4 bg-slate-100 dark:bg-slate-800 rounded-lg text-center">
                    <Globe className="w-8 h-8 text-slate-400 mx-auto mb-2" />
                    <p className="text-sm text-slate-600 dark:text-slate-400">
                      浏览器扩展正在开发中
                    </p>
                    <p className="text-xs text-slate-500 mt-1">
                      支持功能：自动捕获页面内容、智能分析价值
                    </p>
                  </div>
                </CardContent>
              </Card>
            </div>
          </TabsContent>

          {/* Knowledge Base Tab */}
          <TabsContent value="knowledge" className="mt-6">
            <div className="space-y-6">
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <Upload className="w-5 h-5 text-violet-500" />
                    文件上传
                  </CardTitle>
                  <CardDescription>支持 PDF / Word / Markdown / TXT，上传后自动分块与向量化。</CardDescription>
                </CardHeader>
                <CardContent className="space-y-3">
                  <Input
                    type="file"
                    accept=".pdf,.doc,.docx,.md,.markdown,.txt"
                    onChange={(e) => setKnowledgeFile(e.target.files?.[0] || null)}
                  />
                  <div className="flex items-center justify-between">
                    <div className="text-xs text-slate-500">
                      {knowledgeFile ? `已选择: ${knowledgeFile.name}` : "未选择文件"}
                    </div>
                    <Button onClick={uploadKnowledgeFile} disabled={!knowledgeFile || checking === "knowledge-upload"}>
                      {checking === "knowledge-upload" ? (
                        <>
                          <Loader2 className="w-4 h-4 mr-2 animate-spin" />
                          上传中…
                        </>
                      ) : (
                        "上传并处理"
                      )}
                    </Button>
                  </div>
                </CardContent>
              </Card>

              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <Link2 className="w-5 h-5 text-blue-500" />
                    URL 知识源
                  </CardTitle>
                  <CardDescription>添加公开文档 URL，系统自动抓取并向量化，可手动刷新。</CardDescription>
                </CardHeader>
                <CardContent className="space-y-3">
                  <Input
                    placeholder="URL 标题（可选）"
                    value={knowledgeURLTitle}
                    onChange={(e) => setKnowledgeURLTitle(e.target.value)}
                  />
                  <Input
                    placeholder="https://example.com/docs"
                    value={knowledgeURL}
                    onChange={(e) => setKnowledgeURL(e.target.value)}
                  />
                  <div className="flex justify-end">
                    <Button onClick={addKnowledgeURL} disabled={!knowledgeURL.trim() || checking === "knowledge-url"}>
                      {checking === "knowledge-url" ? (
                        <>
                          <Loader2 className="w-4 h-4 mr-2 animate-spin" />
                          添加中…
                        </>
                      ) : (
                        "Add URL"
                      )}
                    </Button>
                  </div>
                </CardContent>
              </Card>

              <Card>
                <CardHeader>
                  <CardTitle>知识库列表</CardTitle>
                  <CardDescription>处理中状态会每 3 秒自动刷新。</CardDescription>
                </CardHeader>
                <CardContent>
                  {knowledgeDocs.length === 0 ? (
                    <div className="text-sm text-slate-500">暂无知识库条目</div>
                  ) : (
                    <div className="space-y-3">
                      {knowledgeDocs.map((doc) => (
                        <div key={doc.id} className="p-3 rounded-lg border border-slate-200 dark:border-slate-800">
                          <div className="flex items-start justify-between gap-3">
                            <div className="space-y-1 min-w-0">
                              <div className="font-medium truncate">{doc.title}</div>
                              <div className="text-xs text-slate-500">
                                类型: {doc.file_type} · 来源: {doc.source_type}
                              </div>
                              <div className="text-xs text-slate-500">
                                上传时间: {doc.created_at ? new Date(doc.created_at).toLocaleString() : "-"}
                                {doc.last_fetched_at ? ` · 最近抓取: ${new Date(doc.last_fetched_at).toLocaleString()}` : ""}
                              </div>
                              {doc.file_url && (
                                <div className="text-xs text-blue-600 truncate">{doc.file_url}</div>
                              )}
                              {doc.error_message && (
                                <div className="text-xs text-red-600">{doc.error_message}</div>
                              )}
                            </div>
                            <div className="flex items-center gap-2 shrink-0">
                              <Badge variant={doc.status === "complete" ? "default" : doc.status === "failed" ? "destructive" : "secondary"}>
                                {doc.status === "processing" ? "processing" : doc.status === "complete" ? "complete" : "failed"}
                              </Badge>
                              {doc.source_type === "url" && (
                                <Button
                                  size="sm"
                                  variant="outline"
                                  onClick={() => refreshKnowledgeDoc(doc.id)}
                                  disabled={checking === `knowledge-refresh-${doc.id}`}
                                >
                                  {checking === `knowledge-refresh-${doc.id}` ? (
                                    <Loader2 className="w-3 h-3 animate-spin" />
                                  ) : (
                                    <RefreshCw className="w-3 h-3" />
                                  )}
                                </Button>
                              )}
                              <Button
                                size="sm"
                                variant="destructive"
                                onClick={() => deleteKnowledgeDoc(doc.id)}
                                disabled={checking === `knowledge-delete-${doc.id}`}
                              >
                                {checking === `knowledge-delete-${doc.id}` ? (
                                  <Loader2 className="w-3 h-3 animate-spin" />
                                ) : (
                                  <Trash2 className="w-3 h-3" />
                                )}
                              </Button>
                            </div>
                          </div>
                        </div>
                      ))}
                    </div>
                  )}
                </CardContent>
              </Card>
            </div>
          </TabsContent>

          {/* Advanced Tab */}
          <TabsContent value="advanced" className="mt-6">
            <div className="space-y-6">
              <Card>
                <CardHeader>
                  <CardTitle>自动检测规则</CardTitle>
                  <CardDescription>
                    AI 自动判断信号价值的阈值设置
                  </CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div>
                    <div className="flex items-center justify-between mb-2">
                      <Label>信号捕获阈值</Label>
                      <span className="text-sm text-slate-500">影响分 ≥ 0.7</span>
                    </div>
                    <p className="text-xs text-slate-500">
                      低于此阈值的信号将被忽略，减少噪音
                    </p>
                  </div>
                  <div>
                    <div className="flex items-center justify-between mb-2">
                      <Label>冲突检测灵敏度</Label>
                      <span className="text-sm text-slate-500">中等</span>
                    </div>
                    <p className="text-xs text-slate-500">
                      控制认知冲突检测的严格程度
                    </p>
                  </div>
                  <div>
                    <div className="flex items-center justify-between mb-2">
                      <Label>简报推送时间</Label>
                      <span className="text-sm text-slate-500">每天 9:00</span>
                    </div>
                    <p className="text-xs text-slate-500">
                      个性化每日简报的推送时间
                    </p>
                  </div>
                </CardContent>
              </Card>

              <Card>
                <CardHeader>
                  <CardTitle>数据同步设置</CardTitle>
                  <CardDescription>
                    控制数据同步频率和范围
                  </CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="flex items-center justify-between">
                    <div>
                      <Label>实时同步</Label>
                      <p className="text-xs text-slate-500">重要事件立即推送</p>
                    </div>
                    <Switch defaultChecked />
                  </div>
                  <div className="flex items-center justify-between">
                    <div>
                      <Label>历史数据导入</Label>
                      <p className="text-xs text-slate-500">导入过去 30 天的聊天记录</p>
                    </div>
                    <Switch />
                  </div>
                  <div className="flex items-center justify-between">
                    <div>
                      <Label>自动关联项目</Label>
                      <p className="text-xs text-slate-500">新信号自动关联到活跃项目</p>
                    </div>
                    <Switch defaultChecked />
                  </div>
                </CardContent>
              </Card>
            </div>
          </TabsContent>

          {/* Prompt Profiles Tab */}
          <TabsContent value="prompts" className="mt-6">
            <PromptRoleSettings />
          </TabsContent>
        </Tabs>
      </div>
    </div>
  );
}