/**
 * 主站 - 联赛积分榜页
 *
 * 展示各联赛最新积分榜(位置/积分/净胜/xG差/近期走势/分区),
 * 数据来自 bzzoiro /leagues/{id}/standings/ 管线采集。
 */

import { useEffect, useState, useCallback } from 'react'
import { fetchStandings } from '../admin/dal'
import type { StandingsLeague, StandingRow } from '../admin/dal'
import { useLeagues } from './matches/hooks/useLeagues'
import { Spinner } from '../admin/components'

const ZONE_META: Record<string, { label: string; cls: string }> = {
  // 欧战资格
  'Champions League': { label: '欧冠区', cls: 'bg-emerald-100 text-emerald-700' },
  'Champions League Qualification': { label: '欧冠资格', cls: 'bg-emerald-100 text-emerald-700' },
  'Europa League': { label: '欧联区', cls: 'bg-amber-100 text-amber-700' },
  'Conference League': { label: '欧协杯', cls: 'bg-sky-100 text-sky-700' },
  'Conference League Qualification': { label: '欧协杯', cls: 'bg-sky-100 text-sky-700' },
  'Europa Conference League': { label: '欧协杯', cls: 'bg-sky-100 text-sky-700' },
  'Europa Conference League Qualification': { label: '欧协杯', cls: 'bg-sky-100 text-sky-700' },
  // 升级
  'Championship': { label: '升级区', cls: 'bg-emerald-100 text-emerald-700' },
  'Promotion': { label: '升级区', cls: 'bg-emerald-100 text-emerald-700' },
  'Promotion Group': { label: '升级组', cls: 'bg-emerald-100 text-emerald-700' },
  // 降级
  'Relegation': { label: '降级区', cls: 'bg-rose-100 text-rose-700' },
  'Relegation Playoffs': { label: '降级附加赛', cls: 'bg-orange-100 text-orange-700' },
  'Relegation Group': { label: '降级组', cls: 'bg-rose-100 text-rose-700' },
  // 附加赛
  'Playoffs': { label: '附加赛', cls: 'bg-amber-100 text-amber-700' },
  'Championship Playoffs': { label: '升级附加赛', cls: 'bg-amber-100 text-amber-700' },
  'Qualification Playoffs': { label: '资格附加赛', cls: 'bg-sky-100 text-sky-700' },
  'Qualification': { label: '资格赛', cls: 'bg-sky-100 text-sky-700' },
}

function zoneBadge(zone?: string | null) {
  if (!zone) return null
  const meta = ZONE_META[zone] ?? { label: zone, cls: 'bg-ink-100 text-ink-600' }
  return <span className={`whitespace-nowrap rounded px-1.5 py-0.5 text-2xs font-medium ${meta.cls}`}>{meta.label}</span>
}

/** 近期走势串(W/D/L) → 彩色圆点 */
function FormDots({ form }: { form?: string | null }) {
  if (!form) return <span className="text-2xs text-ink-400">—</span>
  const colorMap: Record<string, string> = { W: 'bg-emerald-500', D: 'bg-ink-300', L: 'bg-rose-500' }
  return (
    <span className="inline-flex gap-0.5">
      {form.slice(0, 5).split('').map((c, i) => (
        <span key={i} className={`inline-block h-1.5 w-1.5 rounded-full ${colorMap[c] ?? 'bg-ink-200'}`} />
      ))}
    </span>
  )
}

