"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Switch } from "@/components/ui/switch"
import { Textarea } from "@/components/ui/textarea"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"
import {
  Server,
  Copy,
  CheckCircle2,
  Key,
  RefreshCw,
  ExternalLink,
  Code,
  Zap,
  Users,
  Search,
  Tags,
  Brain,
  Database,
  FileText,
  Package,
  Activity,
  Plus,
  Settings,
  ArrowDownToLine,
  ArrowUpFromLine,
  Shield,
  Clock,
  Eye,
  EyeOff,
  Trash2,
  Edit,
  BarChart3,
  AlertCircle,
  CheckCircle,
  XCircle,
  Play,
} from "lucide-react"

// 接入方类型
interface Partner {
  id: string
  name: string
  type: 'external' | 'internal' // 外部系统/内部系统
  description: string
  apiKey: string
  apiSecret: string
  status: 'active' | 'inactive' | 'pending'
  permissions: {
    dataIngest: boolean    // 数据流入权限（传入数据）
    dataQuery: boolean     // 数据查询权限（获取标签）
    tagEnrich: boolean     // 标签完善权限
    batchProcess: boolean  // 批量处理权限
  }
  quotaConfig: {
    dailyLimit: number     // 每日限额
    monthlyLimit: number   // 每月限额
    rateLimit: number      // 速率限制（次/秒）
  }
  statistics: {
    totalCalls: number
    todayCalls: number
    monthCalls: number
    lastCallTime: string
  }
  createdAt: string
  updatedAt: string
}

// 调用记录类型
interface CallLog {
  id: string
  partnerId: string
  partnerName: string
  endpoint: string
  method: string
  status: 'success' | 'error' | 'pending'
  responseTime: number
  requestSize: number
  responseSize: number
  timestamp: string
  errorMessage?: string
}

// 开放API端点定义
interface OpenAPIEndpoint {
  id: string
  method: 'GET' | 'POST' | 'PUT' | 'DELETE'
  path: string
  name: string
  description: string
  category: 'ingest' | 'query' | 'tag' | 'batch'
  params: { name: string; type: string; required: boolean; desc: string }[]
  response: string
  example: {
    request: string
    response: string
  }
}

// 预定义接入方
const DEFAULT_PARTNERS: Partner[] = [
  {
    id: 'ckb_001',
    name: '存客宝',
    type: 'external',
    description: '私域流量管理系统，提供流量词上报和用户画像获取',
    apiKey: 'sk-ckb-xxxxxxxxxx',
    apiSecret: 'sec-ckb-xxxxxxxxxx',
    status: 'active',
    permissions: {
      dataIngest: true,
      dataQuery: true,
      tagEnrich: true,
      batchProcess: true,
    },
    quotaConfig: {
      dailyLimit: 10000,
      monthlyLimit: 300000,
      rateLimit: 100,
    },
    statistics: {
      totalCalls: 158420,
      todayCalls: 1520,
      monthCalls: 45800,
      lastCallTime: '2026-01-31 18:45:22',
    },
    createdAt: '2025-06-15',
    updatedAt: '2026-01-31',
  },
  {
    id: 'dlm_001',
    name: '点了码',
    type: 'external',
    description: '线下扫码营销系统，同步用户行为数据',
    apiKey: 'sk-dlm-xxxxxxxxxx',
    apiSecret: 'sec-dlm-xxxxxxxxxx',
    status: 'active',
    permissions: {
      dataIngest: true,
      dataQuery: true,
      tagEnrich: false,
      batchProcess: false,
    },
    quotaConfig: {
      dailyLimit: 5000,
      monthlyLimit: 150000,
      rateLimit: 50,
    },
    statistics: {
      totalCalls: 89200,
      todayCalls: 820,
      monthCalls: 28500,
      lastCallTime: '2026-01-31 18:30:15',
    },
    createdAt: '2025-08-20',
    updatedAt: '2026-01-31',
  },
  {
    id: 'feishu_001',
    name: '飞书机器人',
    type: 'internal',
    description: '企业内部飞书机器人，用于用户查询和报告推送',
    apiKey: 'sk-fs-xxxxxxxxxx',
    apiSecret: 'sec-fs-xxxxxxxxxx',
    status: 'active',
    permissions: {
      dataIngest: false,
      dataQuery: true,
      tagEnrich: false,
      batchProcess: false,
    },
    quotaConfig: {
      dailyLimit: 1000,
      monthlyLimit: 30000,
      rateLimit: 10,
    },
    statistics: {
      totalCalls: 12500,
      todayCalls: 156,
      monthCalls: 4200,
      lastCallTime: '2026-01-31 18:50:00',
    },
    createdAt: '2025-10-10',
    updatedAt: '2026-01-31',
  },
]

