import { useMemo, useState, type ReactNode } from 'react'
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
import { AnimatePresence } from 'framer-motion'
import {
  Activity,
  Crown,
  Layers3,
  RefreshCw,
  Repeat,
  Search,
  Settings2,
  TrendingDown,
  TrendingUp,
} from 'lucide-react'
import { PageHeader } from '@/components/PageHeader'
import { EmptyState } from '@/components/EmptyState'
import { AnalysisConfigDialog, PresetFetchState, type AnalysisFieldConfig } from '@/components/analysis-shared'
import { StockPreviewDialog } from '@/components/StockPreviewDialog'
import { RpsRotationDialog } from '@/components/RpsRotationDialog'
import { api, type MarketSnapshotRow } from '@/lib/api'
import { QK } from '@/lib/queryKeys'
import { storage } from '@/lib/storage'
import { fmtBigNum, fmtPct, priceColorClass } from '@/lib/format'
import { cn } from '@/lib/cn'
import { resolveDimension, type DimensionGroup, type StockRow } from '@/lib/analysis-adapter'

const KEYWORDS = ['concept', '概念', 'theme', '题材', '板块']
const CANDIDATE_FIELDS = ['concept', '概念', 'theme', '题材', '板块', 'concept_name', '概念名称']
const PAGE_LIMIT = 12000
const MAX_RENDERED_CONCEPTS = 120
const MAX_RENDERED_STOCKS = 160

type SortMode = 'heat' | 'avgPct' | 'leader' | 'amount' | 'down'

interface EnrichedStock extends MarketSnapshotRow {
  leaderScore: number
  leaderParts: {
    momentum: number
    turnover: number
    amount: number
    cap: number
    volume: number
    boards: number
  }
}

interface ConceptStat {
  key: string
  stocks: EnrichedStock[]
  count: number
  avgPct: number | null
  medianPct: number | null
  upCount: number
  downCount: number
  flatCount: number
  upRate: number
  strongCount: number
  weakCount: number
  totalAmount: number
  avgTurnover: number | null
  avgVolRatio: number | null
  leader: EnrichedStock | null
  heatScore: number
  riskScore: number
}

function loadConfig(): AnalysisFieldConfig {
  return storage.conceptAnalysisConfig.get({}) as AnalysisFieldConfig
}

function saveConfig(c: AnalysisFieldConfig) {
  storage.conceptAnalysisConfig.set(c)
}

function pickBestConfig(
  configs: { id: string; label: string; description?: string; fields: { name: string; label: string }[] }[],
): string {
  let best = ''
  let bestScore = 0
  for (const c of configs) {
    const haystack = [c.id, c.label, c.description ?? '', ...c.fields.flatMap(f => [f.name, f.label])].join(' ').toLowerCase()
    const score = KEYWORDS.reduce((n, k) => n + (haystack.includes(k) ? 1 : 0), 0)
    if (score > bestScore) {
      bestScore = score
      best = c.id
    }
  }
  return best
}

function symbolKeys(symbol: unknown): string[] {
  const raw = String(symbol ?? '').trim()
  if (!raw) return []
  const plain = raw.replace(/\.\w+$/, '')
  return Array.from(new Set([raw, plain]))
}

function buildMarketMap(rows: MarketSnapshotRow[]) {
  const map = new Map<string, MarketSnapshotRow>()
  for (const r of rows) {
    for (const key of symbolKeys(r.symbol)) map.set(key, r)
  }
  return map
}

function clamp01(v: number) {
  if (!Number.isFinite(v)) return 0
  return Math.max(0, Math.min(1, v))
}

function num(v: unknown): number | null {
  return typeof v === 'number' && Number.isFinite(v) ? v : null
}

function avg(values: number[]) {
  return values.length ? values.reduce((a, b) => a + b, 0) / values.length : null
}

function median(values: number[]) {
  if (!values.length) return null
  const sorted = [...values].sort((a, b) => a - b)
  const mid = Math.floor(sorted.length / 2)
  return sorted.length % 2 ? sorted[mid] : (sorted[mid - 1] + sorted[mid]) / 2
}

function leaderScore(stock: MarketSnapshotRow) {
  const pct = num(stock.change_pct) ?? 0
  const turnover = num(stock.turnover_rate) ?? 0
  const amount = num(stock.amount) ?? 0
  const cap = num(stock.float_market_cap) ?? num(stock.market_cap) ?? 0
  const volRatio = num(stock.vol_ratio_5d) ?? 1
  const boards = num(stock.consecutive_limit_ups) ?? 0

  const parts = {
    momentum: clamp01((pct + 0.02) / 0.12),
    turnover: clamp01(Math.log1p(Math.max(turnover, 0)) / Math.log1p(30)),
    amount: clamp01(Math.log1p(Math.max(amount, 0)) / Math.log1p(20_000_000_000)),
    cap: clamp01(Math.log1p(Math.max(cap, 0)) / Math.log1p(300_000_000_000)),
    volume: clamp01((volRatio - 1) / 4),
    boards: clamp01(boards / 5),
  }

  const score = (
    parts.momentum * 0.35 +
    parts.turnover * 0.22 +
    parts.amount * 0.18 +
    parts.cap * 0.15 +
    parts.volume * 0.07 +
    parts.boards * 0.03
  ) * 100

  return { score, parts }
}

