'use client';

import {VStack} from '@astryxdesign/core/Layout';
import {PageHeader} from '@/shared/components/primitives/PageHeader';
import {FeatureUnavailable} from '@/shared/components/patterns/FeatureUnavailable';
import {TeamTable} from '@/features/team/components/TeamTable';
import {useTeam} from '@/features/team/hooks/useTeam';

/**
 * Leaderboard.
 *
 * ── An important distinction ─────────────────────────────────────────────
 * The platform's `/api/team` is who can SIGN IN to the console, at what
 * privilege. It is not shop-floor rostering: there is no attendance, no shift,
 * no sales-per-head and no performance score anywhere in the contract.
 *
 * The page used to show all of those from a fixture. The real team list is
 * shown instead, and the ranking metrics are named as the gap they are —
 * because a leaderboard built from invented performance scores is the single
 * most damaging fake number in this product.
 */
export default function LeaderboardPage() {
  const team = useTeam();

  return (
    <VStack gap={5}>
      <PageHeader
        title="Leaderboard"
        description="People with access to this console."
      />

      <TeamTable resource={team} />

      <FeatureUnavailable
        title="Attendance and performance ranking"
        description="Ranking staff needs shift and attendance records, and sales credited to the person who made them. The platform records who can sign in to this console — not who was on the shop floor, or which sale was theirs. Until the app records that, any ranking here would be guesswork."
      />
    </VStack>
  );
}