worldcup/app/stats/client.tsx

'use client'
import { useQuery, gql } from '@/lib/graphql/hooks'
import Link from 'next/link'
import { TeamFlag } from '@/components/team-flag'
import {
  ChartBarIcon, StarIcon, TrophyIcon, ClockIcon, BoltIcon,
  FireIcon, SparklesIcon, ArrowPathIcon, GlobeEuropeAfricaIcon, TableCellsIcon,
} from '@heroicons/react/24/outline'

const STATS_QUERY = gql`
  query Stats {
    tournaments { year host totalGoals matchesCount avgGoalsPerGame winner }
    topScorers(limit: 20) {
      playerName goals penalties ownGoals tournaments
      team { name iso2 slug }
    }
    teams {
      id name iso2 slug
      stats { appearances titles wins draws losses goalsFor goalsAgainst goalDiff winPct }
    }
    goalsByMinute { bucket count }
    confederationStats { confederation appearances titles totalGoals }
    hatTricks {
      playerName year round goals
      team { name iso2 }
      opponent { name iso2 }
    }
    biggestWins(limit: 10) {
      id year round date margin totalGoals scoreFt
      team1 { name iso2 } team2 { name iso2 }
    }
    highestScoringMatches(limit: 10) {
      id year round date totalGoals scoreFt
      team1 { name iso2 } team2 { name iso2 }
    }
    extraTimeStats {
      totalKnockoutMatches wentToExtraTime wentToPenalties extraTimePct penaltiesPct
    }
  }
`

function SectionTitle({ children, icon: Icon }: { children: React.ReactNode; icon: React.ComponentType<{ className?: string }> }) {
  return (
    <h2 className="flex items-center gap-1.5 text-[11px] font-bold tracking-[0.14em] uppercase text-green-muted mb-4">
      <Icon className="w-3.5 h-3.5 flex-shrink-0" />
      {children}
    </h2>
  )
}

function Card({ children, className = '' }: { children: React.ReactNode; className?: string }) {
  return (
    <div className={`glass-card ${className}`}>
      {children}
    </div>
  )
}

interface Tournament { year: number; host: string; totalGoals?: number | null; matchesCount?: number | null; avgGoalsPerGame?: string | number | null; winner?: string | null }
interface Scorer { playerName: string; goals: number; penalties: number; ownGoals: number; tournaments: number; team?: { name: string; iso2?: string | null; slug: string } | null }
interface TeamRow { id: number; name: string; iso2?: string | null; slug: string; stats?: { appearances: number; titles: number; wins: number; draws: number; losses: number; goalsFor: number; goalsAgainst: number; winPct: number } | null }
interface MinuteBucket { bucket: string; count: number }
interface ConfStat { confederation: string; appearances: number; titles: number; totalGoals: number }
interface HatTrick { playerName: string; year: number; round: string; goals: number; team?: { name: string; iso2?: string | null } | null; opponent?: { name: string; iso2?: string | null } | null }
interface MatchRow { id: number; year: number; round: string; date?: string | null; margin?: number | null; totalGoals?: number | null; scoreFt?: number[] | null; team1: { name: string; iso2?: string | null }; team2: { name: string; iso2?: string | null } }
interface ETStats { totalKnockoutMatches: number; wentToExtraTime: number; wentToPenalties: number; extraTimePct: number; penaltiesPct: number }