function enrichStock(stock: StockRow, marketMap: Map<string, MarketSnapshotRow>): EnrichedStock {
  const market = symbolKeys(stock.symbol ?? stock.code).map(k => marketMap.get(k)).find(Boolean) ?? {}
  const merged = { ...stock, ...market } as MarketSnapshotRow & StockRow
  const ls = leaderScore(merged)
  return {
    ...merged,
    symbol: String(merged.symbol ?? stock.symbol ?? stock.code ?? ''),
    name: merged.name ?? String(stock.name ?? stock['股票简称'] ?? ''),
    leaderScore: ls.score,
    leaderParts: ls.parts,
  }
}

function calcConceptStat(group: DimensionGroup, marketMap: Map<string, MarketSnapshotRow>): ConceptStat {
  const seen = new Set<string>()
  const stocks = group.stocks
    .map(s => enrichStock(s, marketMap))
    .filter(s => {
      const key = String(s.symbol ?? '')
      if (!key) return false
      if (seen.has(key)) return false
      seen.add(key)
      return true
    })

  const pctValues = stocks.map(s => num(s.change_pct)).filter((v): v is number => v != null)
  const turnoverValues = stocks.map(s => num(s.turnover_rate)).filter((v): v is number => v != null)
  const volValues = stocks.map(s => num(s.vol_ratio_5d)).filter((v): v is number => v != null)
  const totalAmount = stocks.reduce((sum, s) => sum + (num(s.amount) ?? 0), 0)
  const upCount = pctValues.filter(v => v > 0).length
  const downCount = pctValues.filter(v => v < 0).length
  const flatCount = Math.max(0, stocks.length - upCount - downCount)
  const strongCount = pctValues.filter(v => v >= 0.05).length
  const weakCount = pctValues.filter(v => v <= -0.05).length
  const leader = stocks.length ? [...stocks].sort((a, b) => b.leaderScore - a.leaderScore)[0] : null
  const avgPct = avg(pctValues)
  const medianPct = median(pctValues)
  const upRate = pctValues.length ? upCount / pctValues.length : 0
  const amountScore = clamp01(Math.log1p(totalAmount) / Math.log1p(80_000_000_000))
  const strongScore = stocks.length ? clamp01(strongCount / Math.max(1, stocks.length * 0.18)) : 0
  const leaderPart = clamp01((leader?.leaderScore ?? 0) / 100)
  const avgPart = clamp01(((avgPct ?? 0) + 0.02) / 0.09)
  const upPart = clamp01((upRate - 0.35) / 0.55)

  const heatScore = (avgPart * 0.38 + upPart * 0.2 + strongScore * 0.16 + amountScore * 0.12 + leaderPart * 0.14) * 100
  const riskScore = (clamp01((-(avgPct ?? 0) + 0.01) / 0.08) * 0.55 + clamp01(weakCount / Math.max(1, stocks.length * 0.18)) * 0.45) * 100

  return {
    key: group.key,
    stocks,
    count: stocks.length,
    avgPct,
    medianPct,
    upCount,
    downCount,
    flatCount,
    upRate,
    strongCount,
    weakCount,
    totalAmount,
    avgTurnover: avg(turnoverValues),
    avgVolRatio: avg(volValues),
    leader,
    heatScore,
    riskScore,
  }
}

function statSort(mode: SortMode) {
  return (a: ConceptStat, b: ConceptStat) => {
    switch (mode) {
      case 'avgPct': return (b.avgPct ?? -Infinity) - (a.avgPct ?? -Infinity)
      case 'leader': return (b.leader?.leaderScore ?? -Infinity) - (a.leader?.leaderScore ?? -Infinity)
      case 'amount': return b.totalAmount - a.totalAmount
      case 'down': return (a.avgPct ?? Infinity) - (b.avgPct ?? Infinity)
      case 'heat':
      default: return b.heatScore - a.heatScore
    }
  }
}

