'use client'

import Select from '@/components/ui/Select'

import { useCallback, useEffect, useState } from 'react'
import { parseFetchError } from '@/lib/error-handler'
import { BellRing, Copy, Eye, EyeOff, KeyRound, ShieldCheck, Webhook, Cpu } from 'lucide-react'
import NotificationCenterPanel from '@/components/admin/NotificationCenterPanel'
import AiModelManagementPanel from '@/components/admin/AiModelManagementPanel'
import { useConfirmActionDialog } from '@/components/ConfirmActionDialog'

interface SuperAdmin {
  id: string
  email: string
  username: string
  realName: string | null
  department: string
  role: string
  createdAt: string
}

interface ApiKey {
  id: string
  name: string
  key: string
  canReveal: boolean
  isActive: boolean
  createdBy: string
  lastUsedAt: string | null
  createdAt: string
}

type NotificationAuthType = 'none' | 'bearer' | 'header'

interface ExternalNotificationTarget {
  id: string
  name: string
  callbackUrl: string
  isActive: boolean
  authType: NotificationAuthType
  authConfig: Record<string, string>
  authConfigured?: boolean
  authMasked?: string
  authSummary?: string
  eventTypes: string[]
  createdAt: string
  updatedAt: string
}

interface ExternalNotificationDelivery {
  id: string
  targetId: string
  targetName: string
  eventType: string
  materialId: string
  materialType: string
  taskNo: string | null
  status: string
  attemptCount: number
  maxAttempts: number
  nextRetryAt: string | null
  lastStatusCode: number | null
  lastResponseBody: string | null
  lastError: string | null
  createdAt: string
  updatedAt: string
  completedAt: string | null
}

interface NotificationTargetFormState {
  name: string
  callbackUrl: string
  authType: NotificationAuthType
  token: string
  headerName: string
  headerValue: string
  eventTypes: string[]
  isActive: boolean
}

const NOTIFICATION_EVENT_OPTIONS = [
  {
    value: 'task-detail.full-set.ready',
    label: '任务-详情全套入库完成',
    description: '整套素材完成后推送成套资源信息。',
  },
  {
    value: 'task-detail.barcode-images.updated',
    label: '任务-详情条码图片更新',
    description: '带产品条码的 SKU 预览图新增或更新后推送条码清单。',
  },
]

const EMPTY_NOTIFICATION_TARGET_FORM: NotificationTargetFormState = {
  name: '',
  callbackUrl: '',
  authType: 'none',
  token: '',
  headerName: '',
  headerValue: '',
  eventTypes: ['task-detail.full-set.ready'],
  isActive: true,
}

const NOTIFICATION_DELIVERY_STATUS_OPTIONS = [
  { value: 'all', label: '全部状态' },
  { value: 'pending', label: '待发送' },
  { value: 'processing', label: '发送中' },
  { value: 'retrying', label: '重试中' },
  { value: 'succeeded', label: '已成功' },
  { value: 'exhausted', label: '待人工处理' },
]

function formatDateTime(value: string | null) {
  if (!value) {
    return '无'
  }

  return new Date(value).toLocaleString('zh-CN')
}

function getNotificationTargetAuthSummary(target: ExternalNotificationTarget) {
  if (target.authSummary || target.authMasked) {
    return target.authSummary || target.authMasked || '已安全配置'
  }

  if (target.authType === 'bearer') {
    return target.authConfigured === false ? 'Bearer · 未配置' : 'Bearer · 已安全配置'
  }

  if (target.authType === 'header') {
    const headerName = target.authConfig.headerName || '自定义请求头'
    return `${headerName} · ${target.authConfigured === false ? '未配置' : '已安全配置'}`
  }

  return '无鉴权'
}

function getNotificationDeliveryStatusLabel(status: string) {
  switch (status) {
    case 'pending':
      return '待发送'
    case 'processing':
      return '发送中'
    case 'retrying':
      return '重试中'
    case 'succeeded':
      return '已成功'
    case 'exhausted':
      return '待人工处理'
    default:
      return status
  }
}

function getNotificationDeliveryStatusClassName(status: string) {
  switch (status) {
    case 'succeeded':
      return 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200'
    case 'retrying':
    case 'processing':
      return 'bg-orange-100 text-orange-800 dark:bg-orange-900/40 dark:text-orange-200'
    case 'exhausted':
      return 'bg-red-100 text-red-800 dark:bg-red-900/40 dark:text-red-200'
    default:
      return 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300'
  }
}

interface SuperAdminsTabProps {
  showToast: (message: string, type?: 'success' | 'error') => void
}

type SuperAdminWorkspace = 'access' | 'notificationCenter' | 'outbound' | 'aiModels'

const SUPER_ADMIN_WORKSPACES: Array<{
  id: SuperAdminWorkspace
  label: string
  description: string
  icon: typeof ShieldCheck
}> = [
  { id: 'access', label: '权限与凭证', description: '超级管理员与素材平台 API Key', icon: ShieldCheck },
  { id: 'notificationCenter', label: '统一通知中心', description: '项目、花名、测试与员工单聊', icon: BellRing },
  { id: 'outbound', label: '素材外发', description: 'Webhook 目标与自动上架投递', icon: Webhook },
  { id: 'aiModels', label: 'AI 模型接入', description: '上游连接、模型用途与默认模型', icon: Cpu },
]

