vote

"use client"

import { ArrowBigDown, ArrowBigUp } from "lucide-react"
import * as React from "react"
import { cn } from "@/lib/utils"
import { Button, type ButtonSize } from "@/registry/base-nova/ui/button"
import { useField } from "@/registry/base-nova/ui/field-context"
import {
  type Material,
  MaterialProvider,
  type Scheme,
  useMaterial,
  useSurfaceScheme,
} from "@/registry/base-nova/ui/material"
import { glassVariants, schemeOf } from "@/registry/base-nova/ui/material-glass"

// UP OR DOWN, AND WHERE IT STANDS (Reddit, Stack Overflow, Hacker News): two toggle
// buttons with the score between them. One vote at a time: up, down, or none, and
// pressing the one you gave again takes it back. Controlled: the consumer holds the
// vote (`value`: 1, -1, 0) and the score, and moves the score in the same handler
// that records the vote, before any answer comes back (optimistic), so the number
// follows the press at once; a refusal puts both back.
//
//   <Vote value={vote} score={score} onValueChange={(next) => {
//     setScore((s) => s - vote + next); setVote(next); send(next)
//   }} />
//
// Each arrow is a `Button` with `aria-pressed` on a fixed name ("upvote"); the score
// is said politely when it changes (a live region with the exact number, the eye
// reading it short: 12.3k). Vertical (beside a post) or horizontal (under a comment);
// in a well by default, plain a sunken one and glass a pill of glass, or `compact`,
// the arrows and the number alone. `readOnly` (a locked thread): the vote and the
// score shown, the buttons kept in the Tab order and read out, a press changing
// nothing. Inside a field it is named and described by it and held still while the
// field is read-only.

export type VoteValue = -1 | 0 | 1
export type VoteSize = "sm" | "md" | "lg"

const ARROW: Record<VoteSize, ButtonSize> = {
  sm: "icon-sm",
  md: "icon",
  lg: "icon-lg",
}
const SCORE: Record<VoteSize, string> = {
  sm: "text-[12px]",
  md: "text-[13px]",
  lg: "text-sm",
}
/** The well holding them: a sunken strip plain, a pill of glass (its radius half
 *  of the arrows' width, the narrow side). */
const PLAIN_WELL = "rounded-full bg-foreground/[0.06] p-0.5"
const GLASS_WELL: Record<VoteSize, string> = {
  sm: "p-0.5 [--glass-radius:16px]",
  md: "p-0.5 [--glass-radius:18px]",
  lg: "p-0.5 [--glass-radius:22px]",
}

/** A score as the eye reads it: whole up to a thousand, then 1.2k, 12k, 1.2m. */
export function shortScore(score: number): string {
  if (!Number.isInteger(score))
    throw new Error(`vote: a score is a whole number, got ${score}`)
  if (Math.abs(score) < 1000) return String(score)
  // Rounded on its size, the sign put back: a down score reads as its up mirror.
  const short = (n: number) => {
    const a = Math.abs(n)
    return Math.sign(n) * (a < 100 ? Math.round(a * 10) / 10 : Math.round(a))
  }
  // The unit follows the number as it is shown: 999,500 is "1m", never "1000k".
  const k = short(score / 1000)
  return Math.abs(k) < 1000 ? `${k}k` : `${short(score / 1e6)}m`
}

export interface VoteProps {
  /** Yours: 1 up, -1 down, 0 none. */
  value: VoteValue
  /** Where it stands, your vote included. */
  score: number
  /** The vote a press makes: the other arrow's, or 0 when it takes yours back. */
  onValueChange?: (value: VoteValue) => void
  orientation?: "vertical" | "horizontal"
  /** The arrows and the number alone, with no well round them. */
  compact?: boolean
  size?: VoteSize
  /** The score as the eye reads it; the reader always hears the whole number. */
  format?: (score: number) => string
  /** Shown, never changed: a press changes nothing, the buttons keep their Tab
   *  stops. Never dimmed (that is `disabled`). */
  readOnly?: boolean
  disabled?: boolean
  material?: Material
  /** The colour scheme it stands in (material): default the nearest provider's. */
  scheme?: Scheme
  /** What the vote is on ("vote on this answer"); "vote" unless given or a field
   *  names it. */
  "aria-label"?: string
  "aria-describedby"?: string
  className?: string
  ref?: React.Ref<HTMLFieldSetElement>
}

export function Vote({
  value,
  score,
  onValueChange,
  orientation = "vertical",
  compact = false,
  size = "md",
  format = shortScore,
  readOnly,
  disabled,
  material,
  scheme,
  "aria-label": label,
  "aria-describedby": describedBy,
  className,
  ref,
}: VoteProps) {
  if (value !== -1 && value !== 0 && value !== 1)
    throw new Error(`Vote: value is 1, -1 or 0, got ${value}`)
  if (!Number.isInteger(score))
    throw new Error(`Vote: score is a whole number, got ${score}`)
  const m = useMaterial(material)
  const [s, here] = useSurfaceScheme<HTMLFieldSetElement>(scheme, ref)
  const field = useField()
  const held = (readOnly ?? false) || (field?.readOnly ?? false)
  const off = disabled ?? field?.wiring.disabled
  const id = React.useId()
  const lockedId = `${id}-locked`
  const described =
    [describedBy ?? field?.wiring["aria-describedby"], held && lockedId]
      .filter(Boolean)
      .join(" ") || undefined
  const press = (side: 1 | -1) => {
    if (held) return
    onValueChange?.(value === side ? 0 : side)
  }
  const glass = m === "glass"
  const arrow = (side: 1 | -1) => {
    const on = value === side
    const Glyph = side === 1 ? ArrowBigUp : ArrowBigDown
    return (
      <Button
        variant="ghost"
        size={ARROW[size]}
        corners="pill"
        material={m}
        pressed={on}
        disabled={off}
        aria-label={side === 1 ? "upvote" : "downvote"}
        aria-describedby={described}
        data-slot={side === 1 ? "vote-up" : "vote-down"}
        onClick={() => press(side)}
        className={cn(
          on ? "text-current" : "text-current/60 hover:text-current",
          held && "cursor-default hover:bg-transparent",
        )}
      >
        <Glyph aria-hidden className={cn(on && "fill-current")} />
      </Button>
    )
  }
  return (
    <MaterialProvider material={m} scheme={s}>
      <fieldset
        ref={here}
        aria-label={label ?? (field ? undefined : "vote")}
        aria-labelledby={label ? undefined : field?.labelId}
        data-slot="vote"
        data-material={m}
        data-orientation={orientation}
        data-value={value === 1 ? "up" : value === -1 ? "down" : "none"}
        data-readonly={held ? "" : undefined}
        className={cn(
          "inline-flex w-fit min-w-0 shrink-0 items-center",
          orientation === "vertical" ? "flex-col" : "flex-row",
          schemeOf(s),
          !compact &&
            (glass
              ? [glassVariants({ shape: "surface" }), GLASS_WELL[size]]
              : PLAIN_WELL),
          className,
        )}
      >
        {arrow(1)}
        <output
          data-slot="vote-score"
          aria-live="polite"
          aria-atomic
          className={cn(
            "min-w-[3ch] text-center font-medium tabular-nums",
            orientation === "horizontal" && "px-0.5",
            SCORE[size],
            value === 0 ? "text-current/75" : "text-current",
          )}
        >
          <span aria-hidden>{format(score)}</span>
          <span className="sr-only">score {score}</span>
        </output>
        {arrow(-1)}
        {held && (
          <span id={lockedId} className="sr-only">
            read-only
          </span>
        )}
      </fieldset>
    </MaterialProvider>
  )
}