import { Link } from '@tanstack/react-router';
import { Users } from 'lucide-react';
import { PageHeader } from '@/components/ui/PageHeader';
import { GroupTable } from '@/components/GroupTable';
import { useTournamentStore } from '@/stores/tournamentStore';

export function GroupsPage() {
  const snapshot = useTournamentStore((s) => s.snapshot);
  const tables = snapshot?.tables ?? {};
  const groups = Object.keys(tables).sort();

  return (
    <div>
      <PageHeader
        title="Groups"
        subtitle="All 12 groups · top 2 advance, plus the 8 best third-placed teams."
        actions={
          <Link to="/teams" className="inline-flex items-center gap-1.5 rounded-md border border-line px-3 py-1.5 text-sm font-medium text-muted hover:bg-elevated hover:text-ink">
            <Users size={15} /> All 48 teams
          </Link>
        }
      />
      {groups.length ? (
        <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
          {groups.map((g) => (
            <GroupTable key={g} group={g} rows={tables[g]!} />
          ))}
        </div>
      ) : (
        <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
          {Array.from({ length: 6 }).map((_, i) => (
            <div key={i} className="h-44 animate-pulse rounded-xl border border-line bg-panel" />
          ))}
        </div>
      )}

      <div className="mt-5 flex items-center gap-4 text-xs text-faint">
        <span className="inline-flex items-center gap-1.5">
          <span className="h-2.5 w-2.5 rounded bg-accent-glow ring-1 ring-accent-deep/40" /> Top 2 — advance
        </span>
        <span className="inline-flex items-center gap-1.5">
          <span className="h-2.5 w-2.5 rounded bg-gold/20 ring-1 ring-gold/40" /> 3rd — best-third race
        </span>
      </div>
    </div>
  );
}