"use client";

import { cn } from "@aur-ui/ui/lib/utils";
import { Switch as SwitchPrimitive } from "radix-ui";
import type * as React from "react";

/**
 * Borderless Aur switch.
 *
 * Geometry invariant: every size keeps a 2px thumb inset on ALL sides in
 * BOTH states — track width = thumb + 2·2px + travel, so the checked
 * translate is always `width - thumb - 2px`:
 *   sm      24×14 track, 10px thumb → travel  2px → 12px (x-3)
 *   default 36×20 track, 16px thumb → travel  2px → 18px (x-4.5)
 *   lg      44×24 track, 20px thumb → travel  2px → 22px (x-5.5)
 *
 * `tone` colours the checked track (brand default; positive/danger for
 * enable/kill-style toggles), matching the badge tone family.
 */
function Switch({
  className,
  size = "default",
  tone = "brand",
  ...props
}: React.ComponentProps<typeof SwitchPrimitive.Root> & {
  size?: "sm" | "default" | "lg";
  tone?: "brand" | "positive" | "danger";
}) {
  return (
    <SwitchPrimitive.Root
      data-slot="switch"
      data-size={size}
      data-tone={tone}
      className={cn(
        "peer group/switch relative inline-flex shrink-0 items-center rounded-full transition-colors outline-none",
        "focus-visible:ring-2 focus-visible:ring-brand/40",
        "disabled:cursor-not-allowed disabled:opacity-60",
        "data-[size=sm]:h-3.5 data-[size=sm]:w-6",
        "data-[size=default]:h-5 data-[size=default]:w-9",
        "data-[size=lg]:h-6 data-[size=lg]:w-11",
        "data-[state=unchecked]:bg-ink-400/50",
        "data-[tone=brand]:data-[state=checked]:bg-brand",
        "data-[tone=positive]:data-[state=checked]:bg-positive",
        "data-[tone=danger]:data-[state=checked]:bg-danger",
        className,
      )}
      {...props}
    >
      <SwitchPrimitive.Thumb
        data-slot="switch-thumb"
        className={cn(
          "pointer-events-none block rounded-full bg-surface shadow-action ring-0 transition-transform",
          "group-data-[size=sm]/switch:size-2.5 group-data-[size=default]/switch:size-4 group-data-[size=lg]/switch:size-5",
          "data-[state=unchecked]:translate-x-0.5",
          "group-data-[size=sm]/switch:data-[state=checked]:translate-x-3",
          "group-data-[size=default]/switch:data-[state=checked]:translate-x-4.5",
          "group-data-[size=lg]/switch:data-[state=checked]:translate-x-5.5",
        )}
      />
    </SwitchPrimitive.Root>
  );
}

export { Switch };