"use client";
import * as React from "react";
import { BLIND_LETTERS } from "@/lib/arena/scoring";
import { cn } from "@/lib/utils";

/** Neutral letter avatar used while identities are hidden in Blind Arena. */
export function BlindAvatar({ index, size = 20, className }: { index: number; size?: number; className?: string }) {
  const letter = BLIND_LETTERS[index] ?? String(index + 1);
  return (
    <span className={cn("inline-flex shrink-0 items-center justify-center rounded-full bg-fg font-mono font-semibold text-bg", className)} style={{ width: size, height: size, fontSize: Math.max(9, Math.round(size * 0.55)) }} aria-label={`Model ${letter}`}>
      {letter}
    </span>
  );
}

/**
 * Card-flip reveal: rotates the children 90° around Y, swaps content at the midpoint, rotates back.
 * `flipping` is driven by the parent; the content already reflects the new state when it flips back.
 */
export function Flip({ flipping, children, className }: { flipping: boolean; children: React.ReactNode; className?: string }) {
  return (
    <span className={cn("inline-flex min-w-0 items-center transition-transform duration-150 ease-out [backface-visibility:hidden] [transform-style:preserve-3d] motion-reduce:transition-none", flipping ? "[transform:rotateY(90deg)]" : "[transform:rotateY(0deg)]", className)}>
      {children}
    </span>
  );
}

/** Drives a two-phase flip: returns `[flipping, trigger]`; `onMidpoint` fires when the card is edge-on. */
export function useFlip(durationMs = 150): [boolean, (onMidpoint: () => void) => void] {
  const [flipping, setFlipping] = React.useState(false);
  const timer = React.useRef<ReturnType<typeof setTimeout> | null>(null);
  React.useEffect(
    () => () => {
      if (timer.current) clearTimeout(timer.current);
    },
    [],
  );
  const trigger = React.useCallback(
    (onMidpoint: () => void) => {
      setFlipping(true);
      timer.current = setTimeout(() => {
        onMidpoint();
        setFlipping(false);
      }, durationMs);
    },
    [durationMs],
  );
  return [flipping, trigger];
}