/**
 * 策略结果表格。
 *
 * 表格骨架（表头排序/sticky/遍历）由共享的 StockDataTable 承担；本组件只负责
 * 策略页特有的单元格内容：symbol 列（含加自选按钮 + 失效行灰显）、strategies、
 * score、signals、candle、ext 列。其余纯数据列（价格/指标/财务…）交给共享原语。
 */
import { useState, type CSSProperties, type ReactNode } from 'react'
import { Check, Plus, Eye, EyeOff } from 'lucide-react'
import type { KlineRow } from '@/lib/api'
import { fmtPrice } from '@/lib/format'
import type { ColumnConfig } from '@/lib/screener-columns'
import { getSignals, signalCls } from '@/lib/stock-table'
import { boardTag, renderBuiltinDataCell } from '@/components/stock-table/primitives'
import { resolveCandleConfig } from '@/lib/list-columns'
import { MiniCandlestick } from '@/components/stock-table/MiniCandlestick'
import { StockDataTable, type SortState } from '@/components/stock-table/StockDataTable'

interface ScreenerTableProps {
  rows: any[]
  columns: ColumnConfig[]
  strategyIdToName: Record<string, string>
  symbolStrategyMap: Map<string, string[]>
  activeStrategy: string | null
  watchlistSet: Set<string>
  onPreview: (symbol: string, name: string) => void
  onToggleWatchlist: (symbol: string, inList: boolean) => void
  watchlistPending: boolean
  /** symbol → 日k 数据，仅当启用日k列时传入 */
  klineData?: Record<string, KlineRow[]>
  /** 日k蜡烛图是否显示（表头眼睛开关） */
  dailyKChartVisible?: boolean
  onToggleDailyKChart?: () => void
  /** 表头排序（受控，由 Screener.tsx 传入） */
  sort?: SortState | null
  onSortToggle?: (colId: string) => void
}

/** 渲染标签数组（含 maxTags 折叠/展开、横竖排列）。策略列与 ext 列共用。 */
function renderTagList(
  tags: string[],
  col: ColumnConfig,
  expanded: boolean,
  onToggle: () => void,
  tagClassName: string,
): ReactNode {
  if (tags.length === 0) return <span className="text-muted">—</span>

  const cfg = col.extDisplay
  const maxTags = cfg?.maxTags ?? 0
  const showAll = maxTags <= 0 || expanded || tags.length <= maxTags
  const sliced = showAll ? tags : tags.slice(0, maxTags)
  const hiddenIndices = maxTags > 0 ? cfg?.hiddenIndices : undefined
  const visibleTags = hiddenIndices?.length
    ? sliced.filter((_, i) => !hiddenIndices.includes(i))
    : sliced
  const hiddenCount = tags.length - visibleTags.length
  const isVertical = cfg?.tagLayout === 'vertical' && !expanded

  return (
    <div className={isVertical ? 'flex flex-col items-start gap-0.5' : 'flex flex-wrap gap-0.5'}>
      {visibleTags.map((tag, i) => (
        <span key={i} className={tagClassName}>{tag}</span>
      ))}
      {!showAll && hiddenCount > 0 && (
        <button
          onClick={onToggle}
          className="inline-block px-1.5 py-px rounded text-[10px] font-medium leading-tight text-accent bg-accent/10 hover:bg-accent/20 transition-colors"
        >
          +{hiddenCount}
        </button>
      )}
      {showAll && maxTags > 0 && tags.length > maxTags && (
        <button
          onClick={onToggle}
          className="inline-block px-1.5 py-px rounded text-[10px] font-medium leading-tight text-muted hover:text-foreground transition-colors"
        >
          收起
        </button>
      )}
    </div>
  )
}

const EXT_TAG_CLS = 'inline-block px-1.5 py-px rounded text-[10px] font-medium leading-tight text-yellow-500 bg-yellow-500/10'
const STRATEGY_TAG_CLS = 'inline-block px-1.5 py-px rounded text-[10px] font-medium leading-tight bg-amber-500/10 text-amber-600 border border-amber-500/20'

