import { Plus, Search } from 'lucide-react'
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import { useTranslation } from '../../i18n.js'
import AIProviderListRow from './AIProviderListRow.jsx'
import AIProviderQuickEditOverlay from './AIProviderQuickEditOverlay.jsx'
import Tiptop from '../Tiptop.jsx'
import { getAIProviderState, normalizeAIProviderState, saveAIProviderState } from './aiProviderBridge.js'

const defaultProviders = []
const summaryTooltipDelay = 300
const tokenStoreUrl = 'https://aichatp.callmy.vip/app'
const tokenStoreBaseDomain = 'callmy.vip'

const cacheStrategyLabelKeys = {
  model: '基于模型能力',
  off: '强制关闭',
  '5m': '5分钟',
  '1h': '1小时',
}

function getCacheStrategyLabel(t, value) {
  const nextValue = typeof value === 'string' ? value.trim() : ''
  return t(cacheStrategyLabelKeys[nextValue] || cacheStrategyLabelKeys.model)
}

function getApiKeyPreview(value) {
  const nextValue = typeof value === 'string' ? value.trim() : ''
  if (!nextValue) {
    return ''
  }
  return nextValue.length <= 12 ? nextValue : nextValue.slice(-12)
}

function sortProviders(items) {
  return [...items].sort((left, right) => {
    if (Boolean(left.pinned) !== Boolean(right.pinned)) {
      return left.pinned ? -1 : 1
    }
    return left.name.localeCompare(right.name, 'zh-CN')
  })
}