export default function SuperAdminsTab({ showToast }: SuperAdminsTabProps) {
  const [activeWorkspace, setActiveWorkspace] = useState<SuperAdminWorkspace>('notificationCenter')
  const [aiModelsState, setAiModelsState] = useState({ dirty: false, busy: false })
  const { confirmAction, confirmActionDialog } = useConfirmActionDialog()
  const [superAdmins, setSuperAdmins] = useState<SuperAdmin[]>([])
  const [loading, setLoading] = useState(true)
  const [count, setCount] = useState(0)
  const [canAdd, setCanAdd] = useState(false)
  const [addingUserId, setAddingUserId] = useState('')
  const [adding, setAdding] = useState(false)
  const [removingUserId, setRemovingUserId] = useState<string | null>(null)

  // API Keys 相关状态
  const [apiKeys, setApiKeys] = useState<ApiKey[]>([])
  const [apiKeysLoading, setApiKeysLoading] = useState(true)
  const [showCreateModal, setShowCreateModal] = useState(false)
  const [newKeyName, setNewKeyName] = useState('')
  const [createdKey, setCreatedKey] = useState<string | null>(null)
  const [revealedApiKeys, setRevealedApiKeys] = useState<Record<string, string>>({})
  const [revealingApiKeyId, setRevealingApiKeyId] = useState<string | null>(null)
  const [notificationTargets, setNotificationTargets] = useState<ExternalNotificationTarget[]>([])
  const [notificationTargetsLoading, setNotificationTargetsLoading] = useState(true)
  const [notificationTargetForm, setNotificationTargetForm] = useState<NotificationTargetFormState>(
    EMPTY_NOTIFICATION_TARGET_FORM,
  )
  const [editingNotificationTargetId, setEditingNotificationTargetId] = useState<string | null>(null)
  const [savingNotificationTarget, setSavingNotificationTarget] = useState(false)
  const [togglingNotificationTargetId, setTogglingNotificationTargetId] = useState<string | null>(null)
  const [notificationDeliveries, setNotificationDeliveries] = useState<ExternalNotificationDelivery[]>([])
  const [notificationDeliveriesLoading, setNotificationDeliveriesLoading] = useState(true)
  const [notificationDeliveryStatusFilter, setNotificationDeliveryStatusFilter] = useState('all')
  const [retryingNotificationDeliveryId, setRetryingNotificationDeliveryId] = useState<string | null>(null)

  const changeWorkspace = async (next: SuperAdminWorkspace) => {
    if (next === activeWorkspace || (activeWorkspace === 'aiModels' && aiModelsState.busy)) return
    if (activeWorkspace === 'aiModels' && aiModelsState.dirty) {
      const result = await confirmAction({ title: '离开模型接入？', description: '当前修改尚未保存，离开后将丢失。', confirmLabel: '放弃修改并离开', cancelLabel: '继续编辑', tone: 'danger' })
      if (!result.confirmed) return
    }
    setActiveWorkspace(next)
  }

  // 加载超级管理员列表
  const loadSuperAdmins = useCallback(async () => {
    try {
      const response = await fetch('/api/admin/super-admins')
      if (response.ok) {
        const data = await response.json()
        setSuperAdmins(data.superAdmins)
        setCount(data.count)
        setCanAdd(data.canAdd)
      } else {
        showToast('加载超级管理员列表失败', 'error')
      }
    } catch (error) {
      console.error('Load super admins error:', error)
      showToast('加载超级管理员列表失败', 'error')
    } finally {
      setLoading(false)
    }
  }, [showToast])

  // 添加超级管理员
  const handleAddSuperAdmin = async () => {
    if (!addingUserId.trim()) {
      showToast('请输入用户ID', 'error')
      return
    }

    setAdding(true)
    try {
      const response = await fetch('/api/admin/super-admins', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ userId: addingUserId.trim() }),
      })

      if (response.ok) {
        showToast('超级管理员添加成功', 'success')
        setAddingUserId('')
        await loadSuperAdmins()
      } else {
        const data = await response.json()
        showToast(data.error || '添加失败', 'error')
      }
    } catch (error) {
      console.error('Add super admin error:', error)
      showToast('添加失败', 'error')
    } finally {
      setAdding(false)
    }
  }

  // 移除超级管理员
  const handleRemoveSuperAdmin = async (userId: string) => {
    if (!confirm('确定要移除该超级管理员权限吗？')) {
      return
    }

    setRemovingUserId(userId)
    try {
      const response = await fetch(`/api/admin/super-admins?userId=${userId}`, {
        method: 'DELETE',
      })

      if (response.ok) {
        showToast('超级管理员权限已移除', 'success')
        await loadSuperAdmins()
      } else {
        const data = await response.json()
        showToast(data.error || '移除失败', 'error')
      }
    } catch (error) {
      console.error('Remove super admin error:', error)
      showToast('移除失败', 'error')
    } finally {
      setRemovingUserId(null)
    }
  }

  // 加载 API Keys
  const fetchApiKeys = useCallback(async () => {
    try {
      setApiKeysLoading(true)
      const response = await fetch('/api/admin/api-keys')
      if (response.ok) {
        const data = await response.json()
        setApiKeys(data.data || [])
      } else {
        const errorData = await parseFetchError(response)
        showToast(errorData.message, 'error')
      }
    } catch (error) {
      console.error('加载 API Keys 失败:', error)
      const errorMessage = error instanceof Error ? error.message : '加载失败'
      showToast(errorMessage, 'error')
    } finally {
      setApiKeysLoading(false)
    }
  }, [showToast])

  const resetNotificationTargetForm = () => {
    setEditingNotificationTargetId(null)
    setNotificationTargetForm(EMPTY_NOTIFICATION_TARGET_FORM)
  }

  const fetchNotificationTargets = useCallback(async () => {
    try {
      setNotificationTargetsLoading(true)
      const response = await fetch('/api/admin/external-notification-targets')
      if (response.ok) {
        const data = await response.json()
        setNotificationTargets(data.data || [])
      } else {
        const errorData = await parseFetchError(response)
        showToast(errorData.message, 'error')
      }
    } catch (error) {
      console.error('加载自动上架通知目标失败:', error)
      const errorMessage = error instanceof Error ? error.message : '加载失败'
      showToast(errorMessage, 'error')
    } finally {
      setNotificationTargetsLoading(false)
    }
  }, [showToast])

  const fetchNotificationDeliveries = useCallback(async (status: string) => {
    try {
      setNotificationDeliveriesLoading(true)
      const searchParams = new URLSearchParams()
      if (status && status !== 'all') {
        searchParams.set('status', status)
      }
      searchParams.set('limit', '50')

      const query = searchParams.toString()
      const response = await fetch(
        `/api/admin/external-notification-deliveries${query ? `?${query}` : ''}`,
      )

      if (response.ok) {
        const data = await response.json()
        setNotificationDeliveries(data.data || [])
      } else {
        const errorData = await parseFetchError(response)
        showToast(errorData.message, 'error')
      }
    } catch (error) {
      console.error('加载自动上架投递记录失败:', error)
      const errorMessage = error instanceof Error ? error.message : '加载失败'
      showToast(errorMessage, 'error')
    } finally {
      setNotificationDeliveriesLoading(false)
    }
  }, [showToast])

  const handleSaveNotificationTarget = async () => {
    if (!notificationTargetForm.name.trim()) {
      showToast('请填写目标系统名称', 'error')
      return
    }

    if (!notificationTargetForm.callbackUrl.trim()) {
      showToast('请填写回调地址', 'error')
      return
    }

    if (
      notificationTargetForm.authType === 'bearer' &&
      !notificationTargetForm.token.trim() &&
      !editingNotificationTargetId
    ) {
      showToast('请选择 Bearer 鉴权时必须填写 token', 'error')
      return
    }

    if (
      notificationTargetForm.authType === 'header' &&
      (!notificationTargetForm.headerName.trim() ||
        (!notificationTargetForm.headerValue.trim() && !editingNotificationTargetId))
    ) {
      showToast('自定义 Header 鉴权需要填写请求头名称和值', 'error')
      return
    }

    if (notificationTargetForm.eventTypes.length === 0) {
      showToast('请至少选择 1 个通知事件', 'error')
      return
    }

    setSavingNotificationTarget(true)
    try {
      const authConfig =
        notificationTargetForm.authType === 'bearer'
          ? notificationTargetForm.token.trim()
            ? { token: notificationTargetForm.token.trim() }
            : undefined
          : notificationTargetForm.authType === 'header'
            ? notificationTargetForm.headerValue.trim()
              ? {
                headerName: notificationTargetForm.headerName.trim(),
                headerValue: notificationTargetForm.headerValue.trim(),
                }
              : undefined
            : {}

      const payload = {
        name: notificationTargetForm.name.trim(),
        callbackUrl: notificationTargetForm.callbackUrl.trim(),
        isActive: notificationTargetForm.isActive,
        authType: notificationTargetForm.authType,
        ...(authConfig === undefined ? {} : { authConfig }),
        eventTypes: notificationTargetForm.eventTypes,
      }

      const response = await fetch(
        editingNotificationTargetId
          ? `/api/admin/external-notification-targets/${editingNotificationTargetId}`
          : '/api/admin/external-notification-targets',
        {
          method: editingNotificationTargetId ? 'PUT' : 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(payload),
        },
      )

      if (response.ok) {
        showToast(editingNotificationTargetId ? '通知目标已更新' : '通知目标已创建', 'success')
        resetNotificationTargetForm()
        await fetchNotificationTargets()
      } else {
        const errorData = await parseFetchError(response)
        showToast(errorData.message, 'error')
      }
    } catch (error) {
      console.error('保存自动上架通知目标失败:', error)
      const errorMessage = error instanceof Error ? error.message : '保存失败'
      showToast(errorMessage, 'error')
    } finally {
      setSavingNotificationTarget(false)
    }
  }

  const handleEditNotificationTarget = (target: ExternalNotificationTarget) => {
    setEditingNotificationTargetId(target.id)
    setNotificationTargetForm({
      name: target.name,
      callbackUrl: target.callbackUrl,
      authType: target.authType,
      token: '',
      headerName: target.authConfig.headerName || '',
      headerValue: '',
      eventTypes: target.eventTypes?.length > 0 ? target.eventTypes : ['task-detail.full-set.ready'],
      isActive: target.isActive,
    })
  }

  const handleToggleNotificationTargetActive = async (target: ExternalNotificationTarget) => {
    setTogglingNotificationTargetId(target.id)
    try {
      const response = await fetch(`/api/admin/external-notification-targets/${target.id}`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          isActive: !target.isActive,
        }),
      })

      if (response.ok) {
        showToast(target.isActive ? '通知目标已停用' : '通知目标已启用', 'success')
        await fetchNotificationTargets()
      } else {
        const errorData = await parseFetchError(response)
        showToast(errorData.message, 'error')
      }
    } catch (error) {
      console.error('切换通知目标状态失败:', error)
      const errorMessage = error instanceof Error ? error.message : '更新失败'
      showToast(errorMessage, 'error')
    } finally {
      setTogglingNotificationTargetId(null)
    }
  }

  const handleRetryNotificationDelivery = async (deliveryId: string) => {
    setRetryingNotificationDeliveryId(deliveryId)
    try {
      const response = await fetch(`/api/admin/external-notification-deliveries/${deliveryId}/retry`, {
        method: 'POST',
      })

      if (response.ok) {
        showToast('补发任务已重新入队', 'success')
        await fetchNotificationDeliveries(notificationDeliveryStatusFilter)
      } else {
        const errorData = await parseFetchError(response)
        showToast(errorData.message, 'error')
      }
    } catch (error) {
      console.error('手工补发失败:', error)
      const errorMessage = error instanceof Error ? error.message : '补发失败'
      showToast(errorMessage, 'error')
    } finally {
      setRetryingNotificationDeliveryId(null)
    }
  }

  // 创建 API Key
  const handleCreateApiKey = async () => {
    if (!newKeyName.trim()) {
      showToast('请输入密钥名称', 'error')
      return
    }

    try {
      const response = await fetch('/api/admin/api-keys', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ name: newKeyName }),
      })

      if (response.ok) {
        const data = await response.json()
        setCreatedKey(data.data.key)
        setNewKeyName('')
        showToast('API Key 创建成功', 'success')
        fetchApiKeys()
      } else {
        const errorData = await parseFetchError(response)
        showToast(errorData.message, 'error')
      }
    } catch (error) {
      console.error('创建失败:', error)
      const errorMessage = error instanceof Error ? error.message : '创建失败'
      showToast(errorMessage, 'error')
    }
  }

  // 切换 API Key 状态
  const handleToggleApiKeyActive = async (id: string, isActive: boolean) => {
    try {
      const response = await fetch(`/api/admin/api-keys/${id}`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ isActive: !isActive }),
      })

      if (response.ok) {
        showToast(isActive ? 'API Key 已禁用' : 'API Key 已启用', 'success')
        fetchApiKeys()
      } else {
        const errorData = await parseFetchError(response)
        showToast(errorData.message, 'error')
      }
    } catch (error) {
      console.error('更新失败:', error)
      const errorMessage = error instanceof Error ? error.message : '更新失败'
      showToast(errorMessage, 'error')
    }
  }

  const handleRevealApiKey = async (apiKey: ApiKey) => {
    if (revealedApiKeys[apiKey.id]) {
      setRevealedApiKeys((current) => {
        const next = { ...current }
        delete next[apiKey.id]
        return next
      })
      return
    }

    if (!apiKey.canReveal) {
      showToast('该历史 API Key 只保存了哈希，请创建新 Key 后逐步替换', 'error')
      return
    }

    try {
      setRevealingApiKeyId(apiKey.id)
      const response = await fetch(`/api/admin/api-keys/${apiKey.id}/reveal`, {
        method: 'POST',
        cache: 'no-store',
      })
      if (!response.ok) {
        const errorData = await parseFetchError(response)
        showToast(errorData.message, 'error')
        return
      }

      const data = await response.json()
      setRevealedApiKeys((current) => ({ ...current, [apiKey.id]: data.data.key }))
    } catch (error) {
      console.error('查看 API Key 失败:', error)
      const errorMessage = error instanceof Error ? error.message : '查看失败'
      showToast(errorMessage, 'error')
    } finally {
      setRevealingApiKeyId(null)
    }
  }

  const handleCopyApiKey = async (apiKey: string) => {
    try {
      await navigator.clipboard.writeText(apiKey)
      showToast('API Key 已复制', 'success')
    } catch (error) {
      console.error('复制 API Key 失败:', error)
      showToast('复制失败，请手动选择密钥文本', 'error')
    }
  }

  // 删除 API Key
  const handleDeleteApiKey = async (id: string) => {
    if (!confirm('确定要删除此 API Key 吗？删除后无法恢复。')) return

    try {
      const response = await fetch(`/api/admin/api-keys/${id}`, {
        method: 'DELETE',
      })

      if (response.ok) {
        showToast('API Key 已删除', 'success')
        setRevealedApiKeys((current) => {
          const next = { ...current }
          delete next[id]
          return next
        })
        fetchApiKeys()
      } else {
        const errorData = await parseFetchError(response)
        showToast(errorData.message, 'error')
      }
    } catch (error) {
      console.error('删除失败:', error)
      const errorMessage = error instanceof Error ? error.message : '删除失败'
      showToast(errorMessage, 'error')
    }
  }

  useEffect(() => {
    void loadSuperAdmins()
    void fetchApiKeys()
    void fetchNotificationTargets()
  }, [fetchApiKeys, fetchNotificationTargets, loadSuperAdmins])

  useEffect(() => {
    if (activeWorkspace !== 'access') {
      setRevealedApiKeys({})
      setCreatedKey(null)
      setShowCreateModal(false)
    }
  }, [activeWorkspace])

  useEffect(() => {
    void fetchNotificationDeliveries(notificationDeliveryStatusFilter)
  }, [fetchNotificationDeliveries, notificationDeliveryStatusFilter])

  if (loading) {
    return (
      <div className="overflow-hidden rounded-[12px] border border-[#e2e8f0] bg-white" aria-label="正在加载超级管理员工作台">
        <div className="border-b border-[#e2e8f0] px-6 py-5">
          <div className="h-6 w-44 animate-pulse rounded-[6px] bg-[#e8edf3]" />
          <div className="mt-3 h-4 w-full max-w-xl animate-pulse rounded-[6px] bg-[#eef2f6]" />
        </div>
        <div className="grid gap-4 p-6 lg:grid-cols-[220px_minmax(0,1fr)]">
          <div className="h-44 animate-pulse rounded-[8px] bg-[#eef2f6]" />
          <div className="space-y-3">
            <div className="h-20 animate-pulse rounded-[8px] bg-[#eef2f6]" />
            <div className="h-20 animate-pulse rounded-[8px] bg-[#eef2f6]" />
            <div className="h-20 animate-pulse rounded-[8px] bg-[#eef2f6]" />
          </div>
        </div>
      </div>
    )
  }

  return (
    <div className="overflow-hidden rounded-[12px] border border-[#e2e8f0] bg-white">
      {confirmActionDialog}
      <div className="border-b border-[#e2e8f0] px-5 py-5 sm:px-6">
        <h2 className="text-[20px] font-semibold tracking-[-0.02em] text-[#101828]">
          超级管理员工作台
        </h2>
        <p className="mt-1 max-w-[72ch] text-[14px] leading-6 text-[#66758b]">
          集中管理高权限账号、平台凭证、统一钉钉通知和素材外发。各分区权限均绑定当前项目的超级管理员身份。
        </p>
      </div>

      <div className="grid min-w-0 lg:grid-cols-[232px_minmax(0,1fr)]">
        <nav aria-label="超级管理员工作台菜单" className="border-b border-[#e2e8f0] bg-[#f8fafc] p-2 lg:border-b-0 lg:border-r lg:p-3">
          <div className="grid grid-cols-2 gap-1 sm:grid-cols-4 lg:grid-cols-1">
            {SUPER_ADMIN_WORKSPACES.map((workspace) => {
              const Icon = workspace.icon
              const active = activeWorkspace === workspace.id
              return (
                <button
                  key={workspace.id}
                  type="button"
                  aria-current={active ? 'page' : undefined}
                  disabled={activeWorkspace === 'aiModels' && aiModelsState.busy}
                  onClick={() => void changeWorkspace(workspace.id)}
                  className={`min-h-[58px] rounded-[8px] px-3 py-2.5 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#5a9ce6] ${
                    active
                      ? 'bg-[#e6f4ff] text-[#0050cb]'
                      : 'text-[#4f6077] hover:bg-[#eef2f6] hover:text-[#101828]'
                  }`}
                >
                  <span className="flex items-center gap-2 text-[14px] font-semibold">
                    <Icon className={`h-4 w-4 ${active ? 'text-[#1677ff]' : 'text-[#66758b]'}`} aria-hidden="true" />
                    {workspace.label}
                  </span>
                  <span className={`mt-1 hidden text-[12px] leading-5 lg:block ${active ? 'text-[#315f91]' : 'text-[#66758b]'}`}>
                    {workspace.description}
                  </span>
                </button>
              )
            })}
          </div>
        </nav>

        <div className="min-w-0">
          {activeWorkspace === 'aiModels' && <AiModelManagementPanel onStateChange={setAiModelsState} />}
          {activeWorkspace === 'access' && (
            <div className="space-y-6 p-4 sm:p-6">
              <div className="border-b border-[#e2e8f0] pb-4">
                <div className="flex items-center gap-2">
                  <KeyRound className="h-4 w-4 text-[#1677ff]" aria-hidden="true" />
                  <h3 className="text-[16px] font-semibold text-[#101828]">权限与凭证</h3>
                </div>
                <p className="mt-1 text-[13px] text-[#66758b]">
                  当前 {count} / 4 个超级管理员{!canAdd ? '，已达到上限' : ''}。本区 API Key 仅属于素材平台外部接口。
                </p>
              </div>
        {/* 添加超级管理员 */}
        {canAdd && (
          <div className="p-4 bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
            <h3 className="text-sm font-medium text-gray-900 dark:text-white mb-3">
              添加超级管理员
            </h3>
            <div className="flex gap-2">
              <input
                type="text"
                value={addingUserId}
                onChange={(e) => setAddingUserId(e.target.value)}
                placeholder="输入用户ID"
                className="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
              />
              <button
                onClick={handleAddSuperAdmin}
                disabled={adding || !addingUserId.trim()}
                className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
              >
                {adding ? '添加中...' : '添加'}
              </button>
            </div>
            <p className="mt-2 text-xs text-gray-500 dark:text-gray-400">
              提示：只能添加管理员角色的用户，且最多4个超级管理员
            </p>
          </div>
        )}

        {/* 超级管理员列表 */}
        <div>
          <h3 className="text-sm font-medium text-gray-900 dark:text-white mb-3">
            超级管理员列表
          </h3>
          {superAdmins.length === 0 ? (
            <div className="text-center py-8 text-gray-500 dark:text-gray-400">
              暂无超级管理员
            </div>
          ) : (
            <div className="space-y-2">
              {superAdmins.map((admin) => (
                <div
                  key={admin.id}
                  className="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700"
                >
                  <div className="flex-1">
                    <div className="flex items-center gap-2">
                      <span className="font-medium text-gray-900 dark:text-white">
                        {admin.realName || admin.username}
                      </span>
                      <span className="px-2 py-0.5 text-xs bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded">
                        超级管理员
                      </span>
                    </div>
                    <div className="mt-1 text-sm text-gray-500 dark:text-gray-400">
                      <span>{admin.email}</span>
                      {admin.department && (
                        <span className="ml-2">· {admin.department}</span>
                      )}
                    </div>
                    <div className="mt-1 text-xs text-gray-400 dark:text-gray-500">
                      创建时间：{new Date(admin.createdAt).toLocaleString('zh-CN')}
                    </div>
                  </div>
                  <button
                    onClick={() => handleRemoveSuperAdmin(admin.id)}
                    disabled={removingUserId === admin.id}
                    className="ml-4 px-3 py-1.5 text-sm text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 bg-red-50 dark:bg-red-900/20 rounded-lg hover:bg-red-100 dark:hover:bg-red-900/30 transition-colors disabled:opacity-50"
                  >
                    {removingUserId === admin.id ? '移除中...' : '移除'}
                  </button>
                </div>
              ))}
            </div>
          )}
        </div>

        {/* 素材平台 API Key 管理 */}
        <div className="mt-8">
          <div className="flex justify-between items-center mb-4">
            <h3 className="text-lg font-medium text-gray-900 dark:text-white">
              素材平台 API Key
            </h3>
            <button
              onClick={() => setShowCreateModal(true)}
              className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm"
            >
              创建素材平台 API Key
            </button>
          </div>

          {apiKeysLoading ? (
            <div className="p-8 text-center text-gray-500 dark:text-gray-400">
              加载中...
            </div>
          ) : apiKeys.length === 0 ? (
            <div className="p-8 text-center text-gray-500 dark:text-gray-400 bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
                  <p>暂无素材平台 API Key</p>
              <p className="mt-2 text-sm text-gray-400 dark:text-gray-500">
                点击上方按钮创建第一个 API Key
              </p>
            </div>
          ) : (
            <div className="overflow-x-auto bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
              <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                <thead className="bg-gray-100 dark:bg-gray-700">
                  <tr>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                      名称
                    </th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                      密钥
                    </th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                      状态
                    </th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                      最后使用
                    </th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                      创建时间
                    </th>
                    <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                      操作
                    </th>
                  </tr>
                </thead>
                <tbody className="bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-700">
                  {apiKeys.map((key) => (
                    <tr key={key.id} className="hover:bg-gray-50 dark:hover:bg-gray-800">
                      <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">
                        {key.name}
                      </td>
                      <td className="px-6 py-4 text-sm text-gray-500 dark:text-gray-400">
                        <div className="flex min-w-56 items-center gap-2">
                          <code className="break-all font-mono text-xs text-gray-700 dark:text-gray-300">
                            {revealedApiKeys[key.id] || key.key}
                          </code>
                          {revealedApiKeys[key.id] && (
                            <button
                              type="button"
                              onClick={() => handleCopyApiKey(revealedApiKeys[key.id])}
                              className="shrink-0 rounded p-1.5 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-500 dark:hover:bg-gray-800 dark:hover:text-white"
                              aria-label={`复制 ${key.name} 的 API Key`}
                              title="复制完整 Key"
                            >
                              <Copy className="h-4 w-4" aria-hidden="true" />
                            </button>
                          )}
                        </div>
                        {!key.canReveal && (
                          <p className="mt-1 text-xs text-amber-700 dark:text-amber-300">
                            历史 Key 无法恢复，需创建新 Key 替换
                          </p>
                        )}
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap">
                        <span
                          className={`px-2 py-1 text-xs rounded ${
                            key.isActive
                              ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200'
                              : 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300'
                          }`}
                        >
                          {key.isActive ? '启用' : '禁用'}
                        </span>
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
                        {key.lastUsedAt
                          ? new Date(key.lastUsedAt).toLocaleString('zh-CN')
                          : '从未使用'}
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
                        {new Date(key.createdAt).toLocaleString('zh-CN')}
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-right text-sm space-x-2">
                        <button
                          type="button"
                          onClick={() => handleRevealApiKey(key)}
                          disabled={!key.canReveal || revealingApiKeyId === key.id}
                          className="inline-flex items-center gap-1 text-gray-600 transition-colors hover:text-gray-950 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-500 disabled:cursor-not-allowed disabled:opacity-40 dark:text-gray-300 dark:hover:text-white"
                          aria-label={`${revealedApiKeys[key.id] ? '隐藏' : '查看'} ${key.name} 的完整 API Key`}
                          title={key.canReveal ? (revealedApiKeys[key.id] ? '隐藏完整 Key' : '查看完整 Key') : '历史 Key 无法恢复'}
                        >
                          {revealedApiKeys[key.id] ? (
                            <EyeOff className="h-4 w-4" aria-hidden="true" />
                          ) : (
                            <Eye className="h-4 w-4" aria-hidden="true" />
                          )}
                          {revealingApiKeyId === key.id ? '读取中' : revealedApiKeys[key.id] ? '隐藏' : '查看'}
                        </button>
                        <button
                          onClick={() => handleToggleApiKeyActive(key.id, key.isActive)}
                          className="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300"
                        >
                          {key.isActive ? '禁用' : '启用'}
                        </button>
                        <button
                          onClick={() => handleDeleteApiKey(key.id)}
                          className="text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-300"
                        >
                          删除
                        </button>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
            </div>
            </div>
          )}

          {activeWorkspace === 'notificationCenter' && (
            <NotificationCenterPanel showToast={showToast} />
          )}

          {activeWorkspace === 'outbound' && (
            <div className="space-y-8 p-4 sm:p-6">
        <div>
          <div className="flex flex-col gap-3 mb-4 md:flex-row md:items-center md:justify-between">
            <div>
              <h3 className="text-lg font-medium text-gray-900 dark:text-white">
                素材外发目标
              </h3>
              <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
                配置素材库向其他业务系统发送 Webhook 的目标，与统一通知中心向员工发送钉钉单聊不同。
              </p>
            </div>
            <button
              onClick={() => {
                resetNotificationTargetForm()
                fetchNotificationTargets()
              }}
              className="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 text-sm text-gray-700 dark:text-gray-300 transition-colors"
            >
              刷新目标
            </button>
          </div>

          <div className="grid gap-4 xl:grid-cols-[minmax(0,1.2fr)_minmax(320px,0.8fr)]">
            <div className="bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
              <div className="px-4 py-3 border-b border-gray-200 dark:border-gray-700">
                <h4 className="text-sm font-medium text-gray-900 dark:text-white">
                  已配置目标
                </h4>
              </div>
              <div className="p-4">
                {notificationTargetsLoading ? (
                  <div className="py-8 text-center text-gray-500 dark:text-gray-400">
                    加载中...
                  </div>
                ) : notificationTargets.length === 0 ? (
                  <div className="py-8 text-center text-gray-500 dark:text-gray-400">
                    暂无通知目标
                  </div>
                ) : (
                  <div className="space-y-3">
                    {notificationTargets.map((target) => (
                      <div
                        key={target.id}
                        className="rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-4"
                      >
                        <div className="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
                          <div className="min-w-0 flex-1">
                            <div className="flex flex-wrap items-center gap-2">
                              <span className="font-medium text-gray-900 dark:text-white">
                                {target.name}
                              </span>
                              <span
                                className={`px-2 py-0.5 text-xs rounded ${
                                  target.isActive
                                    ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200'
                                    : 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300'
                                }`}
                              >
                                {target.isActive ? '启用中' : '已停用'}
                              </span>
                            </div>
                            <div className="mt-2 text-xs font-mono break-all text-gray-500 dark:text-gray-400">
                              {target.callbackUrl}
                            </div>
                            <div className="mt-2 text-sm text-gray-600 dark:text-gray-300">
                              鉴权：{getNotificationTargetAuthSummary(target)}
                            </div>
                            <div className="mt-2 flex flex-wrap gap-2">
                              {target.eventTypes.map((eventType) => (
                                <span
                                  key={eventType}
                                  className="rounded bg-blue-50 px-2 py-0.5 text-xs text-blue-700 dark:bg-blue-900/20 dark:text-blue-200"
                                >
                                  {eventType === 'task-detail.full-set.ready'
                                    ? '自动上架平台 / 全套入库'
                                    : eventType === 'task-detail.barcode-images.updated'
                                      ? '产品平台 / 条码图片更新'
                                      : eventType}
                                </span>
                              ))}
                            </div>
                            <div className="mt-1 text-xs text-gray-400 dark:text-gray-500">
                              更新时间：{formatDateTime(target.updatedAt)}
                            </div>
                          </div>
                          <div className="flex items-center gap-2">
                            <button
                              onClick={() => handleEditNotificationTarget(target)}
                              className="px-3 py-1.5 text-sm text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300"
                            >
                              编辑
                            </button>
                            <button
                              onClick={() => handleToggleNotificationTargetActive(target)}
                              disabled={togglingNotificationTargetId === target.id}
                              className="px-3 py-1.5 text-sm rounded-lg border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 disabled:opacity-50"
                            >
                              {togglingNotificationTargetId === target.id
                                ? '处理中...'
                                : target.isActive
                                  ? '停用'
                                  : '启用'}
                            </button>
                          </div>
                        </div>
                      </div>
                    ))}
                  </div>
                )}
              </div>
            </div>

            <div className="bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
              <div className="px-4 py-3 border-b border-gray-200 dark:border-gray-700">
                <h4 className="text-sm font-medium text-gray-900 dark:text-white">
                  {editingNotificationTargetId ? '编辑素材外发目标' : '新增素材回调'}
                </h4>
              </div>
              <div className="p-4 space-y-4">
                <div>
                  <label className="block text-sm font-medium mb-2 text-gray-900 dark:text-white">
                    目标系统名称
                  </label>
                  <input
                    type="text"
                    value={notificationTargetForm.name}
                    onChange={(e) =>
                      setNotificationTargetForm((current) => ({
                        ...current,
                        name: e.target.value,
                      }))
                    }
                    placeholder="例如：自动上架平台 / 产品平台"
                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
                  />
                </div>

                <div>
                  <label className="block text-sm font-medium mb-2 text-gray-900 dark:text-white">
                    回调地址
                  </label>
                  <input
                    type="text"
                    value={notificationTargetForm.callbackUrl}
                    onChange={(e) =>
                      setNotificationTargetForm((current) => ({
                        ...current,
                        callbackUrl: e.target.value,
                      }))
                    }
                    placeholder="https://example.com/callback"
                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
                  />
                </div>

                <div>
                  <label className="block text-sm font-medium mb-2 text-gray-900 dark:text-white">
                    鉴权方式
                  </label>
                  <Select
                    value={notificationTargetForm.authType}
                    onChange={(e) =>
                      setNotificationTargetForm((current) => ({
                        ...current,
                        authType: e.target.value as NotificationAuthType,
                      }))
                    }
                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
                  >
                    <option value="none">无鉴权</option>
                    <option value="bearer">Bearer</option>
                    <option value="header">自定义 Header</option>
                  </Select>
                </div>

                {notificationTargetForm.authType === 'bearer' && (
                  <div>
                    <label className="block text-sm font-medium mb-2 text-gray-900 dark:text-white">
                      Bearer Token
                    </label>
                    <input
                      type="text"
                      value={notificationTargetForm.token}
                      onChange={(e) =>
                        setNotificationTargetForm((current) => ({
                          ...current,
                          token: e.target.value,
                        }))
                      }
                      placeholder="请输入 token"
                      className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
                    />
                  </div>
                )}

                {notificationTargetForm.authType === 'header' && (
                  <div className="grid gap-3 sm:grid-cols-2">
                    <div>
                      <label className="block text-sm font-medium mb-2 text-gray-900 dark:text-white">
                        Header 名称
                      </label>
                      <input
                        type="text"
                        value={notificationTargetForm.headerName}
                        onChange={(e) =>
                          setNotificationTargetForm((current) => ({
                            ...current,
                            headerName: e.target.value,
                          }))
                        }
                        placeholder="例如：X-Signature"
                        className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-medium mb-2 text-gray-900 dark:text-white">
                        Header 值
                      </label>
                      <input
                        type="text"
                        value={notificationTargetForm.headerValue}
                        onChange={(e) =>
                          setNotificationTargetForm((current) => ({
                            ...current,
                            headerValue: e.target.value,
                          }))
                        }
                        placeholder="请输入请求头值"
                        className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
                      />
                    </div>
                  </div>
                )}

                <label className="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300">
                  <input
                    type="checkbox"
                    checked={notificationTargetForm.isActive}
                    onChange={(e) =>
                      setNotificationTargetForm((current) => ({
                        ...current,
                        isActive: e.target.checked,
                      }))
                    }
                    className="rounded border-gray-300 dark:border-gray-600"
                  />
                  创建后立即启用
                </label>

                <div className="space-y-2 rounded-lg border border-blue-200 dark:border-blue-900/40 bg-blue-50 dark:bg-blue-900/10 px-3 py-3 text-xs text-blue-700 dark:text-blue-200">
                  <div className="font-medium">订阅事件</div>
                  {NOTIFICATION_EVENT_OPTIONS.map((eventOption) => (
                    <label
                      key={eventOption.value}
                      className="flex items-start gap-2 text-sm text-blue-900 dark:text-blue-100"
                    >
                      <input
                        type="checkbox"
                        checked={notificationTargetForm.eventTypes.includes(eventOption.value)}
                        onChange={(e) =>
                          setNotificationTargetForm((current) => ({
                            ...current,
                            eventTypes: e.target.checked
                              ? Array.from(new Set([...current.eventTypes, eventOption.value]))
                              : current.eventTypes.filter((eventType) => eventType !== eventOption.value),
                          }))
                        }
                        className="mt-0.5 rounded border-blue-300 dark:border-blue-700"
                      />
                      <span>
                        <span className="block font-medium">{eventOption.label}</span>
                        <span className="block text-xs text-blue-700/80 dark:text-blue-200/80">
                          {eventOption.description}
                        </span>
                        <span className="block font-mono text-[11px] text-blue-700/80 dark:text-blue-200/80">
                          {eventOption.value}
                        </span>
                      </span>
                    </label>
                  ))}
                </div>

                <div className="flex gap-3">
                  <button
                    onClick={handleSaveNotificationTarget}
                    disabled={savingNotificationTarget}
                    className="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
                  >
                    {savingNotificationTarget
                      ? '保存中...'
                      : editingNotificationTargetId
                        ? '保存修改'
                        : '新增素材回调'}
                  </button>
                  <button
                    onClick={resetNotificationTargetForm}
                    className="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 transition-colors"
                  >
                    {editingNotificationTargetId ? '取消编辑' : '清空'}
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div className="mt-8">
          <div className="flex flex-col gap-3 mb-4 md:flex-row md:items-center md:justify-between">
            <div>
              <h3 className="text-lg font-medium text-gray-900 dark:text-white">
                自动上架投递记录
              </h3>
              <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
                查看最近 50 条通知投递情况；失败或超上限的记录可以在这里手工补发。
              </p>
            </div>
            <div className="flex gap-2">
              <Select
                value={notificationDeliveryStatusFilter}
                onChange={(e) => setNotificationDeliveryStatusFilter(e.target.value)}
                className="px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-sm text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
              >
                {NOTIFICATION_DELIVERY_STATUS_OPTIONS.map((option) => (
                  <option key={option.value} value={option.value}>
                    {option.label}
                  </option>
                ))}
              </Select>
              <button
                onClick={() => fetchNotificationDeliveries(notificationDeliveryStatusFilter)}
                className="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 text-sm text-gray-700 dark:text-gray-300 transition-colors"
              >
                刷新记录
              </button>
            </div>
          </div>

          {notificationDeliveriesLoading ? (
            <div className="p-8 text-center text-gray-500 dark:text-gray-400 bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
              加载中...
            </div>
          ) : notificationDeliveries.length === 0 ? (
            <div className="p-8 text-center text-gray-500 dark:text-gray-400 bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
              当前筛选条件下暂无投递记录
            </div>
          ) : (
            <div className="overflow-x-auto bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
              <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                <thead className="bg-gray-100 dark:bg-gray-700">
                  <tr>
                    <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                      目标系统
                    </th>
                    <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                      素材
                    </th>
                    <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                      状态
                    </th>
                    <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                      尝试次数
                    </th>
                    <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                      最近结果
                    </th>
                    <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                      下一次重试
                    </th>
                    <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                      更新时间
                    </th>
                    <th className="px-4 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                      操作
                    </th>
                  </tr>
                </thead>
                <tbody className="bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-700">
                  {notificationDeliveries.map((delivery) => (
                    <tr key={delivery.id} className="hover:bg-gray-50 dark:hover:bg-gray-800">
                      <td className="px-4 py-4 align-top">
                        <div className="text-sm font-medium text-gray-900 dark:text-white">
                          {delivery.targetName || '未知目标'}
                        </div>
                        <div className="mt-1 text-xs text-gray-400 dark:text-gray-500 font-mono">
                          {delivery.id}
                        </div>
                      </td>
                      <td className="px-4 py-4 align-top">
                        <div className="text-sm font-medium text-gray-900 dark:text-white">
                          {delivery.materialType}
                        </div>
                        <div className="mt-1 text-xs text-gray-500 dark:text-gray-400 font-mono break-all">
                          materialId: {delivery.materialId}
                        </div>
                        <div className="mt-1 text-xs text-gray-400 dark:text-gray-500">
                          taskNo: {delivery.taskNo || '无'}
                        </div>
                      </td>
                      <td className="px-4 py-4 align-top">
                        <span
                          className={`px-2 py-1 text-xs rounded ${getNotificationDeliveryStatusClassName(delivery.status)}`}
                        >
                          {getNotificationDeliveryStatusLabel(delivery.status)}
                        </span>
                      </td>
                      <td className="px-4 py-4 align-top text-sm text-gray-600 dark:text-gray-300">
                        {delivery.attemptCount} / {delivery.maxAttempts}
                      </td>
                      <td className="px-4 py-4 align-top">
                        <div className="text-sm text-gray-700 dark:text-gray-300">
                          {delivery.lastStatusCode ? `HTTP ${delivery.lastStatusCode}` : '暂无'}
                        </div>
                        <div className="mt-1 text-xs text-gray-500 dark:text-gray-400 max-w-xs break-words">
                          {delivery.lastError || delivery.lastResponseBody || '无'}
                        </div>
                      </td>
                      <td className="px-4 py-4 align-top text-sm text-gray-600 dark:text-gray-300">
                        {formatDateTime(delivery.nextRetryAt)}
                      </td>
                      <td className="px-4 py-4 align-top text-sm text-gray-600 dark:text-gray-300">
                        {formatDateTime(delivery.updatedAt)}
                      </td>
                      <td className="px-4 py-4 align-top text-right">
                        <button
                          onClick={() => handleRetryNotificationDelivery(delivery.id)}
                          disabled={
                            retryingNotificationDeliveryId === delivery.id ||
                            delivery.status === 'succeeded'
                          }
                          className="px-3 py-1.5 text-sm rounded-lg border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed"
                        >
                          {retryingNotificationDeliveryId === delivery.id ? '补发中...' : '手工补发'}
                        </button>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
        </div>
            </div>
          )}
        </div>
      </div>

      {/* 创建 API Key 模态框 */}
      {activeWorkspace === 'access' && showCreateModal && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
          <div className="bg-white dark:bg-gray-800 rounded-lg p-6 max-w-md w-full mx-4">
            <h2 className="text-xl font-bold mb-4 text-gray-900 dark:text-white">
                创建素材平台 API Key
            </h2>

            {createdKey ? (
              <div>
                <p className="text-sm text-gray-600 dark:text-gray-400 mb-2">
                  API Key 已创建，可复制给对应的外部系统：
                </p>
                <div className="bg-gray-100 dark:bg-gray-700 p-3 rounded font-mono text-sm break-all mb-4 text-gray-900 dark:text-white">
                  {createdKey}
                </div>
                <button
                  type="button"
                  onClick={() => handleCopyApiKey(createdKey)}
                  className="mb-4 inline-flex items-center gap-2 text-sm text-blue-600 transition-colors hover:text-blue-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-500 dark:text-blue-400 dark:hover:text-blue-300"
                >
                  <Copy className="h-4 w-4" aria-hidden="true" />
                  复制 API Key
                </button>
                <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
                  关闭后仍可在列表中由超级管理员按需查看，请只通过安全渠道发送给外部系统负责人。
                </p>
                <button
                  onClick={() => {
                    setCreatedKey(null)
                    setShowCreateModal(false)
                  }}
                  className="w-full px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
                >
                  关闭
                </button>
              </div>
            ) : (
              <div>
                <label className="block text-sm font-medium mb-2 text-gray-900 dark:text-white">
                  密钥名称
                </label>
                <input
                  type="text"
                  value={newKeyName}
                  onChange={(e) => setNewKeyName(e.target.value)}
                  placeholder="例如：任务系统"
                  className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg mb-4 bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
                  onKeyPress={(e) => {
                    if (e.key === 'Enter') {
                      handleCreateApiKey()
                    }
                  }}
                />
                <div className="flex space-x-3">
                  <button
                    onClick={() => setShowCreateModal(false)}
                    className="flex-1 px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 transition-colors"
                  >
                    取消
                  </button>
                  <button
                    onClick={handleCreateApiKey}
                    className="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
                  >
                    创建
                  </button>
                </div>
              </div>
            )}
          </div>
        </div>
      )}
    </div>
  )
}