"use client"

import { PencilLine } from "lucide-react"
import { cn } from "@/lib/utils"

export type CompactScoreFabProps = {
  /** Controls the fade + scale in/out. Driven from outside (the page's
   *  existing `inFlowButtonVisible` state) -- this component owns no
   *  hide/show-on-scroll logic of its own. */
  visible: boolean
  /** Scrolls the user back to the player list (same action as the in-flow
   *  button). No navigation, no new page. */
  onClick: () => void
}

/**
 * Compact, corner-anchored "Score" quick button (FAB).
 *
 * Replaces the old full-width bottom banner (round-detail.tsx, removed
 * 2026-08-23 -- see CHANGELOG). Because it's small and pinned to the
 * bottom-right corner, it never needs to hide to avoid covering content --
 * so there is no scrim, no reserved bottom spacer, and no slide-up
 * animation. It simply fades + scales in place.
 */
export function CompactScoreFab({ visible, onClick }: CompactScoreFabProps) {
  return (
    <button
      type="button"
      onClick={onClick}
      aria-hidden={!visible}
      tabIndex={visible ? 0 : -1}
      className={cn(
        "fixed bottom-[calc(1.25rem+env(safe-area-inset-bottom))] right-[calc(1.25rem+env(safe-area-inset-right))] z-30",
        "inline-flex h-12 items-center gap-2 rounded-full px-5",
        "bg-primary text-primary-foreground font-bold",
        "shadow-lg shadow-black/20",
        "transition-all duration-200 ease-in-out",
        "hover:brightness-95 active:scale-[0.98]",
        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
        visible ? "scale-100 opacity-100" : "pointer-events-none scale-90 opacity-0",
      )}
    >
      <PencilLine aria-hidden="true" className="size-5" />
      Score
    </button>
  )
}

export default CompactScoreFab