// 开放API端点列表
const OPEN_API_ENDPOINTS: OpenAPIEndpoint[] = [
  // 数据流入接口
  {
    id: 'ingest_1',
    method: 'POST',
    path: '/api/open-api/ingest/user',
    name: '用户数据流入',
    description: '第三方系统传入用户数据，神射手自动完善标签',
    category: 'ingest',
    params: [
      { name: 'phone', type: 'string', required: true, desc: '手机号（11位）' },
      { name: 'name', type: 'string', required: false, desc: '用户姓名' },
      { name: 'source', type: 'string', required: true, desc: '数据来源标识' },
      { name: 'tags', type: 'array', required: false, desc: '原始标签数组' },
      { name: 'extra', type: 'object', required: false, desc: '扩展字段' },
    ],
    response: '{ "success": true, "data": { "userId": "xxx", "enriched": true, "tags": [...] } }',
    example: {
      request: `{
  "phone": "13800138000",
  "name": "张三",
  "source": "cunkebao",
  "tags": ["高意向", "电商用户"],
  "extra": { "wechatId": "wxid_xxx" }
}`,
      response: `{
  "success": true,
  "data": {
    "userId": "usr_xxx",
    "enriched": true,
    "tags": ["高意向", "电商用户", "A级用户", "一线城市"],
    "rfm_score": 85,
    "user_level": "A"
  }
}`,
    },
  },
  {
    id: 'ingest_2',
    method: 'POST',
    path: '/api/open-api/ingest/batch',
    name: '批量数据流入',
    description: '批量传入用户数据，支持最多1000条/次',
    category: 'ingest',
    params: [
      { name: 'users', type: 'array', required: true, desc: '用户数组' },
      { name: 'source', type: 'string', required: true, desc: '数据来源标识' },
      { name: 'async', type: 'boolean', required: false, desc: '是否异步处理' },
    ],
    response: '{ "success": true, "data": { "taskId": "xxx", "total": 1000, "processed": 1000 } }',
    example: {
      request: `{
  "source": "cunkebao",
  "async": true,
  "users": [
    { "phone": "13800138001", "name": "张三" },
    { "phone": "13800138002", "name": "李四" }
  ]
}`,
      response: `{
  "success": true,
  "data": {
    "taskId": "task_xxx",
    "total": 2,
    "processed": 0,
    "status": "processing"
  }
}`,
    },
  },
  // 数据查询接口
  {
    id: 'query_1',
    method: 'GET',
    path: '/api/open-api/query/user',
    name: '用户画像查询',
    description: '根据手机号/QQ获取完整用户画像和标签',
    category: 'query',
    params: [
      { name: 'phone', type: 'string', required: false, desc: '手机号' },
      { name: 'qq', type: 'string', required: false, desc: 'QQ号' },
      { name: 'fields', type: 'string', required: false, desc: '返回字段（逗号分隔）' },
    ],
    response: '{ "success": true, "data": { "phone": "xxx", "tags": [...], "rfm": {...} } }',
    example: {
      request: `GET /api/open-api/query/user?phone=13800138000&fields=tags,rfm,level`,
      response: `{
  "success": true,
  "data": {
    "phone": "138****8000",
    "name": "张*",
    "tags": ["高价值用户", "电商活跃", "一线城市"],
    "rfm": { "r": 5, "f": 4, "m": 5, "score": 93 },
    "level": "S",
    "traffic_pool": "钻石池"
  }
}`,
    },
  },
  {
    id: 'query_2',
    method: 'POST',
    path: '/api/open-api/query/batch',
    name: '批量用户查询',
    description: '批量查询用户画像，支持最多500个/次',
    category: 'query',
    params: [
      { name: 'phones', type: 'array', required: false, desc: '手机号数组' },
      { name: 'qqs', type: 'array', required: false, desc: 'QQ号数组' },
      { name: 'fields', type: 'array', required: false, desc: '返回字段数组' },
    ],
    response: '{ "success": true, "data": { "users": [...], "notFound": [...] } }',
    example: {
      request: `{
  "phones": ["13800138001", "13800138002"],
  "fields": ["tags", "level"]
}`,
      response: `{
  "success": true,
  "data": {
    "users": [
      { "phone": "138****8001", "tags": [...], "level": "A" },
      { "phone": "138****8002", "tags": [...], "level": "B" }
    ],
    "notFound": []
  }
}`,
    },
  },
  // 标签服务接口
  {
    id: 'tag_1',
    method: 'POST',
    path: '/api/open-api/tag/enrich',
    name: '标签完善',
    description: '对用户进行AI标签完善，返回新增标签',
    category: 'tag',
    params: [
      { name: 'phone', type: 'string', required: true, desc: '手机号' },
      { name: 'strategy', type: 'string', required: false, desc: '打标策略：rfm/behavior/preference' },
      { name: 'force', type: 'boolean', required: false, desc: '是否强制刷新' },
    ],
    response: '{ "success": true, "data": { "newTags": [...], "allTags": [...] } }',
    example: {
      request: `{
  "phone": "13800138000",
  "strategy": "rfm",
  "force": false
}`,
      response: `{
  "success": true,
  "data": {
    "newTags": ["高价值用户", "活跃用户"],
    "allTags": ["高价值用户", "活跃用户", "电商用户", "一线城市"],
    "rfm_score": 89
  }
}`,
    },
  },
  {
    id: 'tag_2',
    method: 'GET',
    path: '/api/open-api/tag/list',
    name: '标签列表',
    description: '获取所有可用标签及其统计',
    category: 'tag',
    params: [
      { name: 'category', type: 'string', required: false, desc: '标签分类' },
      { name: 'source', type: 'string', required: false, desc: '来源筛选' },
    ],
    response: '{ "success": true, "data": { "tags": [...], "total": 100 } }',
    example: {
      request: `GET /api/open-api/tag/list?category=value`,
      response: `{
  "success": true,
  "data": {
    "tags": [
      { "id": "tag_001", "name": "高价值用户", "count": 125000 },
      { "id": "tag_002", "name": "优质用户", "count": 850000 }
    ],
    "total": 45
  }
}`,
    },
  },
  // 批量处理接口
  {
    id: 'batch_1',
    method: 'POST',
    path: '/api/open-api/batch/task',
    name: '创建批量任务',
    description: '创建异步批量处理任务',
    category: 'batch',
    params: [
      { name: 'type', type: 'string', required: true, desc: '任务类型：enrich/export/sync' },
      { name: 'config', type: 'object', required: true, desc: '任务配置' },
      { name: 'callback', type: 'string', required: false, desc: '完成回调URL' },
    ],
    response: '{ "success": true, "data": { "taskId": "xxx", "status": "pending" } }',
    example: {
      request: `{
  "type": "enrich",
  "config": {
    "source": "cunkebao",
    "strategy": "rfm",
    "dateRange": "2026-01"
  },
  "callback": "https://your-domain.com/webhook"
}`,
      response: `{
  "success": true,
  "data": {
    "taskId": "task_xxx",
    "status": "pending",
    "estimatedTime": "10分钟"
  }
}`,
    },
  },
  {
    id: 'batch_2',
    method: 'GET',
    path: '/api/open-api/batch/status',
    name: '查询任务状态',
    description: '查询批量任务执行状态',
    category: 'batch',
    params: [
      { name: 'taskId', type: 'string', required: true, desc: '任务ID' },
    ],
    response: '{ "success": true, "data": { "status": "completed", "progress": 100 } }',
    example: {
      request: `GET /api/open-api/batch/status?taskId=task_xxx`,
      response: `{
  "success": true,
  "data": {
    "taskId": "task_xxx",
    "status": "completed",
    "progress": 100,
    "total": 10000,
    "processed": 10000,
    "failed": 5,
    "completedAt": "2026-01-31T18:45:00Z"
  }
}`,
    },
  },
]

