Profeto/frontend/src/admin/pages/Collection.tsx

/**
 * Admin 后台 - 数据采集页面
 *
 * 功能:
 * - 选择数据源(bzzoiro / understat / injuries)
 * - 选择联赛、日期范围
 * - 触发采集任务
 * - 实时显示任务进度
 */

import { useEffect, useState, useCallback } from 'react'
import { triggerCollection, fetchCollectionTasks, fetchLeagues } from '../dal'
import type { CollectionRequest, CollectionTask, League } from '../types'
import { Card, CardBody, CardHeader, Badge, ProgressBar, EmptyState } from '../components'
import { SectionHeader } from '../components'

const SOURCES = [
  { value: 'bzzoiro', label: 'Bzzoiro', desc: '历史赛程与比分数据' },
  { value: 'understat', label: 'Understat', desc: '进阶统计数据(xG/xA)' },
  { value: 'injuries', label: 'Injuries', desc: '球员伤停信息' },
] as const

export default function CollectionPage() {
  const [leagues, setLeagues] = useState<League[]>([])
  const [tasks, setTasks] = useState<CollectionTask[]>([])
  const [source, setSource] = useState<string>('bzzoiro')
  const [leagueCode, setLeagueCode] = useState<string>('')
  const [dateFrom, setDateFrom] = useState('')
  const [dateTo, setDateTo] = useState('')
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [successMsg, setSuccessMsg] = useState<string | null>(null)

  // 加载联赛列表和任务历史
  const loadData = useCallback(async () => {
    const [lg, ts] = await Promise.all([fetchLeagues(), fetchCollectionTasks()])
    setLeagues(lg)
    setTasks(ts)
  }, [])

  useEffect(() => {
    loadData()
    // 自动刷新任务状态(每 5 秒)
    const timer = setInterval(loadData, 5000)
    return () => clearInterval(timer)
  }, [loadData])

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
    setError(null)
    setSuccessMsg(null)
    setLoading(true)

    try {
      const body: CollectionRequest = {
        source: source as CollectionRequest['source'],
        league_code: leagueCode || undefined,
        date_from: dateFrom || undefined,
        date_to: dateTo || undefined,
      }
      const res = await triggerCollection(body)
      setSuccessMsg(`任务已创建: ${res.message}`)
      loadData()
    } catch (err: unknown) {
      setError(err instanceof Error ? err.message : '采集触发失败')
    } finally {
      setLoading(false)
    }
  }

  return (
    <div className="space-y-6">
      <SectionHeader
        title="数据采集"
        description="触发数据源采集任务,支持联赛筛选和日期范围"
      />

      <div className="grid gap-6 lg:grid-cols-5">
        {/* ── 采集配置表单 ── */}
        <div className="lg:col-span-2">
          <Card>
            <CardHeader title="新建采集任务" />
            <CardBody>
              <form onSubmit={handleSubmit} className="space-y-4">
                {/* 数据源 */}
                <div>
                  <label className="mb-1.5 block text-xs font-medium text-gray-400">
                    数据源
                  </label>
                  <div className="space-y-2">
                    {SOURCES.map(s => (
                      <label
                        key={s.value}
                        className={`flex cursor-pointer items-start gap-3 rounded-md border p-3 transition-colors ${
                          source === s.value
                            ? 'border-blue-500/50 bg-blue-500/10'
                            : 'border-gray-700 hover:border-gray-600'
                        }`}
                      >
                        <input
                          type="radio"
                          name="source"
                          value={s.value}
                          checked={source === s.value}
                          onChange={e => setSource(e.target.value)}
                          className="mt-0.5 accent-blue-500"
                        />
                        <div>
                          <div className="text-sm font-medium text-gray-200">{s.label}</div>
                          <div className="text-xs text-gray-500">{s.desc}</div>
                        </div>
                      </label>
                    ))}
                  </div>
                </div>

                {/* 联赛 */}
                <div>
                  <label className="mb-1.5 block text-xs font-medium text-gray-400">
                    联赛(可选)
                  </label>
                  <select
                    value={leagueCode}
                    onChange={e => setLeagueCode(e.target.value)}
                    className="w-full rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-gray-200 focus:border-blue-500 focus:outline-none"
                  >
                    <option value="">全部联赛</option>
                    {leagues.map(l => (
                      <option key={l.code} value={l.code}>
                        {l.name_zh ?? l.name} ({l.code})
                      </option>
                    ))}
                  </select>
                </div>

                {/* 日期范围 */}
                <div className="grid grid-cols-2 gap-3">
                  <div>
                    <label className="mb-1.5 block text-xs font-medium text-gray-400">
                      开始日期
                    </label>
                    <input
                      type="date"
                      value={dateFrom}
                      onChange={e => setDateFrom(e.target.value)}
                      className="w-full rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-gray-200 focus:border-blue-500 focus:outline-none"
                    />
                  </div>
                  <div>
                    <label className="mb-1.5 block text-xs font-medium text-gray-400">
                      结束日期
                    </label>
                    <input
                      type="date"
                      value={dateTo}
                      onChange={e => setDateTo(e.target.value)}
                      className="w-full rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-gray-200 focus:border-blue-500 focus:outline-none"
                    />
                  </div>
                </div>

                {/* 提示消息 */}
                {error && (
                  <div className="rounded-md border border-red-500/30 bg-red-500/10 px-3 py-2 text-xs text-red-400">
                    {error}
                  </div>
                )}
                {successMsg && (
                  <div className="rounded-md border border-emerald-500/30 bg-emerald-500/10 px-3 py-2 text-xs text-emerald-400">
                    {successMsg}
                  </div>
                )}

                {/* 提交 */}
                <button
                  type="submit"
                  disabled={loading}
                  className="w-full rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50"
                >
                  {loading ? '提交中...' : '启动采集'}
                </button>
              </form>
            </CardBody>
          </Card>
        </div>

        {/* ── 任务列表 ── */}
        <div className="lg:col-span-3">
          <Card>
            <CardHeader title="任务队列" />
            <CardBody className="p-0">
              {tasks.length === 0 ? (
                <EmptyState text="暂无采集任务" />
              ) : (
                <div className="divide-y divide-gray-800">
                  {tasks.map(task => (
                    <TaskRow key={task.task_id} task={task} />
                  ))}
                </div>
              )}
            </CardBody>
          </Card>
        </div>
      </div>
    </div>
  )
}

function TaskRow({ task }: { task: CollectionTask }) {
  return (
    <div className="px-5 py-3">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-2">
          <span className="text-sm font-medium text-gray-200">{task.source}</span>
          <Badge status={task.status}>{task.status}</Badge>
        </div>
        <span className="text-xs text-gray-500">
          {task.processed}/{task.total}
        </span>
      </div>
      {task.status === 'running' && (
        <div className="mt-2">
          <ProgressBar value={task.progress} />
        </div>
      )}
      {task.error_message && (
        <p className="mt-1.5 text-xs text-red-400">{task.error_message}</p>
      )}
      {task.finished_at && (
        <p className="mt-1 text-xs text-gray-600">
          完成于 {new Date(task.finished_at).toLocaleString('zh-CN')}
        </p>
      )}
    </div>
  )
}