Leaderboard

"use client";

import {
  Avatar,
  Body,
  Bolt,
  BottomStack,
  BundleCell,
  BundleCells,
  Button,
  Chrome,
  ChromeRow,
  Coin,
  CornerRibbon,
  Counter,
  Counters,
  Dim,
  Dock,
  FloatChrome,
  Gem,
  GroupKicker,
  Heart,
  LevelBadge,
  MapPin,
  MapScene,
  Meter,
  Pack,
  PackRow,
  Panel,
  PageDots,
  Podium,
  PodiumColumn,
  ProfileChip,
  RankRow,
  Ribbon,
  Screen,
  ScreenName,
  SettingsRow,
  ShopRow,
  StarBurst,
  Strike,
  Tab,
  TabBar,
  TimerPill,
  Toggle,
  TopRibbon,
  Slider,
  Version,
  Well,
  Wordmark,
  YouBadge,
} from "@objectifthunes/royal-games-ui";
import { useState, type ReactNode } from "react";

const ignoreAction = () => undefined;

interface ResourceCountersProps {
  interactive?: boolean;
  onAddCoins?: () => void;
  onAddGems?: () => void;
}

interface NavigationProps {
  onNavigate?: (value: string) => void;
}

function ResourceCounters({
  interactive = true,
  onAddCoins = ignoreAction,
  onAddGems = ignoreAction,
}: ResourceCountersProps) {
  return (
    <Counters aria-label="Player resources">
      {interactive ? (
        <>
          <Counter graphic={<Coin />} onAdd={onAddCoins} addLabel="Add coins">
            2,450
          </Counter>
          <Counter graphic={<Gem />} onAdd={onAddGems} addLabel="Add gems">
            12
          </Counter>
        </>
      ) : (
        <>
          <Counter graphic={<Coin />}>2,450</Counter>
          <Counter graphic={<Gem />}>12</Counter>
        </>
      )}
    </Counters>
  );
}

interface RoyalChromeProps {
  name: ReactNode;
  onAddCoins?: () => void;
  onAddGems?: () => void;
  onOpenSettings?: () => void;
}

function RoyalChrome({
  name,
  onAddCoins = ignoreAction,
  onAddGems = ignoreAction,
  onOpenSettings = ignoreAction,
}: RoyalChromeProps) {
  return (
    <Chrome>
      <ChromeRow tone="velvet">
        <ProfileChip
          avatar={
            <Avatar decorative size="small">
              ♛
            </Avatar>
          }
          name="Max"
          caption="LEVEL 12"
        />
        <ResourceCounters onAddCoins={onAddCoins} onAddGems={onAddGems} />
      </ChromeRow>
      <ChromeRow tone="stone">
        <ScreenName>{name}</ScreenName>
        <Button
          tone="primary"
          size="small"
          iconOnly
          aria-label="Settings"
          onClick={onOpenSettings}
        >
          ⚙
        </Button>
      </ChromeRow>
    </Chrome>
  );
}

interface RoyalTabsProps extends NavigationProps {
  initial: string;
}

function RoyalTabs({ initial, onNavigate = ignoreAction }: RoyalTabsProps) {
  const [tab, setTab] = useState(initial);

  const handleTabChange = (value: string) => {
    setTab(value);
    onNavigate(value);
  };

  return (
    <TabBar
      aria-label="Primary navigation"
      value={tab}
      onValueChange={handleTabChange}
    >
      <Tab value="shop" icon="🛒">
        Shop
      </Tab>
      <Tab value="ranks" icon="♛">
        Ranks
      </Tab>
      <Tab value="home" icon="⌂">
        Home
      </Tab>
      <Tab value="map" icon="⚑">
        Map
      </Tab>
      <Tab value="more" icon="⚙" dot>
        More
      </Tab>
    </TabBar>
  );
}

// SCREEN_RECIPE: RanksScreen
export interface RanksScreenProps extends NavigationProps {}

/** Copy-ready leaderboard recipe with independent podium and list regions. */
export function RanksScreen({
  onNavigate = ignoreAction,
}: RanksScreenProps = {}) {
  return (
    <Screen aria-label="Season leaderboard">
      <Dock edge="top" tone="primary">
        <SettingsRow
          variant="control"
          label={<Ribbon size="screen">Season Ranks</Ribbon>}
          control={
            <TimerPill aria-label="Season ends in two days and four hours">
              ⏳ Ends in <b>2d 4h</b>
            </TimerPill>
          }
        />
        <Podium aria-label="Top three players">
          <PodiumColumn
            place={2}
            avatar={<Avatar decorative>🦊</Avatar>}
            name="Nora"
          />
          <PodiumColumn
            place={1}
            avatar={
              <Avatar decorative size="large">
                🐻
              </Avatar>
            }
            name="Elio"
          />
          <PodiumColumn
            place={3}
            avatar={<Avatar decorative>🐸</Avatar>}
            name="Pip"
          />
        </Podium>
      </Dock>
      <Body layout="list">
        <Panel tone="primary" density="list">
          <RankRow
            position={4}
            avatar={
              <Avatar decorative size="small">
                🦉
              </Avatar>
            }
            name="Wren"
            scoreGraphic={<Coin size="small" />}
            score="9,180"
          />
          <RankRow
            position={5}
            avatar={
              <Avatar decorative size="small">
                🐰
              </Avatar>
            }
            name="Juno"
            scoreGraphic={<Coin size="small" />}
            score="8,875"
          />
          <RankRow
            position={6}
            avatar={
              <Avatar decorative size="small">
                ♛
              </Avatar>
            }
            name="Max"
            scoreGraphic={<Coin size="small" />}
            score="8,420"
            current
            badge={<YouBadge>You</YouBadge>}
          />
          <RankRow
            position={7}
            avatar={
              <Avatar decorative size="small">
                🐱
              </Avatar>
            }
            name="Sable"
            scoreGraphic={<Coin size="small" />}
            score="7,940"
          />
        </Panel>
      </Body>
      <BottomStack>
        <RoyalTabs initial="ranks" onNavigate={onNavigate} />
      </BottomStack>
    </Screen>
  );
}