export default function StandingsPage() {
  // 统一数据源:复用 useLeagues hook(优先 API,失败回退本地常量)
  const leagues = useLeagues()
  const [standings, setStandings] = useState<StandingsLeague[]>([])
  const [activeLeague, setActiveLeague] = useState<string>('')
  const [loading, setLoading] = useState(true)
  const [switching, setSwitching] = useState(false)  // 切换联赛中
  const [error, setError] = useState<string | null>(null)
  const [showBackTop, setShowBackTop] = useState(false)  // 回到顶部按钮显示态

  // 监听滚动,超过 300px 显示回到顶部按钮
  useEffect(() => {
    const handleScroll = () => setShowBackTop(window.scrollY > 300)
    window.addEventListener('scroll', handleScroll, { passive: true })
    return () => window.removeEventListener('scroll', handleScroll)
  }, [])

  const scrollToTop = () => window.scrollTo({ top: 0, behavior: 'smooth' })

  const load = useCallback(async (code?: string) => {
    setLoading(true)
    setError(null)
    try {
      const data = await fetchStandings(code)
      setStandings(data.leagues)
      if (!activeLeague && data.leagues.length > 0) {
        setActiveLeague(data.leagues[0].league_code)
      }
    } catch (err) {
      setError(err instanceof Error ? err.message : '加载失败')
    } finally {
      setLoading(false)
    }
  }, [activeLeague])

  useEffect(() => { load() }, []) // eslint-disable-line react-hooks/exhaustive-deps

  // 切换联赛(带加载态,禁用 tab 防重复点击)
  const switchLeague = async (code: string) => {
    if (code === activeLeague || switching) return
    setSwitching(true)
    setActiveLeague(code)
    try {
      await fetchStandings(code).then(data => setStandings(data.leagues))
    } catch (err) {
      setError(err instanceof Error ? err.message : '加载失败')
    } finally {
      setSwitching(false)
    }
  }

  const active = standings.find(l => l.league_code === activeLeague) ?? standings[0]

  return (
    <div className="space-y-6">
      {/* 联赛切换 */}
      <div className="flex flex-wrap gap-2">
        {leagues.map(l => {
          // 标记该联赛是否有积分榜数据:有数据可正常切换,无数据也可选中但显示空态
          const hasData = standings.some(s => s.league_code === l.code)
          const isEmpty = activeLeague === l.code && !hasData
          return (
            <button
              key={l.code}
              onClick={() => switchLeague(l.code)}
              disabled={switching}
              title={hasData ? undefined : '暂无积分榜数据'}
              className={`rounded border px-3 py-1.5 text-xs transition-colors disabled:opacity-50 ${
                activeLeague === l.code
                  ? 'border-ink-900 bg-ink-900 text-paper-50'
                  : 'border-ink-200 text-ink-500 hover:border-ink-300'
              } ${!hasData ? 'border-dashed' : ''}`}
            >
              {l.name}
            </button>
          )
        })}
      </div>

      {error && (
        <div className="border border-rose-300 bg-rose-50 px-4 py-3 text-sm text-rose-700">
          {error}
        </div>
      )}

      {loading && (
        <div className="flex justify-center py-12 text-xs text-ink-400">加载中…</div>
      )}

      {/* 切换联赛时的轻量加载指示 */}
      {switching && !loading && (
        <div className="flex items-center gap-2 border-b border-ink-200 px-1 py-2 text-xs text-ink-400">
          <Spinner /> 切换联赛中…
        </div>
      )}

      {!loading && !active && (
        <div className="border-y border-ink-200 py-12 text-center">
          <p className="font-serif text-sm text-ink-600">暂无积分榜数据</p>
          <p className="mt-1.5 text-xs text-ink-400">
            请先在管理后台「数据采集」页运行「积分榜」任务。
          </p>
        </div>
      )}

      {active && (
        <div>
          <div className="mb-3 flex items-center justify-between border-b border-ink-200 pb-2">
            <div>
              <h2 className="font-serif text-lg font-bold text-ink-900">
                {active.league_name}
              </h2>
              <p className="text-xs text-ink-400">
                {active.season} 赛季 · {active.rows.length} 队
                {active.retrieved_at && ` · 更新于 ${new Date(active.retrieved_at).toLocaleDateString('zh-CN')}`}
              </p>
            </div>
          </div>

          {/* 积分榜表格 */}
          <div className="overflow-x-auto">
            <table className="w-full min-w-[640px] text-xs">
              <thead>
                <tr className="border-b border-ink-200 text-left text-ink-400">
                  <th className="w-8 py-2 font-medium">#</th>
                  <th className="py-2 font-medium">球队</th>
                  <th className="w-10 text-center py-2 font-medium">赛</th>
                  <th className="w-10 text-center py-2 font-medium">胜</th>
                  <th className="w-10 text-center py-2 font-medium">平</th>
                  <th className="w-10 text-center py-2 font-medium">负</th>
                  <th className="w-12 text-center py-2 font-medium">进/失</th>
                  <th className="w-12 text-center py-2 font-medium">净</th>
                  <th className="w-14 text-center py-2 font-medium">积分</th>
                  <th className="w-16 text-center py-2 font-medium">xG±</th>
                  <th className="w-20 text-center py-2 font-medium">走势</th>
                  <th className="w-16 text-right py-2 font-medium">区</th>
                </tr>
              </thead>
              <tbody>
                {active.rows.map((r: StandingRow) => (
                  <tr key={r.position} className="border-b border-ink-100 hover:bg-paper-100">
                    <td className="py-2 font-medium text-ink-700">{r.position}</td>
                    <td className="py-2 font-medium text-ink-900">{r.team}</td>
                    <td className="text-center py-2 text-ink-500">{r.played}</td>
                    <td className="text-center py-2 text-ink-500">{r.won}</td>
                    <td className="text-center py-2 text-ink-500">{r.drawn}</td>
                    <td className="text-center py-2 text-ink-500">{r.lost}</td>
                    <td className="text-center py-2 text-ink-500">{r.goals_for}/{r.goals_against}</td>
                    <td className={`text-center py-2 ${r.goal_diff > 0 ? 'text-emerald-600' : r.goal_diff < 0 ? 'text-rose-600' : 'text-ink-500'}`}>
                      {r.goal_diff > 0 ? `+${r.goal_diff}` : r.goal_diff}
                    </td>
                    <td className="text-center py-2 font-bold text-ink-900">{r.points}</td>
                    <td className="text-center py-2 text-ink-500">
                      {r.xg_for != null && r.xg_against != null
                        ? `${(r.xg_for - r.xg_against).toFixed(1)}`
                        : '—'}
                    </td>
                    <td className="py-2"><div className="flex justify-center"><FormDots form={r.form} /></div></td>
                    <td className="py-2 text-right">{zoneBadge(r.zone)}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      )}

      {/* 回到顶部按钮 */}
      <button
        onClick={scrollToTop}
        className={`fixed bottom-6 right-6 z-40 flex h-10 w-10 items-center justify-center rounded-full border border-ink-200 bg-paper-50 text-ink-600 shadow-lg transition-all duration-300 hover:border-ink-400 hover:text-ink-900 ${
          showBackTop ? 'translate-y-0 opacity-100' : 'translate-y-4 opacity-0 pointer-events-none'
        }`}
        aria-label="回到顶部"
      >
        <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
          <path strokeLinecap="round" strokeLinejoin="round" d="M5 15l7-7 7 7" />
        </svg>
      </button>
    </div>
  )
}