import React, { forwardRef } from 'react';
import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
import { Check } from 'lucide-react';
import { clsx } from 'clsx';

export interface CheckboxProps extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> {
  label?: React.ReactNode;
  description?: string;
  error?: string;
  size?: 'sm' | 'md' | 'lg';
  variant?: 'primary' | 'secondary' | 'outline' | 'ghost';
}

const Checkbox = forwardRef<React.ElementRef<typeof CheckboxPrimitive.Root>, CheckboxProps>(({
  label,
  description,
  error,
  size = 'md',
  variant = 'primary',
  className,
  id,
  ...props
}, ref) => {
  const checkboxId = id || `checkbox-${Math.random().toString(36).substr(2, 9)}`;
  const hasError = !!error;

  const sizeClasses = {
    sm: 'w-3 h-3',
    md: 'w-4 h-4',
    lg: 'w-5 h-5'
  };

  const variantClasses = {
    primary: [
      'data-[state=checked]:bg-[var(--color-primary)]',
      'data-[state=checked]:text-white',
      'data-[state=checked]:border-[var(--color-primary)]',
      'data-[state=checked]:ring-2',
      'data-[state=checked]:ring-[var(--color-primary)]/30',
      // Light mode unchecked - use stronger border for better visibility
      'border-[var(--border-secondary)]', // Using secondary border for more contrast
      'bg-white',
      'shadow-sm',
      'hover:border-[var(--border-tertiary)]',
      'hover:shadow-md',
      'focus:ring-[var(--color-primary)]/20',
      'transition-all duration-200',
      // Dark mode - use stronger border for better visibility
      'dark:border-[var(--border-secondary)]', // Using secondary border for more contrast in dark mode too
      'dark:bg-[var(--surface-secondary)]', // Slightly different background for better contrast
      'dark:shadow-[inset_0_1px_2px_rgba(0,0,0,0.3)]',
      'dark:hover:border-[var(--border-tertiary)]',
      'dark:hover:bg-[var(--surface-tertiary)]', // Better contrast on hover
      'dark:data-[state=checked]:bg-[var(--color-primary)]',
      'dark:data-[state=checked]:border-[var(--color-primary)]',
      'dark:data-[state=checked]:text-white'
    ],
    secondary: [
      'data-[state=checked]:bg-[var(--color-secondary)]',
      'data-[state=checked]:text-white',
      'data-[state=checked]:border-[var(--color-secondary)]',
      'data-[state=checked]:ring-2',
      'data-[state=checked]:ring-[var(--color-secondary)]/30',
      // Light mode unchecked - use stronger border for better visibility
      'border-[var(--border-secondary)]', // Using secondary border for more contrast
      'bg-white',
      'shadow-sm',
      'hover:border-[var(--border-tertiary)]',
      'hover:shadow-md',
      'focus:ring-[var(--color-secondary)]/20',
      'transition-all duration-200',
      // Dark mode - use stronger border for better visibility
      'dark:border-[var(--border-secondary)]', // Using secondary border for more contrast in dark mode too
      'dark:bg-[var(--surface-secondary)]', // Slightly different background for better contrast
      'dark:shadow-[inset_0_1px_2px_rgba(0,0,0,0.3)]',
      'dark:hover:border-[var(--border-tertiary)]',
      'dark:hover:bg-[var(--surface-tertiary)]', // Better contrast on hover
      'dark:data-[state=checked]:bg-[var(--color-secondary)]',
      'dark:data-[state=checked]:border-[var(--color-secondary)]'
    ],
    outline: [
      'data-[state=checked]:bg-transparent',
      'data-[state=checked]:border-[var(--color-primary)]',
      'data-[state=checked]:text-[var(--color-primary)]',
      'data-[state=checked]:ring-2',
      'data-[state=checked]:ring-[var(--color-primary)]/30',
      // Light mode unchecked - use stronger border for better visibility
      'border-[var(--border-secondary)]', // Using secondary border for more contrast
      'bg-white',
      'shadow-sm',
      'hover:border-[var(--border-tertiary)]',
      'hover:shadow-md',
      'focus:ring-[var(--color-primary)]/20',
      'transition-all duration-200',
      // Dark mode - use stronger border for better visibility
      'dark:border-[var(--border-secondary)]', // Using secondary border for more contrast in dark mode too
      'dark:bg-[var(--surface-secondary)]', // Slightly different background for better contrast
      'dark:shadow-[inset_0_1px_2px_rgba(0,0,0,0.3)]',
      'dark:hover:border-[var(--border-tertiary)]',
      'dark:hover:bg-[var(--surface-tertiary)]', // Better contrast on hover
      'dark:data-[state=checked]:border-[var(--color-primary)]',
      'dark:data-[state=checked]:text-[var(--color-primary)]'
    ],
    ghost: [
      'data-[state=checked]:bg-transparent',
      'data-[state=checked]:text-[var(--color-primary)]',
      'data-[state=checked]:ring-2',
      'data-[state=checked]:ring-[var(--color-primary)]/30',
      // Ghost variant - use stronger border for better visibility
      'border-[var(--border-secondary)]', // Using secondary border for more contrast
      'bg-transparent',
      'hover:border-[var(--border-tertiary)]',
      'hover:bg-[var(--surface-secondary)]',
      'hover:shadow-md',
      'focus:ring-[var(--color-primary)]/20',
      'transition-all duration-200',
      // Dark mode
      'dark:border-[var(--border-secondary)]', // Using secondary border for more contrast in dark mode too
      'dark:hover:border-[var(--border-tertiary)]',
      'dark:hover:bg-[var(--surface-secondary)]',
      'dark:data-[state=checked]:text-[var(--color-primary)]'
    ]
  };

  const checkboxClasses = clsx(
    'flex items-center justify-center',
    'rounded border-2 transition-all duration-200', // border-2 for better visibility
    'focus:outline-none focus:ring-2 focus:ring-offset-2',
    'disabled:opacity-50 disabled:cursor-not-allowed',
    'hover:shadow-md',
    'shrink-0', // Prevent shrinking on mobile
    'border-[var(--border-tertiary)]', // Use tertiary border for better visibility when unchecked
    'dark:border-[var(--text-tertiary)]', // Use text-tertiary in dark mode for better contrast
    'shadow-sm', // Add subtle shadow for better visibility
    'dark:shadow-[0_1px_2px_rgba(0,0,0,0.2)]', // Dark mode shadow for better visibility
    sizeClasses[size],
    variantClasses[variant],
    {
      'border-[var(--color-error)]': hasError,
    },
    className
  );

  const labelClasses = clsx(
    'text-sm font-medium leading-none',
    {
      'text-[var(--text-primary)]': !hasError,
      'text-[var(--color-error)]': hasError,
      'peer-disabled:cursor-not-allowed peer-disabled:opacity-70': true,
      'dark:text-[var(--text-primary)]': !hasError, // Ensure proper text color in dark mode
      'dark:hover:text-[var(--text-primary)]': !hasError // Ensure proper hover text color in dark mode
    }
  );

  const descriptionClasses = clsx(
    'text-sm text-[var(--text-secondary)]',
    {
      'text-[var(--color-error)]': hasError
    }
  );

  return (
    <div className="flex flex-col gap-2">
      <div className="flex items-start gap-2">
        <CheckboxPrimitive.Root
          ref={ref}
          id={checkboxId}
          className={checkboxClasses}
          aria-invalid={hasError}
          aria-describedby={description ? `${checkboxId}-description` : undefined}
          {...props}
        >
          <CheckboxPrimitive.Indicator className="flex items-center justify-center text-current">
            <Check className={sizeClasses[size]} strokeWidth={3} />
          </CheckboxPrimitive.Indicator>
        </CheckboxPrimitive.Root>
        {label && (
          <label htmlFor={checkboxId} className={labelClasses}>
            {label}
          </label>
        )}
      </div>
      {description && (
        <p id={`${checkboxId}-description`} className={descriptionClasses}>
          {description}
        </p>
      )}
      {error && (
        <p className="text-sm text-[var(--color-error)]">
          {error}
        </p>
      )}
    </div>
  );
});

Checkbox.displayName = 'Checkbox';

export default Checkbox;