'use client'

import { cn } from '@/lib/utils'
import { ReactNode } from 'react'

type HighlightVariant = 'marker' | 'underline' | 'box' | 'gradient'
type HighlightColor = 'yellow' | 'blue' | 'green' | 'pink' | 'orange' | 'purple' | 'red'

interface HighlightProps {
  children: ReactNode
  /** Highlight style variant */
  variant?: HighlightVariant
  /** Highlight color */
  color?: HighlightColor
  /** Custom className */
  className?: string
  /** Whether to animate the highlight */
  animated?: boolean
}

const colorStyles: Record<HighlightColor, Record<HighlightVariant, string>> = {
  yellow: {
    marker: 'bg-yellow-200/70 dark:bg-yellow-500/30',
    underline: 'decoration-yellow-400 dark:decoration-yellow-500',
    box: 'ring-yellow-400 dark:ring-yellow-500',
    gradient: 'from-yellow-200/80 to-yellow-300/80 dark:from-yellow-500/30 dark:to-yellow-600/30',
  },
  blue: {
    marker: 'bg-blue-200/70 dark:bg-blue-500/30',
    underline: 'decoration-blue-400 dark:decoration-blue-500',
    box: 'ring-blue-400 dark:ring-blue-500',
    gradient: 'from-blue-200/80 to-blue-300/80 dark:from-blue-500/30 dark:to-blue-600/30',
  },
  green: {
    marker: 'bg-green-200/70 dark:bg-green-500/30',
    underline: 'decoration-green-400 dark:decoration-green-500',
    box: 'ring-green-400 dark:ring-green-500',
    gradient: 'from-green-200/80 to-green-300/80 dark:from-green-500/30 dark:to-green-600/30',
  },
  pink: {
    marker: 'bg-pink-200/70 dark:bg-pink-500/30',
    underline: 'decoration-pink-400 dark:decoration-pink-500',
    box: 'ring-pink-400 dark:ring-pink-500',
    gradient: 'from-pink-200/80 to-pink-300/80 dark:from-pink-500/30 dark:to-pink-600/30',
  },
  orange: {
    marker: 'bg-orange-200/70 dark:bg-orange-500/30',
    underline: 'decoration-orange-400 dark:decoration-orange-500',
    box: 'ring-orange-400 dark:ring-orange-500',
    gradient: 'from-orange-200/80 to-orange-300/80 dark:from-orange-500/30 dark:to-orange-600/30',
  },
  purple: {
    marker: 'bg-purple-200/70 dark:bg-purple-500/30',
    underline: 'decoration-purple-400 dark:decoration-purple-500',
    box: 'ring-purple-400 dark:ring-purple-500',
    gradient: 'from-purple-200/80 to-purple-300/80 dark:from-purple-500/30 dark:to-purple-600/30',
  },
  red: {
    marker: 'bg-red-200/70 dark:bg-red-500/30',
    underline: 'decoration-red-400 dark:decoration-red-500',
    box: 'ring-red-400 dark:ring-red-500',
    gradient: 'from-red-200/80 to-red-300/80 dark:from-red-500/30 dark:to-red-600/30',
  },
}

/**
 * Highlight - Text highlighter component
 * 
 * Variants:
 * - marker: Background highlight like a marker pen
 * - underline: Wavy or straight underline
 * - box: Outlined box around text
 * - gradient: Gradient background highlight
 */
export function Highlight({
  children,
  variant = 'marker',
  color = 'yellow',
  className,
  animated = false,
}: HighlightProps) {
  const colorStyle = colorStyles[color]?.[variant] || colorStyles.yellow[variant]

  const baseStyles = {
    marker: cn(
      'docs-highlight docs-highlight-marker',
      'px-1 py-0.5 rounded-sm',
      colorStyle,
      animated && 'animate-pulse',
      className
    ),
    underline: cn(
      'docs-highlight docs-highlight-underline',
      'underline decoration-wavy decoration-2 underline-offset-4',
      colorStyle,
      className
    ),
    box: cn(
      'docs-highlight docs-highlight-box',
      'px-1 py-0.5 ring-2 rounded',
      colorStyle,
      className
    ),
    gradient: cn(
      'docs-highlight docs-highlight-gradient',
      'px-1 py-0.5 rounded-sm bg-gradient-to-r',
      colorStyle,
      animated && 'animate-pulse',
      className
    ),
  }

  return (
    <span className={baseStyles[variant]}>
      {children}
    </span>
  )
}

/**
 * Marker - Shorthand for marker-style highlight
 */
export function Marker({
  children,
  color = 'yellow',
  className,
}: Omit<HighlightProps, 'variant'>) {
  return (
    <Highlight variant="marker" color={color} className={className}>
      {children}
    </Highlight>
  )
}

/**
 * Underline - Shorthand for underline-style highlight
 */
export function Underline({
  children,
  color = 'orange',
  className,
}: Omit<HighlightProps, 'variant'>) {
  return (
    <Highlight variant="underline" color={color} className={className}>
      {children}
    </Highlight>
  )
}

// Export all components
export default Highlight