function renderExtValue(
  val: any,
  col: ColumnConfig,
  expanded: boolean,
  onToggle: () => void,
): ReactNode {
  if (val == null || Number.isNaN(val)) return <span className="text-muted">—</span>
  if (typeof val === 'number') {
    const displayVal = Number.isInteger(val) ? fmtPrice(val, 0) : fmtPrice(val)
    return <span className="tabular-nums">{displayVal}</span>
  }
  if (typeof val === 'boolean') {
    return <span className={val ? 'text-bull' : 'text-muted'}>{val ? '是' : '否'}</span>
  }

  const cfg = col.extDisplay
  const str = String(val)
  if (cfg?.displayMode === 'text') return <span className="text-foreground">{str}</span>

  const separator = cfg?.separator?.trim() || null
  const tags = separator
    ? str.split(separator).map(s => s.trim()).filter(Boolean)
    : str.split(/[、,，;；\-]/).map(s => s.trim()).filter(Boolean)

  return renderTagList(tags, col, expanded, onToggle, EXT_TAG_CLS)
}

export function ScreenerTable({
  rows, columns, strategyIdToName, symbolStrategyMap, activeStrategy,
  watchlistSet, onPreview, onToggleWatchlist, watchlistPending, klineData = {},
  dailyKChartVisible = true, onToggleDailyKChart,
  sort, onSortToggle,
}: ScreenerTableProps) {
  const [expandedCells, setExpandedCells] = useState<Set<string>>(new Set())

  // 日k列渲染尺寸（按眼睛开关取开启/收起尺寸）
  const candleCol = columns.find(c => c.source.type === 'builtin' && c.source.key === 'candle' && c.visible)
  const candleResolved = resolveCandleConfig(candleCol?.candleConfig)
  const candleSize = dailyKChartVisible
    ? { width: candleResolved.enabledWidth, height: candleResolved.enabledHeight }
    : { width: candleResolved.disabledWidth, height: candleResolved.disabledHeight }

  const toggleExpand = (key: string) => {
    setExpandedCells(prev => {
      const next = new Set(prev)
      if (next.has(key)) next.delete(key)
      else next.add(key)
      return next
    })
  }

  const renderCell = (r: any, col: ColumnConfig): ReactNode => {
    // ext 列
    if (col.source.type === 'ext') {
      const { configId, fieldName } = col.source
      const val = r[`${configId}__${fieldName}`]
      const cellKey = `${r.symbol}::${col.id}`
      const expanded = expandedCells.has(cellKey)
      const tdClass = val == null || Number.isNaN(val)
        ? 'px-3 py-2 text-center text-muted'
        : typeof val === 'number'
          ? 'px-3 py-2 text-right num tabular-nums'
          : 'px-3 py-2 text-center'
      const style: CSSProperties = {}
      if (col.extDisplay?.maxWidth) style.maxWidth = col.extDisplay.maxWidth
      return (
        <td key={col.id} className={tdClass} style={style}>
          {renderExtValue(val, col, expanded, () => toggleExpand(cellKey))}
        </td>
      )
    }

    const isExpired = !!r._expired
    const key = col.source.key

    // 策略页特有 / 需上下文的列
    switch (key) {
      case 'symbol': {
        const board = boardTag(r.symbol)
        const inWatchlist = watchlistSet.has(r.symbol)
        return (
          <td key={col.id} className="px-4 py-2">
            <div className="flex items-center gap-2">
              <button
                type="button"
                onClick={() => onPreview(r.symbol, r.name ?? '')}
                className={`flex items-center gap-2 text-left ${isExpired ? 'cursor-default' : ''}`}
              >
                {board ? (
                  <span className={`shrink-0 inline-flex items-center justify-center w-[18px] h-[18px] rounded text-[9px] font-bold leading-none border ${board.color}`}>
                    {board.label}
                  </span>
                ) : (
                  <span className="shrink-0 w-[18px]" />
                )}
                <span className="font-mono text-secondary group-hover:text-accent transition-colors duration-150 leading-snug">
                  {r.symbol}
                </span>
                {r.name && (
                  <span className="text-[11px] text-muted truncate group-hover:text-secondary transition-colors duration-150 leading-snug">
                    {r.name}
                  </span>
                )}
              </button>
              {isExpired ? (
                <span className="shrink-0 inline-flex items-center px-1.5 py-px rounded text-[9px] font-medium leading-tight bg-red-500/10 text-red-400/60 border border-red-500/15">
                  失效
                </span>
              ) : (
                <button
                  type="button"
                  onClick={() => onToggleWatchlist(r.symbol, inWatchlist)}
                  disabled={watchlistPending}
                  className={`shrink-0 inline-flex items-center justify-center w-5 h-5 rounded-full border transition-colors cursor-pointer
                    disabled:opacity-50
                    ${inWatchlist
                      ? 'border-accent/40 bg-accent/10 text-accent'
                      : 'border-border text-muted hover:border-accent/40 hover:text-accent'
                    }`}
                  title={inWatchlist ? '移出自选' : '加入自选'}
                >
                  {inWatchlist ? <Check className="h-3 w-3" /> : <Plus className="h-3 w-3" />}
                </button>
              )}
            </div>
          </td>
        )
      }
      case 'strategies': {
        const strats = symbolStrategyMap.get(r.symbol) ?? (activeStrategy ? [activeStrategy] : [])
        const tags = strats.map(sid => strategyIdToName[sid] ?? sid)
        const cellKey = `${r.symbol}::${col.id}`
        const expanded = expandedCells.has(cellKey)
        return (
          <td key={col.id} className="px-3 py-2">
            {renderTagList(tags, col, expanded, () => toggleExpand(cellKey), STRATEGY_TAG_CLS)}
          </td>
        )
      }
      case 'score': {
        const numCls = 'px-3 py-2 text-right num tabular-nums'
        return (
          <td key={col.id} className={numCls}>
            {r.score != null ? (
              <span className={r.score >= 70 ? 'text-accent font-medium' : r.score >= 50 ? 'text-amber-400' : 'text-secondary'}>
                {Number(r.score).toFixed(1)}
              </span>
            ) : (
              <span className="text-muted">—</span>
            )}
          </td>
        )
      }
      case 'signals': {
        const signals = getSignals(r)
        return (
          <td key={col.id} className="px-3 py-2">
            {signals.length > 0 ? (
              <div className="flex flex-wrap gap-0.5">
                {signals.slice(0, 3).map((s) => (
                  <span key={s.label} className={`inline-block px-1.5 py-px rounded text-[10px] font-medium leading-tight ${signalCls(s.type)}`}>
                    {s.label}
                  </span>
                ))}
                {signals.length > 3 && (
                  <span className="text-[10px] text-muted">+{signals.length - 3}</span>
                )}
              </div>
            ) : (
              <span className="text-muted text-xs">—</span>
            )}
          </td>
        )
      }
      case 'candle': {
        const candleRows = klineData[r.symbol] ?? []
        // 锁定列宽与行高：minWidth=maxWidth 防止 kline 加载前后整列宽度跳动（闪烁）
        return (
          <td
            key={col.id}
            className="px-3 py-2"
            style={{ width: candleSize.width, minWidth: candleSize.width, maxWidth: candleSize.width, height: candleSize.height }}
          >
            <MiniCandlestick rows={candleRows} width={candleSize.width} height={candleSize.height} />
          </td>
        )
      }
      default:
        // 纯数据列 → 共享原语
        return renderBuiltinDataCell(r, col)
    }
  }

  return (
    <StockDataTable
      columns={columns}
      rows={rows}
      renderCell={renderCell}
      sort={sort}
      onSortToggle={onSortToggle}
      minWidth={Math.max(900, columns.filter(c => c.visible).length * 110)}
      rowKey={(r: any) => `${r.symbol}${r._expired ? '-expired' : ''}`}
      rowClassName={(r: any) => r._expired
        ? 'border-border/50 opacity-40'
        : 'border-border hover:bg-elevated/50'
      }
      // 日k列表头：标签 + 显示/隐藏蜡烛图眼睛按钮（与自选页一致）
      renderHeaderContent={onToggleDailyKChart ? (col) => {
        if (col.source.type === 'builtin' && col.source.key === 'candle') {
          return (
            <span className="inline-flex items-center justify-center gap-1.5">
              <span>{col.label}</span>
              <button
                type="button"
                onClick={(event) => { event.stopPropagation(); onToggleDailyKChart() }}
                className={`inline-flex items-center justify-center w-5 h-5 rounded transition-colors ${
                  dailyKChartVisible
                    ? 'text-accent bg-accent/10 hover:bg-accent/20'
                    : 'text-muted hover:text-foreground hover:bg-elevated'
                }`}
                title={dailyKChartVisible ? '隐藏日k蜡烛' : '显示日k蜡烛'}
                aria-label={dailyKChartVisible ? '隐藏日k蜡烛' : '显示日k蜡烛'}
              >
                {dailyKChartVisible ? <Eye className="h-3.5 w-3.5" /> : <EyeOff className="h-3.5 w-3.5" />}
              </button>
            </span>
          )
        }
        return undefined
      } : undefined}
    />
  )
}