export function ConceptAnalysis() {
  const [fieldConfig, setFieldConfig] = useState<AnalysisFieldConfig>(loadConfig)
  const [showConfig, setShowConfig] = useState(false)
  const [search, setSearch] = useState('')
  const [selectedKey, setSelectedKey] = useState<string | null>(null)
  const [sortMode, setSortMode] = useState<SortMode>('heat')
  const [previewSymbol, setPreviewSymbol] = useState<string | null>(null)
  const [previewName, setPreviewName] = useState<string>('')
  const [showRps, setShowRps] = useState(false)

  const configsQuery = useQuery({ queryKey: QK.extData, queryFn: api.extDataList })
  const availableConfigs = configsQuery.data?.items ?? []
  // 用户配置的 configId 可能已失效 (扩展数据被删除), 此时回退到自动选择,
  // 避免用失效 ID 请求接口报错; 用户仍可点配置按钮重新选择。
  const preferredConfigId = fieldConfig.configId || pickBestConfig(availableConfigs)
  const preferredConfig = availableConfigs.find(c => c.id === preferredConfigId)
  const activeConfigId = preferredConfig ? preferredConfigId : pickBestConfig(availableConfigs)
  const activeConfig = availableConfigs.find(c => c.id === activeConfigId)

  const rowsQuery = useQuery({
    queryKey: QK.extDataRows(activeConfigId, undefined, PAGE_LIMIT),
    queryFn: () => api.extDataRows(activeConfigId, { limit: PAGE_LIMIT }),
    enabled: !!activeConfigId,
  })

  // 内置概念预设 (ext_gn_ths) 手动获取数据
  const PRESET_CONCEPT_ID = 'ext_gn_ths'
  const queryClient = useQueryClient()
  const fetchMutation = useMutation({
    mutationFn: () => api.extDataPresetFetch(PRESET_CONCEPT_ID),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: QK.extData })
      queryClient.invalidateQueries({ queryKey: QK.extDataRows(PRESET_CONCEPT_ID, undefined, PAGE_LIMIT) })
    },
  })
  // 是否处于「内置概念预设存在但无数据」状态 → 显示获取按钮
  const needsConceptFetch =
    !!activeConfig && activeConfig.id === PRESET_CONCEPT_ID &&
    !rowsQuery.isLoading && (rowsQuery.data?.total ?? 0) === 0

  const marketQuery = useQuery({
    queryKey: QK.marketSnapshot,
    queryFn: api.marketSnapshot,
    staleTime: 60_000,
  })

  const marketMap = useMemo(() => buildMarketMap(marketQuery.data?.rows ?? []), [marketQuery.data?.rows])
  const resolved = useMemo(
    () => resolveDimension(rowsQuery.data, activeConfig, fieldConfig.dimensionField ? [fieldConfig.dimensionField, ...CANDIDATE_FIELDS] : CANDIDATE_FIELDS),
    [rowsQuery.data, activeConfig, fieldConfig.dimensionField],
  )

  const stats = useMemo(() => {
    return resolved.groups
      .map(g => calcConceptStat(g, marketMap))
      .filter(s => s.count > 0)
  }, [resolved.groups, marketMap])

  const filteredStats = useMemo(() => {
    const q = search.trim().toLowerCase()
    const base = q ? stats.filter(s => s.key.toLowerCase().includes(q)) : stats
    return [...base].sort(statSort(sortMode))
  }, [stats, search, sortMode])

  const selected = filteredStats.find(s => s.key === selectedKey) ?? filteredStats[0] ?? null
  const leading = useMemo(() => [...stats].sort(statSort('heat')).slice(0, 10), [stats])
  const falling = useMemo(() => [...stats].sort(statSort('down')).slice(0, 10), [stats])
  const activeConcept = useMemo(() => [...stats].sort(statSort('amount'))[0] ?? null, [stats])
  const conceptBreadth = useMemo(() => {
    const priced = stats.filter(s => s.avgPct != null)
    return {
      up: priced.filter(s => (s.avgPct ?? 0) > 0).length,
      down: priced.filter(s => (s.avgPct ?? 0) < 0).length,
      flat: priced.filter(s => s.avgPct === 0).length,
    }
  }, [stats])

  const totalSymbols = useMemo(() => {
    const set = new Set<string>()
    stats.forEach(s => s.stocks.forEach(st => { if (st.symbol) set.add(st.symbol) }))
    return set.size
  }, [stats])

  const handleSaveConfig = (c: AnalysisFieldConfig) => {
    setFieldConfig(c)
    saveConfig(c)
    setSelectedKey(null)
  }

  if (configsQuery.isLoading) {
    return <div className="flex h-full items-center justify-center"><RefreshCw className="h-5 w-5 animate-spin text-muted" /></div>
  }

  if (!activeConfig) {
    // 极端情况: 无任何概念配置。仍提供一键获取内置概念数据入口
    return (
      <>
        <div className="flex h-full flex-col">
          <PageHeader
            title="概念分析"
            right={
              <button onClick={() => setShowConfig(true)} className="p-1.5 text-muted hover:bg-surface hover:text-accent" title="配置数据源">
                <Settings2 className="h-4 w-4" />
              </button>
            }
          />
          <PresetFetchState
            title="暂无概念数据"
            hint="从同花顺获取概念分类数据后即可使用概念分析"
            isLoading={fetchMutation.isPending}
            error={fetchMutation.error}
            onFetch={() => fetchMutation.mutate()}
          />
        </div>
        <AnimatePresence>
          {showConfig && <AnalysisConfigDialog currentConfig={fieldConfig} onSave={handleSaveConfig} onClose={() => setShowConfig(false)} />}
        </AnimatePresence>
      </>
    )
  }

  return (
    <>
      <PageHeader
        title="概念分析"
        subtitle={`${marketQuery.data?.as_of ?? rowsQuery.data?.date ?? '最新'} · ${stats.length} 个概念 · ${totalSymbols} 只标的`}
        right={
          <div className="flex items-center gap-1">
            {/* RPS 轮动: 打开涨幅轮动矩阵对话框 */}
            <button
              onClick={() => setShowRps(true)}
              className="inline-flex items-center gap-1 rounded-btn border border-amber-400/40 bg-amber-400/15 px-2.5 py-1.5 text-[11px] text-amber-400 font-medium transition-colors hover:bg-amber-400/25 hover:border-amber-400/60"
              title="概念涨幅轮动矩阵"
            >
              <Repeat className="h-3.5 w-3.5" />涨幅RPS轮动分析
            </button>
            <button
              onClick={() => { rowsQuery.refetch(); marketQuery.refetch() }}
              disabled={rowsQuery.isFetching || marketQuery.isFetching}
              className="p-1.5 text-muted hover:bg-surface disabled:opacity-50"
              title="刷新"
            >
              <RefreshCw className={cn('h-4 w-4', (rowsQuery.isFetching || marketQuery.isFetching) && 'animate-spin')} />
            </button>
            <button onClick={() => setShowConfig(true)} className="p-1.5 text-muted hover:bg-surface hover:text-accent" title="配置数据源">
              <Settings2 className="h-4 w-4" />
            </button>
          </div>
        }
      />

      <div className="min-h-full bg-[radial-gradient(circle_at_12%_0%,rgba(59,130,246,0.12),transparent_28%),radial-gradient(circle_at_85%_8%,rgba(244,63,94,0.08),transparent_28%)] px-6 py-5">
        <div className="mx-auto max-w-[1440px] space-y-5">
          <HeroPanel leading={leading[0]} falling={falling[0]} activeConcept={activeConcept} conceptBreadth={conceptBreadth} />

          <MarketPulse
            leading={leading}
            falling={falling}
            selectedKey={selected?.key ?? null}
            onSelect={setSelectedKey}
            onStockClick={(sym, name) => { setPreviewSymbol(sym); setPreviewName(name ?? '') }}
          />

          {stats.length > 0 ? (
            <div className="grid grid-cols-1 gap-4 xl:grid-cols-[18rem_1fr]">
              <ConceptRail
                stats={filteredStats.slice(0, MAX_RENDERED_CONCEPTS)}
                selectedKey={selected?.key ?? null}
                search={search}
                sortMode={sortMode}
                onSearch={v => { setSearch(v); setSelectedKey(null) }}
                onSort={setSortMode}
                onSelect={setSelectedKey}
              />
              <ConceptFocus stat={selected} onStockClick={(sym, name) => { setPreviewSymbol(sym); setPreviewName(name ?? '') }} />
            </div>
          ) : rowsQuery.isLoading ? (
            <div className="rounded-2xl border border-border bg-surface px-6 py-16 text-center text-sm text-muted">正在计算概念强度...</div>
          ) : needsConceptFetch ? (
            <PresetFetchState
              title="未获取概念数据"
              hint="内置概念数据源已就绪,点击下方按钮从同花顺获取概念分类数据"
              isLoading={fetchMutation.isPending}
              error={fetchMutation.error}
              onFetch={() => fetchMutation.mutate()}
            />
          ) : (
            <EmptyState icon={Layers3} title="未匹配到概念数据" hint={resolved.hint || '请检查扩展数据是否包含概念/题材相关字段'} />
          )}
        </div>
      </div>

      <AnimatePresence>
        {showConfig && <AnalysisConfigDialog currentConfig={fieldConfig} onSave={handleSaveConfig} onClose={() => setShowConfig(false)} />}
      </AnimatePresence>

      {previewSymbol && (
        <StockPreviewDialog
          symbol={previewSymbol}
          name={previewName}
          onClose={() => { setPreviewSymbol(null); setPreviewName('') }}
        />
      )}

      <AnimatePresence>
        {showRps && <RpsRotationDialog onClose={() => setShowRps(false)} />}
      </AnimatePresence>
    </>
  )
}

