/**
 * 股票列表表格骨架（自选/策略页共享）。
 *
 * 职责：表头渲染（读列配置 label/align + 可排序三态指示器）、表体遍历、sticky 表头。
 * 不内置任何业务逻辑：单元格内容（含 symbol 列交互、操作列、ext 列）由调用方通过
 * renderCell / renderExtraCol 注入。这样两个页面的特有交互得以保留，同时表头能力一致。
 */
import type { ReactNode } from 'react'
import type { ColumnConfig } from '@/lib/list-columns'
import { UNSORTABLE_KEYS } from '@/lib/stock-table'
import type { SortState } from './useTableSort'

export type { SortState }

export interface StockDataTableProps {
  columns: ColumnConfig[]
  rows: any[]
  /** 单元格渲染回调。返回 null 时回退到内置纯数据列渲染。 */
  renderCell: (r: any, col: ColumnConfig) => ReactNode
  /** 行 key（默认取 r.symbol） */
  rowKey?: (r: any) => string | number
  /** 行 className（默认含 hover） */
  rowClassName?: (r: any) => string
  /** 表头是否 sticky（自选页需要，策略页不需要） */
  headerSticky?: boolean
  /** 最小表格宽度，默认按列数计算 */
  minWidth?: number
  /** 排序：外部受控时传入（含当前 sort 与 toggle）；不传则表头不可排序 */
  sort?: SortState | null
  onSortToggle?: (colId: string) => void
  /** 追加在每行末尾的额外单元格（如自选页的操作列） */
  renderExtraCol?: (r: any) => ReactNode
  /** 追加的表头单元格（对应 renderExtraCol） */
  extraHeader?: ReactNode
  /** 自定义表头单元格内容覆盖（如日k眼睛按钮）。返回 undefined 则用 col.label */
  renderHeaderContent?: (col: ColumnConfig) => ReactNode | undefined
  /** 外层容器 className */
  className?: string
}

function alignThClass(align: ColumnConfig['align']): string {
  if (align === 'right') return 'px-3 py-2.5 font-medium text-right'
  if (align === 'center') return 'px-3 py-2.5 font-medium text-center'
  return 'px-3 py-2.5 font-medium'
}

export function StockDataTable({
  columns, rows, renderCell,
  rowKey = (r: any) => r.symbol,
  rowClassName = () => 'border-t border-border hover:bg-elevated/50',
  headerSticky = false,
  minWidth,
  sort,
  onSortToggle,
  renderExtraCol,
  extraHeader,
  renderHeaderContent,
  className = 'rounded-card border border-border overflow-x-auto',
}: StockDataTableProps) {
  const visibleColumns = columns.filter(c => c.visible)
  const computedMinWidth = minWidth ?? Math.max(900, visibleColumns.length * 110)

  const isColSortable = (col: ColumnConfig): boolean => {
    // 排序能力由调用方是否提供 onSortToggle 决定；sort 是否为 null 只影响当前指示器
    if (!onSortToggle) return false
    if (col.source.type === 'builtin' && UNSORTABLE_KEYS.has(col.source.key)) return false
    return true
  }

  const theadClass = headerSticky
    ? 'sticky top-0 z-10 bg-surface after:absolute after:inset-x-0 after:bottom-0 after:h-px after:bg-border'
    : 'bg-elevated'

  return (
    <div className={className}>
      <table className="w-full text-sm" style={{ minWidth: computedMinWidth }}>
        <thead className={theadClass}>
          <tr className="text-left text-secondary">
            {visibleColumns.map(col => {
              const sortable = isColSortable(col)
              const isSorted = sort?.key === col.id
              const dir = isSorted ? sort!.dir : null
              const contentOverride = renderHeaderContent?.(col)
              return (
                <th
                  key={col.id}
                  className={`${alignThClass(col.align)} ${sortable ? 'cursor-pointer select-none group' : ''}`}
                  onClick={sortable ? () => onSortToggle!(col.id) : undefined}
                >
                  {contentOverride !== undefined ? contentOverride : col.label}
                  {sortable && (
                    <span className="inline-block ml-1 text-[10px] opacity-30 group-hover:opacity-60 transition-opacity">
                      {isSorted ? (dir === 'asc' ? '↑' : '↓') : '↕'}
                    </span>
                  )}
                </th>
              )
            })}
            {extraHeader && (
              <th className="px-3 py-2.5 font-medium text-right">{extraHeader}</th>
            )}
          </tr>
        </thead>
        <tbody>
          {rows.map((r: any) => {
            return (
              <tr
                key={rowKey(r)}
                className={`transition-colors duration-150 ease-smooth group ${rowClassName(r)}`}
              >
                {visibleColumns.map(col => renderCell(r, col))}
                {renderExtraCol && renderExtraCol(r)}
              </tr>
            )
          })}
        </tbody>
      </table>
    </div>
  )
}