import React, { forwardRef } from 'react'
import { ChatConfig } from '@/types'
import { useLocalization } from '@/hooks/useLocalization'

interface ChatButtonProps {
  isOpen: boolean
  onClick: () => void
  config: ChatConfig
}

const ChatButton = forwardRef<HTMLDivElement, ChatButtonProps>(({ isOpen, onClick, config }, ref) => {
  const { t } = useLocalization()
  const getPositionStyle = (): React.CSSProperties => {
    const shiftH = Number(config.buttonShiftHorizontal) || 0
    const shiftV = Number(config.buttonShiftVertical) || 0
    const baseOffset = 24 // 6 * 4 = 24px (tailwind's 6 = 1.5rem = 24px)

    const style: React.CSSProperties = {}

    switch (config.position) {
      case 'bottom-left':
        style.bottom = Math.max(0, baseOffset + shiftV)
        style.left = Math.max(0, baseOffset + shiftH)
        break
      case 'top-right':
        style.top = Math.max(0, baseOffset + shiftV)
        style.right = Math.max(0, baseOffset + shiftH)
        break
      case 'top-left':
        style.top = Math.max(0, baseOffset + shiftV)
        style.left = Math.max(0, baseOffset + shiftH)
        break
      case 'middle-right':
        style.top = '50%'
        style.right = Math.max(0, baseOffset + shiftH)
        style.transform = `translateY(calc(-50% + ${shiftV}px))`
        break
      case 'middle-left':
        style.top = '50%'
        style.left = Math.max(0, baseOffset + shiftH)
        style.transform = `translateY(calc(-50% + ${shiftV}px))`
        break
      case 'center':
        style.top = '50%'
        style.left = '50%'
        style.transform = `translate(calc(-50% + ${shiftH}px), calc(-50% + ${shiftV}px))`
        break
      case 'bottom-right':
      default:
        style.bottom = Math.max(0, baseOffset + shiftV)
        style.right = Math.max(0, baseOffset + shiftH)
        break
    }

    return style
  }
  
  const getPositionClasses = () => {
    // Return empty string since we're using inline styles for positioning
    return ''
  }

  const getSizeClasses = () => {
    switch (config.buttonSize) {
      case 'small':
        return 'lfc-w-12 lfc-h-12 lfc-text-sm'
      case 'large':
        return 'lfc-w-16 lfc-h-16 lfc-text-xl'
      case 'medium':
      default:
        return 'lfc-w-14 lfc-h-14 lfc-text-base'
    }
  }

  const getVisibilityClasses = () => {
    const classes = []
    
    if (config.showOnMobile === false) {
      classes.push('lfc-hidden md:lfc-flex')
    }
    
    if (config.showOnDesktop === false) {
      classes.push('md:lfc-hidden')
    }
    
    if (classes.length === 0) {
      classes.push('lfc-flex')
    }
    
    return classes.join(' ')
  }

  const getButtonStyle = () => {
    const baseStyle: React.CSSProperties = {}
    
    if (config.primaryColor) {
      baseStyle.backgroundColor = config.primaryColor
      baseStyle.borderColor = config.primaryColor
    }
    
    if (config.secondaryColor) {
      baseStyle.color = config.secondaryColor
    }
    
    if (config.zIndex) {
      baseStyle.zIndex = config.zIndex
    }
    
    return baseStyle
  }
  
  const getPositioningClasses = () => {
    return 'lfc-fixed lfc-z-50'
  }

  const getWrapperStyle = (): React.CSSProperties => {
    const style: React.CSSProperties = {
      ...getPositionStyle()
    }
    if (config.zIndex) {
      style.zIndex = config.zIndex
    }
    return style
  }

  return (
    <div
      className={`
        ${getPositioningClasses()}
        ${getPositionClasses()}
        ${getVisibilityClasses()}
      `}
      style={getWrapperStyle()}
      ref={ref}
    >
      <button
        className={`
          ai-cs-chat-button
          ${getSizeClasses()}
          lfc-bg-primary-500 hover:lfc-bg-primary-600 
          lfc-text-white lfc-rounded-full lfc-shadow-lg 
          lfc-transition-all lfc-duration-300 lfc-ease-in-out
          lfc-items-center lfc-justify-center
          lfc-border-2 lfc-border-transparent
          hover:lfc-scale-110 active:lfc-scale-95
          focus:lfc-outline-none focus:lfc-ring-2 focus:lfc-ring-primary-300 focus:lfc-ring-offset-2
          lfc-animate-attention-pop
          lfc-flex
          lfc-overflow-hidden
        `}
        style={getButtonStyle()}
        onClick={onClick}
  aria-label={isOpen ? t('chat.close') : t('chat.open')}
        aria-expanded={isOpen}
      >
        {isOpen ? (
          <svg 
            className="lfc-w-[60%] lfc-h-[60%]" 
            fill="none" 
            stroke="currentColor" 
            viewBox="0 0 24 24"
          >
            <path 
              strokeLinecap="round" 
              strokeLinejoin="round" 
              strokeWidth={2} 
              d="M6 18L18 6M6 6l12 12" 
            />
          </svg>
        ) : (
          config.buttonImage ? (
            <img src={config.buttonImage} alt="Chat" className="lfc-w-full lfc-h-full lfc-object-cover" />
          ) : (
            <svg 
              className="lfc-w-[60%] lfc-h-[60%]" 
              fill="none" 
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path 
                strokeLinecap="round" 
                strokeLinejoin="round" 
                strokeWidth={2} 
                d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" 
              />
            </svg>
          )
        )}
      </button>
    </div>
  )
})

ChatButton.displayName = 'ChatButton'

export default ChatButton