worldcup/app/groups/page.tsx

'use client'
import { useQuery, gql } from '@/lib/graphql/hooks'
import { useEffect } from 'react'
import Link from 'next/link'
import { TeamFlag } from '@/components/team-flag'

const GROUPS_QUERY = gql`
  query Groups {
    groupStandings(year: 2026) {
      groupName pos played won drawn lost goalsFor goalsAgainst goalDiff pts
      team { id name iso2 slug }
    }
  }
`

interface Standing {
  groupName: string; pos?: number | null
  played: number; won: number; drawn: number; lost: number
  goalsFor: number; goalsAgainst: number; goalDiff: number; pts: number
  team: { id: number; name: string; iso2?: string | null; slug: string }
}

export default function GroupsPage() {
  const { data, loading } = useQuery(GROUPS_QUERY, { pollInterval: 60_000 })

  useEffect(() => { document.title = 'Group Stage · World Cup' }, [])

  const standings: Standing[] = data?.groupStandings ?? []
  const byGroup = standings.reduce<Record<string, Standing[]>>((acc, s) => {
    acc[s.groupName] = [...(acc[s.groupName] ?? []), s]
    return acc
  }, {})

  const groups = Object.entries(byGroup).sort(([a], [b]) => a.localeCompare(b))

  return (
    <div className="max-w-[1200px] mx-auto px-7 py-10 pb-16">
      <div className="mb-9">
        <h1 className="font-['Bebas_Neue'] text-[52px] tracking-[0.04em] text-green leading-none">2026 Groups</h1>
        <p className="text-green-muted text-sm mt-1.5">48 teams · 12 groups · Top 2 + 8 best 3rd-place advance</p>
      </div>

      {loading && !data && (
        <div className="grid grid-cols-[repeat(auto-fill,minmax(268px,1fr))] gap-3.5">
          {Array.from({ length: 12 }).map((_, i) => (
            <div key={i} className="h-56 rounded-2xl animate-pulse bg-card" />
          ))}
        </div>
      )}

      <div className="grid grid-cols-[repeat(auto-fill,minmax(268px,1fr))] gap-3.5">
        {groups.map(([groupName, rows]) => {
          const sorted = [...rows].sort((a, b) => {
            if (b.pts !== a.pts) return b.pts - a.pts
            if (b.goalDiff !== a.goalDiff) return b.goalDiff - a.goalDiff
            return b.goalsFor - a.goalsFor
          })
          const letter = groupName.replace('Group ', '')
          return (
            <div key={groupName} className="glass-card">
              <div className="px-4 py-3 border-b border-green/10"
                style={{ background: 'linear-gradient(90deg,color-mix(in srgb,var(--color-green) 12%,transparent) 0%,color-mix(in srgb,var(--color-green) 4%,transparent) 100%)' }}>
                <span className="font-['Bebas_Neue'] text-[28px] text-green tracking-[0.05em]">GROUP {letter}</span>
              </div>
              <div className="grid px-4 py-2 text-[9px] text-green-muted tracking-[0.1em] uppercase"
                style={{ gridTemplateColumns: '1fr 22px 22px 22px 22px 22px 30px', gap: '3px' }}>
                <span>Team</span>
                <span className="text-center">P</span><span className="text-center">W</span>
                <span className="text-center">D</span><span className="text-center">L</span>
                <span className="text-center">GD</span><span className="text-center">Pts</span>
              </div>
              {sorted.map((t, idx) => (
                <Link key={t.team.id} href={`/teams/${t.team.slug}`}>
                  <div className={`grid px-4 py-2.5 items-center border-t border-green/[6%] hover:bg-green/[3%] transition-colors cursor-pointer ${idx < 2 ? 'bg-green/[2.5%]' : ''}`}
                    style={{ gridTemplateColumns: '1fr 22px 22px 22px 22px 22px 30px', gap: '3px' }}>
                    <div className="flex items-center gap-2 overflow-hidden">
                      <TeamFlag name={t.team.name} iso2={t.team.iso2} size="sm" />
                      <span className={`text-sm truncate font-medium ${idx < 2 ? 'text-text' : 'text-green-sec'}`}>{t.team.name}</span>
                    </div>
                    {[t.played, t.won, t.drawn, t.lost].map((v, i) => (
                      <span key={i} className="text-center text-[13px] text-green-mid">{v}</span>
                    ))}
                    <span className="text-center text-[13px] text-green-mid">
                      {t.goalDiff > 0 ? `+${t.goalDiff}` : t.goalDiff}
                    </span>
                    <span className="text-center text-[13px] font-bold text-green">{t.pts}</span>
                  </div>
                </Link>
              ))}
            </div>
          )
        })}
      </div>
    </div>
  )
}