/**
 * Admin 后台 - 回测管理页面
 *
 * 功能:
 * - 配置回测参数(策略、联赛、日期范围、初始资金)
 * - 触发回测任务
 * - 查看回测结果(收益率、最大回撤、夏普比率等)
 * - 交易记录明细
 */

import { useEffect, useState } from 'react'
import { triggerBacktest, fetchBacktestHistory, fetchLeagues } from '../dal'
import type { BacktestRequest, BacktestResult, BacktestTrade, League } from '../types'
import {
  Card,
  CardBody,
  CardHeader,
  Badge,
  ProgressBar,
  DataTable,
  EmptyState,
} from '../components'
import { SectionHeader } from '../components'

const STRATEGIES = [
  { value: 'confidence_weighted', label: '置信度加权', desc: '按预测置信度调整仓位' },
  { value: 'kelly', label: 'Kelly 准则', desc: 'Kelly 公式优化投注比例' },
  { value: 'flat', label: '固定金额', desc: '每次固定金额投注' },
]

export default function BacktestPage() {
  const [leagues, setLeagues] = useState<League[]>([])
  const [tasks, setTasks] = useState<BacktestResult[]>([])
  const [strategy, setStrategy] = useState('confidence_weighted')
  const [selectedLeagues, setSelectedLeagues] = useState<string[]>(['E0'])
  const [dateFrom, setDateFrom] = useState('')
  const [dateTo, setDateTo] = useState('')
  const [bankroll, setBankroll] = useState(1000)
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [successMsg, setSuccessMsg] = useState<string | null>(null)

  useEffect(() => {
    Promise.all([fetchLeagues(), fetchBacktestHistory()]).then(([lg, ts]) => {
      setLeagues(lg)
      setTasks(ts)
    })
  }, [])

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

    try {
      const body: BacktestRequest = {
        strategy,
        league_codes: selectedLeagues,
        date_from: dateFrom || '2024-01-01',
        date_to: dateTo || new Date().toISOString().split('T')[0],
        initial_bankroll: bankroll,
      }
      const res = await triggerBacktest(body)
      setSuccessMsg(`回测任务已启动: ${res.task_id}`)
      // 刷新列表
      const ts = await fetchBacktestHistory()
      setTasks(ts)
    } catch (err: unknown) {
      setError(err instanceof Error ? err.message : '回测触发失败')
    } finally {
      setLoading(false)
    }
  }

  function toggleLeague(code: string) {
    setSelectedLeagues(prev =>
      prev.includes(code) ? prev.filter(c => c !== code) : [...prev, code],
    )
  }

  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">
                    {STRATEGIES.map(s => (
                      <label
                        key={s.value}
                        className={`flex cursor-pointer items-start gap-3 rounded-md border p-3 transition-colors ${
                          strategy === s.value
                            ? 'border-blue-500/50 bg-blue-500/10'
                            : 'border-gray-700 hover:border-gray-600'
                        }`}
                      >
                        <input
                          type="radio"
                          name="strategy"
                          value={s.value}
                          checked={strategy === s.value}
                          onChange={e => setStrategy(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>
                  <div className="flex flex-wrap gap-2">
                    {leagues.map(l => (
                      <button
                        key={l.code}
                        type="button"
                        onClick={() => toggleLeague(l.code)}
                        className={`rounded-md border px-2.5 py-1 text-xs transition-colors ${
                          selectedLeagues.includes(l.code)
                            ? 'border-blue-500/50 bg-blue-500/10 text-blue-400'
                            : 'border-gray-700 text-gray-500 hover:border-gray-600'
                        }`}
                      >
                        {l.name_zh ?? l.code}
                      </button>
                    ))}
                  </div>
                </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>

                {/* 初始资金 */}
                <div>
                  <label className="mb-1.5 block text-xs font-medium text-gray-400">初始资金</label>
                  <input
                    type="number"
                    value={bankroll}
                    onChange={e => setBankroll(Number(e.target.value))}
                    min={100}
                    step={100}
                    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>

                {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 || selectedLeagues.length === 0}
                  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 => (
                    <BacktestResultRow key={task.task_id} task={task} />
                  ))}
                </div>
              )}
            </CardBody>
          </Card>
        </div>
      </div>
    </div>
  )
}

function BacktestResultRow({ task }: { task: BacktestResult }) {
  const m = task.metrics
  return (
    <div className="px-5 py-4">
      {/* 头部 */}
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-2">
          <span className="font-mono text-xs text-gray-500">{task.task_id.slice(0, 8)}</span>
          <Badge status={task.status}>{task.status}</Badge>
        </div>
        {m && (
          <span
            className={`text-sm font-semibold tabular-nums ${
              m.profit_loss >= 0 ? 'text-emerald-400' : 'text-red-400'
            }`}
          >
            {m.profit_loss >= 0 ? '+' : ''}
            {m.profit_loss.toFixed(0)} ({(m.roi * 100).toFixed(1)}%)
          </span>
        )}
      </div>

      {/* 进度条 */}
      {task.status === 'running' && (
        <div className="mt-2">
          <ProgressBar value={task.progress} />
        </div>
      )}

      {/* 指标网格 */}
      {m && (
        <div className="mt-3 grid grid-cols-3 gap-3 lg:grid-cols-5">
          <MiniStat label="交易数" value={m.total_trades} />
          <MiniStat label="胜率" value={`${(m.win_rate * 100).toFixed(1)}%`} />
          <MiniStat label="ROI" value={`${(m.roi * 100).toFixed(1)}%`} />
          <MiniStat label="最大回撤" value={`${(m.max_drawdown * 100).toFixed(1)}%`} />
          <MiniStat label="夏普比率" value={m.sharpe_ratio?.toFixed(2) ?? '—'} />
        </div>
      )}

      {/* 错误 */}
      {task.error_message && (
        <p className="mt-2 text-xs text-red-400">{task.error_message}</p>
      )}

      {/* 交易明细 */}
      {task.trades && task.trades.length > 0 && (
        <div className="mt-3">
          <details>
            <summary className="cursor-pointer text-xs text-gray-500 hover:text-gray-300">
              查看交易明细 ({task.trades.length} 笔)
            </summary>
            <div className="mt-2">
              <DataTable
                columns={[
                  {
                    key: 'match',
                    label: '比赛',
                    render: (row: BacktestTrade) => `${row.home_team} vs ${row.away_team}`,
                  },
                  { key: 'bet_type', label: '类型', width: '60px' },
                  { key: 'stake', label: '投注', width: '70px' },
                  { key: 'odds', label: '赔率', width: '60px' },
                  {
                    key: 'result',
                    label: '结果',
                    width: '60px',
                    render: (row: BacktestTrade) => <Badge status={row.result}>{row.result}</Badge>,
                  },
                  {
                    key: 'profit',
                    label: '盈亏',
                    width: '80px',
                    render: (row: BacktestTrade) => (
                      <span
                        className={
                          row.profit >= 0 ? 'text-emerald-400' : 'text-red-400'
                        }
                      >
                        {row.profit >= 0 ? '+' : ''}
                        {row.profit.toFixed(1)}
                      </span>
                    ),
                  },
                ]}
                data={task.trades}
                rowKey={(row: BacktestTrade) => row.match_id}
              />
            </div>
          </details>
        </div>
      )}
    </div>
  )
}

function MiniStat({ label, value }: { label: string; value: string | number }) {
  return (
    <div className="rounded border border-gray-800 px-2 py-1.5">
      <div className="text-[10px] text-gray-600">{label}</div>
      <div className="text-xs font-medium text-gray-300 tabular-nums">{value}</div>
    </div>
  )
}