brackt/app/components/scoring/BracketTreeView.tsx

import { useEffect, useRef, useState } from "react";
import { ChevronLeft, ChevronRight } from "lucide-react";
import { Button } from "~/components/ui/button";

export interface BracketMatch {
  id: string;
  round: string;
  matchNumber: number;
  participant1Id: string | null;
  participant2Id: string | null;
  winnerId: string | null;
  loserId: string | null;
  isComplete: boolean;
  participant1Score: string | null;
  participant2Score: string | null;
  isScoring?: boolean;
  participant1?: { id: string; name: string } | null;
  participant2?: { id: string; name: string } | null;
  winner?: { id: string; name: string } | null;
  loser?: { id: string; name: string } | null;
}

export interface BracketOwnership {
  participantId: string;
  teamName: string;
  teamId: string;
  ownerName?: string;
}

const COLUMN_WIDTH = 152;
const CONNECTOR_WIDTH = 24;
const SLOT_WIDTH = 2 * COLUMN_WIDTH + CONNECTOR_WIDTH; // viewport width for 2 columns
const LABEL_HEIGHT = 32;
const CARD_GAP = 14;         // vertical gap between cards (split top/bottom)
const DESIRED_CARD_HEIGHT = 112; // target card height — tall enough to show owner info
const MAX_CARD_HEIGHT = 140;    // cap for sparse later rounds

// Avatar color palette (matches TeamOwnerBadge)
const AVATAR_COLORS = ["#adf661", "#2ce1c1", "#8b5cf6", "#f59e0b", "#ef4444", "#3b82f6"];
function hashName(name: string): number {
  let h = 0;
  for (let i = 0; i < name.length; i++) h = (h * 31 + name.charCodeAt(i)) & 0xffff;
  return h;
}
function avatarColor(name: string) {
  return AVATAR_COLORS[hashName(name) % AVATAR_COLORS.length];
}

function formatScore(score: string | null): string | null {
  if (!score) return null;
  const n = parseFloat(score);
  if (isNaN(n)) return null;
  return Number.isInteger(n) ? String(n) : n.toFixed(1);
}

// ─── Match Slot ──────────────────────────────────────────────────────────────

interface ParticipantRowProps {
  name: string | null;
  isTbd: boolean;
  isWinner: boolean;
  isLoser: boolean;
  isOwned: boolean;
  ownership: BracketOwnership | null;
  score: string | null;
  rowHeight: number;
  showScore: boolean;
  showOwner: boolean;
  showText: boolean;
}

function ParticipantRow({
  name,
  isTbd,
  isWinner,
  isLoser,
  isOwned,
  ownership,
  score,
  rowHeight,
  showScore,
  showOwner,
  showText,
}: ParticipantRowProps) {
  const formattedScore = formatScore(score);

  return (
    <div
      className="relative flex items-center overflow-hidden"
      style={{ height: rowHeight }}
    >
      {showText && (
        <div className={[
          "flex items-center flex-1 min-w-0 gap-1.5 px-2 pl-[7px] ml-2",
          isWinner && isOwned ? "border border-electric/50 bg-electric/8 rounded-md mr-2 my-0.5 self-stretch py-1" :
          isWinner ? "border border-white/15 bg-white/5 rounded-md mr-2 my-0.5 self-stretch py-1" : "",
        ].filter(Boolean).join(" ")}>
          {/* Manager avatar — always present for alignment; empty box when unowned */}
          <div
            className="shrink-0 rounded-[3px] flex items-center justify-center text-[8px] font-bold"
            style={{
              width: 18,
              height: 18,
              background: ownership ? "#000" : "transparent",
              color: ownership ? avatarColor(ownership.teamName) : undefined,
            }}
          >
            {ownership &&
              ownership.teamName
                .split(/\s+/)
                .slice(0, 2)
                .map((w) => w[0]?.toUpperCase() ?? "")
                .join("")}
          </div>

          <div className="flex-1 min-w-0">
            <span
              className={[
                "text-[13px] leading-tight block truncate",
                isTbd ? "text-muted-foreground/50 italic" : "",
                isLoser && isOwned ? "text-electric/50 line-through" :
                isLoser ? "text-muted-foreground line-through" : "",
                isWinner ? "font-semibold" : "",
              ]
                .filter(Boolean)
                .join(" ")}
            >
              {name ?? "TBD"}
            </span>

            {/* Owner name below participant name */}
            {showOwner && !isTbd && ownership && (
              <span className="text-[10px] text-muted-foreground truncate block leading-none">
                {ownership.ownerName ?? ownership.teamName}
              </span>
            )}
          </div>

          {/* Score */}
          {showScore && formattedScore && (
            <span
              className={[
                "shrink-0 text-xs tabular-nums font-medium ml-auto pl-1",
                isLoser ? "text-muted-foreground/60" : "",
                isWinner ? "text-yellow-400" : "",
              ]
                .filter(Boolean)
                .join(" ")}
            >
              {formattedScore}
            </span>
          )}
        </div>
      )}
    </div>
  );
}

