brackt/app/components/scoring/BracketTreePaginated.tsx

import { ChevronLeft, ChevronRight } from "lucide-react";
import { Button } from "~/components/ui/button";
import { useRoundTransition } from "~/hooks/useRoundTransition";
import type { FeederMap } from "~/lib/bracket-layout";
import type { BracketTemplate } from "~/lib/bracket-templates";
import {
  TreeColumns,
  BracketMatchSlot,
  bracketGeometry,
  windowGeometry,
  SLOT_WIDTH,
  LABEL_HEIGHT,
  DESIRED_CARD_HEIGHT,
  MAX_CARD_HEIGHT,
  type BracketMatch,
  type BracketOwnership,
} from "./BracketTreeView";

interface BracketTreePaginatedProps {
  rounds: string[];
  matchesByRound: Map<string, BracketMatch[]>;
  ownershipMap: Map<string, BracketOwnership>;
  userParticipantIds: Set<string>;
  /** Index of the first scoring round — default page starts here */
  firstScoringRoundIdx?: number;
  thirdPlaceRound?: string;
  feeders?: FeederMap;
  template?: BracketTemplate;
}

export function BracketTreePaginated({
  rounds,
  matchesByRound,
  ownershipMap,
  userParticipantIds,
  firstScoringRoundIdx,
  thirdPlaceRound,
  feeders,
  template,
}: BracketTreePaginatedProps) {
  const mainRounds = thirdPlaceRound ? rounds.filter((r) => r !== thirdPlaceRound) : rounds;
  const thirdPlaceMatch = thirdPlaceRound ? (matchesByRound.get(thirdPlaceRound) ?? [])[0] : undefined;

  // Pages are pairs of layout columns, not pairs of rounds: a column can mix rounds
  // when teams enter the bracket at different points (see computeGroupLayout).
  const geometry = bracketGeometry(
    mainRounds,
    matchesByRound,
    feeders,
    template?.rounds.map((r) => r.name) ?? mainRounds
  );
  const columns = geometry.layout.columns;
  const lastPage = Math.max(columns.length - 2, 0);

  const defaultPage = Math.max(
    0,
    Math.min(
      firstScoringRoundIdx !== undefined ? Math.max(0, firstScoringRoundIdx - 1) : lastPage,
      lastPage,
    ),
  );

  const { page, anim, stripRef, navigate, handleTransitionEnd } = useRoundTransition(
    lastPage,
    defaultPage,
  );

  const pageGeometry = (p: number) => windowGeometry(geometry, p, p + 1);
  const labelFor = (p: number) => {
    const [a, b] = [columns[p]?.label, columns[p + 1]?.label];
    return b ? `${a} → ${b}` : (a ?? "");
  };

  const label = labelFor(anim ? anim.toPage : page);

  const pageG = pageGeometry(page);
  const animFromG = anim ? pageGeometry(anim.fromPage) : pageG;
  const animToG = anim ? pageGeometry(anim.toPage) : pageG;

  let leftPage: number;
  let rightPage: number | null = null;
  let leftG = pageG;
  let rightG = pageG;
  let settlingTransition = false;
  if (anim?.phase === "sliding") {
    leftPage = anim.dir === "right" ? anim.fromPage : anim.toPage;
    rightPage = anim.dir === "right" ? anim.toPage : anim.fromPage;
    leftG = anim.dir === "right" ? animFromG : animToG;
    rightG = anim.dir === "right" ? animToG : animFromG;
  } else if (anim?.phase === "settling") {
    leftPage = anim.toPage;
    leftG = animToG;
    settlingTransition = true;
  } else {
    leftPage = page;
  }

  const containerMinHeight =
    anim?.phase === "settling" ? animToG.bracketHeight : animFromG.bracketHeight;
  const initialX = anim?.phase === "sliding" && anim.dir === "left" ? -SLOT_WIDTH : 0;

  return (
    <div>
      <div className="flex items-center gap-2 mb-3">
        <Button
          variant="ghost"
          size="icon"
          onClick={() => navigate(page - 1)}
          disabled={page === 0 || !!anim}
          className="h-7 w-7 shrink-0"
          aria-label="Previous rounds"
        >
          <ChevronLeft className="h-4 w-4" />
        </Button>
        <span className="flex-1 text-center text-xs font-medium text-muted-foreground uppercase tracking-wide truncate">
          {label}
        </span>
        <Button
          variant="ghost"
          size="icon"
          onClick={() => navigate(page + 1)}
          disabled={page >= lastPage || !!anim}
          className="h-7 w-7 shrink-0"
          aria-label="Next rounds"
        >
          <ChevronRight className="h-4 w-4" />
        </Button>
      </div>

      <div style={{ width: SLOT_WIDTH, overflow: "hidden", minHeight: containerMinHeight + LABEL_HEIGHT + 2, transition: settlingTransition ? "min-height 500ms ease" : undefined }}>
        <div
          ref={anim?.phase === "sliding" ? stripRef : undefined}
          style={{
            display: "flex",
            width: anim?.phase === "sliding" ? SLOT_WIDTH * 2 : SLOT_WIDTH,
            transform: anim?.phase === "sliding" ? `translateX(${initialX}px)` : undefined,
          }}
          onTransitionEnd={handleTransitionEnd}
        >
          <div style={{ width: SLOT_WIDTH, flexShrink: 0 }}>
            <TreeColumns
              geometry={leftG}
              columnRange={[leftPage, leftPage + 1]}
              ownershipMap={ownershipMap}
              userParticipantIds={userParticipantIds}
              feeders={feeders}
              template={template}
              transitionDuration={settlingTransition ? 500 : undefined}
            />
          </div>
          {anim?.phase === "sliding" && rightPage !== null && (
            <div style={{ width: SLOT_WIDTH, flexShrink: 0 }}>
              <TreeColumns
                geometry={rightG}
                columnRange={[rightPage, rightPage + 1]}
                ownershipMap={ownershipMap}
                userParticipantIds={userParticipantIds}
                feeders={feeders}
                template={template}
              />
            </div>
          )}
        </div>
      </div>

      {thirdPlaceMatch && (
        <div style={{ marginTop: 20, width: SLOT_WIDTH }}>
          <div
            className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground text-center"
            style={{ height: LABEL_HEIGHT, display: "flex", alignItems: "center", justifyContent: "center" }}
          >
            3rd Place
          </div>
          <BracketMatchSlot
            match={thirdPlaceMatch}
            slotHeight={Math.min(DESIRED_CARD_HEIGHT, MAX_CARD_HEIGHT)}
            ownershipMap={ownershipMap}
            userParticipantIds={userParticipantIds}
            feeders={feeders}
            template={template}
          />
        </div>
      )}
    </div>
  );
}