// @ts-nocheck

import React, { useState, useEffect, useCallback } from 'react';

import { adminAPI } from '@/api';
import { formatBjTime } from '@/utils/datetime';



interface Stats {

  total_configs: number;

  active_licenses: number;

  synced_knowledge_bases: number;

  mode_breakdown: Record<string, number>;

}



interface PrivacyConfig {

  privacy_mode: string;

  local_llm_provider: string;

  local_llm_model: string;

  local_llm_endpoint: string;

  data_retention_days: number;

  anonymize_usage: boolean;

  sync_knowledge_bases: number[];

  sync_frequency: string;

  status: string;

  last_sync_at?: string;

}



interface License {

  id: number;

  license_key: string;

  agent_id: number | null;

  issued_at: string;

  expires_at: string;

  max_offline_days: number;

  status: string;

  device_fingerprint?: string;

}



interface KbSyncState {

  id: number;

  knowledge_base_id: number;

  kb_name: string;

  sync_status: string;

  total_docs: number;

  synced_docs: number;

  sync_direction: string;

  last_sync_at: string | null;

  local_version: number;

  remote_version: number;

}



interface LocalAgent {

  id: number;

  name: string;

  privacy_mode: string;

  can_run_local: boolean;

  llm_provider: string;

  last_sync: string | null;

}



interface UsageStats {

  total_reports: number;

  unique_users: number;

  today_reports: number;

  by_type: Array<{ type: string; count: number }>;

}



const MODE_OPTIONS = [

  { value: 'cloud', label: '云端模式', icon: '☁️', desc: '所有数据和计算在云端处理' },

  { value: 'local', label: '本地模式', icon: '🖥️', desc: '数据完全本地处理，隐私优先' },

  { value: 'hybrid', label: '混合模式', icon: '🔀', desc: '敏感数据本地，通用能力云端' },

];



const FREQ_OPTIONS = [

  { value: 'realtime', label: '实时' },

  { value: 'hourly', label: '每小时' },

  { value: 'daily', label: '每天' },

  { value: 'manual', label: '手动' },

];