function HeroPanel({
  leading,
  falling,
  activeConcept,
  conceptBreadth,
}: {
  leading?: ConceptStat
  falling?: ConceptStat
  activeConcept?: ConceptStat | null
  conceptBreadth: { up: number; down: number; flat: number }
}) {
  return (
    <div className="grid grid-cols-2 gap-2 md:grid-cols-5">
      <HeroMetric icon={TrendingUp} label="最强主线" value={leading?.key ?? '—'} hint={leading?.avgPct != null ? <span className={priceColorClass(leading.avgPct)}>{fmtPct(leading.avgPct)}</span> : '等待行情'} tone="up" />
      <HeroMetric icon={TrendingDown} label="最大风险" value={falling?.key ?? '—'} hint={falling?.avgPct != null ? <span className={priceColorClass(falling.avgPct)}>{fmtPct(falling.avgPct)}</span> : '等待行情'} tone="down" />
      <HeroMetric
        icon={Activity}
        label="涨跌板块"
        value={<><span className="text-bull">{conceptBreadth.up}</span><span className="mx-1 text-muted">/</span><span className="text-bear">{conceptBreadth.down}</span></>}
        hint={<><span className="text-bull">上涨</span><span className="mx-1 text-muted">/</span><span className="text-bear">下跌</span>{conceptBreadth.flat ? <span className="text-muted"> · 平 {conceptBreadth.flat}</span> : null}</>}
        tone="blue"
      />
      <HeroMetric icon={Activity} label="资金活跃" value={activeConcept?.key ?? '—'} hint={activeConcept ? fmtBigNum(activeConcept.totalAmount) : '等待行情'} tone="blue" />
      <HeroMetric icon={Crown} label="龙头算法" value="6 因子" hint="强势 + 承接 + 容量" tone="gold" />
    </div>
  )
}

