'use client'

import * as React from 'react'
import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'
import { cn } from '@/lib/utils'
import { cva, type VariantProps } from 'class-variance-authority'
import { CheckIcon } from 'lucide-react'

const radioGroupVariants = cva('grid gap-3', {
  variants: {
    orientation: {
      horizontal: 'grid-flow-col',
      vertical: 'grid-flow-row',
    },
  },
  defaultVariants: {
    orientation: 'vertical',
  },
})

const radioVariants = cva(
  'aspect-square shrink-0 rounded-full border shadow-sm transition-all outline-none',
  {
    variants: {
      size: {
        sm: 'size-4',
        lg: 'size-5',
      },
      variant: {
        default: '',
        contrast: 'border-2',
      },
    },
    defaultVariants: {
      size: 'lg',
      variant: 'default',
    },
  }
)

const indicatorVariants = cva('flex items-center justify-center rounded-full', {
  variants: {
    size: {
      sm: 'size-3',
      lg: 'size-4',
    },
  },
  defaultVariants: {
    size: 'lg',
  },
})

type RadioGroupProps = React.ComponentProps<typeof RadioGroupPrimitive.Root> & {
  orientation?: 'horizontal' | 'vertical'
}

interface RadioGroupItemProps
  extends
    React.ComponentProps<typeof RadioGroupPrimitive.Item>,
    VariantProps<typeof radioVariants> {
  error?: boolean
}

function RadioGroup({ className, orientation = 'vertical', ...props }: RadioGroupProps) {
  return (
    <RadioGroupPrimitive.Root
      className={cn(radioGroupVariants({ orientation }), className)}
      {...props}
    />
  )
}

function RadioGroupItem({ className, size, variant, error, ...props }: RadioGroupItemProps) {
  return (
    <RadioGroupPrimitive.Item
      className={cn(
        radioVariants({ size, variant }),
        // 未选中状态
        'border-outline-normal bg-surface-element-normal',
        // 选中状态
        'data-[state=checked]:bg-primary-normal data-[state=checked]:border-primary-normal',
        // 悬浮状态
        'hover:bg-surface-element-hover hover:border-outline-hover',
        'hover:data-[state=checked]:border-primary-hover',
        // 按下状态
        'active:bg-surface-element-press active:border-outline-press',
        'active:data-[state=checked]:border-primary-press',
        // 禁用状态
        'disabled:bg-surface-element-disabled disabled:border-outline-disabled',
        'disabled:data-[state=checked]:border-primary-disabled',
        'disabled:cursor-not-allowed disabled:opacity-30',
        // 错误状态
        error && 'border-important-normal',
        // 聚焦状态
        'focus-visible:ring-outline-normal focus-visible:ring-2 focus-visible:outline-none',
        className
      )}
      {...props}
    >
      <RadioGroupPrimitive.Indicator
        className={cn(
          'relative flex items-center justify-center',
          'after:block after:rounded-full after:transition-all',
          indicatorVariants({ size }),
          // 选中状态下显示的圆点
          'after:bg-primary-normal',
          // 悬浮状态
          'hover:after:bg-primary-hover',
          // 按下状态
          'active:after:bg-primary-press',
          // 禁用状态
          'disabled:after:bg-primary-disabled'
        )}
      >
        <CheckIcon className={cn('size-full')} />
      </RadioGroupPrimitive.Indicator>
    </RadioGroupPrimitive.Item>
  )
}

export { RadioGroup, RadioGroupItem }