// 调用日志数据
const DEFAULT_CALL_LOGS: CallLog[] = [
  { id: 'log_1', partnerId: 'ckb_001', partnerName: '存客宝', endpoint: '/api/open-api/ingest/user', method: 'POST', status: 'success', responseTime: 45, requestSize: 256, responseSize: 512, timestamp: '2026-01-31 18:50:22' },
  { id: 'log_2', partnerId: 'ckb_001', partnerName: '存客宝', endpoint: '/api/open-api/query/user', method: 'GET', status: 'success', responseTime: 32, requestSize: 64, responseSize: 1024, timestamp: '2026-01-31 18:49:55' },
  { id: 'log_3', partnerId: 'dlm_001', partnerName: '点了码', endpoint: '/api/open-api/ingest/batch', method: 'POST', status: 'success', responseTime: 1250, requestSize: 45000, responseSize: 2048, timestamp: '2026-01-31 18:48:30' },
  { id: 'log_4', partnerId: 'ckb_001', partnerName: '存客宝', endpoint: '/api/open-api/tag/enrich', method: 'POST', status: 'success', responseTime: 89, requestSize: 128, responseSize: 768, timestamp: '2026-01-31 18:47:10' },
  { id: 'log_5', partnerId: 'feishu_001', partnerName: '飞书机器人', endpoint: '/api/open-api/query/user', method: 'GET', status: 'error', responseTime: 15, requestSize: 32, responseSize: 128, timestamp: '2026-01-31 18:46:00', errorMessage: '用户不存在' },
]