function HeroMetric({ icon: Icon, label, value, hint, tone }: {
  icon: typeof TrendingUp
  label: string
  value: ReactNode
  hint: ReactNode
  tone: 'up' | 'down' | 'gold' | 'blue'
}) {
  const toneClass = {
    up: 'text-bull bg-bull/10',
    down: 'text-bear bg-bear/10',
    gold: 'text-amber-300 bg-amber-400/10',
    blue: 'text-blue-300 bg-blue-400/10',
  }[tone]
  const valueClass = {
    up: 'text-bull',
    down: 'text-bear',
    gold: 'text-amber-300',
    blue: 'text-foreground',
  }[tone]
  return (
    <div className="rounded-xl border border-border bg-surface px-3 py-2">
      <div className="flex items-center justify-between text-[11px] text-muted">
        <span>{label}</span>
        <span className={cn('rounded-md p-1', toneClass)}><Icon className="h-3.5 w-3.5" /></span>
      </div>
      <div className={cn('mt-1 truncate text-sm font-semibold', valueClass)}>{value}</div>
      <div className="mt-0.5 truncate text-[11px] text-muted">{hint}</div>
    </div>
  )
}

function MarketPulse({
  leading,
  falling,
  selectedKey,
  onSelect,
  onStockClick,
}: {
  leading: ConceptStat[]
  falling: ConceptStat[]
  selectedKey: string | null
  onSelect: (key: string) => void
  onStockClick: (symbol: string, name?: string) => void
}) {
  return (
    <div className="grid grid-cols-1 gap-3 xl:grid-cols-2">
      <PulseList title="领涨主线" items={leading} mode="up" selectedKey={selectedKey} onSelect={onSelect} onStockClick={onStockClick} />
      <PulseList title="领跌方向" items={falling} mode="down" selectedKey={selectedKey} onSelect={onSelect} onStockClick={onStockClick} />
    </div>
  )
}

