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

interface ContactFormProps {
  onSubmit: (email: string) => void
  onCancel: () => void
  config: ChatConfig
  isLoading?: boolean
  variant?: 'default' | 'compact'
}

const ContactForm: React.FC<ContactFormProps> = ({ 
  onSubmit, 
  onCancel, 
  config, 
  isLoading = false,
  variant = 'default'
}) => {
  const [email, setEmail] = useState('')
  const [error, setError] = useState('')
  const { t } = useLocalization()

  const validateEmail = (email: string): boolean => {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
    return emailRegex.test(email)
  }

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    
    const trimmedEmail = email.trim()
    
    if (!trimmedEmail) {
      setError(t('contact.enterEmail'))
      return
    }
    
    if (!validateEmail(trimmedEmail)) {
      setError(t('contact.enterValidEmail'))
      return
    }
    
    setError('')
    onSubmit(trimmedEmail)
  }

  const getButtonStyle = () => {
    const baseStyle: React.CSSProperties = {}
    
    if (config.primaryColor && !isLoading && email.trim() && validateEmail(email.trim())) {
      baseStyle.backgroundColor = config.primaryColor
      baseStyle.borderColor = config.primaryColor
    }
    
    return baseStyle
  }

  const containerClass = useMemo(() => (
    variant === 'compact'
      ? 'lfc-bg-bg-base lfc-border lfc-border-border-subtle lfc-rounded-lg lfc-p-3 lfc-mb-2'
      : 'lfc-bg-bg-layer lfc-border lfc-border-border-subtle lfc-rounded-lg lfc-p-4 lfc-mb-4'
  ), [variant])

  const titleIconClass = useMemo(() => (
    variant === 'compact' ? 'lfc-text-text-secondary' : 'lfc-text-primary-600'
  ), [variant])

  const titleTextClass = useMemo(() => (
    variant === 'compact' ? 'lfc-text-text-primary' : 'lfc-text-text-primary'
  ), [variant])

  const descTextClass = useMemo(() => (
    'lfc-text-text-secondary'
  ), [])

  return (
    <div className={containerClass}>
      <div className="lfc-flex lfc-items-center lfc-mb-2">
        <svg className={`lfc-w-5 lfc-h-5 lfc-mr-2 ${titleIconClass}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
        </svg>
        <div className={`lfc-text-sm lfc-font-medium ${titleTextClass}`}>{t('contact.humanSupport')}</div>
      </div>
      
      <p className={`lfc-text-xs lfc-mb-3 ${descTextClass}`}>
        {t('contact.emailDescription')}
      </p>
      
      <form onSubmit={handleSubmit} className="lfc-space-y-3">
        <div>
          <input
            type="email"
            value={email}
            onChange={(e) => {
              setEmail(e.target.value)
              if (error) setError('')
            }}
            placeholder={t('contact.emailPlaceholder')}
            className={`
              lfc-w-full lfc-px-3 lfc-py-2 lfc-text-sm lfc-border lfc-rounded-lg
              focus:lfc-outline-none focus:lfc-ring-2 focus:lfc-ring-border-focus focus:lfc-border-transparent
              ${error ? 'lfc-border-state-danger-border lfc-bg-state-danger-bg' : 'lfc-border-border-subtle lfc-bg-bg-base'}
              disabled:lfc-bg-bg-layer disabled:lfc-cursor-not-allowed
            `}
            disabled={isLoading}
            autoComplete="email"
            autoFocus
          />
          
          {error && (
            <p className="lfc-text-xs lfc-text-state-danger-text lfc-mt-1">{error}</p>
          )}
        </div>
        
        <div className="lfc-flex lfc-space-x-2">
          <button
            type="submit"
            disabled={isLoading || !email.trim() || !validateEmail(email.trim())}
            className={`
              lfc-flex-1 lfc-px-3 lfc-py-2 lfc-text-sm lfc-font-medium lfc-rounded-lg
              lfc-transition-all lfc-duration-200
              focus:lfc-outline-none focus:lfc-ring-2 focus:lfc-ring-primary-300 focus:lfc-ring-offset-2
              ${isLoading || !email.trim() || !validateEmail(email.trim())
                ? 'lfc-bg-gray-300 lfc-text-gray-500 lfc-cursor-not-allowed'
                : 'lfc-bg-primary-500 hover:lfc-bg-primary-600 lfc-text-white hover:lfc-shadow-md active:lfc-scale-95'
              }
            `}
            style={getButtonStyle()}
          >
            {isLoading ? (
              <div className="lfc-flex lfc-items-center lfc-justify-center">
                <svg className="lfc-w-4 lfc-h-4 lfc-animate-spin lfc-mr-2" fill="none" viewBox="0 0 24 24">
                  <circle className="lfc-opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                  <path className="lfc-opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                </svg>
                {t('contact.sending')}
              </div>
            ) : (
              t('contact.sendToSupport')
            )}
          </button>
          
          <button
            type="button"
            onClick={onCancel}
            disabled={isLoading}
            className="lfc-px-3 lfc-py-2 lfc-text-sm lfc-font-medium lfc-text-text-secondary lfc-bg-bg-base lfc-border lfc-border-border-subtle lfc-rounded-lg hover:lfc-bg-bg-layer lfc-transition-colors disabled:lfc-opacity-50 disabled:lfc-cursor-not-allowed"
          >
            {t('contact.cancel')}
          </button>
        </div>
      </form>
    </div>
  )
}

export default ContactForm