interface BracketMatchSlotProps {
  match: BracketMatch;
  slotHeight: number;
  ownershipMap: Map<string, BracketOwnership>;
  userParticipantIds: Set<string>;
}

export function BracketMatchSlot({
  match,
  slotHeight,
  ownershipMap,
  userParticipantIds,
}: BracketMatchSlotProps) {
  const rowHeight = slotHeight / 2;
  const showText = rowHeight >= 10;
  const showScore = rowHeight >= 20 && (!!match.participant1Score || match.isComplete);
  const showOwner = rowHeight >= 36;

  const p1Id = match.participant1Id;
  const p2Id = match.participant2Id;
  const p1IsWinner = match.isComplete && match.winnerId === p1Id;
  const p2IsWinner = match.isComplete && match.winnerId === p2Id;
  const p1IsLoser = match.isComplete && match.loserId === p1Id;
  const p2IsLoser = match.isComplete && match.loserId === p2Id;
  const p1IsOwned = !!(p1Id && userParticipantIds.has(p1Id));
  const p2IsOwned = !!(p2Id && userParticipantIds.has(p2Id));
  const matchHasOwned = p1IsOwned || p2IsOwned;
  const isTbd1 = !p1Id;
  const isTbd2 = !p2Id;

  const p1Ownership = p1Id ? ownershipMap.get(p1Id) ?? null : null;
  const p2Ownership = p2Id ? ownershipMap.get(p2Id) ?? null : null;

  // Corona glow: gradient for complete matches, electric for user's picks, subtle white for pending
  const coronaStyle: React.CSSProperties = match.isComplete
    ? { background: "linear-gradient(to bottom, #adf661, #2ce1c1)" }
    : matchHasOwned
    ? { background: "rgba(44, 225, 193, 0.4)" }
    : { background: "rgba(255, 255, 255, 0.07)" };

  const INSET = Math.max(1, Math.min(2, Math.floor(slotHeight / 20)));

  return (
    <div className="relative overflow-hidden" style={{ height: slotHeight }}>
      {/* Corona layer — left-2 matches card borderRadius to prevent gradient bleed at left corners */}
      <div className="absolute left-2 right-0 rounded-lg" style={{ ...coronaStyle, top: INSET - 2, bottom: INSET - 2 }} />

      {/* Inner card, inset on right to expose corona glow strip */}
      <div
        className="absolute flex flex-col overflow-hidden"
        style={{
          top: 0,
          right: INSET + 2,
          bottom: 0,
          left: 0,
          borderRadius: 8,
          background: "var(--color-muted)",
          paddingTop: INSET,
          paddingBottom: INSET,
        }}
      >
        <ParticipantRow
          name={match.participant1?.name ?? null}
          isTbd={isTbd1}
          isWinner={p1IsWinner}
          isLoser={p1IsLoser}
          isOwned={p1IsOwned}
          ownership={p1Ownership}
          score={match.participant1Score}
          rowHeight={rowHeight - INSET}
          showScore={showScore}
          showOwner={showOwner}
          showText={showText}
        />
        <ParticipantRow
          name={match.participant2?.name ?? null}
          isTbd={isTbd2}
          isWinner={p2IsWinner}
          isLoser={p2IsLoser}
          isOwned={p2IsOwned}
          ownership={p2Ownership}
          score={match.participant2Score}
          rowHeight={rowHeight - INSET}
          showScore={showScore}
          showOwner={showOwner}
          showText={showText}
        />
      </div>
    </div>
  );
}

