brackt/app/components/scoring/NbaBracketLayout.tsx

import type { BracketTemplate, ConferenceGroup } from "~/lib/bracket-templates";
import type { FeederMap } from "~/lib/bracket-layout";
import {
  TreeColumns,
  bracketGeometry,
  type BracketMatch,
  type BracketOwnership,
} from "./BracketTreeView";
import { BracketTreePaginated } from "./BracketTreePaginated";

interface NbaBracketLayoutProps {
  matches: Array<{ round: string; matchNumber: number }>;
  rounds: string[];
  matchesByRound: Map<string, BracketMatch[]>;
  ownershipMap: Map<string, BracketOwnership>;
  userParticipantIds: Set<string>;
  conferenceGroups: ConferenceGroup[];
  scoringRoundIdx: number;
  feeders?: FeederMap;
  template?: BracketTemplate;
}

function splitMatchesByConference(
  matchesByRound: Map<string, BracketMatch[]>,
  group: ConferenceGroup
): Map<string, BracketMatch[]> {
  const result = new Map<string, BracketMatch[]>();
  for (const [round, allowed] of Object.entries(group.roundMatchNumbers)) {
    const roundMatches = matchesByRound.get(round) ?? [];
    const filtered = roundMatches.filter((m) => allowed.includes(m.matchNumber));
    if (filtered.length > 0) result.set(round, filtered);
  }
  return result;
}

export function NbaBracketLayout({
  rounds,
  matchesByRound,
  ownershipMap,
  userParticipantIds,
  conferenceGroups,
  scoringRoundIdx,
  feeders,
  template,
}: NbaBracketLayoutProps) {
  const roundOrder = template?.rounds.map((r) => r.name) ?? rounds;
  // Rounds that belong to any conference group
  const conferenceRoundSet = new Set(
    conferenceGroups.flatMap((g) => Object.keys(g.roundMatchNumbers))
  );
  // Rounds not in any group are shared (e.g. NBA Finals)
  const sharedRounds = rounds.filter((r) => !conferenceRoundSet.has(r));

  // Per-conference round lists (preserving template order)
  const conferenceRounds = conferenceGroups.map((g) =>
    rounds.filter((r) => g.roundMatchNumbers[r] !== undefined)
  );

  // Shared rounds bracket height
  const sharedMatches = new Map(
    sharedRounds.map((r) => [r, matchesByRound.get(r) ?? []])
  );
  const sharedGeometry = bracketGeometry(sharedRounds, sharedMatches, feeders, roundOrder);

  return (
    <>
      {/* ── Desktop: two-conference stacked layout ── */}
      <div className="hidden md:flex md:flex-col md:gap-8">
        {conferenceGroups.map((group, gi) => {
          const confRounds = conferenceRounds[gi];
          const confMatches = splitMatchesByConference(matchesByRound, group);
          const geometry = bracketGeometry(confRounds, confMatches, feeders, roundOrder);

          return (
            <div key={group.name}>
              <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground mb-2">
                {group.name}
              </p>
              <TreeColumns
                geometry={geometry}
                ownershipMap={ownershipMap}
                userParticipantIds={userParticipantIds}
                feeders={feeders}
                template={template}
              />
            </div>
          );
        })}

        {sharedRounds.length > 0 && (
          <div>
            <TreeColumns
              geometry={sharedGeometry}
              ownershipMap={ownershipMap}
              userParticipantIds={userParticipantIds}
              feeders={feeders}
              template={template}
            />
          </div>
        )}
      </div>

      {/* ── Mobile: paginated across all rounds ── */}
      <div className="md:hidden">
        <BracketTreePaginated
          rounds={rounds}
          matchesByRound={matchesByRound}
          ownershipMap={ownershipMap}
          userParticipantIds={userParticipantIds}
          firstScoringRoundIdx={scoringRoundIdx}
          feeders={feeders}
          template={template}
        />
      </div>
    </>
  );
}