"use client"

import * as React from "react"
import * as TogglePrimitive from "@radix-ui/react-toggle"
import { cva, type VariantProps } from "class-variance-authority"

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

const MoonUItoggleVariantsPro = cva(
  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
  {
    variants: {
      variant: {
        default: "bg-transparent hover:bg-muted hover:text-muted-foreground data-[state=on]:bg-accent data-[state=on]:text-accent-foreground dark:hover:bg-muted dark:hover:text-muted-foreground dark:data-[state=on]:bg-accent dark:data-[state=on]:text-accent-foreground",
        outline: "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground data-[state=on]:bg-accent data-[state=on]:text-accent-foreground dark:border-input dark:hover:bg-accent dark:hover:text-accent-foreground dark:data-[state=on]:bg-accent dark:data-[state=on]:text-accent-foreground",
        ghost: "hover:bg-accent hover:text-accent-foreground data-[state=on]:bg-transparent data-[state=on]:text-accent-foreground dark:hover:bg-accent dark:hover:text-accent-foreground dark:data-[state=on]:text-accent-foreground",
        primary: "bg-transparent hover:bg-primary/10 hover:text-primary data-[state=on]:bg-primary data-[state=on]:text-primary-foreground dark:hover:bg-primary/20 dark:hover:text-primary dark:data-[state=on]:bg-primary dark:data-[state=on]:text-primary-foreground",
        secondary: "bg-transparent hover:bg-secondary/10 hover:text-secondary data-[state=on]:bg-secondary data-[state=on]:text-secondary-foreground dark:hover:bg-accent/20 dark:hover:text-accent-foreground dark:data-[state=on]:bg-accent dark:data-[state=on]:text-accent-foreground",
        success: "bg-transparent hover:bg-success/10 hover:text-success data-[state=on]:bg-success data-[state=on]:text-success-foreground dark:hover:bg-success/20 dark:hover:text-success dark:data-[state=on]:bg-success dark:data-[state=on]:text-success-foreground",
        warning: "bg-transparent hover:bg-warning/10 hover:text-warning data-[state=on]:bg-warning data-[state=on]:text-warning-foreground dark:hover:bg-warning/20 dark:hover:text-warning dark:data-[state=on]:bg-warning dark:data-[state=on]:text-warning-foreground",
        danger: "bg-transparent hover:bg-destructive/10 hover:text-destructive data-[state=on]:bg-destructive data-[state=on]:text-destructive-foreground dark:hover:bg-destructive/20 dark:hover:text-destructive dark:data-[state=on]:bg-destructive dark:data-[state=on]:text-destructive-foreground",
        gradient: "bg-transparent hover:bg-gradient-to-r hover:from-purple-500/10 hover:to-pink-500/10 hover:text-purple-600 data-[state=on]:bg-gradient-to-r data-[state=on]:from-purple-600 data-[state=on]:to-pink-600 data-[state=on]:text-white dark:hover:from-purple-500/20 dark:hover:to-pink-500/20 dark:hover:text-purple-400 dark:data-[state=on]:from-purple-600 dark:data-[state=on]:to-pink-600 dark:data-[state=on]:text-white",
      },
      size: {
        xs: "h-7 px-2 text-xs",
        sm: "h-8 px-2.5 text-xs",
        default: "h-9 px-3",
        md: "h-10 px-4",
        lg: "h-11 px-6",
        xl: "h-12 px-8 text-base",
      },
      shape: {
        default: "rounded-md",
        square: "rounded-none",
        rounded: "rounded-lg",
        pill: "rounded-full",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
      shape: "default",
    },
  }
)

export interface MoonUIToggleProProps extends React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root>, VariantProps<typeof MoonUItoggleVariantsPro> {
  /** Loading state */
  loading?: boolean;
  /** Show a badge with a count */
  badge?: string | number;
  /** Badge variant */
  badgeVariant?: "default" | "primary" | "secondary" | "success" | "warning" | "danger";
  /** Icon to show when toggled on */
  iconOn?: React.ReactNode;
  /** Icon to show when toggled off */
  iconOff?: React.ReactNode;
  /** Position of icon relative to text */
  iconPosition?: "left" | "right";
}

const MoonUITogglePro = React.forwardRef<
  React.ElementRef<typeof TogglePrimitive.Root>,
  MoonUIToggleProProps
>(({ className, variant, size, shape, loading, badge, badgeVariant = "default", iconOn, iconOff, iconPosition = "left", children, pressed, onPressedChange, defaultPressed, ...props }, ref) => {
  const icon = pressed ? iconOn : iconOff;
  
  return (
    <TogglePrimitive.Root
      ref={ref}
      className={cn(MoonUItoggleVariantsPro({ variant, size, shape }), className)}
      pressed={pressed}
      onPressedChange={onPressedChange}
      defaultPressed={defaultPressed}
      disabled={loading || props.disabled}
      {...props}
    >
      {loading ? (
        <div className="flex items-center gap-2">
          <div className="h-3 w-3 animate-spin rounded-full border-2 border-current border-t-transparent" />
          {children && <span>{children}</span>}
        </div>
      ) : (
        <div className="flex items-center gap-2">
          {icon && iconPosition === "left" && <span className="flex-shrink-0">{icon}</span>}
          {children && <span>{children}</span>}
          {icon && iconPosition === "right" && <span className="flex-shrink-0">{icon}</span>}
          {badge !== undefined && (
            <span className={cn(
              "ml-1 inline-flex items-center justify-center rounded-full px-1.5 text-xs font-semibold",
              badgeVariant === "default" && "bg-muted text-muted-foreground",
              badgeVariant === "primary" && "bg-primary text-primary-foreground",
              badgeVariant === "secondary" && "bg-secondary text-secondary-foreground dark:bg-accent dark:text-accent-foreground",
              badgeVariant === "success" && "bg-success text-success-foreground",
              badgeVariant === "warning" && "bg-warning text-warning-foreground",
              badgeVariant === "danger" && "bg-destructive text-destructive-foreground",
            )}>
              {badge}
            </span>
          )}
        </div>
      )}
    </TogglePrimitive.Root>
  )
})

MoonUITogglePro.displayName = TogglePrimitive.Root.displayName


// Internal aliases for Pro component usage
export const toggleVariantsInternal = MoonUItoggleVariantsPro
export const ToggleInternal = MoonUITogglePro

// Pro exports  
export { MoonUItoggleVariantsPro, MoonUITogglePro }

// Clean exports (without MoonUI prefix for easier usage)
export { MoonUItoggleVariantsPro as toggleVariants, MoonUITogglePro as Toggle }
export type { MoonUIToggleProProps as ToggleProps }