Tone checkboxes

"use client"

import * as React from "react"
import { Check } from "lucide-react"
import { motion, useReducedMotion } from "motion/react"

import { cn } from "@/lib/utils"

/* Tone checkbox family: 5 semantically toned checkboxes (info, success, warning,
   danger, muted). This is a SEPARATE styled component; the base checkbox's
   CONTROL tone axis (neutral/brand/success/danger) does not change and is not
   extended here. Every root carries data-tone. Because the box is under 24px the
   invisible touch-area extension (after:-inset-1.5) is mandatory in every
   variant. The label is visible and bound with aria-labelledby; the ids are
   produced by React.useId(). Color comes ONLY from tokens, via alpha color-mix.
   framer-motion switches instantly under reduced-motion. */

export type StyledSize = "sm" | "md" | "lg" | "xl"

const boxSize: Record<StyledSize, string> = {
  sm: "size-4",
  md: "size-5",
  lg: "size-6",
  xl: "size-7",
}

const iconSize: Record<StyledSize, string> = {
  sm: "size-3",
  md: "size-3.5",
  lg: "size-4",
  xl: "size-5",
}

const textSize: Record<StyledSize, string> = {
  sm: "text-xs",
  md: "text-sm",
  lg: "text-sm",
  xl: "text-base",
}

/* Kutu: kucuk kontrol, dokunma alani uzantisi + focus halkasi + gecerlilik. */
const boxBase =
  "relative inline-flex shrink-0 cursor-pointer items-center justify-center rounded-md border outline-none transition-colors after:absolute after:-inset-1.5 focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-danger aria-invalid:ring-danger/20 dark:aria-invalid:ring-danger/40 [&_svg]:shrink-0 [&_i]:leading-none"

const rowBase = "inline-flex items-center gap-2.5"

type CheckboxProps = Omit<React.ComponentProps<"button">, "onChange"> & {
  size?: StyledSize
  label?: string
  checked?: boolean
  defaultChecked?: boolean
  onCheckedChange?: (checked: boolean) => void
}

function useCheckbox(props: {
  checked?: boolean
  defaultChecked?: boolean
  onCheckedChange?: (checked: boolean) => void
}) {
  const { checked, defaultChecked, onCheckedChange } = props
  const reduce = useReducedMotion()
  const [internal, setInternal] = React.useState(defaultChecked ?? false)
  const on = checked ?? internal
  const toggle = () => {
    if (checked === undefined) setInternal((v) => !v)
    onCheckedChange?.(!on)
  }
  const spring = reduce
    ? { duration: 0 }
    : { type: "spring" as const, stiffness: 500, damping: 30 }
  return { on, toggle, spring }
}

/* Shared shell: box plus a visible label. onClass carries each tone's on appearance. */
function ToneCheckbox({
  tone,
  onClass,
  props,
}: {
  tone: string
  onClass: string
  props: CheckboxProps
}) {
  const {
    className,
    size = "md",
    label = "Tone option",
    checked,
    defaultChecked,
    onCheckedChange,
    ...rest
  } = props
  const { on, toggle, spring } = useCheckbox({ checked, defaultChecked, onCheckedChange })
  const labelId = React.useId()
  return (
    <span className={rowBase}>
      <button
        type="button"
        role="checkbox"
        aria-checked={on}
        aria-labelledby={labelId}
        data-slot="styled-checkbox"
        data-tone={tone}
        onClick={toggle}
        className={cn(boxBase, boxSize[size], on ? onClass : "border-field-border text-transparent", className)}
        {...rest}
      >
        <motion.span
          initial={false}
          animate={{ scale: on ? 1 : 0, opacity: on ? 1 : 0 }}
          transition={spring}
          className="flex items-center justify-center"
        >
          <Check className={cn(iconSize[size], "stroke-[3]")} />
        </motion.span>
      </button>
      <span
        id={labelId}
        onClick={toggle}
        className={cn(textSize[size], "cursor-pointer select-none font-medium text-foreground")}
      >
        {label}
      </span>
    </span>
  )
}

/* Info: bilgilendirme tonu. */
export function InfoCheckbox(props: CheckboxProps) {
  return (
    <ToneCheckbox
      tone="info"
      onClass="border-info bg-info text-info-foreground"
      props={{ label: "Send me product news", ...props }}
    />
  )
}

/* Success: onay/olumlu ton. */
export function SuccessCheckbox(props: CheckboxProps) {
  return (
    <ToneCheckbox
      tone="success"
      onClass="border-success bg-success text-success-foreground"
      props={{ label: "Task completed", ...props }}
    />
  )
}

/* Warning: dikkat tonu. */
export function WarningCheckbox(props: CheckboxProps) {
  return (
    <ToneCheckbox
      tone="warning"
      onClass="border-warning bg-warning text-warning-foreground"
      props={{ label: "Acknowledge the risk", ...props }}
    />
  )
}

/* Danger: yikici islem tonu. */
export function DangerCheckbox(props: CheckboxProps) {
  return (
    <ToneCheckbox
      tone="danger"
      onClass="border-danger bg-danger text-danger-foreground"
      props={{ label: "Delete on confirm", ...props }}
    />
  )
}

/* Muted: a quiet/secondary tone, with the marker on a muted surface. */
export function MutedCheckbox(props: CheckboxProps) {
  return (
    <ToneCheckbox
      tone="muted"
      onClass="border-muted-foreground bg-muted-foreground text-background"
      props={{ label: "Hide from the list", ...props }}
    />
  )
}