import { Tag, Typography } from 'antd'
import { wrongQuestionApi } from '../api/client'
import type { WrongQuestion } from '../types'
import { STATUS_LABELS } from '../types'
import WrongQuestionDetail from '../pages/WrongQuestionDetail'

interface Props {
  items: WrongQuestion[]
  selectedId: string | null
  onSelect: (id: string | null) => void
  onRefresh: () => void
  emptyText?: string
}

export default function WrongQuestionList({
  items,
  selectedId,
  onSelect,
  onRefresh,
  emptyText = '暂无记录',
}: Props) {
  return (
    <>
      <div className="wq-grid">
        {items.map((wq) => (
          <div key={wq.id} className="wq-card" onClick={() => onSelect(wq.id)}>
            <img
              src={wrongQuestionApi.imageUrl(wq.id)}
              alt="题目"
              className="wq-card-img"
              loading="lazy"
            />
            <div className="wq-card-body">
              <Typography.Text strong>{wq.subject_name}</Typography.Text>
              {wq.category === 'olympiad' && (
                <Tag color="gold" style={{ marginLeft: 4 }}>
                  奥数
                </Tag>
              )}
              <Typography.Text type="secondary" style={{ fontSize: 12, marginLeft: 8 }}>
                {STATUS_LABELS[wq.status]}
              </Typography.Text>
              <Typography.Paragraph ellipsis={{ rows: 2 }} style={{ margin: '8px 0 0', fontSize: 13 }}>
                {wq.question_text || wq.ocr_raw_text || '处理中…'}
              </Typography.Paragraph>
            </div>
          </div>
        ))}
      </div>
      {items.length === 0 && <Typography.Text type="secondary">{emptyText}</Typography.Text>}
      {selectedId && (
        <WrongQuestionDetail
          questionId={selectedId}
          open={!!selectedId}
          onClose={() => onSelect(null)}
          onUpdated={onRefresh}
        />
      )}
    </>
  )
}