export function StatsClient() {

  const { data, loading } = useQuery(STATS_QUERY)

  const tournaments: Tournament[] = (data?.tournaments ?? []).filter((t: Tournament) => t.totalGoals != null).sort((a: Tournament, b: Tournament) => a.year - b.year)
  const scorers: Scorer[] = data?.topScorers ?? []
  const teams: TeamRow[] = (data?.teams ?? []).filter((t: TeamRow) => t.stats && t.stats.appearances > 0).sort((a: TeamRow, b: TeamRow) => (b.stats?.appearances ?? 0) - (a.stats?.appearances ?? 0))
  const minuteBuckets: MinuteBucket[] = data?.goalsByMinute ?? []
  const confStats: ConfStat[] = data?.confederationStats ?? []
  const hatTricks: HatTrick[] = data?.hatTricks ?? []
  const biggestWins: MatchRow[] = data?.biggestWins ?? []
  const highScoring: MatchRow[] = data?.highestScoringMatches ?? []
  const etStats: ETStats | null = data?.extraTimeStats ?? null

  const titlesByNation = teams
    .filter(t => (t.stats?.titles ?? 0) > 0)
    .sort((a, b) => (b.stats?.titles ?? 0) - (a.stats?.titles ?? 0))
    .slice(0, 10)

  const maxGoals = Math.max(...tournaments.map(t => t.totalGoals ?? 0), 1)
  const maxScorer = Math.max(...scorers.map(s => s.goals), 1)
  const maxMinute = Math.max(...minuteBuckets.map(b => b.count), 1)

  return (
    <div className="max-w-[1200px] mx-auto px-7 py-10 pb-16">
      <h1 className="font-['Bebas_Neue'] text-[52px] tracking-[0.04em] text-green leading-none mb-10">Historical Statistics</h1>

      {loading && !data && (
        <div className="text-green-muted text-sm py-16 text-center">Loading statistics…</div>
      )}

      {/* ── Goals per tournament bar chart ── */}
      {tournaments.length > 0 && (
        <div className="mb-12">
          <SectionTitle icon={ChartBarIcon}>Goals Scored per Tournament</SectionTitle>
          <Card>
            <div className="px-3 pt-4 pb-0 sm:px-7 sm:pt-7">
              <div className="flex items-end gap-[2px] sm:gap-[3px] h-[170px]">
                {tournaments.map(t => {
                  const h = Math.max(4, Math.round(((t.totalGoals ?? 0) / maxGoals) * 140))
                  const avg = t.avgGoalsPerGame ? Number(t.avgGoalsPerGame).toFixed(1) : null
                  return (
                    <Link key={t.year} href={`/tournaments/${t.year}`} className="flex flex-col items-center flex-1 min-w-[8px] group">
                      <div className="text-[6px] sm:text-[7px] text-green-muted font-semibold mb-1 leading-none group-hover:text-green">{t.totalGoals}</div>
                      <div className="w-full rounded-t-sm border-t-2 border-green/45 transition-colors group-hover:bg-green/35 bg-green/[18%]"
                        style={{ height: `${h}px` }}
                        title={`${t.year}: ${t.totalGoals} goals${avg ? ` · ${avg}/game` : ''}`}
                      />
                    </Link>
                  )
                })}
              </div>
              <div className="flex gap-[2px] sm:gap-[3px] pt-1.5 pb-3 border-t border-green/[6%]">
                {tournaments.map(t => (
                  <div key={t.year} className="flex-1 text-center text-[6px] text-green-dark" style={{ transform: 'rotate(-45deg)', transformOrigin: 'center top' }}>
                    {t.year}
                  </div>
                ))}
              </div>
            </div>
          </Card>
        </div>
      )}

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-12">
        {/* ── All-time top scorers ── */}
        <div>
          <SectionTitle icon={StarIcon}>All-Time Top Scorers</SectionTitle>
          <Card>
            {scorers.map((s, i) => (
              <Link key={s.playerName} href={`/players/${encodeURIComponent(s.playerName)}`}>
                <div className={`flex items-center gap-2 sm:gap-3 px-3 sm:px-4 py-3 border-b hover:bg-green/[3%] cursor-pointer border-green/5 ${i === 0 ? 'bg-green/[4%]' : ''}`}>
                  <span className="text-[11px] text-green-muted w-5 text-right font-bold flex-shrink-0">{i + 1}</span>
                  {s.team && <TeamFlag name={s.team.name} iso2={s.team.iso2} size="sm" />}
                  <div className="flex-1 min-w-0">
                    <div className={`text-sm font-semibold truncate ${i < 3 ? 'text-text' : 'text-green-sec'}`}>{s.playerName}</div>
                    <div className="text-[10px] text-green-muted truncate">{s.team?.name} · {s.tournaments} WC{s.tournaments !== 1 ? 's' : ''}{s.penalties > 0 ? ` · ${s.penalties}P` : ''}</div>
                  </div>
                  <div className="hidden sm:block w-16 h-1 rounded-full flex-shrink-0 bg-green/10">
                    <div className="h-full rounded-full bg-green" style={{ width: `${(s.goals / maxScorer) * 100}%` }} />
                  </div>
                  <span className="font-['Bebas_Neue'] text-[22px] text-green min-w-[28px] text-right flex-shrink-0">{s.goals}</span>
                </div>
              </Link>
            ))}
          </Card>
        </div>

        {/* ── World Cup titles ── */}
        <div>
          <SectionTitle icon={TrophyIcon}>World Cup Titles by Nation</SectionTitle>
          <Card>
            {titlesByNation.map((t, i) => (
              <Link key={t.name} href={`/teams/${t.slug}`}>
                <div className="flex items-center gap-2 sm:gap-3 px-3 sm:px-4 py-3.5 border-b border-green/5 hover:bg-green/[3%] cursor-pointer"
                 >
                  <span className="text-[11px] text-green-muted w-5 text-right font-bold flex-shrink-0">{i + 1}</span>
                  <TeamFlag name={t.name} iso2={t.iso2} size="sm" />
                  <div className="flex-1 min-w-0 text-sm font-semibold text-text truncate">{t.name}</div>
                  <div className="hidden sm:flex gap-0.5 flex-shrink-0">
                    {Array.from({ length: t.stats?.titles ?? 0 }).map((_, j) => (
                      <TrophyIcon key={j} className="w-4 h-4 text-green" />
                    ))}
                  </div>
                  <span className="font-['Bebas_Neue'] text-[28px] text-green flex-shrink-0">{t.stats?.titles}</span>
                </div>
              </Link>
            ))}
          </Card>
        </div>
      </div>

      {/* ── Goals by minute heatmap ── */}
      {minuteBuckets.length > 0 && (
        <div className="mb-12">
          <SectionTitle icon={ClockIcon}>Goals by Minute (All-Time)</SectionTitle>
          <Card>
            <div className="px-3 py-4 sm:p-6">
              <div className="flex items-end gap-1 sm:gap-3 h-24">
                {minuteBuckets.map(b => {
                  const h = Math.max(8, Math.round((b.count / maxMinute) * 80))
                  return (
                    <div key={b.bucket} className="flex-1 flex flex-col items-center gap-1">
                      <span className="text-[7px] sm:text-[9px] text-green-muted font-bold leading-none">{b.count}</span>
                      <div className="w-full rounded-t bg-green/30 border border-green/50" style={{ height: `${h}px` }} />
                      <span className="text-[7px] sm:text-[9px] text-green-dark leading-none">{b.bucket}</span>
                    </div>
                  )
                })}
              </div>
            </div>
          </Card>
        </div>
      )}

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-12">
        {/* ── Biggest wins ── */}
        <div>
          <SectionTitle icon={BoltIcon}>Biggest Victories</SectionTitle>
          <Card>
            {biggestWins.map(m => (
              <Link key={m.id} href={`/tournaments/${m.year}#match-${m.id}`}>
                <div className="flex items-center gap-3 px-4 py-2.5 border-b border-green/5 hover:bg-green/[3%] cursor-pointer"
                 >
                  <TeamFlag name={m.team1.name} iso2={m.team1.iso2} size="sm" />
                  <div className="flex-1 min-w-0">
                    <div className="text-sm font-medium text-text truncate">{m.team1.name} vs {m.team2.name}</div>
                    <div className="text-[10px] text-green-muted">{m.year} · {m.round}</div>
                  </div>
                  <span className="font-['Bebas_Neue'] text-xl text-green flex-shrink-0">
                    {m.scoreFt?.[0]}–{m.scoreFt?.[1]}
                  </span>
                  <span className="text-[10px] text-green-muted flex-shrink-0">+{m.margin}</span>
                </div>
              </Link>
            ))}
          </Card>
        </div>

        {/* ── Highest scoring matches ── */}
        <div>
          <SectionTitle icon={FireIcon}>Highest Scoring Matches</SectionTitle>
          <Card>
            {highScoring.map(m => (
              <Link key={m.id} href={`/tournaments/${m.year}#match-${m.id}`}>
                <div className="flex items-center gap-3 px-4 py-2.5 border-b border-green/5 hover:bg-green/[3%] cursor-pointer"
                 >
                  <TeamFlag name={m.team1.name} iso2={m.team1.iso2} size="sm" />
                  <div className="flex-1 min-w-0">
                    <div className="text-sm font-medium text-text truncate">{m.team1.name} vs {m.team2.name}</div>
                    <div className="text-[10px] text-green-muted">{m.year} · {m.round}</div>
                  </div>
                  <span className="font-['Bebas_Neue'] text-xl text-green flex-shrink-0">
                    {m.scoreFt?.[0]}–{m.scoreFt?.[1]}
                  </span>
                  <span className="text-[10px] text-green-light flex-shrink-0">{m.totalGoals} goals</span>
                </div>
              </Link>
            ))}
          </Card>
        </div>
      </div>

      {/* ── Hat-tricks ── */}
      {hatTricks.length > 0 && (
        <div className="mb-12">
          <SectionTitle icon={SparklesIcon}>Hat-Tricks</SectionTitle>
          <div className="grid grid-cols-[repeat(auto-fill,minmax(240px,1fr))] gap-3">
            {hatTricks.map((h, i) => (
              <div key={i} className="glass-card rounded-xl p-4">
                <div className="flex items-center gap-2 mb-2">
                  {h.team && <TeamFlag name={h.team.name} iso2={h.team.iso2} size="sm" />}
                  <div>
                    <div className="text-sm font-semibold text-text">{h.playerName}</div>
                    <div className="text-[10px] text-green-muted">{h.team?.name}</div>
                  </div>
                  <span className="ml-auto font-['Bebas_Neue'] text-2xl text-green">{h.goals}</span>
                </div>
                <div className="text-[10px] text-green-muted">
                  {h.year} · {h.round}
                  {h.opponent && <span> vs {h.opponent.name}</span>}
                </div>
              </div>
            ))}
          </div>
        </div>
      )}

      {/* ── ET & Penalty stats ── */}
      {etStats && (
        <div className="mb-12">
          <SectionTitle icon={ArrowPathIcon}>Extra Time & Penalty Shootouts</SectionTitle>
          <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
            {[
              { label: 'Knockout Matches', value: etStats.totalKnockoutMatches },
              { label: 'Went to AET', value: `${etStats.wentToExtraTime} (${etStats.extraTimePct}%)` },
              { label: 'Decided by PSO', value: `${etStats.wentToPenalties} (${etStats.penaltiesPct}%)` },
              { label: 'Decided in 90min', value: etStats.totalKnockoutMatches - etStats.wentToExtraTime },
            ].map(s => (
              <div key={s.label} className="glass-card rounded-xl p-4">
                <div className="text-[9px] text-green-muted tracking-[0.1em] uppercase mb-2">{s.label}</div>
                <div className="font-['Bebas_Neue'] text-2xl text-green">{s.value}</div>
              </div>
            ))}
          </div>
        </div>
      )}

      {/* ── Confederation stats ── */}
      {confStats.length > 0 && (
        <div className="mb-12">
          <SectionTitle icon={GlobeEuropeAfricaIcon}>Performance by Confederation</SectionTitle>
          <Card>
            <table className="w-full">
              <thead>
                <tr className="border-b border-green/8">
                  <th className="text-left px-4 py-2 text-[9px] font-bold tracking-[0.1em] uppercase text-green-muted">Confederation</th>
                  <th className="text-right px-4 py-2 text-[9px] font-bold tracking-[0.1em] uppercase text-green-muted">Appearances</th>
                  <th className="text-right px-4 py-2 text-[9px] font-bold tracking-[0.1em] uppercase text-green-muted">Titles</th>
                  <th className="text-right px-4 py-2 text-[9px] font-bold tracking-[0.1em] uppercase text-green-muted">Goals</th>
                </tr>
              </thead>
              <tbody>
                {confStats.map(c => (
                  <tr key={c.confederation} className="border-t border-green/[6%]">
                    <td className="px-4 py-3 text-sm font-medium text-text">{c.confederation}</td>
                    <td className="px-4 py-3 text-right text-sm text-green-sec">{c.appearances}</td>
                    <td className="px-4 py-3 text-right font-['Bebas_Neue'] text-xl text-green">{c.titles}</td>
                    <td className="px-4 py-3 text-right text-sm text-green-sec">{c.totalGoals}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </Card>
        </div>
      )}

      {/* ── All-time team table ── */}
      {teams.length > 0 && (
        <div>
          <SectionTitle icon={TableCellsIcon}>All-Time Team Table</SectionTitle>
          <Card>
            <div className="overflow-x-auto">
              <table className="w-full" style={{ minWidth: '560px' }}>
                <thead>
                  <tr className="border-b border-green/8">
                    {['#', 'Team', 'WC', 'W', 'D', 'L', 'GF', 'GA', 'GD', 'Win%'].map((h, i) => (
                      <th key={h} className={`py-2 text-[9px] font-bold tracking-[0.1em] uppercase text-green-muted ${i === 0 ? 'pl-4 pr-2 text-left w-8' : i === 1 ? 'px-2 text-left' : 'px-2 text-right'}`}>{h}</th>
                    ))}
                  </tr>
                </thead>
                <tbody>
                  {teams.slice(0, 40).map((t, i) => (
                    <tr key={t.id} className="border-t border-green/5 hover:bg-green/[3%]">
                      <td className="pl-4 pr-2 py-2.5 text-[11px] text-green-muted font-bold">{i + 1}</td>
                      <td className="px-2 py-2.5">
                        <Link href={`/teams/${t.slug}`} className="flex items-center gap-2">
                          <TeamFlag name={t.name} iso2={t.iso2} size="sm" />
                          <span className="text-sm text-text whitespace-nowrap">{t.name}</span>
                        </Link>
                      </td>
                      <td className="px-2 py-2.5 text-right text-sm text-green-mid">{t.stats?.appearances}</td>
                      <td className="px-2 py-2.5 text-right text-sm text-green-mid">{t.stats?.wins}</td>
                      <td className="px-2 py-2.5 text-right text-sm text-green-mid">{t.stats?.draws}</td>
                      <td className="px-2 py-2.5 text-right text-sm text-green-mid">{t.stats?.losses}</td>
                      <td className="px-2 py-2.5 text-right text-sm text-green-mid">{t.stats?.goalsFor}</td>
                      <td className="px-2 py-2.5 text-right text-sm text-green-mid">{t.stats?.goalsAgainst}</td>
                      <td className="px-2 py-2.5 text-right text-sm text-green-mid">
                        {(t.stats?.goalsFor ?? 0) - (t.stats?.goalsAgainst ?? 0) >= 0
                          ? `+${(t.stats?.goalsFor ?? 0) - (t.stats?.goalsAgainst ?? 0)}`
                          : (t.stats?.goalsFor ?? 0) - (t.stats?.goalsAgainst ?? 0)}
                      </td>
                      <td className="px-2 pr-4 py-2.5 text-right text-[13px] font-bold text-green">{t.stats?.winPct}%</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </Card>
        </div>
      )}
    </div>
  )
}