import { type ReactElement, type ComponentProps } from "react"
import { CircleIcon } from "lucide-react"
import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group"
import { Radio as RadioPrimitive } from "@base-ui/react/radio"
import { cn } from "@/lib/utils"

/**
 * RadioGroup — WealthX Design System (shadcn base)
 * Figma: https://www.figma.com/design/9V9F0NGVsif8LGmEhVjOcT/Design-System---shadcn?node-id=76-8893
 *
 * Base: official shadcn radio-group (npx shadcn\@latest add radio-group)
 * WealthX additions: RadioGroupCard (card with radio + label/description)
 *
 * Tokens: circle fill=background (white), stroke=primary, checked fill=primary,
 *         indicator=background. Error overrides primary-destructive.
 */

/* Shared radio circle base classes -- single source for Item & Card */
const CIRCLE_BASE =
  "inline-flex items-center justify-center aspect-square size-4 shrink-0 rounded-full border border-primary bg-background"

/* Shared indicator dot */
const INDICATOR_DOT = "size-2 fill-background text-background"

export type RadioGroupProps<Value = string> = RadioGroupPrimitive.Props<Value>

function RadioGroup<Value = string>({
  className,
  ...props
}: RadioGroupProps<Value>): ReactElement {
  return (
    <RadioGroupPrimitive
      className={cn("grid gap-3", className)}
      data-slot="radio-group"
      {...props}
    />
  )
}

export type RadioGroupItemProps = ComponentProps<typeof RadioPrimitive.Root>

function RadioGroupItem({
  className,
  ...props
}: RadioGroupItemProps): ReactElement {
  return (
    <RadioPrimitive.Root
      className={cn(
        CIRCLE_BASE,
        "transition-all outline-none",
        "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
        "disabled:cursor-not-allowed disabled:opacity-50",
        "data-checked:bg-primary",
        "aria-invalid:border-destructive aria-invalid:ring-destructive/20",
        "aria-invalid:data-checked:border-destructive aria-invalid:data-checked:bg-destructive",
        "dark:bg-input/30 dark:aria-invalid:ring-destructive/40",
        className
      )}
      data-slot="radio-group-item"
      {...props}
    >
      <RadioPrimitive.Indicator
        data-slot="radio-group-indicator"
      >
        <CircleIcon className={INDICATOR_DOT} />
      </RadioPrimitive.Indicator>
    </RadioPrimitive.Root>
  )
}

/**
 * RadioGroupCard -- card with radio left, label+description right.
 * Figma: CardRadio (3039:5971)
 * Checked: border-primary + bg-primary/5. Error: destructive variant.
 */
export type RadioGroupCardProps = Omit<ComponentProps<typeof RadioPrimitive.Root>, "children"> & {
  label: string
  description?: string
  error?: boolean
}

function RadioGroupCard({
  className,
  value,
  disabled,
  error,
  label,
  description,
  ...props
}: RadioGroupCardProps): ReactElement {
  return (
    <RadioPrimitive.Root
      aria-invalid={error || undefined}
      className={cn(
        "group/card flex items-center gap-3 border border-border p-4 font-sans transition-colors text-left cursor-pointer outline-none",
        "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
        "disabled:cursor-not-allowed disabled:opacity-50",
        "data-checked:border-primary data-checked:bg-primary/5",
        "aria-invalid:border-destructive",
        "aria-invalid:data-checked:border-destructive aria-invalid:data-checked:bg-destructive/5",
        className
      )}
      data-slot="radio-group-card"
      disabled={disabled}
      value={value}
      {...props}
    >
      <div
        className={cn(
          CIRCLE_BASE,
          "transition-colors",
          "group-data-[checked]/card:bg-primary",
          "group-aria-invalid/card:border-destructive",
          "group-aria-invalid/card:group-data-[checked]/card:border-destructive group-aria-invalid/card:group-data-[checked]/card:bg-destructive",
        )}
      >
        <RadioPrimitive.Indicator>
          <CircleIcon className={INDICATOR_DOT} />
        </RadioPrimitive.Indicator>
      </div>
      <div className="flex flex-col gap-1">
        <span className="text-sm font-medium leading-none">{label}</span>
        {description ? <span className="text-sm text-muted-foreground">{description}</span> : null}
      </div>
    </RadioPrimitive.Root>
  )
}

export { RadioGroup, RadioGroupItem, RadioGroupCard }