function PulseList({
  title,
  items,
  mode,
  selectedKey,
  onSelect,
  onStockClick,
}: {
  title: string
  items: ConceptStat[]
  mode: 'up' | 'down'
  selectedKey: string | null
  onSelect: (key: string) => void
  onStockClick: (symbol: string, name?: string) => void
}) {
  const toneText = mode === 'up' ? 'text-bull' : 'text-bear'
  const toneBorder = mode === 'up' ? 'border-bull/20' : 'border-bear/20'
  const toneBg = mode === 'up' ? 'bg-bull/10' : 'bg-bear/10'
  const toneHover = mode === 'up' ? 'hover:border-bull/35' : 'hover:border-bear/35'

  return (
    <div className={cn('rounded-xl border bg-base/35 p-2', toneBorder)}>
      <div className="mb-1.5 flex items-center justify-between px-1">
        <div className={cn('flex items-center gap-1.5 text-xs font-medium', toneText)}>
          {mode === 'up' ? <TrendingUp className="h-3.5 w-3.5" /> : <TrendingDown className="h-3.5 w-3.5" />}
          {title}
        </div>
        <span className="rounded-full bg-elevated/60 px-2 py-0.5 text-[10px] text-muted">Top 10</span>
      </div>
      <div className="space-y-1">
        {items.map((item, idx) => {
          const active = selectedKey === item.key
          const leaders = [...item.stocks].sort((a, b) => b.leaderScore - a.leaderScore).slice(0, 3)
          const upPct = item.count > 0 ? (item.upCount / item.count) * 100 : 0
          const downPct = item.count > 0 ? (item.downCount / item.count) * 100 : 0
          const flatPct = Math.max(0, 100 - upPct - downPct)
          return (
            <button
              key={item.key}
              onClick={() => onSelect(item.key)}
              className={cn(
                'block w-full rounded-lg border border-transparent bg-surface/45 px-2 py-1.5 text-left transition-colors',
                active ? cn('bg-blue-400/[0.08]', toneBorder) : cn('hover:bg-elevated/35', toneHover),
              )}
            >
              <div className="grid gap-2 md:grid-cols-[minmax(0,0.9fr)_minmax(16rem,1.1fr)] md:items-center">
                <div className="min-w-0">
                  <div className="flex min-w-0 items-center gap-2">
                    <span className={cn('flex h-5 w-5 shrink-0 items-center justify-center rounded-md font-mono text-[10px]', idx < 3 ? cn(toneBg, toneText) : 'bg-elevated/70 text-muted')}>{idx + 1}</span>
                    <div className="min-w-0 flex-1">
                      <div className="flex min-w-0 items-center gap-2">
                        <span className="truncate text-xs font-medium text-foreground">{item.key}</span>
                        <span className="shrink-0 text-[10px] text-muted">
                          <span className="text-bull">{item.upCount}</span>涨
                          <span className="mx-0.5 text-muted/40">/</span>
                          <span className="text-bear">{item.downCount}</span>跌
                        </span>
                        <span className={cn('ml-auto shrink-0 font-mono text-[10px] tabular-nums', priceColorClass(item.avgPct))}>{item.avgPct != null ? fmtPct(item.avgPct) : '—'}</span>
                      </div>
                    </div>
                  </div>
                  <div className="ml-7 mt-1">
                    <div className="flex h-1 overflow-hidden rounded-full bg-elevated">
                      <div className="h-full bg-bull/70" style={{ width: `${upPct}%` }} />
                      {flatPct > 0 && <div className="h-full bg-muted/25" style={{ width: `${flatPct}%` }} />}
                      <div className="h-full bg-bear/70" style={{ width: `${downPct}%` }} />
                    </div>
                  </div>
                </div>
                <div className="grid min-w-0 grid-cols-3 gap-1">
                  {Array.from({ length: 3 }).map((_, i) => {
                    const stock = leaders[i]
                    return stock ? (
                      <span key={stock.symbol} title={stock.name || stock.symbol} onClick={e => { e.stopPropagation(); onStockClick(stock.symbol, stock.name || undefined) }} className={cn('flex min-w-0 items-center gap-1 rounded-md px-1.5 py-0.5 text-[10px] cursor-pointer hover:brightness-125', i === 0 ? 'bg-amber-300/10 text-foreground' : 'bg-elevated/60 text-secondary')}>
                        <span className="flex min-w-0 items-center gap-1">
                          <span className="min-w-0 truncate font-medium">{stock.name || stock.symbol}</span>
                        </span>
                        <span className={cn('shrink-0 font-mono', priceColorClass(stock.change_pct))}>{stock.change_pct != null ? fmtPct(stock.change_pct) : '—'}</span>
                      </span>
                    ) : <span key={i} className="rounded-md bg-elevated/30 px-1.5 py-0.5 text-[10px] text-muted/40">—</span>
                  })}
                </div>
              </div>
            </button>
          )
        })}
      </div>
    </div>
  )
}

function ConceptRail({
  stats,
  selectedKey,
  search,
  sortMode,
  onSearch,
  onSort,
  onSelect,
}: {
  stats: ConceptStat[]
  selectedKey: string | null
  search: string
  sortMode: SortMode
  onSearch: (v: string) => void
  onSort: (v: SortMode) => void
  onSelect: (v: string) => void
}) {
  return (
    <section className="rounded-2xl border border-border bg-surface p-2.5">
      <div className="px-1 pb-2.5">
        <div className="flex items-center justify-between">
          <h3 className="text-sm font-semibold text-foreground">概念矩阵</h3>
          <span className="text-[10px] text-muted">Top {stats.length}</span>
        </div>
        <div className="mt-2 relative">
          <Search className="absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted" />
          <input value={search} onChange={e => onSearch(e.target.value)} placeholder="搜索概念" className="h-8 w-full rounded-lg border border-border bg-base pl-8 pr-3 text-xs text-foreground outline-none focus:border-accent/50" />
        </div>
        <div className="mt-2 grid grid-cols-5 overflow-hidden rounded-lg border border-border text-[10px]">
          {([
            ['heat', '强度'], ['avgPct', '涨幅'], ['leader', '龙头'], ['amount', '成交'], ['down', '跌幅'],
          ] as [SortMode, string][]).map(([key, label]) => (
            <button key={key} onClick={() => onSort(key)} className={cn('py-1.5 transition-colors', sortMode === key ? 'bg-accent/15 text-accent' : 'bg-base text-muted hover:text-foreground')}>{label}</button>
          ))}
        </div>
      </div>
      <div className="max-h-[620px] overflow-auto rounded-lg border border-border/50">
        {stats.map(item => {
          const active = selectedKey === item.key
          return (
            <button key={item.key} onClick={() => onSelect(item.key)} className={cn('w-full border-b border-border/50 px-2.5 py-2 text-left transition-colors last:border-b-0', active ? 'bg-blue-400/[0.08]' : 'hover:bg-elevated/40')}>
              <div className="flex items-center gap-2">
                <span className="min-w-0 flex-1 truncate text-xs font-medium text-foreground">{item.key}</span>
                <span className={cn('font-mono text-xs', priceColorClass(item.avgPct))}>{item.avgPct != null ? fmtPct(item.avgPct) : '—'}</span>
              </div>
              <div className="mt-1 flex items-center gap-2 text-[10px] text-muted">
                <span>{item.count}只</span>
                <span className="text-bull">{item.upCount}涨</span>
                <span className="text-bear">{item.downCount}跌</span>
                <span className="ml-auto">强度 {item.heatScore.toFixed(0)}</span>
              </div>
            </button>
          )
        })}
      </div>
    </section>
  )
}

