import { useNavigate } from 'react-router-dom'
import { List, DotLoading } from 'antd-mobile'
import { useIfinanceInfo } from '../../lib/ifinance.js'

// 外接模块分类列表 (ifinance categories[].items[])
// - 数据来源: info.json (运行时动态拉取), 当前分类由 MacroPage 传入
// - 点击条目 → /macro/finance/:catId/:itemId 打开该条目独立 HTML
const KIND_LABEL = { indicator: '指标', strategy: '策略', dashboard: '看板' }

export default function FinanceCategoryView({ category }) {
  const navigate = useNavigate()
  const { info, loading, error } = useIfinanceInfo()

  // MacroPage 拿到的 category 可能来自缓存; 若为空则用 hook 里的最新数据兜底
  const cat = category || (info?.categories || []).find((c) => c.id === category?.id)
  const items = cat?.items || []

  if (!cat && loading) return <div className="loading"><DotLoading /> 加载中...</div>
  if (!cat && error) return <div className="error-banner">{error}</div>
  if (!items.length) return <div className="empty">暂无内容</div>

  return (
    <div className="list-page">
      <List>
        {items.map((it) => (
          <List.Item
            key={it.id}
            title={it.title || it.id}
            description={it.subtitle || ''}
            extra={<span className="finance-kind">{KIND_LABEL[it.kind] || it.kind || ''}</span>}
            arrowIcon
            clickable
            onClick={() => navigate('/macro/finance/' + cat.id + '/' + it.id)}
          />
        ))}
      </List>
    </div>
  )
}