export default function PrivacySettings() {

  const [activeTab, setActiveTab] = useState('settings');

  const [stats, setStats] = useState<Stats | null>(null);

  const [config, setConfig] = useState<PrivacyConfig | null>(null);

  const [licenses, setLicenses] = useState<License[]>([]);

  const [kbStates, setKbStates] = useState<KbSyncState[]>([]);

  const [localAgents, setLocalAgents] = useState<LocalAgent[]>([]);

  const [usageStats, setUsageStats] = useState<UsageStats | null>(null);

  const [bridgeConfig, setBridgeConfig] = useState<any>(null);

  const [loading, setLoading] = useState(false);

  const [message, setMessage] = useState('');



  // Modal states

  const [showLicenseModal, setShowLicenseModal] = useState(false);

  const [showSyncModal, setShowSyncModal] = useState(false);

  const [licenseForm, setLicenseForm] = useState({ agent_id: '', max_offline_days: 7 });

  const [syncForm, setSyncForm] = useState({ kb_id: '', direction: 'pull' });

  const [newLicense, setNewLicense] = useState<any>(null);

  const [validatingLicense, setValidatingLicense] = useState('');



  const showMsg = (msg: string) => { setMessage(msg); setTimeout(() => setMessage(''), 3000); };



  const loadStats = useCallback(async () => {

    try {

      const res = await adminAPI.getPrivacyStats();

      if (res?.code === 0) setStats(res.data);

    } catch (e) { console.error('loadStats:', e); }

  }, []);



  const loadConfig = useCallback(async () => {

    try {

      const res = await adminAPI.getPrivacyConfig();

      if (res?.code === 0) setConfig(res.data);

    } catch (e) { console.error('loadConfig:', e); }

  }, []);



  const loadLicenses = useCallback(async () => {

    try {

      const res = await adminAPI.getPrivacyLicenses();

      if (res?.code === 0) setLicenses(res.data?.items || []);

    } catch (e) { console.error('loadLicenses:', e); }

  }, []);



  const loadKbStates = useCallback(async () => {

    try {

      const res = await adminAPI.getKbSyncStates();

      if (res?.code === 0) setKbStates(res.data || []);

    } catch (e) { console.error('loadKbStates:', e); }

  }, []);



  const loadLocalAgents = useCallback(async () => {

    try {

      const res = await adminAPI.getLocalAgents();

      if (res?.code === 0) setLocalAgents(res.data || []);

    } catch (e) { console.error('loadLocalAgents:', e); }

  }, []);



  const loadUsage = useCallback(async () => {

    try {

      const res = await adminAPI.getPrivacyUsageStats();

      if (res?.code === 0) setUsageStats(res.data);

    } catch (e) { console.error('loadUsage:', e); }

  }, []);



  const loadBridgeConfig = useCallback(async () => {

    try {

      const res = await adminAPI.getBridgeConfig();

      if (res?.code === 0) setBridgeConfig(res.data);

    } catch (e) { console.error('loadBridge:', e); }

  }, []);



  useEffect(() => {

    loadStats();

    loadConfig();

    loadLicenses();

    loadKbStates();

    loadLocalAgents();

    loadUsage();

    loadBridgeConfig();

  }, [loadStats, loadConfig, loadLicenses, loadKbStates, loadLocalAgents, loadUsage, loadBridgeConfig]);



  const switchMode = async (mode: string) => {

    setLoading(true);

    try {

      const res = await adminAPI.switchPrivacyMode(mode);

      if (res?.code === 0) { showMsg(`已切换到${MODE_OPTIONS.find(m => m.value === mode)?.label}`); loadConfig(); loadStats(); }

    } catch (e) { showMsg('切换失败'); }

    setLoading(false);

  };



  const updateConfig = async (field: string, value: any) => {

    setLoading(true);

    try {

      const params: any = {};

      if (field === 'privacy_mode') params.privacy_mode = value;

      else if (field === 'local_llm_provider') params.local_llm_provider = value;

      else if (field === 'local_llm_model') params.local_llm_model = value;

      else if (field === 'local_llm_endpoint') params.local_llm_endpoint = value;

      else if (field === 'data_retention_days') params.data_retention_days = value;

      else if (field === 'sync_frequency') params.sync_frequency = value;

      const res = await adminAPI.updatePrivacyConfig(params);

      if (res?.code === 0) { showMsg('配置已更新'); loadConfig(); }

    } catch (e) { showMsg('更新失败'); }

    setLoading(false);

  };



  const generateLicense = async () => {

    setLoading(true);

    try {

      const res = await adminAPI.generateOfflineLicense({

        agent_id: licenseForm.agent_id || undefined,

        max_offline_days: licenseForm.max_offline_days,

      });

      if (res?.code === 0) {

        setNewLicense(res.data);

        loadLicenses();

        loadStats();

        showMsg('许可证已生成');

      }

    } catch (e) { showMsg('生成失败'); }

    setLoading(false);

  };



  const revokeLicense = async (id: number) => {

    if (!confirm('确定吊销此许可证？')) return;

    try {

      await adminAPI.revokePrivacyLicense(id);

      showMsg('已吊销'); loadLicenses(); loadStats();

    } catch (e) { showMsg('吊销失败'); }

  };



  const validateLicenseKey = async () => {

    if (!validatingLicense) return;

    setLoading(true);

    try {

      const res = await adminAPI.validatePrivacyLicense(validatingLicense);

      if (res?.data?.valid) showMsg('✅ 许可证有效');

      else showMsg('❌ ' + (res?.message || '许可证无效'));

    } catch (e) { showMsg('验证失败'); }

    setLoading(false);

  };



  const triggerSync = async () => {

    if (!syncForm.kb_id) return;

    setLoading(true);

    try {

      const res = await adminAPI.triggerKbSync(parseInt(syncForm.kb_id), syncForm.direction);

      if (res?.code === 0) { showMsg('同步已触发'); loadKbStates(); loadStats(); setShowSyncModal(false); }

    } catch (e) { showMsg('同步失败'); }

    setLoading(false);

  };



  const copyToClipboard = (text: string) => {

    navigator.clipboard.writeText(text).then(() => showMsg('已复制到剪贴板'));

  };



  const formatDate = (d: string | null) => d ? formatBjTime(d) : '-';



  const TABS = [

    { key: 'settings', label: '隐私设置', icon: '🔒' },

    { key: 'licenses', label: '许可证管理', icon: '🔑' },

    { key: 'kb_sync', label: '知识库同步', icon: '🔄' },

    { key: 'agents', label: '本地智能体', icon: '🤖' },

    { key: 'bridge', label: '平台桥接', icon: '🌉' },

    { key: 'usage', label: '用量统计', icon: '📊' },

  ];



  return (

    <div style={{ padding: 24, color: '#1A1F36', background: '#F5F7FC', minHeight: '100vh', fontFamily: 'system-ui' }}>

      {/* Header */}

      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 24 }}>

        <div>

          <h1 style={{ margin: 0, fontSize: 24, color: '#1A1F36' }}>🔐 隐私与本地智能体</h1>

          <p style={{ margin: '4px 0 0', color: '#5A6480', fontSize: 13 }}>管理隐私模式、本地代理、离线许可证和知识库同步</p>

        </div>

      </div>



      {message && (

        <div style={{ background: '#F0FDF4', color: '#4ade80', padding: '8px 16px', borderRadius: 6, marginBottom: 16, fontSize: 13 }}>

          {message}

        </div>

      )}



      {/* Stats Cards */}

      {stats && (

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))', gap: 12, marginBottom: 24 }}>

          {[

            { label: '隐私配置', value: stats.total_configs, color: '#7c3aed' },

            { label: '活跃许可证', value: stats.active_licenses, color: '#059669' },

            { label: '已同步知识库', value: stats.synced_knowledge_bases, color: '#2563eb' },

            { label: '本地模式', value: stats.mode_breakdown?.local || 0, color: '#ea580c' },

            { label: '混合模式', value: stats.mode_breakdown?.hybrid || 0, color: '#ca8a04' },

            { label: '云端模式', value: stats.mode_breakdown?.cloud || 0, color: '#6C63FF' },

          ].map((s, i) => (

            <div key={i} style={{ background: '#F8F9FC', borderRadius: 8, padding: 16, borderLeft: `3px solid ${s.color}` }}>

              <div style={{ fontSize: 12, color: '#5A6480' }}>{s.label}</div>

              <div style={{ fontSize: 28, fontWeight: 700, color: '#1A1F36' }}>{s.value}</div>

            </div>

          ))}

        </div>

      )}



      {/* Tabs */}

      <div style={{ display: 'flex', gap: 4, marginBottom: 24, borderBottom: '1px solid #2a2a3e', paddingBottom: 0 }}>

        {TABS.map(t => (

          <button

            key={t.key}

            onClick={() => setActiveTab(t.key)}

            style={{

              padding: '10px 20px',

              background: activeTab === t.key ? '#7c3aed' : 'transparent',

              color: activeTab === t.key ? '#fff' : '#888',

              border: 'none',

              borderRadius: '8px 8px 0 0',

              cursor: 'pointer',

              fontSize: 13,

              fontWeight: activeTab === t.key ? 600 : 400,

              transition: 'all 0.2s',

            }}

          >

            {t.icon} {t.label}

          </button>

        ))}

      </div>



      {/* Tab Content */}

      <div style={{ background: '#F8F9FC', borderRadius: 12, padding: 24 }}>

        {/* ============ TAB: Privacy Settings ============ */}

        {activeTab === 'settings' && (

          <div>

            <h3 style={{ margin: '0 0 20px', color: '#1A1F36', fontSize: 18 }}>隐私模式选择</h3>

            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: 12, marginBottom: 32 }}>

              {MODE_OPTIONS.map(m => (

                <div

                  key={m.value}

                  onClick={() => !loading && switchMode(m.value)}

                  style={{

                    background: config?.privacy_mode === m.value ? '#F3F0FF' : '#F8F9FC',

                    border: config?.privacy_mode === m.value ? '2px solid #7c3aed' : '2px solid transparent',

                    borderRadius: 10,

                    padding: 20,

                    cursor: 'pointer',

                    transition: 'all 0.2s',

                    opacity: loading ? 0.6 : 1,

                  }}

                >

                  <div style={{ fontSize: 32, marginBottom: 8 }}>{m.icon}</div>

                  <div style={{ fontSize: 16, fontWeight: 600, color: '#1A1F36' }}>{m.label}</div>

                  <div style={{ fontSize: 12, color: '#999', marginTop: 4 }}>{m.desc}</div>

                  {config?.privacy_mode === m.value && (

                    <div style={{ marginTop: 8, fontSize: 11, color: '#7c3aed', fontWeight: 600 }}>✓ 当前模式</div>

                  )}

                </div>

              ))}

            </div>



            {/* Local LLM Config */}

            {(config?.privacy_mode === 'local' || config?.privacy_mode === 'hybrid') && (

              <div style={{ marginBottom: 32 }}>

                <h3 style={{ margin: '0 0 16px', color: '#1A1F36', fontSize: 16 }}>本地 LLM 配置</h3>

                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 12 }}>

                  <div>

                    <label style={{ fontSize: 12, color: '#5A6480', display: 'block', marginBottom: 4 }}>提供商</label>

                    <select

                      value={config?.local_llm_provider || 'ollama'}

                      onChange={e => updateConfig('local_llm_provider', e.target.value)}

                      style={{ width: '100%', padding: 10, background: '#F8F9FC', color: '#1A1F36', border: '1px solid rgba(0,0,0,0.10)', borderRadius: 6, fontSize: 13 }}

                    >

                      <option value="ollama">Ollama本地模型</option>

                      <option value="vllm">vLLM</option>

                      <option value="localai">LocalAI</option>

                      <option value="llamacpp">llama.cpp</option>

                    </select>

                  </div>

                  <div>

                    <label style={{ fontSize: 12, color: '#5A6480', display: 'block', marginBottom: 4 }}>模型</label>

                    <input

                      value={config?.local_llm_model || 'qwen2.5:7b'}

                      onChange={e => updateConfig('local_llm_model', e.target.value)}

                      style={{ width: '100%', padding: 10, background: '#F8F9FC', color: '#1A1F36', border: '1px solid rgba(0,0,0,0.10)', borderRadius: 6, fontSize: 13 }}

                    />

                  </div>

                  <div>

                    <label style={{ fontSize: 12, color: '#5A6480', display: 'block', marginBottom: 4 }}>端点地址</label>

                    <input

                      value={config?.local_llm_endpoint || 'http://localhost:11434'}

                      onChange={e => updateConfig('local_llm_endpoint', e.target.value)}

                      style={{ width: '100%', padding: 10, background: '#F8F9FC', color: '#1A1F36', border: '1px solid rgba(0,0,0,0.10)', borderRadius: 6, fontSize: 13 }}

                    />

                  </div>

                </div>

              </div>

            )}



            {/* Sync Config */}

            <div style={{ marginBottom: 32 }}>

              <h3 style={{ margin: '0 0 16px', color: '#1A1F36', fontSize: 16 }}>同步配置</h3>

              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>

                <div>

                  <label style={{ fontSize: 12, color: '#5A6480', display: 'block', marginBottom: 4 }}>同步频率</label>

                  <select

                    value={config?.sync_frequency || 'daily'}

                    onChange={e => updateConfig('sync_frequency', e.target.value)}

                    style={{ width: '100%', padding: 10, background: '#F8F9FC', color: '#1A1F36', border: '1px solid rgba(0,0,0,0.10)', borderRadius: 6, fontSize: 13 }}

                  >

                    {FREQ_OPTIONS.map(f => <option key={f.value} value={f.value}>{f.label}</option>)}

                  </select>

                </div>

                <div>

                  <label style={{ fontSize: 12, color: '#5A6480', display: 'block', marginBottom: 4 }}>数据保留天数</label>

                  <input

                    type="number"

                    value={config?.data_retention_days || 30}

                    onChange={e => updateConfig('data_retention_days', parseInt(e.target.value))}

                    style={{ width: '100%', padding: 10, background: '#F8F9FC', color: '#1A1F36', border: '1px solid rgba(0,0,0,0.10)', borderRadius: 6, fontSize: 13 }}

                  />

                </div>

              </div>

            </div>



            {/* Status */}

            <div style={{ background: '#F8F9FC', borderRadius: 8, padding: 16 }}>

              <div style={{ fontSize: 14, color: '#1A1F36', fontWeight: 600, marginBottom: 8 }}>当前状态</div>

              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8, fontSize: 13, color: '#8892B0' }}>

                <div>模式: <span style={{ color: '#7c3aed', fontWeight: 600 }}>{config?.privacy_mode || 'cloud'}</span></div>

                <div>状态: <span style={{ color: config?.status === 'active' ? '#4ade80' : '#f87171' }}>{config?.status || 'active'}</span></div>

                <div>匿名上报: <span style={{ color: config?.anonymize_usage ? '#4ade80' : '#f87171' }}>{config?.anonymize_usage ? '已启用' : '已禁用'}</span></div>

                <div>最后同步: <span>{config?.last_sync_at ? formatDate(config.last_sync_at) : '从未'}</span></div>

              </div>

            </div>

          </div>

        )}



        {/* ============ TAB: Licenses ============ */}

        {activeTab === 'licenses' && (

          <div>

            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 20 }}>

              <h3 style={{ margin: 0, color: '#1A1F36', fontSize: 18 }}>离线许可证管理</h3>

              <div style={{ display: 'flex', gap: 8 }}>

                <input

                  placeholder="输入许可证密钥验证..."

                  value={validatingLicense}

                  onChange={e => setValidatingLicense(e.target.value)}

                  style={{ padding: '8px 12px', background: '#F8F9FC', color: '#1A1F36', border: '1px solid rgba(0,0,0,0.10)', borderRadius: 6, fontSize: 13, width: 280 }}

                />

                <button onClick={validateLicenseKey} disabled={loading} style={{

                  padding: '8px 16px', background: '#2563eb', color: '#FFFFFF', border: 'none', borderRadius: 6, cursor: 'pointer', fontSize: 13

                }}>验证</button>

                <button onClick={() => { setShowLicenseModal(true); setNewLicense(null); }} style={{

                  padding: '8px 16px', background: '#7c3aed', color: '#FFFFFF', border: 'none', borderRadius: 6, cursor: 'pointer', fontSize: 13

                }}>+ 生成许可证</button>

              </div>

            </div>



            {/* License Table */}

            <table style={{ width: '100%', borderCollapse: 'collapse' }}>

              <thead>

                <tr style={{ borderBottom: '1px solid #2a2a3e' }}>

                  {['ID', '许可证密钥', 'Agent ID', '最大离线天数', '签发时间', '过期时间', '状态', '操作'].map(h => (

                    <th key={h} style={{ padding: '10px 12px', textAlign: 'left', fontSize: 12, color: '#5A6480', fontWeight: 500 }}>{h}</th>

                  ))}

                </tr>

              </thead>

              <tbody>

                {licenses.length === 0 ? (

                  <tr><td colSpan={8} style={{ padding: 40, textAlign: 'center', color: '#666' }}>暂无许可证</td></tr>

                ) : licenses.map(l => (

                  <tr key={l.id} style={{ borderBottom: '1px solid #2a2a3e' }}>

                    <td style={{ padding: '10px 12px', fontSize: 13, color: '#ccc' }}>{l.id}</td>

                    <td style={{ padding: '10px 12px', fontSize: 12, color: '#8892B0', fontFamily: 'monospace', maxWidth: 200, overflow: 'hidden', textOverflow: 'ellipsis' }}>

                      {l.license_key?.substring(0, 40)}...

                    </td>

                    <td style={{ padding: '10px 12px', fontSize: 13, color: '#ccc' }}>{l.agent_id || '-'}</td>

                    <td style={{ padding: '10px 12px', fontSize: 13, color: '#ccc' }}>{l.max_offline_days} 天</td>

                    <td style={{ padding: '10px 12px', fontSize: 12, color: '#5A6480' }}>{formatDate(l.issued_at)}</td>

                    <td style={{ padding: '10px 12px', fontSize: 12, color: l.status === 'active' ? '#4ade80' : '#f87171' }}>{formatDate(l.expires_at)}</td>

                    <td style={{ padding: '10px 12px' }}>

                      <span style={{

                        padding: '2px 10px', borderRadius: 10, fontSize: 11, fontWeight: 600,

                        background: l.status === 'active' ? '#ECFDF5' : l.status === 'expired' ? '#FEF2F2' : '#4a1d1d',

                        color: l.status === 'active' ? '#4ade80' : l.status === 'expired' ? '#fca5a5' : '#f87171'

                      }}>{l.status}</span>

                    </td>

                    <td style={{ padding: '10px 12px' }}>

                      {l.status === 'active' && (

                        <button onClick={() => revokeLicense(l.id)} style={{

                          padding: '4px 12px', background: '#FEF2F2', color: '#fca5a5', border: 'none', borderRadius: 4, cursor: 'pointer', fontSize: 12

                        }}>吊销</button>

                      )}

                    </td>

                  </tr>

                ))}

              </tbody>

            </table>



            {/* License Modal */}

            {showLicenseModal && (

              <div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.7)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 1000 }}>

                <div style={{ background: '#F8F9FC', borderRadius: 12, padding: 24, width: 480, maxHeight: '80vh', overflow: 'auto' }}>

                  <h3 style={{ margin: '0 0 20px', color: '#1A1F36' }}>{newLicense ? '✅ 许可证已生成' : '生成离线许可证'}</h3>

                  {newLicense ? (

                    <div>

                      <div style={{ background: '#F8F9FC', borderRadius: 8, padding: 16, marginBottom: 12 }}>

                        <div style={{ fontSize: 11, color: '#5A6480', marginBottom: 4 }}>许可证密钥 (点击复制)</div>

                        <div onClick={() => copyToClipboard(newLicense.license_key)} style={{

                          fontFamily: 'monospace', fontSize: 11, color: '#4ade80', wordBreak: 'break-all',

                          cursor: 'pointer', background: '#FFFFFF', padding: 10, borderRadius: 6, maxHeight: 100, overflow: 'auto'

                        }}>

                          {newLicense.license_key}

                        </div>

                      </div>

                      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8, fontSize: 13, color: '#8892B0' }}>

                        <div>签发时间: {formatDate(newLicense.issued_at ? new Date(newLicense.issued_at * 1000).toISOString() : null)}</div>

                        <div>过期时间: {formatDate(newLicense.expires_at ? new Date(newLicense.expires_at * 1000).toISOString() : null)}</div>

                        <div>离线天数: {newLicense.max_offline_days} 天</div>

                        <div>状态: <span style={{ color: '#4ade80' }}>活跃</span></div>

                      </div>

                      <button onClick={() => setShowLicenseModal(false)} style={{

                        marginTop: 16, width: '100%', padding: 10, background: '#7c3aed', color: '#FFFFFF', border: 'none', borderRadius: 6, cursor: 'pointer'

                      }}>关闭</button>

                    </div>

                  ) : (

                    <div>

                      <div style={{ marginBottom: 12 }}>

                        <label style={{ fontSize: 12, color: '#5A6480', display: 'block', marginBottom: 4 }}>Agent (可选)</label>

                        <select value={licenseForm.agent_id} onChange={e => setLicenseForm({ ...licenseForm, agent_id: e.target.value })}

                          style={{ width: '100%', padding: 10, background: '#F8F9FC', color: '#1A1F36', border: '1px solid rgba(0,0,0,0.10)', borderRadius: 6 }}>

                          <option value="">默认</option>

                          {localAgents.map(a => <option key={a.id} value={a.id}>{a.name}</option>)}

                        </select>

                      </div>

                      <div style={{ marginBottom: 16 }}>

                        <label style={{ fontSize: 12, color: '#5A6480', display: 'block', marginBottom: 4 }}>最大离线天数: {licenseForm.max_offline_days} 天</label>

                        <input type="range" min={1} max={90} value={licenseForm.max_offline_days}

                          onChange={e => setLicenseForm({ ...licenseForm, max_offline_days: parseInt(e.target.value) })}

                          style={{ width: '100%' }} />

                      </div>

                      <div style={{ display: 'flex', gap: 8 }}>

                        <button onClick={() => setShowLicenseModal(false)} style={{

                          flex: 1, padding: 10, background: '#F0F2F8', color: '#1A1F36', border: 'none', borderRadius: 6, cursor: 'pointer'

                        }}>取消</button>

                        <button onClick={generateLicense} disabled={loading} style={{

                          flex: 1, padding: 10, background: '#7c3aed', color: '#FFFFFF', border: 'none', borderRadius: 6, cursor: 'pointer'

                        }}>{loading ? '生成中...' : '生成'}</button>

                      </div>

                    </div>

                  )}

                </div>

              </div>

            )}

          </div>

        )}



        {/* ============ TAB: KB Sync ============ */}

        {activeTab === 'kb_sync' && (

          <div>

            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 20 }}>

              <h3 style={{ margin: 0, color: '#1A1F36', fontSize: 18 }}>知识库同步状态</h3>

              <button onClick={() => setShowSyncModal(true)} style={{

                padding: '8px 16px', background: '#7c3aed', color: '#FFFFFF', border: 'none', borderRadius: 6, cursor: 'pointer', fontSize: 13

              }}>+ 触发同步</button>

            </div>



            <table style={{ width: '100%', borderCollapse: 'collapse' }}>

              <thead>

                <tr style={{ borderBottom: '1px solid #2a2a3e' }}>

                  {['知识库', '状态', '方向', '文档数', '已同步', '本地版本', '远程版本', '最后同步'].map(h => (

                    <th key={h} style={{ padding: '10px 12px', textAlign: 'left', fontSize: 12, color: '#5A6480', fontWeight: 500 }}>{h}</th>

                  ))}

                </tr>

              </thead>

              <tbody>

                {kbStates.length === 0 ? (

                  <tr><td colSpan={8} style={{ padding: 40, textAlign: 'center', color: '#666' }}>暂无同步记录</td></tr>

                ) : kbStates.map(kb => (

                  <tr key={kb.id} style={{ borderBottom: '1px solid #2a2a3e' }}>

                    <td style={{ padding: '10px 12px', fontSize: 13, color: '#ccc', fontWeight: 500 }}>{kb.kb_name}</td>

                    <td style={{ padding: '10px 12px' }}>

                      <span style={{

                        padding: '2px 10px', borderRadius: 10, fontSize: 11, fontWeight: 600,

                        background: kb.sync_status === 'synced' ? '#ECFDF5' : kb.sync_status === 'syncing' ? '#1e3a5f' : '#4a1d1d',

                        color: kb.sync_status === 'synced' ? '#4ade80' : kb.sync_status === 'syncing' ? '#60a5fa' : '#f87171'

                      }}>{kb.sync_status}</span>

                    </td>

                    <td style={{ padding: '10px 12px', fontSize: 13, color: '#8892B0' }}>{kb.sync_direction}</td>

                    <td style={{ padding: '10px 12px', fontSize: 13, color: '#ccc' }}>{kb.total_docs}</td>

                    <td style={{ padding: '10px 12px', fontSize: 13, color: '#4ade80' }}>{kb.synced_docs}</td>

                    <td style={{ padding: '10px 12px', fontSize: 13, color: '#8892B0' }}>v{kb.local_version}</td>

                    <td style={{ padding: '10px 12px', fontSize: 13, color: '#8892B0' }}>v{kb.remote_version}</td>

                    <td style={{ padding: '10px 12px', fontSize: 12, color: '#5A6480' }}>{formatDate(kb.last_sync_at)}</td>

                  </tr>

                ))}

              </tbody>

            </table>



            {/* Sync Modal */}

            {showSyncModal && (

              <div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.7)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 1000 }}>

                <div style={{ background: '#F8F9FC', borderRadius: 12, padding: 24, width: 400 }}>

                  <h3 style={{ margin: '0 0 20px', color: '#1A1F36' }}>触发知识库同步</h3>

                  <div style={{ marginBottom: 12 }}>

                    <label style={{ fontSize: 12, color: '#5A6480', display: 'block', marginBottom: 4 }}>知识库 ID</label>

                    <input type="number" value={syncForm.kb_id} onChange={e => setSyncForm({ ...syncForm, kb_id: e.target.value })}

                      placeholder="输入知识库 ID" style={{ width: '100%', padding: 10, background: '#F8F9FC', color: '#1A1F36', border: '1px solid rgba(0,0,0,0.10)', borderRadius: 6 }} />

                  </div>

                  <div style={{ marginBottom: 16 }}>

                    <label style={{ fontSize: 12, color: '#5A6480', display: 'block', marginBottom: 4 }}>同步方向</label>

                    <select value={syncForm.direction} onChange={e => setSyncForm({ ...syncForm, direction: e.target.value })}

                      style={{ width: '100%', padding: 10, background: '#F8F9FC', color: '#1A1F36', border: '1px solid rgba(0,0,0,0.10)', borderRadius: 6 }}>

                      <option value="pull">拉取 (平台→本地)</option>

                      <option value="push">推送 (本地→平台)</option>

                      <option value="bidirectional">双向同步</option>

                    </select>

                  </div>

                  <div style={{ display: 'flex', gap: 8 }}>

                    <button onClick={() => setShowSyncModal(false)} style={{ flex: 1, padding: 10, background: '#F0F2F8', color: '#1A1F36', border: 'none', borderRadius: 6, cursor: 'pointer' }}>取消</button>

                    <button onClick={triggerSync} disabled={loading} style={{ flex: 1, padding: 10, background: '#7c3aed', color: '#FFFFFF', border: 'none', borderRadius: 6, cursor: 'pointer' }}>

                      {loading ? '同步中...' : '触发同步'}

                    </button>

                  </div>

                </div>

              </div>

            )}

          </div>

        )}



        {/* ============ TAB: Local Agents ============ */}

        {activeTab === 'agents' && (

          <div>

            <h3 style={{ margin: '0 0 20px', color: '#1A1F36', fontSize: 18 }}>本地智能体状态</h3>

            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))', gap: 12 }}>

              {localAgents.length === 0 ? (

                <div style={{ color: '#666', padding: 40, textAlign: 'center' }}>暂无已发布的 Agent</div>

              ) : localAgents.map(agent => (

                <div key={agent.id} style={{ background: '#F8F9FC', borderRadius: 10, padding: 20 }}>

                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start', marginBottom: 12 }}>

                    <div>

                      <div style={{ fontSize: 15, fontWeight: 600, color: '#1A1F36' }}>{agent.name}</div>

                      <div style={{ fontSize: 12, color: '#5A6480', marginTop: 2 }}>ID: {agent.id}</div>

                    </div>

                    <span style={{

                      padding: '3px 12px', borderRadius: 10, fontSize: 11, fontWeight: 600,

                      background: agent.privacy_mode === 'local' ? '#F3F0FF' : agent.privacy_mode === 'hybrid' ? '#4a3a0a' : '#1e3a5f',

                      color: agent.privacy_mode === 'local' ? '#a78bfa' : agent.privacy_mode === 'hybrid' ? '#fbbf24' : '#60a5fa'

                    }}>{agent.privacy_mode}</span>

                  </div>

                  <div style={{ fontSize: 13, color: '#8892B0', marginBottom: 12 }}>

                    {agent.can_run_local ? (

                      <span style={{ color: '#4ade80' }}>✓ 支持本地运行 ({agent.llm_provider || '未配置LLM'})</span>

                    ) : (

                      <span style={{ color: '#f87171' }}>✗ 仅云端运行</span>

                    )}

                  </div>

                  <div style={{ fontSize: 12, color: '#666' }}>

                    最后同步: {formatDate(agent.last_sync)}

                  </div>

                </div>

              ))}

            </div>

          </div>

        )}



        {/* ============ TAB: Platform Bridge ============ */}

        {activeTab === 'bridge' && (

          <div>

            <h3 style={{ margin: '0 0 20px', color: '#1A1F36', fontSize: 18 }}>Platform Bridge 配置</h3>

            <p style={{ color: '#5A6480', fontSize: 13, marginBottom: 20 }}>

              将此配置部署到本地 Goose，即可通过 Platform Bridge MCP 扩展连接云端平台。

            </p>



            {bridgeConfig && (

              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>

                {/* MCP Server Config */}

                <div>

                  <h4 style={{ margin: '0 0 12px', color: '#ccc', fontSize: 14 }}>MCP Client 配置</h4>

                  <pre style={{

                    background: '#FFFFFF', color: '#4ade80', padding: 16, borderRadius: 8, fontSize: 12, fontFamily: 'monospace',

                    overflow: 'auto', maxHeight: 300, whiteSpace: 'pre-wrap'

                  }}>

                    {JSON.stringify(bridgeConfig.mcp_server, null, 2)}

                  </pre>

                  <button onClick={() => copyToClipboard(JSON.stringify(bridgeConfig.mcp_server, null, 2))} style={{

                    marginTop: 8, padding: '6px 14px', background: '#2563eb', color: '#FFFFFF', border: 'none', borderRadius: 6, cursor: 'pointer', fontSize: 12

                  }}>复制配置</button>

                </div>



                {/* Sync & LLM Config */}

                <div>

                  <h4 style={{ margin: '0 0 12px', color: '#ccc', fontSize: 14 }}>同步 & LLM 配置</h4>

                  <pre style={{

                    background: '#FFFFFF', color: '#fbbf24', padding: 16, borderRadius: 8, fontSize: 12, fontFamily: 'monospace',

                    overflow: 'auto', maxHeight: 300, whiteSpace: 'pre-wrap'

                  }}>

                    {JSON.stringify({ sync_config: bridgeConfig.sync_config, local_llm: bridgeConfig.local_llm, privacy_mode: bridgeConfig.privacy_mode }, null, 2)}

                  </pre>

                  <button onClick={() => copyToClipboard(JSON.stringify({

                    sync_config: bridgeConfig.sync_config,

                    local_llm: bridgeConfig.local_llm,

                    privacy_mode: bridgeConfig.privacy_mode

                  }, null, 2))} style={{

                    marginTop: 8, padding: '6px 14px', background: '#ca8a04', color: '#FFFFFF', border: 'none', borderRadius: 6, cursor: 'pointer', fontSize: 12

                  }}>复制配置</button>



                  {/* Deployment Instructions */}

                  <div style={{ marginTop: 20, background: '#F8F9FC', borderRadius: 8, padding: 16 }}>

                    <h4 style={{ margin: '0 0 8px', color: '#ccc', fontSize: 14 }}>🚀 部署步骤</h4>

                    <ol style={{ margin: 0, paddingLeft: 20, fontSize: 12, color: '#8892B0', lineHeight: 2 }}>

                      <li>复制 Platform Bridge 代码到本地 <code style={{ background: '#FFFFFF', padding: '2px 6px', borderRadius: 4, color: '#4ade80' }}>~/.goose/extensions/platform-bridge/</code></li>

                      <li>安装依赖: <code style={{ background: '#FFFFFF', padding: '2px 6px', borderRadius: 4, color: '#4ade80' }}>pip install -r requirements.txt</code></li>

                      <li>配置环境变量: 将上方 MCP Client 配置添加到 Goose</li>

                      <li>启动 Goose: 配置将自动连接到平台</li>

                    </ol>

                  </div>

                </div>

              </div>

            )}

          </div>

        )}



        {/* ============ TAB: Usage ============ */}

        {activeTab === 'usage' && (

          <div>

            <h3 style={{ margin: '0 0 20px', color: '#1A1F36', fontSize: 18 }}>匿名化用量统计</h3>

            {usageStats && (

              <div>

                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(160px, 1fr))', gap: 12, marginBottom: 24 }}>

                  <div style={{ background: '#F8F9FC', borderRadius: 8, padding: 16 }}>

                    <div style={{ fontSize: 12, color: '#5A6480' }}>总上报数</div>

                    <div style={{ fontSize: 28, fontWeight: 700, color: '#1A1F36' }}>{usageStats.total_reports}</div>

                  </div>

                  <div style={{ background: '#F8F9FC', borderRadius: 8, padding: 16 }}>

                    <div style={{ fontSize: 12, color: '#5A6480' }}>匿名用户数</div>

                    <div style={{ fontSize: 28, fontWeight: 700, color: '#2563eb' }}>{usageStats.unique_users}</div>

                  </div>

                  <div style={{ background: '#F8F9FC', borderRadius: 8, padding: 16 }}>

                    <div style={{ fontSize: 12, color: '#5A6480' }}>今日上报</div>

                    <div style={{ fontSize: 28, fontWeight: 700, color: '#4ade80' }}>{usageStats.today_reports}</div>

                  </div>

                </div>



                <h4 style={{ margin: '0 0 12px', color: '#ccc', fontSize: 14 }}>按类型分布</h4>

                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>

                  {usageStats.by_type?.map((t, i) => (

                    <div key={i} style={{ background: '#F8F9FC', borderRadius: 8, padding: '10px 16px' }}>

                      <div style={{ fontSize: 11, color: '#5A6480' }}>{t.type}</div>

                      <div style={{ fontSize: 18, fontWeight: 700, color: '#1A1F36' }}>{t.count}</div>

                    </div>

                  ))}

                </div>



                <div style={{ marginTop: 24, background: '#F8F9FC', borderRadius: 8, padding: 16 }}>

                  <h4 style={{ margin: '0 0 8px', color: '#ccc', fontSize: 14 }}>📋 隐私说明</h4>

                  <p style={{ margin: 0, fontSize: 12, color: '#5A6480', lineHeight: 1.8 }}>

                    所有用量数据在上报前均已通过 SHA-256 哈希匿名化处理。我们仅收集聚合统计数据，不包含任何可识别个人身份的信息。

                    数据包括：执行次数、模型调用次数、知识库查询次数、Agent 运行时统计等。

                  </p>

                </div>

              </div>

            )}

          </div>

        )}

      </div>

    </div>

  );

}