import { useQuery } from '@tanstack/react-query'
import api from '@/lib/api'
import { FilterableTable } from '@/components/FilterableTable'

export function IndicatorsPage() {
  const { data } = useQuery({
    queryKey: ['indicators'],
    queryFn: () => api.get('/tasks/indicators'),
  })

  const indicators = (data as any)?.data || []

  return (
    <div className="space-y-4">
      <h1 className="text-xl font-bold">指标字典</h1>
      <FilterableTable
        data={indicators}
        sortOptions={[
          { key: 'indicator_name', label: '指标名称' },
          { key: 'update_frequency', label: '更新频率' },
          { key: 'owner', label: '负责人' },
        ]}
        defaultSort="indicator_name"
        defaultOrder="asc"
        filterKey="update_frequency"
        filterLabel="全部频率"
        columns={[
          { key: 'indicator_name', label: '指标名称' },
          { key: 'business_definition', label: '业务定义', render: (r) => <span className="text-xs">{r.business_definition}</span> },
          { key: 'formula', label: '计算公式', render: (r) => <code className="text-xs">{r.formula}</code> },
          { key: 'update_frequency', label: '更新频率', align: 'center' },
          { key: 'owner', label: '负责人' },
          { key: 'yellow_threshold', label: '黄线', align: 'right' },
          { key: 'red_threshold', label: '红线', align: 'right' },
          { key: 'version_date', label: '版本日期', render: (r) => r.version_date?.substring(0, 10) },
        ]}
      />
    </div>
  )
}