export default function OpenAPIPage() {
  const [partners, setPartners] = useState<Partner[]>(DEFAULT_PARTNERS)
  const [callLogs, setCallLogs] = useState<CallLog[]>(DEFAULT_CALL_LOGS)
  const [activeTab, setActiveTab] = useState('guide')
  const [selectedCategory, setSelectedCategory] = useState('all')
  const [showAddDialog, setShowAddDialog] = useState(false)
  const [showKeyDialog, setShowKeyDialog] = useState(false)
  const [showDetailDialog, setShowDetailDialog] = useState(false)
  const [selectedPartner, setSelectedPartner] = useState<Partner | null>(null)
  const [selectedEndpoint, setSelectedEndpoint] = useState<OpenAPIEndpoint | null>(null)
  const [copiedId, setCopiedId] = useState<string | null>(null)
  const [apiBaseUrl, setApiBaseUrl] = useState('')
  const [newPartner, setNewPartner] = useState({
    name: '',
    type: 'external' as 'external' | 'internal',
    description: '',
    permissions: {
      dataIngest: true,
      dataQuery: true,
      tagEnrich: false,
      batchProcess: false,
    },
    quotaConfig: {
      dailyLimit: 5000,
      monthlyLimit: 150000,
      rateLimit: 50,
    },
  })

  useEffect(() => {
    const host = typeof window !== 'undefined' ? window.location.origin : ''
    setApiBaseUrl(host)
  }, [])

  const copyToClipboard = (text: string, id: string) => {
    navigator.clipboard.writeText(text)
    setCopiedId(id)
    setTimeout(() => setCopiedId(null), 2000)
  }

  const getMethodColor = (method: string) => {
    switch (method) {
      case 'GET': return 'bg-green-100 text-green-700'
      case 'POST': return 'bg-blue-100 text-blue-700'
      case 'PUT': return 'bg-yellow-100 text-yellow-700'
      case 'DELETE': return 'bg-red-100 text-red-700'
      default: return 'bg-gray-100 text-gray-700'
    }
  }

  const getCategoryIcon = (category: string) => {
    switch (category) {
      case 'ingest': return <ArrowDownToLine className="h-4 w-4" />
      case 'query': return <Search className="h-4 w-4" />
      case 'tag': return <Tags className="h-4 w-4" />
      case 'batch': return <Package className="h-4 w-4" />
      default: return <Code className="h-4 w-4" />
    }
  }

  const getCategoryName = (category: string) => {
    switch (category) {
      case 'ingest': return '数据流入'
      case 'query': return '数据查询'
      case 'tag': return '标签服务'
      case 'batch': return '批量处理'
      default: return category
    }
  }

  const getStatusBadge = (status: string) => {
    switch (status) {
      case 'active':
        return <Badge className="bg-green-100 text-green-700">已启用</Badge>
      case 'inactive':
        return <Badge className="bg-gray-100 text-gray-700">已停用</Badge>
      case 'pending':
        return <Badge className="bg-yellow-100 text-yellow-700">待审核</Badge>
      case 'success':
        return <Badge className="bg-green-100 text-green-700">成功</Badge>
      case 'error':
        return <Badge className="bg-red-100 text-red-700">失败</Badge>
      default:
        return <Badge>{status}</Badge>
    }
  }

  const filteredEndpoints = selectedCategory === 'all'
    ? OPEN_API_ENDPOINTS
    : OPEN_API_ENDPOINTS.filter(e => e.category === selectedCategory)

  const handleAddPartner = () => {
    const newId = `partner_${Date.now()}`
    const apiKey = `sk-${newPartner.type.slice(0, 3)}-${Math.random().toString(36).slice(2, 12)}`
    const apiSecret = `sec-${newPartner.type.slice(0, 3)}-${Math.random().toString(36).slice(2, 12)}`
    
    const partner: Partner = {
      id: newId,
      name: newPartner.name,
      type: newPartner.type,
      description: newPartner.description,
      apiKey,
      apiSecret,
      status: 'pending',
      permissions: newPartner.permissions,
      quotaConfig: newPartner.quotaConfig,
      statistics: {
        totalCalls: 0,
        todayCalls: 0,
        monthCalls: 0,
        lastCallTime: '-',
      },
      createdAt: new Date().toISOString().split('T')[0],
      updatedAt: new Date().toISOString().split('T')[0],
    }
    
    setPartners([...partners, partner])
    setShowAddDialog(false)
    setNewPartner({
      name: '',
      type: 'external',
      description: '',
      permissions: {
        dataIngest: true,
        dataQuery: true,
        tagEnrich: false,
        batchProcess: false,
      },
      quotaConfig: {
        dailyLimit: 5000,
        monthlyLimit: 150000,
        rateLimit: 50,
      },
    })
  }

  const togglePartnerStatus = (partnerId: string) => {
    setPartners(partners.map(p => {
      if (p.id === partnerId) {
        return { ...p, status: p.status === 'active' ? 'inactive' : 'active' }
      }
      return p
    }))
  }

  const togglePermission = (partnerId: string, permission: keyof Partner['permissions']) => {
    setPartners(partners.map(p => {
      if (p.id === partnerId) {
        return {
          ...p,
          permissions: {
            ...p.permissions,
            [permission]: !p.permissions[permission],
          },
        }
      }
      return p
    }))
  }

  // 计算统计数据
  const totalCalls = partners.reduce((sum, p) => sum + p.statistics.todayCalls, 0)
  const activePartners = partners.filter(p => p.status === 'active').length
  const totalQuota = partners.reduce((sum, p) => sum + p.quotaConfig.dailyLimit, 0)

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50/30 to-purple-50/20">
      <div className="p-6 space-y-6">
        {/* 顶部标题 */}
        <div className="flex items-center justify-between">
          <div>
            <h1 className="text-2xl font-bold text-gray-900">开放API管理</h1>
            <p className="text-sm text-gray-500 mt-1">第三方系统接入管理，数据流入流出控制</p>
          </div>
          <div className="flex items-center gap-3">
            <Button variant="outline" onClick={() => setShowAddDialog(true)}>
              <Plus className="h-4 w-4 mr-2" />
              添加接入方
            </Button>
            <Button>
              <ExternalLink className="h-4 w-4 mr-2" />
              API文档
            </Button>
          </div>
        </div>

        {/* 统计卡片 */}
        <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
          <Card className="border-0 shadow-sm bg-white/80">
            <CardContent className="p-4">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm text-gray-500">接入方数量</p>
                  <p className="text-2xl font-bold text-gray-900">{partners.length}</p>
                  <p className="text-xs text-green-600">{activePartners} 个已启用</p>
                </div>
                <div className="h-12 w-12 rounded-xl bg-purple-100 flex items-center justify-center">
                  <Users className="h-6 w-6 text-purple-600" />
                </div>
              </div>
            </CardContent>
          </Card>
          <Card className="border-0 shadow-sm bg-white/80">
            <CardContent className="p-4">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm text-gray-500">今日调用</p>
                  <p className="text-2xl font-bold text-gray-900">{totalCalls.toLocaleString()}</p>
                  <p className="text-xs text-gray-500">总配额 {totalQuota.toLocaleString()}</p>
                </div>
                <div className="h-12 w-12 rounded-xl bg-blue-100 flex items-center justify-center">
                  <Activity className="h-6 w-6 text-blue-600" />
                </div>
              </div>
            </CardContent>
          </Card>
          <Card className="border-0 shadow-sm bg-white/80">
            <CardContent className="p-4">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm text-gray-500">数据流入</p>
                  <p className="text-2xl font-bold text-gray-900">1,520</p>
                  <p className="text-xs text-green-600">+12.5% 较昨日</p>
                </div>
                <div className="h-12 w-12 rounded-xl bg-green-100 flex items-center justify-center">
                  <ArrowDownToLine className="h-6 w-6 text-green-600" />
                </div>
              </div>
            </CardContent>
          </Card>
          <Card className="border-0 shadow-sm bg-white/80">
            <CardContent className="p-4">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm text-gray-500">标签完善</p>
                  <p className="text-2xl font-bold text-gray-900">856</p>
                  <p className="text-xs text-purple-600">98.5% 成功率</p>
                </div>
                <div className="h-12 w-12 rounded-xl bg-orange-100 flex items-center justify-center">
                  <Tags className="h-6 w-6 text-orange-600" />
                </div>
              </div>
            </CardContent>
          </Card>
        </div>

        {/* 快速开始指南 */}
        <Card className="border-0 shadow-sm bg-gradient-to-r from-blue-50 to-purple-50">
          <CardContent className="p-5">
            <div className="flex items-start gap-6">
              <div className="flex-1">
                <h3 className="font-semibold text-gray-900 mb-3">快速开始</h3>
                <div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
                  <div className="flex items-start gap-2">
                    <div className="h-6 w-6 rounded-full bg-blue-500 text-white flex items-center justify-center text-xs font-bold shrink-0">1</div>
                    <div>
                      <p className="font-medium text-gray-900">获取密钥</p>
                      <p className="text-gray-500">点击接入方的"密钥"按钮获取 API Key 和 Secret</p>
                    </div>
                  </div>
                  <div className="flex items-start gap-2">
                    <div className="h-6 w-6 rounded-full bg-purple-500 text-white flex items-center justify-center text-xs font-bold shrink-0">2</div>
                    <div>
                      <p className="font-medium text-gray-900">配置权限</p>
                      <p className="text-gray-500">在"配置"中开启数据流入、查询、标签完善等权限</p>
                    </div>
                  </div>
                  <div className="flex items-start gap-2">
                    <div className="h-6 w-6 rounded-full bg-green-500 text-white flex items-center justify-center text-xs font-bold shrink-0">3</div>
                    <div>
                      <p className="font-medium text-gray-900">调用接口</p>
                      <p className="text-gray-500">在请求头中携带 Authorization: Bearer API_KEY 即可调用</p>
                    </div>
                  </div>
                </div>
              </div>
              <div className="hidden lg:block p-3 rounded-lg bg-gray-900 text-xs font-mono">
                <p className="text-gray-400 mb-1"># 示例：数据流入</p>
                <p className="text-green-400">curl -X POST "{apiBaseUrl}/api/open-api?endpoint=ingest/user" \</p>
                <p className="text-blue-400 pl-4">-H "Authorization: Bearer sk-xxx" \</p>
                <p className="text-yellow-400 pl-4">-d '{`{"phone":"138xxx","source":"ckb"}`}'</p>
              </div>
            </div>
          </CardContent>
        </Card>

        {/* 主体内容 */}
        <Tabs value={activeTab} onValueChange={setActiveTab}>
          <TabsList className="bg-white/80">
            <TabsTrigger value="guide">
              <FileText className="h-4 w-4 mr-2" />
              使用说明
            </TabsTrigger>
            <TabsTrigger value="partners">
              <Users className="h-4 w-4 mr-2" />
              接入方管理
            </TabsTrigger>
            <TabsTrigger value="endpoints">
              <Code className="h-4 w-4 mr-2" />
              API端点
            </TabsTrigger>
            <TabsTrigger value="logs">
              <Clock className="h-4 w-4 mr-2" />
              调用日志
            </TabsTrigger>
          </TabsList>

          {/* 使用说明 */}
          <TabsContent value="guide" className="mt-4">
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
              {/* 接口概述 */}
              <Card className="border-0 shadow-sm bg-white/80">
                <CardHeader className="pb-3">
                  <CardTitle className="text-base">接口概述</CardTitle>
                </CardHeader>
                <CardContent className="space-y-3 text-sm">
                  <p className="text-gray-600">
                    神射手开放API为第三方系统提供用户数据对接能力，支持存客宝、点了码等系统接入。
                  </p>
                  <div className="space-y-2">
                    <div className="flex items-center gap-2">
                      <Badge className="bg-green-100 text-green-700">数据流入</Badge>
                      <span className="text-gray-600">传入用户数据，自动完善标签</span>
                    </div>
                    <div className="flex items-center gap-2">
                      <Badge className="bg-blue-100 text-blue-700">数据查询</Badge>
                      <span className="text-gray-600">查询用户画像、标签、RFM等</span>
                    </div>
                    <div className="flex items-center gap-2">
                      <Badge className="bg-purple-100 text-purple-700">标签完善</Badge>
                      <span className="text-gray-600">AI智能标签完善</span>
                    </div>
                    <div className="flex items-center gap-2">
                      <Badge className="bg-orange-100 text-orange-700">批量处理</Badge>
                      <span className="text-gray-600">大批量异步任务处理</span>
                    </div>
                  </div>
                </CardContent>
              </Card>

              {/* 认证方式 */}
              <Card className="border-0 shadow-sm bg-white/80">
                <CardHeader className="pb-3">
                  <CardTitle className="text-base">认证方式</CardTitle>
                </CardHeader>
                <CardContent className="space-y-3 text-sm">
                  <p className="text-gray-600">所有API请求需在Header中携带API密钥：</p>
                  <div className="p-3 rounded-lg bg-gray-900 text-xs font-mono space-y-1">
                    <p className="text-blue-400">Authorization: Bearer YOUR_API_KEY</p>
                    <p className="text-gray-500"># 可选：增强安全性</p>
                    <p className="text-purple-400">X-API-Secret: YOUR_API_SECRET</p>
                  </div>
                  <p className="text-gray-500 text-xs">API Key 和 Secret 在接入方管理中获取</p>
                </CardContent>
              </Card>

              {/* 数据流入示例 */}
              <Card className="border-0 shadow-sm bg-white/80">
                <CardHeader className="pb-3">
                  <CardTitle className="text-base">数据流入示例</CardTitle>
                </CardHeader>
                <CardContent className="text-sm">
                  <div className="p-3 rounded-lg bg-gray-900 text-xs font-mono space-y-1">
                    <p className="text-gray-400"># 存客宝传入用户数据</p>
                    <p className="text-green-400">POST /api/open-api?endpoint=ingest/user</p>
                    <p className="text-yellow-400">{`{`}</p>
                    <p className="text-white pl-4">"phone": "13800138000",</p>
                    <p className="text-white pl-4">"name": "张三",</p>
                    <p className="text-white pl-4">"source": "cunkebao",</p>
                    <p className="text-white pl-4">"tags": ["高意向", "电商用户"]</p>
                    <p className="text-yellow-400">{`}`}</p>
                  </div>
                  <p className="text-gray-500 text-xs mt-2">返回完善后的标签：高意向、电商用户、A级用户、一线城市...</p>
                </CardContent>
              </Card>

              {/* 数据查询示例 */}
              <Card className="border-0 shadow-sm bg-white/80">
                <CardHeader className="pb-3">
                  <CardTitle className="text-base">数据查询示例</CardTitle>
                </CardHeader>
                <CardContent className="text-sm">
                  <div className="p-3 rounded-lg bg-gray-900 text-xs font-mono space-y-1">
                    <p className="text-gray-400"># 查询用户画像</p>
                    <p className="text-green-400">GET /api/open-api?endpoint=query/user&phone=13800138000</p>
                    <p className="text-gray-400 mt-2"># 响应</p>
                    <p className="text-yellow-400">{`{`}</p>
                    <p className="text-white pl-4">"phone": "138****8000",</p>
                    <p className="text-white pl-4">"tags": ["高价值用户", "电商活跃"],</p>
                    <p className="text-white pl-4">"level": "A",</p>
                    <p className="text-white pl-4">"rfm": {`{ "r": 5, "f": 4, "m": 5, "score": 93 }`}</p>
                    <p className="text-yellow-400">{`}`}</p>
                  </div>
                </CardContent>
              </Card>

              {/* 常用端点 */}
              <Card className="border-0 shadow-sm bg-white/80 lg:col-span-2">
                <CardHeader className="pb-3">
                  <CardTitle className="text-base">常用端点</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="grid grid-cols-2 md:grid-cols-4 gap-3 text-sm">
                    <div className="p-3 rounded-lg bg-gray-50">
                      <Badge className="bg-blue-100 text-blue-700 mb-2">POST</Badge>
                      <p className="font-mono text-xs text-gray-700">ingest/user</p>
                      <p className="text-xs text-gray-500 mt-1">单用户数据流入</p>
                    </div>
                    <div className="p-3 rounded-lg bg-gray-50">
                      <Badge className="bg-blue-100 text-blue-700 mb-2">POST</Badge>
                      <p className="font-mono text-xs text-gray-700">ingest/batch</p>
                      <p className="text-xs text-gray-500 mt-1">批量数据流入</p>
                    </div>
                    <div className="p-3 rounded-lg bg-gray-50">
                      <Badge className="bg-green-100 text-green-700 mb-2">GET</Badge>
                      <p className="font-mono text-xs text-gray-700">query/user</p>
                      <p className="text-xs text-gray-500 mt-1">用户画像查询</p>
                    </div>
                    <div className="p-3 rounded-lg bg-gray-50">
                      <Badge className="bg-blue-100 text-blue-700 mb-2">POST</Badge>
                      <p className="font-mono text-xs text-gray-700">tag/enrich</p>
                      <p className="text-xs text-gray-500 mt-1">AI标签完善</p>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </div>
          </TabsContent>

          {/* 接入方管理 */}
          <TabsContent value="partners" className="mt-4">
            <div className="space-y-4">
              {partners.map(partner => (
                <Card key={partner.id} className="border-0 shadow-sm bg-white/80">
                  <CardContent className="p-4">
                    <div className="flex items-start justify-between">
                      <div className="flex items-start gap-4">
                        <div className={`h-12 w-12 rounded-xl flex items-center justify-center ${
                          partner.type === 'external' ? 'bg-purple-100' : 'bg-blue-100'
                        }`}>
                          {partner.type === 'external' ? (
                            <Server className={`h-6 w-6 ${partner.type === 'external' ? 'text-purple-600' : 'text-blue-600'}`} />
                          ) : (
                            <Shield className="h-6 w-6 text-blue-600" />
                          )}
                        </div>
                        <div>
                          <div className="flex items-center gap-2">
                            <h3 className="font-semibold text-gray-900">{partner.name}</h3>
                            {getStatusBadge(partner.status)}
                            <Badge variant="outline" className="text-xs">
                              {partner.type === 'external' ? '外部系统' : '内部系统'}
                            </Badge>
                          </div>
                          <p className="text-sm text-gray-500 mt-1">{partner.description}</p>
                          <div className="flex items-center gap-4 mt-2 text-xs text-gray-400">
                            <span>创建于 {partner.createdAt}</span>
                            <span>最后调用 {partner.statistics.lastCallTime}</span>
                          </div>
                        </div>
                      </div>
                      <div className="flex items-center gap-2">
                        <Button 
                          variant="outline" 
                          size="sm"
                          onClick={() => {
                            setSelectedPartner(partner)
                            setShowKeyDialog(true)
                          }}
                        >
                          <Key className="h-4 w-4 mr-1" />
                          密钥
                        </Button>
                        <Button 
                          variant="outline" 
                          size="sm"
                          onClick={() => {
                            setSelectedPartner(partner)
                            setShowDetailDialog(true)
                          }}
                        >
                          <Settings className="h-4 w-4 mr-1" />
                          配置
                        </Button>
                        <Switch
                          checked={partner.status === 'active'}
                          onCheckedChange={() => togglePartnerStatus(partner.id)}
                        />
                      </div>
                    </div>

                    {/* 权限和配额 */}
                    <div className="mt-4 pt-4 border-t grid grid-cols-2 gap-4">
                      {/* 权限 */}
                      <div>
                        <h4 className="text-xs font-medium text-gray-500 mb-2">接口权限</h4>
                        <div className="flex flex-wrap gap-2">
                          <Badge 
                            className={`cursor-pointer ${partner.permissions.dataIngest ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-500'}`}
                            onClick={() => togglePermission(partner.id, 'dataIngest')}
                          >
                            <ArrowDownToLine className="h-3 w-3 mr-1" />
                            数据流入
                          </Badge>
                          <Badge 
                            className={`cursor-pointer ${partner.permissions.dataQuery ? 'bg-blue-100 text-blue-700' : 'bg-gray-100 text-gray-500'}`}
                            onClick={() => togglePermission(partner.id, 'dataQuery')}
                          >
                            <Search className="h-3 w-3 mr-1" />
                            数据查询
                          </Badge>
                          <Badge 
                            className={`cursor-pointer ${partner.permissions.tagEnrich ? 'bg-purple-100 text-purple-700' : 'bg-gray-100 text-gray-500'}`}
                            onClick={() => togglePermission(partner.id, 'tagEnrich')}
                          >
                            <Tags className="h-3 w-3 mr-1" />
                            标签完善
                          </Badge>
                          <Badge 
                            className={`cursor-pointer ${partner.permissions.batchProcess ? 'bg-orange-100 text-orange-700' : 'bg-gray-100 text-gray-500'}`}
                            onClick={() => togglePermission(partner.id, 'batchProcess')}
                          >
                            <Package className="h-3 w-3 mr-1" />
                            批量处理
                          </Badge>
                        </div>
                      </div>
                      {/* 统计 */}
                      <div>
                        <h4 className="text-xs font-medium text-gray-500 mb-2">调用统计</h4>
                        <div className="flex items-center gap-4 text-sm">
                          <div>
                            <span className="text-gray-500">今日</span>
                            <span className="ml-1 font-medium">{partner.statistics.todayCalls.toLocaleString()}</span>
                            <span className="text-gray-400 text-xs">/{partner.quotaConfig.dailyLimit.toLocaleString()}</span>
                          </div>
                          <div>
                            <span className="text-gray-500">本月</span>
                            <span className="ml-1 font-medium">{partner.statistics.monthCalls.toLocaleString()}</span>
                          </div>
                          <div>
                            <span className="text-gray-500">累计</span>
                            <span className="ml-1 font-medium">{partner.statistics.totalCalls.toLocaleString()}</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          </TabsContent>

          {/* API端点 */}
          <TabsContent value="endpoints" className="mt-4">
            {/* 分类筛选 */}
            <div className="flex items-center gap-2 mb-4">
              <Button
                variant={selectedCategory === 'all' ? 'default' : 'outline'}
                size="sm"
                onClick={() => setSelectedCategory('all')}
              >
                全部 ({OPEN_API_ENDPOINTS.length})
              </Button>
              {['ingest', 'query', 'tag', 'batch'].map(cat => {
                const count = OPEN_API_ENDPOINTS.filter(e => e.category === cat).length
                return (
                  <Button
                    key={cat}
                    variant={selectedCategory === cat ? 'default' : 'outline'}
                    size="sm"
                    onClick={() => setSelectedCategory(cat)}
                  >
                    {getCategoryIcon(cat)}
                    <span className="ml-1">{getCategoryName(cat)} ({count})</span>
                  </Button>
                )
              })}
            </div>

            {/* 端点列表 */}
            <div className="space-y-3">
              {filteredEndpoints.map(endpoint => (
                <Card key={endpoint.id} className="border-0 shadow-sm bg-white/80">
                  <CardContent className="p-4">
                    <div className="flex items-start justify-between mb-3">
                      <div className="flex items-center gap-3">
                        <Badge className={`${getMethodColor(endpoint.method)} font-mono`}>
                          {endpoint.method}
                        </Badge>
                        <code className="text-sm font-mono text-gray-700">{endpoint.path}</code>
                        <Button 
                          variant="ghost" 
                          size="sm"
                          onClick={() => copyToClipboard(`${apiBaseUrl}${endpoint.path}`, endpoint.id)}
                        >
                          {copiedId === endpoint.id ? (
                            <CheckCircle2 className="h-3 w-3 text-green-500" />
                          ) : (
                            <Copy className="h-3 w-3" />
                          )}
                        </Button>
                      </div>
                      <Badge variant="outline" className="text-xs">
                        {getCategoryIcon(endpoint.category)}
                        <span className="ml-1">{getCategoryName(endpoint.category)}</span>
                      </Badge>
                    </div>
                    
                    <h3 className="font-semibold text-gray-900 mb-1">{endpoint.name}</h3>
                    <p className="text-sm text-gray-500 mb-3">{endpoint.description}</p>
                    
                    {/* 参数 */}
                    {endpoint.params && endpoint.params.length > 0 && (
                      <div className="mb-3">
                        <h4 className="text-xs font-medium text-gray-500 mb-2">参数</h4>
                        <div className="space-y-1">
                          {endpoint.params.map((param, i) => (
                            <div key={i} className="flex items-center gap-2 text-sm">
                              <code className="bg-gray-100 px-2 py-0.5 rounded text-purple-600">{param.name}</code>
                              <Badge variant="outline" className="text-xs">{param.type}</Badge>
                              {param.required && <Badge className="bg-red-100 text-red-700 text-xs">必填</Badge>}
                              <span className="text-gray-500">{param.desc}</span>
                            </div>
                          ))}
                        </div>
                      </div>
                    )}
                    
                    {/* 示例展开 */}
                    <Button 
                      variant="ghost" 
                      size="sm" 
                      className="w-full justify-start text-gray-500"
                      onClick={() => setSelectedEndpoint(selectedEndpoint?.id === endpoint.id ? null : endpoint)}
                    >
                      <Code className="h-4 w-4 mr-2" />
                      {selectedEndpoint?.id === endpoint.id ? '收起示例' : '查看请求/响应示例'}
                    </Button>
                    
                    {selectedEndpoint?.id === endpoint.id && (
                      <div className="mt-3 space-y-3">
                        <div>
                          <h4 className="text-xs font-medium text-gray-500 mb-2">请求示例</h4>
                          <pre className="bg-gray-900 text-green-400 p-3 rounded-lg text-xs overflow-x-auto">
                            {endpoint.example.request}
                          </pre>
                        </div>
                        <div>
                          <h4 className="text-xs font-medium text-gray-500 mb-2">响应示例</h4>
                          <pre className="bg-gray-900 text-blue-400 p-3 rounded-lg text-xs overflow-x-auto">
                            {endpoint.example.response}
                          </pre>
                        </div>
                      </div>
                    )}
                  </CardContent>
                </Card>
              ))}
            </div>
          </TabsContent>

          {/* 调用日志 */}
          <TabsContent value="logs" className="mt-4">
            <Card className="border-0 shadow-sm bg-white/80">
              <CardHeader className="pb-2">
                <div className="flex items-center justify-between">
                  <CardTitle className="text-sm font-medium">最近调用记录</CardTitle>
                  <Button variant="outline" size="sm">
                    <RefreshCw className="h-4 w-4 mr-2" />
                    刷新
                  </Button>
                </div>
              </CardHeader>
              <CardContent>
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>时间</TableHead>
                      <TableHead>接入方</TableHead>
                      <TableHead>端点</TableHead>
                      <TableHead>方法</TableHead>
                      <TableHead>状态</TableHead>
                      <TableHead>耗时</TableHead>
                      <TableHead>大小</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {callLogs.map(log => (
                      <TableRow key={log.id}>
                        <TableCell className="text-sm text-gray-500">{log.timestamp}</TableCell>
                        <TableCell className="font-medium">{log.partnerName}</TableCell>
                        <TableCell className="font-mono text-xs">{log.endpoint}</TableCell>
                        <TableCell>
                          <Badge className={`${getMethodColor(log.method)} font-mono text-xs`}>
                            {log.method}
                          </Badge>
                        </TableCell>
                        <TableCell>{getStatusBadge(log.status)}</TableCell>
                        <TableCell className="text-sm">{log.responseTime}ms</TableCell>
                        <TableCell className="text-sm text-gray-500">
                          {(log.requestSize / 1024).toFixed(1)}KB / {(log.responseSize / 1024).toFixed(1)}KB
                        </TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>

        {/* 添加接入方弹窗 */}
        <Dialog open={showAddDialog} onOpenChange={setShowAddDialog}>
          <DialogContent className="max-w-lg">
            <DialogHeader>
              <DialogTitle>添加接入方</DialogTitle>
              <DialogDescription>配置第三方系统接入神射手数据中台</DialogDescription>
            </DialogHeader>
            <div className="space-y-4 py-4">
              <div className="space-y-2">
                <Label>接入方名称 *</Label>
                <Input 
                  placeholder="例如：存客宝、点了码"
                  value={newPartner.name}
                  onChange={e => setNewPartner({ ...newPartner, name: e.target.value })}
                />
              </div>
              <div className="space-y-2">
                <Label>接入方类型</Label>
                <Select 
                  value={newPartner.type} 
                  onValueChange={(v: 'external' | 'internal') => setNewPartner({ ...newPartner, type: v })}
                >
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="external">外部系统</SelectItem>
                    <SelectItem value="internal">内部系统</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div className="space-y-2">
                <Label>描述</Label>
                <Textarea 
                  placeholder="描述接入方用途和数据来源"
                  value={newPartner.description}
                  onChange={e => setNewPartner({ ...newPartner, description: e.target.value })}
                />
              </div>
              <div className="space-y-2">
                <Label>接口权限</Label>
                <div className="flex flex-wrap gap-2">
                  {[
                    { key: 'dataIngest', label: '数据流入', icon: ArrowDownToLine },
                    { key: 'dataQuery', label: '数据查询', icon: Search },
                    { key: 'tagEnrich', label: '标签完善', icon: Tags },
                    { key: 'batchProcess', label: '批量处理', icon: Package },
                  ].map(({ key, label, icon: Icon }) => (
                    <Badge 
                      key={key}
                      className={`cursor-pointer ${
                        newPartner.permissions[key as keyof typeof newPartner.permissions] 
                          ? 'bg-purple-100 text-purple-700' 
                          : 'bg-gray-100 text-gray-500'
                      }`}
                      onClick={() => setNewPartner({
                        ...newPartner,
                        permissions: {
                          ...newPartner.permissions,
                          [key]: !newPartner.permissions[key as keyof typeof newPartner.permissions],
                        },
                      })}
                    >
                      <Icon className="h-3 w-3 mr-1" />
                      {label}
                    </Badge>
                  ))}
                </div>
              </div>
              <div className="grid grid-cols-3 gap-4">
                <div className="space-y-2">
                  <Label>每日限额</Label>
                  <Input 
                    type="number"
                    value={newPartner.quotaConfig.dailyLimit}
                    onChange={e => setNewPartner({
                      ...newPartner,
                      quotaConfig: { ...newPartner.quotaConfig, dailyLimit: parseInt(e.target.value) },
                    })}
                  />
                </div>
                <div className="space-y-2">
                  <Label>每月限额</Label>
                  <Input 
                    type="number"
                    value={newPartner.quotaConfig.monthlyLimit}
                    onChange={e => setNewPartner({
                      ...newPartner,
                      quotaConfig: { ...newPartner.quotaConfig, monthlyLimit: parseInt(e.target.value) },
                    })}
                  />
                </div>
                <div className="space-y-2">
                  <Label>速率限制(次/秒)</Label>
                  <Input 
                    type="number"
                    value={newPartner.quotaConfig.rateLimit}
                    onChange={e => setNewPartner({
                      ...newPartner,
                      quotaConfig: { ...newPartner.quotaConfig, rateLimit: parseInt(e.target.value) },
                    })}
                  />
                </div>
              </div>
            </div>
            <DialogFooter>
              <Button variant="outline" onClick={() => setShowAddDialog(false)}>取消</Button>
              <Button onClick={handleAddPartner} disabled={!newPartner.name}>创建</Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>

        {/* API密钥弹窗 */}
        <Dialog open={showKeyDialog} onOpenChange={setShowKeyDialog}>
          <DialogContent>
            <DialogHeader>
              <DialogTitle>API密钥 - {selectedPartner?.name}</DialogTitle>
              <DialogDescription>用于接口认证，请妥善保管</DialogDescription>
            </DialogHeader>
            {selectedPartner && (
              <div className="space-y-4 py-4">
                <div className="space-y-2">
                  <Label>API Key</Label>
                  <div className="flex items-center gap-2">
                    <Input value={selectedPartner.apiKey} readOnly className="font-mono" />
                    <Button 
                      variant="outline" 
                      size="icon"
                      onClick={() => copyToClipboard(selectedPartner.apiKey, 'apiKey')}
                    >
                      {copiedId === 'apiKey' ? <CheckCircle2 className="h-4 w-4 text-green-500" /> : <Copy className="h-4 w-4" />}
                    </Button>
                  </div>
                </div>
                <div className="space-y-2">
                  <Label>API Secret</Label>
                  <div className="flex items-center gap-2">
                    <Input value={selectedPartner.apiSecret} readOnly className="font-mono" type="password" />
                    <Button 
                      variant="outline" 
                      size="icon"
                      onClick={() => copyToClipboard(selectedPartner.apiSecret, 'apiSecret')}
                    >
                      {copiedId === 'apiSecret' ? <CheckCircle2 className="h-4 w-4 text-green-500" /> : <Copy className="h-4 w-4" />}
                    </Button>
                  </div>
                </div>
                <div className="p-3 rounded-lg bg-yellow-50 text-sm text-yellow-700">
                  <AlertCircle className="h-4 w-4 inline mr-2" />
                  请妥善保管密钥，不要在客户端代码中暴露
                </div>
                <div className="p-4 rounded-lg bg-gray-50">
                  <h4 className="text-sm font-medium mb-2">调用示例</h4>
                  <pre className="bg-gray-900 text-green-400 p-3 rounded-lg text-xs overflow-x-auto">
{`curl -X POST "${apiBaseUrl}/api/open-api/ingest/user" \\
  -H "Authorization: Bearer ${selectedPartner.apiKey}" \\
  -H "X-API-Secret: ${selectedPartner.apiSecret}" \\
  -H "Content-Type: application/json" \\
  -d '{"phone": "13800138000", "source": "${selectedPartner.name.toLowerCase()}"}'`}
                  </pre>
                </div>
              </div>
            )}
            <DialogFooter>
              <Button variant="outline" onClick={() => setShowKeyDialog(false)}>关闭</Button>
              <Button variant="destructive">
                <RefreshCw className="h-4 w-4 mr-2" />
                重新生成
              </Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>

        {/* 详细配置弹窗 */}
        <Dialog open={showDetailDialog} onOpenChange={setShowDetailDialog}>
          <DialogContent className="max-w-2xl">
            <DialogHeader>
              <DialogTitle>接入方配置 - {selectedPartner?.name}</DialogTitle>
              <DialogDescription>管理接入方的权限和配额</DialogDescription>
            </DialogHeader>
            {selectedPartner && (
              <div className="space-y-6 py-4">
                {/* 基本信息 */}
                <div className="grid grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label>接入方名称</Label>
                    <Input value={selectedPartner.name} readOnly />
                  </div>
                  <div className="space-y-2">
                    <Label>类型</Label>
                    <Input value={selectedPartner.type === 'external' ? '外部系统' : '内部系统'} readOnly />
                  </div>
                </div>

                {/* 权限配置 */}
                <div className="space-y-3">
                  <Label>接口权限</Label>
                  <div className="space-y-2">
                    {[
                      { key: 'dataIngest', label: '数据流入', desc: '允许向神射手传入用户数据', icon: ArrowDownToLine },
                      { key: 'dataQuery', label: '数据查询', desc: '允许查询用户画像和标签', icon: Search },
                      { key: 'tagEnrich', label: '标签完善', desc: '允许触发AI标签完善', icon: Tags },
                      { key: 'batchProcess', label: '批量处理', desc: '允许创建批量处理任务', icon: Package },
                    ].map(({ key, label, desc, icon: Icon }) => (
                      <div key={key} className="flex items-center justify-between p-3 rounded-lg bg-gray-50">
                        <div className="flex items-center gap-3">
                          <div className="h-8 w-8 rounded-lg bg-white flex items-center justify-center">
                            <Icon className="h-4 w-4 text-gray-600" />
                          </div>
                          <div>
                            <p className="font-medium text-sm">{label}</p>
                            <p className="text-xs text-gray-500">{desc}</p>
                          </div>
                        </div>
                        <Switch
                          checked={selectedPartner.permissions[key as keyof Partner['permissions']]}
                          onCheckedChange={() => togglePermission(selectedPartner.id, key as keyof Partner['permissions'])}
                        />
                      </div>
                    ))}
                  </div>
                </div>

                {/* 配额配置 */}
                <div className="grid grid-cols-3 gap-4">
                  <div className="space-y-2">
                    <Label>每日限额</Label>
                    <Input type="number" defaultValue={selectedPartner.quotaConfig.dailyLimit} />
                  </div>
                  <div className="space-y-2">
                    <Label>每月限额</Label>
                    <Input type="number" defaultValue={selectedPartner.quotaConfig.monthlyLimit} />
                  </div>
                  <div className="space-y-2">
                    <Label>速率限制(次/秒)</Label>
                    <Input type="number" defaultValue={selectedPartner.quotaConfig.rateLimit} />
                  </div>
                </div>

                {/* 调用统计 */}
                <div className="p-4 rounded-lg bg-gray-50">
                  <h4 className="text-sm font-medium mb-3">调用统计</h4>
                  <div className="grid grid-cols-4 gap-4 text-center">
                    <div>
                      <p className="text-2xl font-bold text-gray-900">{selectedPartner.statistics.todayCalls.toLocaleString()}</p>
                      <p className="text-xs text-gray-500">今日调用</p>
                    </div>
                    <div>
                      <p className="text-2xl font-bold text-gray-900">{selectedPartner.statistics.monthCalls.toLocaleString()}</p>
                      <p className="text-xs text-gray-500">本月调用</p>
                    </div>
                    <div>
                      <p className="text-2xl font-bold text-gray-900">{selectedPartner.statistics.totalCalls.toLocaleString()}</p>
                      <p className="text-xs text-gray-500">累计调用</p>
                    </div>
                    <div>
                      <p className="text-sm font-medium text-gray-900">{selectedPartner.statistics.lastCallTime}</p>
                      <p className="text-xs text-gray-500">最后调用</p>
                    </div>
                  </div>
                </div>
              </div>
            )}
            <DialogFooter>
              <Button variant="outline" onClick={() => setShowDetailDialog(false)}>关闭</Button>
              <Button>保存配置</Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      </div>
    </div>
  )
}