// ─── Per-pair connector column ────────────────────────────────────────────────

interface ConnectorColumnProps {
  currentMatches: BracketMatch[];
  nextMatches: BracketMatch[];
  bracketHeight: number;
}

function ConnectorColumn({ currentMatches, nextMatches, bracketHeight }: ConnectorColumnProps) {
  const mid = CONNECTOR_WIDTH / 2;
  const paths: string[] = [];

  const currentSlotH = bracketHeight / Math.max(currentMatches.length, 1);
  const nextSlotH = bracketHeight / Math.max(nextMatches.length, 1);

  // Use halving U-shapes only when prev > 1 (avoids false-positive 1→1 side branches like 3PG→Finals)
  if (nextMatches.length === Math.ceil(currentMatches.length / 2) && currentMatches.length > 1) {
    // Standard single-elimination halving: U-shape connectors
    for (let k = 0; k < nextMatches.length; k++) {
      const topY = (2 * k) * currentSlotH + currentSlotH / 2;
      const midY = k * nextSlotH + nextSlotH / 2;
      const botIdx = 2 * k + 1;

      if (botIdx < currentMatches.length) {
        const botY = botIdx * currentSlotH + currentSlotH / 2;
        paths.push(`M 0 ${topY} H ${mid} V ${botY} H 0`);
        paths.push(`M ${mid} ${midY} H ${CONNECTOR_WIDTH}`);
      } else {
        paths.push(`M 0 ${topY} H ${CONNECTOR_WIDTH}`);
      }
    }
  } else {
    // Non-standard (byes, play-ins, etc.): trace winners by participantId
    const winnerToIdx = new Map<string, number>();
    currentMatches.forEach((m, idx) => {
      if (m.winnerId) winnerToIdx.set(m.winnerId, idx);
    });

    nextMatches.forEach((nextMatch, nextIdx) => {
      const destY = nextIdx * nextSlotH + nextSlotH / 2;
      for (const pId of [nextMatch.participant1Id, nextMatch.participant2Id]) {
        if (!pId) continue;
        const srcIdx = winnerToIdx.get(pId);
        if (srcIdx === undefined) continue;
        const srcY = srcIdx * currentSlotH + currentSlotH / 2;
        paths.push(`M 0 ${srcY} H ${mid} V ${destY} H ${CONNECTOR_WIDTH}`);
      }
    });
  }

  return (
    <div style={{ flex: `0 0 ${CONNECTOR_WIDTH}px`, position: "relative" }}>
      <svg
        style={{
          position: "absolute",
          top: LABEL_HEIGHT,
          left: 0,
          width: CONNECTOR_WIDTH,
          height: bracketHeight,
          overflow: "visible",
          pointerEvents: "none",
        }}
      >
        {paths.map((d) => (
          <path key={d} d={d} fill="none" stroke="rgb(255 255 255 / 22%)" strokeWidth={1.5} />
        ))}
      </svg>
    </div>
  );
}

// ─── Tree columns (shared by full + paginated) ───────────────────────────────

interface TreeColumnsProps {
  visibleRounds: string[];
  matchesByRound: Map<string, BracketMatch[]>;
  ownershipMap: Map<string, BracketOwnership>;
  userParticipantIds: Set<string>;
  bracketHeight: number;
  transitionDuration?: number;
}