function ConceptFocus({ stat, onStockClick }: { stat: ConceptStat | null; onStockClick: (symbol: string, name?: string) => void }) {
  if (!stat) return null
  const stocks = [...stat.stocks].sort((a, b) => b.leaderScore - a.leaderScore).slice(0, MAX_RENDERED_STOCKS)
  const topLeaders = stocks.slice(0, 3)
  return (
    <section className="flex max-h-[720px] flex-col overflow-hidden rounded-2xl border border-border bg-surface">
      <div className="shrink-0 border-b border-border px-5 py-4">
        <div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
          <div className="min-w-0">
            <div className="flex items-center gap-3">
              <h3 className="truncate text-xl font-semibold text-foreground">{stat.key}</h3>
              <span className="rounded-full bg-blue-400/10 px-2 py-0.5 text-[10px] text-blue-300">强度 {stat.heatScore.toFixed(0)}</span>
            </div>
            <div className="mt-1.5 flex flex-wrap gap-x-4 gap-y-1 text-xs text-muted">
              <span>{stat.count} 只成分</span>
              <span className={priceColorClass(stat.avgPct)}>平均 {stat.avgPct != null ? fmtPct(stat.avgPct) : '—'}</span>
              <span>上涨占比 {(stat.upRate * 100).toFixed(0)}%</span>
              <span>成交额 {fmtBigNum(stat.totalAmount)}</span>
              {stat.avgTurnover != null && <span>均换手 {stat.avgTurnover.toFixed(2)}%</span>}
            </div>
          </div>
          <div className="grid grid-cols-5 gap-2 lg:w-[520px]">
            <MiniStat label="均涨" value={stat.avgPct != null ? fmtPct(stat.avgPct) : '—'} cls={priceColorClass(stat.avgPct)} />
            <MiniStat label="中位" value={stat.medianPct != null ? fmtPct(stat.medianPct) : '—'} cls={priceColorClass(stat.medianPct)} />
            <MiniStat label="强势" value={`${stat.strongCount}`} cls="text-bull" />
            <MiniStat label="弱势" value={`${stat.weakCount}`} cls="text-bear" />
            <MiniStat label="量比" value={stat.avgVolRatio != null ? stat.avgVolRatio.toFixed(2) : '—'} cls="text-foreground" />
          </div>
        </div>
      </div>

      <div className="grid shrink-0 gap-3 border-b border-border bg-base/25 p-4 lg:grid-cols-[1fr_1.15fr]">
        <LeaderStage stocks={topLeaders} onStockClick={onStockClick} />
        <ScoreExplain stock={topLeaders[0]} />
      </div>

      <div className="min-h-0 flex-1 overflow-auto">
        <table className="min-w-full text-left text-xs">
          <thead className="bg-elevated/60 text-[11px] text-muted">
            <tr>
              <th className="px-4 py-2 font-medium">排名</th>
              <th className="px-4 py-2 font-medium">股票</th>
              <th className="px-4 py-2 font-medium">涨跌幅</th>
              <th className="px-4 py-2 font-medium">换手率</th>
              <th className="px-4 py-2 font-medium">成交额</th>
              <th className="px-4 py-2 font-medium">流通市值</th>
              <th className="px-4 py-2 font-medium">量比</th>
              <th className="px-4 py-2 font-medium">龙头分</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-border/70">
            {stocks.map((s, idx) => (
              <tr key={`${s.symbol}-${idx}`} className="hover:bg-elevated/30 cursor-pointer" onClick={() => onStockClick(s.symbol, s.name || undefined)}>
                <td className="px-4 py-2 font-mono text-muted">{idx + 1}</td>
                <td className="px-4 py-2">
                  <div className="font-medium text-foreground">{s.name || '—'}</div>
                  <div className="font-mono text-[10px] text-muted">{s.symbol}</div>
                </td>
                <td className={cn('px-4 py-2 font-mono tabular-nums', priceColorClass(s.change_pct))}>{s.change_pct != null ? fmtPct(s.change_pct) : '—'}</td>
                <td className="px-4 py-2 font-mono text-foreground">{s.turnover_rate != null ? `${s.turnover_rate.toFixed(2)}%` : '—'}</td>
                <td className="px-4 py-2 font-mono text-foreground">{fmtBigNum(s.amount)}</td>
                <td className="px-4 py-2 font-mono text-foreground">{fmtBigNum(s.float_market_cap ?? s.market_cap)}</td>
                <td className="px-4 py-2 font-mono text-foreground">{s.vol_ratio_5d != null ? s.vol_ratio_5d.toFixed(2) : '—'}</td>
                <td className="px-4 py-2">
                  <div className="flex items-center gap-2">
                    <span className="w-9 font-mono text-amber-300">{s.leaderScore.toFixed(0)}</span>
                    <div className="h-1.5 w-16 rounded-full bg-elevated"><div className="h-full rounded-full bg-amber-300" style={{ width: `${Math.max(4, s.leaderScore)}%` }} /></div>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      {stat.stocks.length > MAX_RENDERED_STOCKS && <div className="shrink-0 border-t border-border px-4 py-2 text-center text-[11px] text-muted">仅展示龙头分前 {MAX_RENDERED_STOCKS} 只，共 {stat.stocks.length} 只</div>}
    </section>
  )
}

function MiniStat({ label, value, cls }: { label: string; value: string; cls: string }) {
  return <div className="rounded-lg border border-border/60 bg-base/35 px-2 py-1.5"><div className="text-[10px] text-muted">{label}</div><div className={cn('mt-0.5 truncate text-sm font-semibold', cls)}>{value}</div></div>
}

function LeaderStage({ stocks, onStockClick }: { stocks: EnrichedStock[]; onStockClick: (symbol: string, name?: string) => void }) {
  if (!stocks.length) return <div className="rounded-xl border border-border/60 bg-surface p-4 text-sm text-muted">暂无龙头候选</div>
  return (
    <div className="rounded-xl border border-border/60 bg-surface p-3">
      <div className="mb-2 flex items-center gap-2 text-xs font-medium text-amber-300">
        <Crown className="h-3.5 w-3.5" />
        本概念三龙头
      </div>
      <div className="grid gap-2 md:grid-cols-3">
        {stocks.map((stock, idx) => (
          <div key={stock.symbol} onClick={() => onStockClick(stock.symbol, stock.name || undefined)} className={cn('rounded-lg border p-3 cursor-pointer hover:brightness-110 transition-all', idx === 0 ? 'border-amber-400/25 bg-amber-400/[0.06]' : 'border-border/60 bg-base/35')}>
            <div className="flex items-center justify-between gap-2">
              <span className={cn('text-[10px] font-medium', idx === 0 ? 'text-amber-300' : 'text-muted')}>{idx === 0 ? '主龙头' : `辅龙 ${idx}`}</span>
              <span className="font-mono text-[11px] text-amber-300">{stock.leaderScore.toFixed(0)}</span>
            </div>
            <div className="mt-2 truncate text-sm font-medium text-foreground">{stock.name || stock.symbol}</div>
            <div className="mt-0.5 flex items-center justify-between text-[11px]">
              <span className="font-mono text-muted">{stock.symbol}</span>
              <span className={cn('font-mono', priceColorClass(stock.change_pct))}>{stock.change_pct != null ? fmtPct(stock.change_pct) : '—'}</span>
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}

function ScoreExplain({ stock }: { stock?: EnrichedStock }) {
  if (!stock) return <div className="rounded-xl border border-border/60 bg-surface p-4 text-sm text-muted">暂无评分拆解</div>
  const parts = stock.leaderParts
  return (
    <div className="rounded-xl border border-border/60 bg-surface p-3">
      <div className="mb-2 flex items-center justify-between">
        <span className="text-xs font-medium text-foreground">主龙头评分拆解</span>
        <span className="text-[11px] text-muted">涨幅 / 换手 / 成交 / 市值 / 量比 / 连板</span>
      </div>
      <div className="grid grid-cols-2 gap-2 md:grid-cols-3">
        <Part label="动能" value={parts.momentum} cls="bg-rose-400" />
        <Part label="换手" value={parts.turnover} cls="bg-orange-400" />
        <Part label="成交" value={parts.amount} cls="bg-blue-400" />
        <Part label="市值" value={parts.cap} cls="bg-cyan-400" />
        <Part label="量比" value={parts.volume} cls="bg-purple-400" />
        <Part label="连板" value={parts.boards} cls="bg-amber-300" />
      </div>
    </div>
  )
}

function Part({ label, value, cls }: { label: string; value: number; cls: string }) {
  return <div className="rounded-lg bg-base/35 px-2 py-1.5"><div className="mb-1 flex justify-between text-[10px] text-muted"><span>{label}</span><span>{Math.round(value * 100)}</span></div><div className="h-1 rounded-full bg-elevated"><div className={cn('h-full rounded-full', cls)} style={{ width: `${Math.max(3, value * 100)}%` }} /></div></div>
}