export default function AIProviderSelector({
  providers = defaultProviders,
  currentProviderId,
  onCurrentProviderChange,
  persistSelectedProviderId = true,
  dismissSignal = 0,
}) {
  const { t } = useTranslation()
  const containerRef = useRef(null)
  const tooltipTimerRef = useRef(null)
  const [open, setOpen] = useState(false)
  const [searchValue, setSearchValue] = useState('')
  const [providerList, setProviderList] = useState(sortProviders(providers))
  const [persistedCurrentProviderId, setPersistedCurrentProviderId] = useState(providers[0]?.id || '')
  const [panelBounds, setPanelBounds] = useState(null)
  const [workspaceBounds, setWorkspaceBounds] = useState(null)
  const [dropdownMetrics, setDropdownMetrics] = useState(null)
  const [triggerRect, setTriggerRect] = useState(null)
  const [tooltipVisible, setTooltipVisible] = useState(false)
  const [tooltipTriggerRect, setTooltipTriggerRect] = useState(null)
  const [tokenStoreOpen, setTokenStoreOpen] = useState(false)
  const [tokenStoreLoading, setTokenStoreLoading] = useState(false)
  const expandLeft = triggerRect ? triggerRect.left + 400 > window.innerWidth - 16 : false
  const tooltipExpandLeft = tooltipTriggerRect ? tooltipTriggerRect.left + 280 > window.innerWidth - 16 : false
  const [editingState, setEditingState] = useState({ open: false, mode: 'edit', provider: null })
  const isControlled = typeof currentProviderId === 'string'
  const effectiveSelectedId = isControlled ? currentProviderId : persistedCurrentProviderId

  const selectedProvider = useMemo(
    () => providerList.find((item) => item.id === effectiveSelectedId) || null,
    [providerList, effectiveSelectedId],
  )
  const tokenStoreAvailable = useMemo(() => {
    try {
      const host = new URL(selectedProvider?.baseUrl || '').hostname
      return host === tokenStoreBaseDomain || host.endsWith(`.${tokenStoreBaseDomain}`)
    } catch {
      return false
    }
  }, [selectedProvider])

  const providerSummaryRows = useMemo(() => ([
    { label: t('供应商'), value: selectedProvider?.name || t('选择供应商') },
    { label: t('模型'), value: selectedProvider?.model || t('未选择模型') },
    { label: t('API兼容方式'), value: selectedProvider?.provider || 'Compatible' },
    { label: t('缓存策略'), value: getCacheStrategyLabel(t, selectedProvider?.cacheStrategy) },
    { label: 'Key', value: getApiKeyPreview(selectedProvider?.apiKey) || '-' },
  ]), [selectedProvider, t])

  const closeTooltip = useCallback(() => {
    if (tooltipTimerRef.current) {
      window.clearTimeout(tooltipTimerRef.current)
      tooltipTimerRef.current = null
    }
    setTooltipVisible(false)
  }, [])

  const handleTriggerMouseEnter = useCallback(() => {
    if (open || editingState.open) {
      return
    }
    const rect = containerRef.current?.getBoundingClientRect()
    if (rect) {
      setTooltipTriggerRect({ top: rect.top, left: rect.left, right: rect.right, bottom: rect.bottom })
    }
    if (tooltipTimerRef.current) {
      window.clearTimeout(tooltipTimerRef.current)
    }
    tooltipTimerRef.current = window.setTimeout(() => {
      setTooltipVisible(true)
      tooltipTimerRef.current = null
    }, summaryTooltipDelay)
  }, [editingState.open, open])

  const filteredProviders = useMemo(() => {
    const keyword = searchValue.trim().toLowerCase()
    const sortedProviders = sortProviders(providerList)
    if (!keyword) {
      return sortedProviders
    }
    return sortedProviders.filter((item) => {
      const haystack = `${item.name} ${item.model || ''} ${item.provider || ''}`.toLowerCase()
      return haystack.includes(keyword)
    })
  }, [providerList, searchValue])

  const pinnedProviders = useMemo(
    () => filteredProviders.filter((item) => item.pinned),
    [filteredProviders],
  )

  const normalProviders = useMemo(
    () => filteredProviders.filter((item) => !item.pinned),
    [filteredProviders],
  )

  const persistRegistryState = useCallback(async (nextProviders, nextPersistedId) => {
    const savedState = await saveAIProviderState({
      currentProviderId: nextPersistedId,
      providers: nextProviders,
    })
    const sortedProviders = sortProviders(savedState.providers)
    const sortedCurrentProviderId = savedState.currentProviderId || nextPersistedId || sortedProviders[0]?.id || ''
    setProviderList(sortedProviders)
    setPersistedCurrentProviderId(sortedCurrentProviderId)
    return {
      providers: sortedProviders,
      currentProviderId: sortedCurrentProviderId,
    }
  }, [])

  const getPersistedSelectionId = useCallback((nextProviders, preferredId) => {
    if (persistSelectedProviderId || !isControlled) {
      return preferredId
    }
    if (persistedCurrentProviderId && nextProviders.some((item) => item.id === persistedCurrentProviderId)) {
      return persistedCurrentProviderId
    }
    return nextProviders[0]?.id || ''
  }, [isControlled, persistSelectedProviderId, persistedCurrentProviderId])

  useEffect(() => {
    let cancelled = false

    getAIProviderState()
      .then(async (state) => {
        if (cancelled) {
          return
        }
        const hasPersistedProviders = Array.isArray(state.providers) && state.providers.length > 0
        const nextState = hasPersistedProviders
          ? state
          : normalizeAIProviderState({ currentProviderId: providers[0]?.id || '', providers })
        const nextProviders = sortProviders(nextState.providers)
        const nextSelectedId = nextState.currentProviderId || nextProviders[0]?.id || ''

        setProviderList(nextProviders)
        setPersistedCurrentProviderId(nextSelectedId)

        if (!hasPersistedProviders) {
          await persistRegistryState(nextProviders, nextSelectedId)
        }
      })
      .catch(async () => {
        if (cancelled) {
          return
        }
        const nextState = normalizeAIProviderState({ currentProviderId: providers[0]?.id || '', providers })
        const nextProviders = sortProviders(nextState.providers)
        const nextSelectedId = nextState.currentProviderId || nextProviders[0]?.id || ''
        setProviderList(nextProviders)
        setPersistedCurrentProviderId(nextSelectedId)
        await persistRegistryState(nextProviders, nextSelectedId)
      })

    return () => {
      cancelled = true
    }
  }, [persistRegistryState, providers])

  useEffect(() => () => closeTooltip(), [closeTooltip])

  useEffect(() => {
    if (!tooltipVisible) {
      return undefined
    }

    const updateTooltipRect = () => {
      const rect = containerRef.current?.getBoundingClientRect()
      if (!rect) {
        setTooltipVisible(false)
        return
      }
      setTooltipTriggerRect({ top: rect.top, left: rect.left, right: rect.right, bottom: rect.bottom })
    }

    updateTooltipRect()
    window.addEventListener('resize', updateTooltipRect)
    window.addEventListener('scroll', updateTooltipRect, true)

    return () => {
      window.removeEventListener('resize', updateTooltipRect)
      window.removeEventListener('scroll', updateTooltipRect, true)
    }
  }, [tooltipVisible])

  useEffect(() => {
    if (open || editingState.open) {
      closeTooltip()
    }
  }, [closeTooltip, editingState.open, open])

  useEffect(() => {
    if (!open || editingState.open) {
      return undefined
    }

    const handlePointerDown = (event) => {
      if (containerRef.current && !containerRef.current.contains(event.target)) {
        setOpen(false)
      }
    }

    window.addEventListener('pointerdown', handlePointerDown)
    return () => window.removeEventListener('pointerdown', handlePointerDown)
  }, [open, editingState.open])

  useEffect(() => {
    if (!editingState.open && !open && !tokenStoreOpen) {
      setTriggerRect(null)
      setWorkspaceBounds(null)
      return undefined
    }

    const updatePanelBounds = () => {
      const root = containerRef.current?.closest('[data-ai-panel-root="true"]')
      const workspaceRoot = containerRef.current?.closest('[data-ai-workspace-root="true"]')
      const chatStage = root?.querySelector('[data-ai-chat-stage="true"]')
      const composerInputZone = root?.querySelector('[data-ai-composer-input-zone="true"]')
      const fallbackPanel = root || chatStage || composerInputZone

      if (!fallbackPanel) {
        setPanelBounds(null)
        setWorkspaceBounds(null)
        setDropdownMetrics(null)
        return
      }

      const fallbackRect = fallbackPanel.getBoundingClientRect()
      const chatRect = chatStage?.getBoundingClientRect()
      const composerRect = composerInputZone?.getBoundingClientRect()

      const top = Math.min(chatRect?.top ?? fallbackRect.top, composerRect?.top ?? fallbackRect.top)
      const left = Math.min(chatRect?.left ?? fallbackRect.left, composerRect?.left ?? fallbackRect.left)
      const right = Math.max(chatRect?.right ?? fallbackRect.right, composerRect?.right ?? fallbackRect.right)
      const bottom = Math.max(chatRect?.bottom ?? fallbackRect.bottom, composerRect?.bottom ?? fallbackRect.bottom)

      setPanelBounds({
        top,
        left,
        width: right - left,
        height: bottom - top,
      })

      const aiPanelRect = root?.getBoundingClientRect()
      const workspaceRect = workspaceRoot?.getBoundingClientRect()
      if (aiPanelRect && workspaceRect) {
        const aiPanelOnRight = aiPanelRect.left >= workspaceRect.left + workspaceRect.width / 2
        const nextLeft = aiPanelOnRight ? workspaceRect.left : aiPanelRect.right
        const nextRight = aiPanelOnRight ? aiPanelRect.left : workspaceRect.right
        const nextWidth = Math.max(0, nextRight - nextLeft)
        if (nextWidth > 0 && workspaceRect.height > 0) {
          setWorkspaceBounds({
            top: workspaceRect.top,
            left: nextLeft,
            width: nextWidth,
            height: workspaceRect.height,
          })
        } else {
          setWorkspaceBounds(null)
        }
      } else {
        setWorkspaceBounds(null)
      }

      const triggerRectData = containerRef.current?.getBoundingClientRect()
      if (triggerRectData) {
        const panelWidth = Math.max(triggerRectData.width, Math.min(right - left, window.innerWidth - 32))
        setDropdownMetrics({
          width: panelWidth,
          maxHeight: Math.max(120, triggerRectData.top - top - 8),
        })
        setTriggerRect({ top: triggerRectData.top, left: triggerRectData.left, right: triggerRectData.right, bottom: triggerRectData.bottom })
      }
    }

    updatePanelBounds()
    window.addEventListener('resize', updatePanelBounds)
    window.addEventListener('scroll', updatePanelBounds, true)

    return () => {
      window.removeEventListener('resize', updatePanelBounds)
      window.removeEventListener('scroll', updatePanelBounds, true)
    }
  }, [editingState.open, open, tokenStoreOpen])

  useEffect(() => {
    closeTooltip()
    setOpen(false)
    setTokenStoreOpen(false)
    setTokenStoreLoading(false)
    setTriggerRect(null)
    setTooltipTriggerRect(null)
    setDropdownMetrics(null)
    setPanelBounds(null)
    setWorkspaceBounds(null)
    setEditingState({ open: false, mode: 'edit', provider: null })
  }, [closeTooltip, dismissSignal])

  useEffect(() => {
    if (!tokenStoreOpen) {
      return undefined
    }

    const handleKeyDown = (event) => {
      if (event.key === 'Escape') {
        setTokenStoreOpen(false)
      }
    }

    window.addEventListener('keydown', handleKeyDown)
    return () => window.removeEventListener('keydown', handleKeyDown)
  }, [tokenStoreOpen])

  const notifySelectionChange = useCallback(async (providerId) => {
    if (typeof onCurrentProviderChange === 'function') {
      await onCurrentProviderChange(providerId)
    }
  }, [onCurrentProviderChange])

  const handleOpenEditor = (mode, provider = null) => {
    setOpen(false)
    setTokenStoreOpen(false)
    setTokenStoreLoading(false)
    setEditingState({ open: true, mode, provider })
  }

  const handleSelectProvider = async (providerId) => {
    setOpen(false)
    if (!isControlled || persistSelectedProviderId) {
      await persistRegistryState(providerList, providerId)
    } else if (!isControlled) {
      setPersistedCurrentProviderId(providerId)
    }
    await notifySelectionChange(providerId)
  }

  const handleSaveProvider = async (draft) => {
    const savedProvider = {
      id: draft.id || `ai-provider-${Date.now()}`,
      name: draft.name?.trim() || t('未命名供应商'),
      provider: draft.provider?.trim() || 'Compatible',
      model: draft.model?.trim() || t('未选择模型'),
      baseUrl: draft.baseUrl?.trim() || '',
      apiKey: draft.apiKey?.trim() || '',
      cacheStrategy: draft.cacheStrategy || 'model',
      webSearchEnabled: Boolean(draft.webSearchEnabled),
      dedicatedWebSearchEnabled: Boolean(draft.dedicatedWebSearchEnabled),
      dedicatedWebSearchProviderId: draft.dedicatedWebSearchProviderId || '',
      dedicatedProxyEnabled: Boolean(draft.dedicatedProxyEnabled),
      dedicatedProxyId: draft.dedicatedProxyId || '',
      reasoningEffort: draft.reasoningEffort || 'disable',
      enableReasoningEffort: Boolean(draft.enableReasoningEffort),
      modelMaxTokens: Number.isFinite(Number(draft.modelMaxTokens)) && Number(draft.modelMaxTokens) > 0
        ? Math.floor(Number(draft.modelMaxTokens))
        : 0,
      modelMaxThinkingTokens: Number.isFinite(Number(draft.modelMaxThinkingTokens)) && Number(draft.modelMaxThinkingTokens) > 0
        ? Math.floor(Number(draft.modelMaxThinkingTokens))
        : 0,
      pinned: Boolean(draft.pinned),
      updatedAt: Date.now(),
    }

    const nextBaseProviders = providerList.some((item) => item.id === savedProvider.id)
      ? providerList.map((item) => (item.id === savedProvider.id ? { ...item, ...savedProvider } : item))
      : [savedProvider, ...providerList]

    const normalizedState = normalizeAIProviderState({
      currentProviderId: getPersistedSelectionId(nextBaseProviders, savedProvider.id),
      providers: nextBaseProviders,
    })
    const nextProviders = sortProviders(normalizedState.providers)

    await persistRegistryState(nextProviders, normalizedState.currentProviderId)
    setOpen(false)
    setEditingState({ open: false, mode: 'edit', provider: null })
    await notifySelectionChange(savedProvider.id)
  }

  const handleDeleteProvider = async (provider) => {
    if (!provider) {
      return
    }
    const confirmed = await window.luminDialog?.confirm(`${t('确定删除供应商')}「${provider.name || provider.provider || provider.id}」？${t('此操作不可撤销')}`)
    if (!confirmed) {
      return
    }

    const nextBaseProviders = providerList.filter((item) => item.id !== provider.id)
    const fallbackSelectedId = nextBaseProviders[0]?.id || ''
    const normalizedState = normalizeAIProviderState({
      currentProviderId: getPersistedSelectionId(
        nextBaseProviders,
        persistedCurrentProviderId === provider.id ? fallbackSelectedId : persistedCurrentProviderId,
      ),
      providers: nextBaseProviders,
    })
    const nextProviders = sortProviders(normalizedState.providers)

    await persistRegistryState(nextProviders, normalizedState.currentProviderId)
    setOpen(false)
    setEditingState({ open: false, mode: 'edit', provider: null })

    if (effectiveSelectedId === provider.id) {
      await notifySelectionChange(fallbackSelectedId)
    }
  }

  const handleTogglePin = async (item) => {
    const nextBaseProviders = providerList.map((entry) => (
      entry.id === item.id ? { ...entry, pinned: !entry.pinned, updatedAt: Date.now() } : entry
    ))
    const normalizedState = normalizeAIProviderState({
      currentProviderId: getPersistedSelectionId(nextBaseProviders, persistedCurrentProviderId || nextBaseProviders[0]?.id || ''),
      providers: nextBaseProviders,
    })
    await persistRegistryState(sortProviders(normalizedState.providers), normalizedState.currentProviderId)
  }

  const renderRows = (items) => (
    <div>
      {items.map((item) => (
        <AIProviderListRow
          key={item.id}
          item={item}
          active={item.id === effectiveSelectedId}
          onSelect={() => handleSelectProvider(item.id)}
          onEdit={() => handleOpenEditor('edit', item)}
          onTogglePin={() => handleTogglePin(item)}
        />
      ))}
    </div>
  )

  const tokenStoreViewportBounds = workspaceBounds || panelBounds

  return (
    <>
      <div ref={containerRef} style={{ position: 'relative', flexShrink: 0, overflow: 'visible', zIndex: open ? 40 : 'auto' }}>
        <button
          type="button"
          onClick={() => {
            closeTooltip()
            setOpen((prev) => !prev)
          }}
          onMouseEnter={handleTriggerMouseEnter}
          onMouseLeave={closeTooltip}
          onFocus={handleTriggerMouseEnter}
          onBlur={closeTooltip}
          style={{
            height: 28,
            display: 'inline-flex',
            alignItems: 'center',
            gap: 6,
            padding: '0 10px',
            borderRadius: 8,
            border: `1px solid ${open ? 'var(--accent-border)' : 'var(--border)'}`,
            background: open ? 'rgba(var(--accent-rgb), 0.12)' : 'transparent',
            color: 'var(--text-primary)',
            fontSize: 12,
            fontWeight: 500,
            transition: 'var(--transition)',
            whiteSpace: 'nowrap',
          }}
        >
          <span>{selectedProvider?.name || t('选择供应商')}</span>
        </button>

        {tooltipVisible && tooltipTriggerRect && !open && !editingState.open ? (
          <div
            style={{
              position: 'fixed',
              ...(tooltipExpandLeft
                ? { right: Math.max(16, window.innerWidth - tooltipTriggerRect.right) }
                : { left: Math.max(16, tooltipTriggerRect.left) }),
              bottom: window.innerHeight - tooltipTriggerRect.top + 8,
              width: 'max-content',
              maxWidth: Math.max(180, (tooltipExpandLeft ? tooltipTriggerRect.right : window.innerWidth - tooltipTriggerRect.left) - 16),
              padding: '10px 12px',
              borderRadius: 8,
              border: '1px solid var(--border)',
              background: 'var(--surface-overlay)',
              boxShadow: 'var(--shadow-xl)',
              display: 'grid',
              gap: 6,
              zIndex: 10001,
              pointerEvents: 'none',
            }}
          >
            {providerSummaryRows.map((row) => (
              <div
                key={row.label}
                style={{
                  display: 'flex',
                  alignItems: 'flex-start',
                  gap: 8,
                  minWidth: 0,
                }}
              >
                <span
                  style={{
                    flexShrink: 0,
                    fontSize: 11,
                    color: 'var(--text-tertiary)',
                    whiteSpace: 'nowrap',
                  }}
                >
                  {row.label}
                </span>
                <span
                  style={{
                    minWidth: 0,
                    maxWidth: '100%',
                    fontSize: 11.5,
                    color: 'var(--text-primary)',
                    lineHeight: 1.45,
                    overflowWrap: 'anywhere',
                  }}
                >
                  {row.value}
                </span>
              </div>
            ))}
            <div
              style={{
                position: 'absolute',
                bottom: -6,
                ...(tooltipExpandLeft ? { right: 20 } : { left: 20 }),
                width: 10,
                height: 10,
                borderRight: '1px solid var(--border)',
                borderBottom: '1px solid var(--border)',
                background: 'var(--surface-overlay)',
                transform: 'rotate(45deg)',
              }}
            />
          </div>
        ) : null}

        {open && triggerRect && (
          <div
            style={{
              position: 'fixed',
              ...(panelBounds ? { left: panelBounds.left } : (expandLeft ? { right: window.innerWidth - triggerRect.right } : { left: triggerRect.left })),
              bottom: window.innerHeight - triggerRect.top + 8,
              width: dropdownMetrics?.width ?? 400,
              maxWidth: dropdownMetrics?.width ? `${dropdownMetrics.width}px` : 'min(400px, calc(100vw - 32px))',
              maxHeight: dropdownMetrics?.maxHeight ?? 320,
              borderRadius: 10,
              border: '1px solid var(--border)',
              background: 'var(--surface-overlay)',
              boxShadow: 'var(--shadow-xl)',
              display: 'flex',
              flexDirection: 'column',
              overflow: 'hidden',
              overflowX: 'hidden',
              boxSizing: 'border-box',
              zIndex: 10000,
            }}
          >
            <div style={{ padding: 10, display: 'grid', gap: 8, borderBottom: '1px solid var(--border-subtle)' }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                <div style={{ fontSize: 12, fontWeight: 700, color: 'var(--text-primary)' }}>{t('供应商列表')}</div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  {tokenStoreAvailable && (
                    <button
                      type="button"
                      aria-label={t('打开 Token 中心')}
                      onClick={() => {
                        closeTooltip()
                        setOpen(false)
                        setTokenStoreLoading(true)
                        setTokenStoreOpen(true)
                      }}
                      style={{
                        height: 28,
                        display: 'inline-flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                        padding: '0 10px',
                        borderRadius: 8,
                        border: `1px solid ${tokenStoreOpen ? 'var(--accent-border)' : 'var(--border)'}`,
                        background: tokenStoreOpen ? 'rgba(var(--accent-rgb), 0.12)' : 'transparent',
                        color: tokenStoreOpen ? 'var(--accent)' : 'var(--text-secondary)',
                        fontSize: 12,
                        fontWeight: 600,
                        transition: 'var(--transition)',
                        whiteSpace: 'nowrap',
                      }}
                    >
                      {t('Token 中心')}
                    </button>
                  )}
                  <Tiptop text={t('添加供应商')}>
                    <button
                      type="button"
                      aria-label={t('添加供应商')}
                      onClick={() => handleOpenEditor('create', null)}
                      style={{
                        width: 28,
                        height: 28,
                        display: 'inline-flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                        borderRadius: 0,
                        border: '1px solid var(--border)',
                        background: 'transparent',
                        color: 'var(--text-secondary)',
                        transition: 'var(--transition)',
                      }}
                    >
                      <Plus size={14} />
                    </button>
                  </Tiptop>
                </div>
              </div>

              <div style={{ position: 'relative' }}>
                <Search size={14} style={{ position: 'absolute', left: 10, top: 10, color: 'var(--text-tertiary)' }} />
                <input
                  value={searchValue}
                  onChange={(event) => setSearchValue(event.target.value)}
                  placeholder={t('搜索...')}
                  style={{
                    width: '100%',
                    height: 36,
                    borderRadius: 0,
                    border: '1px solid var(--border)',
                    background: 'var(--surface-base)',
                    color: 'var(--text-primary)',
                    padding: '0 10px 0 32px',
                    boxSizing: 'border-box',
                    outline: 'none',
                  }}
                />
              </div>
            </div>

            <div style={{ flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column', overflow: 'hidden', overflowX: 'hidden' }}>
              {filteredProviders.length === 0 ? (
                <div style={{ flex: 1, minHeight: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24, textAlign: 'center', fontSize: 12, color: 'var(--text-tertiary)' }}>
                  {t('没有匹配的供应商')}
                </div>
              ) : (
                <>
                  {pinnedProviders.length > 0 ? (
                    <div style={{ flexShrink: 0, borderBottom: normalProviders.length > 0 ? '1px solid var(--border-subtle)' : 'none', background: 'var(--surface-overlay)', overflowX: 'hidden' }}>
                      {renderRows(pinnedProviders)}
                    </div>
                  ) : null}
                  <div style={{ flex: 1, minHeight: 0, overflowY: 'auto', overflowX: 'hidden' }}>
                    {normalProviders.length > 0 ? renderRows(normalProviders) : null}
                  </div>
                </>
              )}
            </div>
          </div>
        )}
      </div>

      {tokenStoreOpen && tokenStoreViewportBounds ? (
        <div
          onClick={() => setTokenStoreOpen(false)}
          style={{
            position: 'fixed',
            top: tokenStoreViewportBounds.top,
            left: tokenStoreViewportBounds.left,
            width: tokenStoreViewportBounds.width,
            height: tokenStoreViewportBounds.height,
            maxWidth: '100vw',
            maxHeight: '100vh',
            background: 'rgba(5, 10, 18, 0.62)',
            backdropFilter: 'blur(4px)',
            display: 'flex',
            alignItems: 'stretch',
            justifyContent: 'center',
            zIndex: 10020,
          }}
        >
          <div
            onClick={(event) => event.stopPropagation()}
            style={{
              width: '100%',
              height: '100%',
              background: 'var(--surface-base)',
              border: '1px solid var(--border)',
              display: 'flex',
              flexDirection: 'column',
              overflow: 'hidden',
            }}
          >
            <div style={{ height: 46, padding: '0 12px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, borderBottom: '1px solid var(--border)', flexShrink: 0 }}>
              <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--text-primary)' }}>{t('Token 中心')}</div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <button
                  type="button"
                  onClick={() => {
                    setTokenStoreOpen(false)
                    setTokenStoreLoading(false)
                  }}
                  aria-label={t('关闭')}
                  style={{
                    width: 30,
                    height: 30,
                    display: 'inline-flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    borderRadius: 8,
                    border: '1px solid transparent',
                    background: 'transparent',
                    color: 'var(--text-secondary)',
                    fontSize: 18,
                    lineHeight: 1,
                    transition: 'var(--transition)',
                  }}
                >
                  ×
                </button>
              </div>
            </div>
            <div style={{ position: 'relative', flex: 1, minHeight: 0, background: 'var(--surface-base)', overflow: 'hidden' }}>
              {tokenStoreLoading ? (
                <div
                  style={{
                    position: 'absolute',
                    inset: 0,
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    padding: 24,
                    background: 'linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(10, 15, 26, 0.98))',
                    zIndex: 1,
                  }}
                >
                  <div
                    style={{
                      width: 'min(560px, 100%)',
                      padding: '28px 30px',
                      borderRadius: 18,
                      border: '1px solid var(--border)',
                      background: 'rgba(17, 24, 39, 0.92)',
                      boxShadow: 'var(--shadow-xl)',
                      display: 'grid',
                      gap: 14,
                      textAlign: 'center',
                    }}
                  >
                    <div style={{ fontSize: 24, lineHeight: 1 }}>🌐</div>
                    <div style={{ fontSize: 20, fontWeight: 700, color: 'var(--text-primary)' }}>{t('Token 中心正在加载')}</div>
                    <div style={{ fontSize: 13, lineHeight: 1.8, color: 'var(--text-secondary)' }}>
                      {t('如果页面长时间没有显示内容,可能需要科学上网后才能正常访问。')}
                    </div>
                    <div style={{ fontSize: 12, lineHeight: 1.7, color: 'var(--text-tertiary)' }}>
                      {t('请稍候片刻,系统会在页面加载完成后自动进入 Token 中心。')}
                    </div>
                  </div>
                </div>
              ) : null}
              <iframe
                src={tokenStoreUrl}
                title={t('Token 中心')}
                referrerPolicy="no-referrer"
                onLoad={() => setTokenStoreLoading(false)}
                style={{
                  width: '100%',
                  height: '100%',
                  border: 'none',
                  background: '#ffffff',
                  display: 'block',
                  opacity: tokenStoreLoading ? 0 : 1,
                  transition: 'opacity 0.2s ease',
                }}
              />
            </div>
          </div>
        </div>
      ) : null}

      <AIProviderQuickEditOverlay
        open={editingState.open}
        mode={editingState.mode}
        provider={editingState.provider}
        providers={providerList}
        panelBounds={panelBounds}
        onClose={() => setEditingState({ open: false, mode: 'edit', provider: null })}
        onSave={handleSaveProvider}
        onDelete={handleDeleteProvider}
      />
    </>
  )
}