export function TreeColumns({
  visibleRounds,
  matchesByRound,
  ownershipMap,
  userParticipantIds,
  bracketHeight,
  transitionDuration,
}: TreeColumnsProps) {
  const tr = transitionDuration ? `${transitionDuration}ms ease` : undefined;
  return (
    <div style={{ display: "flex", width: "100%", height: bracketHeight + LABEL_HEIGHT, transition: tr ? `height ${tr}` : undefined }}>
      {visibleRounds.map((round, ri) => {
        const roundMatches = matchesByRound.get(round) ?? [];
        const slotHeight = bracketHeight / Math.max(roundMatches.length, 1);
        const cardHeight = Math.min(slotHeight - CARD_GAP, MAX_CARD_HEIGHT);
        const cardTop = (slotHeight - cardHeight) / 2;
        const nextRound = ri < visibleRounds.length - 1 ? visibleRounds[ri + 1] : null;
        const nextMatches = nextRound ? (matchesByRound.get(nextRound) ?? []) : [];

        return (
          <div key={round} style={{ display: "contents" }}>
            {/* Round column */}
            <div style={{ flex: "1 1 0", minWidth: COLUMN_WIDTH, position: "relative" }}>
              <div
                className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground truncate text-center"
                style={{ height: LABEL_HEIGHT, display: "flex", alignItems: "center", justifyContent: "center" }}
              >
                {round}
              </div>

              <div style={{ position: "relative", height: bracketHeight, transition: tr ? `height ${tr}` : undefined }}>
                {roundMatches.map((match, matchIdx) => (
                  <div
                    key={match.id}
                    style={{
                      position: "absolute",
                      top: matchIdx * slotHeight + cardTop,
                      left: 0,
                      right: 0,
                      height: cardHeight,
                      transition: tr ? `top ${tr}, height ${tr}` : undefined,
                    }}
                  >
                    <BracketMatchSlot
                      match={match}
                      slotHeight={cardHeight}
                      ownershipMap={ownershipMap}
                      userParticipantIds={userParticipantIds}
                    />
                  </div>
                ))}
              </div>
            </div>

            {/* Connector between this column and the next */}
            {nextRound && (
              <ConnectorColumn
                currentMatches={roundMatches}
                nextMatches={nextMatches}
                bracketHeight={bracketHeight}
              />
            )}
          </div>
        );
      })}
    </div>
  );
}

// ─── Full desktop tree ────────────────────────────────────────────────────────

interface BracketTreeViewProps {
  rounds: string[];
  matchesByRound: Map<string, BracketMatch[]>;
  ownershipMap: Map<string, BracketOwnership>;
  userParticipantIds: Set<string>;
  thirdPlaceRound?: string;
}

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

  const maxMatches = Math.max(...mainRounds.map((r) => matchesByRound.get(r)?.length ?? 0), 1);
  const bracketHeight = maxMatches * (DESIRED_CARD_HEIGHT + CARD_GAP);
  const minWidth = mainRounds.length * COLUMN_WIDTH + Math.max(0, mainRounds.length - 1) * CONNECTOR_WIDTH;

  return (
    <div
      className="w-full overflow-x-auto"
      style={{ minHeight: bracketHeight + LABEL_HEIGHT + 2 }}
    >
      <div style={{ minWidth }}>
        <TreeColumns
          visibleRounds={mainRounds}
          matchesByRound={matchesByRound}
          ownershipMap={ownershipMap}
          userParticipantIds={userParticipantIds}
          bracketHeight={bracketHeight}
        />
        {thirdPlaceMatch && (
          <div style={{ display: "flex", paddingTop: 20 }}>
            <div style={{ flex: 1 }} />
            <div style={{ minWidth: COLUMN_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>
              <div style={{ height: Math.min(DESIRED_CARD_HEIGHT, MAX_CARD_HEIGHT) }}>
                <BracketMatchSlot
                  match={thirdPlaceMatch}
                  slotHeight={Math.min(DESIRED_CARD_HEIGHT, MAX_CARD_HEIGHT)}
                  ownershipMap={ownershipMap}
                  userParticipantIds={userParticipantIds}
                />
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

// ─── Paginated mobile tree ────────────────────────────────────────────────────

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;
}

interface AnimState {
  fromPage: number;
  toPage: number;
  dir: "left" | "right";
  phase: "sliding" | "settling";
}

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

  const defaultPage = Math.max(
    0,
    Math.min(
      firstScoringRoundIdx !== undefined
        ? Math.max(0, firstScoringRoundIdx - 1)
        : mainRounds.length - 2,
      mainRounds.length - 2,
    ),
  );
  const [page, setPage] = useState(defaultPage);
  const [anim, setAnim] = useState<AnimState | null>(null);
  const stripRef = useRef<HTMLDivElement>(null);

  // Sliding phase: after React paints the strip at its initial offset, trigger the CSS transition
  useEffect(() => {
    if (!anim || anim.phase !== "sliding" || !stripRef.current) return;
    const el = stripRef.current;
    const finalX = anim.dir === "right" ? -SLOT_WIDTH : 0;
    const raf = requestAnimationFrame(() => {
      el.style.transition = "transform 200ms ease";
      el.style.transform = `translateX(${finalX}px)`;
    });
    return () => cancelAnimationFrame(raf);
  }, [anim]);

  // Settling phase: slide done, cards now CSS-transition to toPage layout; clear after transitions
  useEffect(() => {
    if (!anim || anim.phase !== "settling") return;
    const timer = setTimeout(() => setAnim(null), 520);
    return () => clearTimeout(timer);
  }, [anim]);

  const navigate = (newPage: number) => {
    if (anim || newPage < 0 || newPage > mainRounds.length - 2) return;
    setAnim({ fromPage: page, toPage: newPage, dir: newPage > page ? "right" : "left", phase: "sliding" });
  };

  const handleTransitionEnd = () => {
    if (!anim || anim.phase !== "sliding") return;
    if (stripRef.current) {
      stripRef.current.style.transition = "none";
      stripRef.current.style.transform = "translateX(0)";
    }
    setPage(anim.toPage);
    setAnim(prev => prev ? { ...prev, phase: "settling" } : null);
  };

  const targetPage = anim ? anim.toPage : page;
  const labelRounds = mainRounds.slice(targetPage, targetPage + 2);
  const label = labelRounds[1] ? `${labelRounds[0]} → ${labelRounds[1]}` : labelRounds[0];

  const calcHeight = (p: number) => {
    const rs = mainRounds.slice(p, p + 2);
    const max = Math.max(...rs.map((r) => matchesByRound.get(r)?.length ?? 0), 1);
    return max * (DESIRED_CARD_HEIGHT + CARD_GAP);
  };

  const pageHeight = calcHeight(page);
  const animFromHeight = anim ? calcHeight(anim.fromPage) : pageHeight;
  const animToHeight = anim ? calcHeight(anim.toPage) : pageHeight;

  const visibleRounds = mainRounds.slice(page, page + 2);
  const fromRounds = anim ? mainRounds.slice(anim.fromPage, anim.fromPage + 2) : visibleRounds;
  const toRounds = anim ? mainRounds.slice(anim.toPage, anim.toPage + 2) : visibleRounds;

  // Sliding: show from/to slots side-by-side at their respective heights, no transitions
  // Settling: left slot shows toRounds at animToHeight with CSS transitions so cards animate smoothly
  // Null: show current page
  let leftRounds: string[];
  let rightRounds: string[] = [];
  let leftHeight: number;
  let rightHeight = 0;
  let settlingTransition = false;
  if (anim?.phase === "sliding") {
    leftRounds = anim.dir === "right" ? fromRounds : toRounds;
    rightRounds = anim.dir === "right" ? toRounds : fromRounds;
    leftHeight = anim.dir === "right" ? animFromHeight : animToHeight;
    rightHeight = anim.dir === "right" ? animToHeight : animFromHeight;
  } else if (anim?.phase === "settling") {
    leftRounds = toRounds;
    leftHeight = animToHeight;
    settlingTransition = true;
  } else {
    leftRounds = visibleRounds;
    leftHeight = pageHeight;
  }

  // During settling, minHeight transitions from animFromHeight to animToHeight in sync with cards
  const containerMinHeight = anim?.phase === "settling" ? animToHeight : animFromHeight;
  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 + 2 >= mainRounds.length || !!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
              visibleRounds={leftRounds}
              matchesByRound={matchesByRound}
              ownershipMap={ownershipMap}
              userParticipantIds={userParticipantIds}
              bracketHeight={leftHeight}
              transitionDuration={settlingTransition ? 500 : undefined}
            />
          </div>
          {anim?.phase === "sliding" && (
            <div style={{ width: SLOT_WIDTH, flexShrink: 0 }}>
              <TreeColumns
                visibleRounds={rightRounds}
                matchesByRound={matchesByRound}
                ownershipMap={ownershipMap}
                userParticipantIds={userParticipantIds}
                bracketHeight={rightHeight}
              />
            </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}
          />
        </div>
      )}
    </div>
  );
}