'use client'

import { useState, useEffect, useRef } from 'react'
import { EyeIcon, EyeSlashIcon } from '@heroicons/react/24/outline'
import { useRegister } from '../hooks/useRegister'
import { useToast } from '../../components/toast/toastComponent'
import TelephoneInput, { TelephoneInputHandle } from '../../components/phone/telephoneInput'
import { useTranslation } from '../../i18n/useTranslation'

interface RegisterFormProps {
  mode: 'personal' | 'company' | 'guest'
  setMode: (mode: 'personal' | 'company' | 'guest') => void
  refToken: string | null
  onRegistered: () => void
  referrerEmail?: string
}

interface PersonalFormData {
  firstName: string
  lastName: string
  email: string
  confirmEmail: string
  password: string
  confirmPassword: string
  phoneNumber: string
}

interface CompanyFormData {
  companyName: string
  companyEmail: string
  confirmCompanyEmail: string
  companyPhone: string
  contactPersonName: string
  contactPersonPhone: string
  password: string
  confirmPassword: string
}

export default function RegisterForm({
  mode,
  setMode,
  refToken,
  onRegistered,
  referrerEmail
}: RegisterFormProps) {
  // Personal form state
  const [personalForm, setPersonalForm] = useState<PersonalFormData>({
    firstName: '',
    lastName: '',
    email: '',
    confirmEmail: '',
    password: '',
    confirmPassword: '',
    phoneNumber: ''
  })
  
  // Company form state
  const [companyForm, setCompanyForm] = useState<CompanyFormData>({
    companyName: '',
    companyEmail: '',
    confirmCompanyEmail: '',
    companyPhone: '',
    contactPersonName: '',
    contactPersonPhone: '',
    password: '',
    confirmPassword: ''
  })
  
  // UI state
  const [showPersonalPassword, setShowPersonalPassword] = useState(false)
  const [showCompanyPassword, setShowCompanyPassword] = useState(false)
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState('')
  const [formFade, setFormFade] = useState('fade-in')

  // Phone input refs (to access intl-tel-input via TelephoneInput)
  const personalPhoneRef = useRef<TelephoneInputHandle | null>(null)
  const companyPhoneRef = useRef<TelephoneInputHandle | null>(null)
  const contactPhoneRef = useRef<TelephoneInputHandle | null>(null)

  // Hook for backend calls
  const { registerPersonalReferral, registerCompanyReferral, registerGuest, error: regError } = useRegister()
  const { showToast } = useToast()
  const { t } = useTranslation()

  // Guest form state
  const [guestForm, setGuestForm] = useState({
    firstName: '',
    lastName: '',
    email: '',
    confirmEmail: '',
    password: '',
    confirmPassword: '',
  })

  // Animate form when mode changes
  useEffect(() => {
    setFormFade('fade-out')
    const timeout = setTimeout(() => {
      setFormFade('fade-in')
    }, 180)
    return () => clearTimeout(timeout)
  }, [mode])
  
  // Add fade CSS
  useEffect(() => {
    const style = document.createElement('style')
    style.innerHTML = `
      .fade-in {
        opacity: 1;
        transform: translateY(0);
        transition: opacity 180ms, transform 180ms;
      }
      .fade-out {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 180ms, transform 180ms;
      }
    `
    document.head.appendChild(style)
    return () => {
      document.head.removeChild(style)
    }
  }, [])
  
  // Reset forms when switching modes
  useEffect(() => {
    setError('')
  }, [mode])
  
  // Validation helpers
  const validatePersonalForm = (): boolean => {
    if (!personalForm.firstName.trim() || !personalForm.lastName.trim() || 
        !personalForm.email.trim() || !personalForm.confirmEmail.trim() ||
        !personalForm.password.trim() || !personalForm.confirmPassword.trim()
    ) {
      setError(t('register.errorAllRequired'))
      return false
    }
    
    if (personalForm.email !== personalForm.confirmEmail) {
      setError(t('register.errorEmailMismatch'))
      return false
    }
    
    if (personalForm.password !== personalForm.confirmPassword) {
      setError(t('register.errorPasswordMismatch'))
      return false
    }
    
    if (!/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[\W_]).{8,}$/.test(personalForm.password)) {
      setError(t('register.errorPasswordWeak'))
      return false
    }

    const phoneApi = personalPhoneRef.current
    const dialCode = phoneApi?.getDialCode?.()
    const intlNumber = phoneApi?.getNumber() || ''
    const valid = phoneApi?.isValid() ?? false

    if (!dialCode) {
      setError(t('register.errorSelectCountryCode'))
      return false
    }
    if (!intlNumber) {
      setError(t('register.errorPhoneRequired'))
      return false
    }
    if (!valid) {
      setError(t('register.errorPhoneInvalid'))
      return false
    }
    
    setError('')
    return true
  }
  
  const validateCompanyForm = (): boolean => {
    if (!companyForm.companyName.trim() || !companyForm.companyEmail.trim() ||
        !companyForm.confirmCompanyEmail.trim() || !companyForm.contactPersonName.trim() ||
        !companyForm.password.trim() || !companyForm.confirmPassword.trim()
    ) {
      setError(t('register.errorAllRequired'))
      return false
    }
    
    if (companyForm.companyEmail !== companyForm.confirmCompanyEmail) {
      setError(t('register.errorEmailMismatch'))
      return false
    }
    
    if (companyForm.password !== companyForm.confirmPassword) {
      setError(t('register.errorPasswordMismatch'))
      return false
    }
    
    if (!/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[\W_]).{8,}$/.test(companyForm.password)) {
      setError(t('register.errorPasswordWeak'))
      return false
    }

    const companyApi = companyPhoneRef.current
    const contactApi = contactPhoneRef.current

    const companyDialCode = companyApi?.getDialCode?.()
    const contactDialCode = contactApi?.getDialCode?.()

    const companyNumber = companyApi?.getNumber() || ''
    const contactNumber = contactApi?.getNumber() || ''
    const companyValid = companyApi?.isValid() ?? false
    const contactValid = contactApi?.isValid() ?? false

    if (!companyDialCode || !contactDialCode) {
      setError(t('register.errorBothCountryCodes'))
      return false
    }
    if (!companyNumber || !contactNumber) {
      setError(t('register.errorBothPhonesRequired'))
      return false
    }
    if (!companyValid || !contactValid) {
      setError(t('register.errorBothPhonesInvalid'))
      return false
    }
    
    setError('')
    return true
  }
  
  // Submit handlers
  const handlePersonalSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    if (loading) return
    
    if (!validatePersonalForm()) return
    
    setLoading(true)
    setError('')

    try {
      const normalizedPhone =
        personalPhoneRef.current?.getNumber() || personalForm.phoneNumber

      console.log('[RegisterForm] handlePersonalSubmit normalized phone', {
        normalizedPhone,
      })

      const res = await registerPersonalReferral({
        refToken: refToken || '',
        firstName: personalForm.firstName,
        lastName: personalForm.lastName,
        email: personalForm.email,
        password: personalForm.password,
        phone: normalizedPhone,
      })
      if (res.ok) {
        showToast({
          variant: 'success',
          title: t('register.successTitle'),
          message: t('register.successMessage')
        })
        onRegistered()
      } else {
        const msg = res.message || t('register.failedMessage')
        setError(msg)
        showToast({
          variant: 'error',
          title: t('register.failedTitle'),
          message: msg
        })
      }
    } catch (error) {
      const msg = t('register.failedMessage')
      setError(msg)
      showToast({
        variant: 'error',
        title: t('register.failedTitle'),
        message: msg
      })
    } finally {
      setLoading(false)
    }
  }
  
  const handleCompanySubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    if (loading) return
    
    if (!validateCompanyForm()) return
    
    setLoading(true)
    setError('')

    try {
      const normalizedCompanyPhone =
        companyPhoneRef.current?.getNumber() || companyForm.companyPhone
      const normalizedContactPhone =
        contactPhoneRef.current?.getNumber() || companyForm.contactPersonPhone

      console.log('[RegisterForm] handleCompanySubmit normalized phones', {
        normalizedCompanyPhone,
        normalizedContactPhone,
      })

      const res = await registerCompanyReferral({
        refToken: refToken || '',
        companyEmail: companyForm.companyEmail,
        password: companyForm.password,
        companyName: companyForm.companyName,
        companyPhone: normalizedCompanyPhone,
        contactPersonName: companyForm.contactPersonName,
        contactPersonPhone: normalizedContactPhone,
      })
      if (res.ok) {
        showToast({
          variant: 'success',
          title: t('register.successTitle'),
          message: t('register.successCompanyMessage')
        })
        onRegistered()
      } else {
        const msg = res.message || t('register.failedMessage')
        setError(msg)
        showToast({
          variant: 'error',
          title: t('register.failedTitle'),
          message: msg
        })
      }
    } catch (error) {
      const msg = t('register.failedMessage')
      setError(msg)
      showToast({
        variant: 'error',
        title: t('register.failedTitle'),
        message: msg
      })
    } finally {
      setLoading(false)
    }
  }
  
  // Surface hook error if present and no local error
  useEffect(() => {
    if (regError && !error) {
      setError(regError)
      showToast({
        variant: 'error',
        title: t('register.failedTitle'),
        message: regError
      })
    }
  }, [regError]) // eslint-disable-line react-hooks/exhaustive-deps

  // Input change handlers
  const handlePersonalChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target
    setPersonalForm(prev => ({ ...prev, [name]: value }))
  }
  
  const handleCompanyChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target
    setCompanyForm(prev => ({ ...prev, [name]: value }))
  }

  const handleGuestChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target
    setGuestForm(prev => ({ ...prev, [name]: value }))
  }

  const validateGuestForm = (): boolean => {
    if (!guestForm.firstName.trim() || !guestForm.lastName.trim() ||
        !guestForm.email.trim() || !guestForm.confirmEmail.trim() ||
        !guestForm.password.trim() || !guestForm.confirmPassword.trim()
    ) {
      setError(t('register.errorAllRequired'))
      return false
    }
    if (guestForm.email !== guestForm.confirmEmail) {
      setError(t('register.errorEmailMismatch'))
      return false
    }
    if (guestForm.password !== guestForm.confirmPassword) {
      setError(t('register.errorPasswordMismatch'))
      return false
    }
    if (!/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[\W_]).{8,}$/.test(guestForm.password)) {
      setError(t('register.errorPasswordWeak'))
      return false
    }
    setError('')
    return true
  }

  const handleGuestSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    if (loading) return
    if (!validateGuestForm()) return

    setLoading(true)
    setError('')
    try {
      const res = await registerGuest({
        refToken: refToken || '',
        firstName: guestForm.firstName,
        lastName: guestForm.lastName,
        email: guestForm.email,
        password: guestForm.password,
      })
      if (res.ok) {
        showToast({
          variant: 'success',
          title: t('register.successTitle'),
          message: t('register.successGuestMessage')
        })
        onRegistered()
      } else {
        const msg = res.message || t('register.failedMessage')
        setError(msg)
        showToast({ variant: 'error', title: t('register.failedTitle'), message: msg })
      }
    } catch {
      const msg = t('register.failedMessage')
      setError(msg)
      showToast({ variant: 'error', title: t('register.failedTitle'), message: msg })
    } finally {
      setLoading(false)
    }
  }

  // Password strength indicator
  const getPasswordStrength = (password: string) => {
    let strength = 0
    if (password.length >= 8) strength++
    if (/[a-z]/.test(password)) strength++
    if (/[A-Z]/.test(password)) strength++
    if (/\d/.test(password)) strength++
    if (/[\W_]/.test(password)) strength++
    return strength
  }
  
  const renderPasswordStrength = (password: string) => {
    const strength = getPasswordStrength(password)
    const rules = [
      { test: password.length >= 8, text: t('register.pwdMinLength') },
      { test: /[a-z]/.test(password), text: t('register.pwdLowercase') },
      { test: /[A-Z]/.test(password), text: t('register.pwdUppercase') },
      { test: /\d/.test(password), text: t('register.pwdDigits') },
      { test: /[\W_]/.test(password), text: t('register.pwdSpecial') }
    ]
    
    return (
      <div className="mt-2">
        <div className="text-sm text-slate-700 mb-2">{t('register.passwordRequirements')}</div>
        <ul className="text-sm space-y-1">
          {rules.map((rule, index) => (
            <li
              key={index}
              className={`flex items-center gap-2 ${rule.test ? 'text-green-600' : 'text-slate-600'}`}
            >
              <span>{rule.test ? '✓' : '○'}</span>
              <span>{rule.text}</span>
            </li>
          ))}
        </ul>
      </div>
    )
  }

  return (
    // softened outer container, no own solid white card – parent provides glass card
    <div className="w-full">
      {/* Header */}
      <div className="mb-6 text-center">
        <h2 className="text-2xl sm:text-3xl font-extrabold text-[#0F172A] mb-2">
          {t('register.formTitle')}
        </h2>
        {referrerEmail && (
          <p className="text-base sm:text-sm text-[#8D6B1D] font-medium">
            {t('register.invitedBy')} <span className="font-semibold">{referrerEmail}</span>!
          </p>
        )}
      </div>
      
      {/* Mode Toggle */}
      <div className="flex justify-center mb-8">
        <div className="bg-white/40 backdrop-blur-[18px] border border-white/35 shadow-sm p-1 rounded-lg">
          {mode === 'guest' ? (
            <button
              className="px-6 py-2 rounded-md font-semibold text-sm bg-[#8D6B1D] text-white shadow-sm cursor-default"
              type="button"
            >
              {t('register.tabGuest')}
            </button>
          ) : (
            <>
              <button
                className={`px-6 py-2 rounded-md font-semibold text-sm transition-all duration-200 ${
                  mode === 'personal'
                    ? 'bg-[#8D6B1D] text-white shadow-sm'
                    : 'bg-transparent text-slate-700 hover:text-[#8D6B1D]'
                }`}
                onClick={() => setMode('personal')}
                type="button"
              >
                {t('register.tabIndividual')}
              </button>
              <button
                className={`px-6 py-2 rounded-md font-semibold text-sm transition-all duration-200 ${
                  mode === 'company'
                    ? 'bg-[#8D6B1D] text-white shadow-sm'
                    : 'bg-transparent text-slate-700 hover:text-[#8D6B1D]'
                }`}
                onClick={() => setMode('company')}
                type="button"
              >
                {t('register.tabCompany')}
              </button>
            </>
          )}
        </div>
      </div>
      
      {/* Error Message */}
      {error && (
        <div className="mb-6 p-4 bg-red-50/70 backdrop-blur-[18px] border border-red-200/70 rounded-lg">
          <p className="text-red-600 text-sm font-medium">{error}</p>
        </div>
      )}
      
      {/* Forms */}
      <div className={formFade}>
        {mode === 'personal' ? (
          <form onSubmit={handlePersonalSubmit} className="space-y-6">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <label htmlFor="firstName" className="block text-sm font-medium text-[#0F172A] mb-2">
                  {t('register.firstName')} *
                </label>
                <input
                  type="text"
                  id="firstName"
                  name="firstName"
                  value={personalForm.firstName}
                  onChange={handlePersonalChange}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg bg-white/60 focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent transition-colors text-primary"
                  required
                />
              </div>
              
              <div>
                <label htmlFor="lastName" className="block text-sm font-medium text-[#0F172A] mb-2">
                  {t('register.lastName')} *
                </label>
                <input
                  type="text"
                  id="lastName"
                  name="lastName"
                  value={personalForm.lastName}
                  onChange={handlePersonalChange}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg bg-white/60 focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent transition-colors text-primary"
                  required
                />
              </div>
            </div>
            
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <label htmlFor="email" className="block text-sm font-medium text-[#0F172A] mb-2">
                  {t('register.email')} *
                </label>
                <input
                  type="email"
                  id="email"
                  name="email"
                  value={personalForm.email}
                  onChange={handlePersonalChange}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg bg-white/60 focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent transition-colors text-primary"
                  required
                />
              </div>
              
              <div>
                <label htmlFor="confirmEmail" className="block text-sm font-medium text-[#0F172A] mb-2">
                  {t('register.confirmEmail')} *
                </label>
                <input
                  type="email"
                  id="confirmEmail"
                  name="confirmEmail"
                  value={personalForm.confirmEmail}
                  onChange={handlePersonalChange}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg bg-white/60 focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent transition-colors text-primary"
                  required
                />
              </div>
            </div>
            
            <div>
              <label htmlFor="phoneNumber" className="block text-sm font-medium text-[#0F172A] mb-2">{t('autofix.kfb1676b0')}</label>
              <TelephoneInput
                id="phoneNumber"
                name="phoneNumber"
                ref={personalPhoneRef}
                autoComplete="tel"
                placeholder={t('autofix.k9f56d4ac')}
                required
                onChange={e =>
                  setPersonalForm(prev => ({ ...prev, phoneNumber: (e.target as HTMLInputElement).value }))
                }
              />
            </div>
            
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <label htmlFor="password" className="block text-sm font-medium text-[#0F172A] mb-2">
                  {t('register.password')} *
                </label>
                <div className="relative">
                  <input
                    type={showPersonalPassword ? 'text' : 'password'}
                    id="password"
                    name="password"
                    value={personalForm.password}
                    onChange={handlePersonalChange}
                    autoComplete="new-password"
                    className="w-full px-3 py-2 pr-10 border border-gray-300 rounded-lg bg-white/60 focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent transition-colors text-primary"
                    required
                  />
                  <button
                    type="button"
                    onClick={() => setShowPersonalPassword(!showPersonalPassword)}
                    className="absolute inset-y-0 right-0 pr-3 flex items-center"
                  >
                    {showPersonalPassword ? (
                      <EyeSlashIcon className="h-4 w-4 text-slate-600" />
                    ) : (
                      <EyeIcon className="h-4 w-4 text-slate-600" />
                    )}
                  </button>
                </div>
                {personalForm.password && renderPasswordStrength(personalForm.password)}
              </div>
              
              <div>
                <label htmlFor="confirmPassword" className="block text-sm font-medium text-[#0F172A] mb-2">
                  {t('register.confirmPassword')} *
                </label>
                <input
                  type={showPersonalPassword ? 'text' : 'password'}
                  id="confirmPassword"
                  name="confirmPassword"
                  value={personalForm.confirmPassword}
                  onChange={handlePersonalChange}
                  autoComplete="new-password"
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg bg-white/60 focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent transition-colors text-primary"
                  required
                />
              </div>
            </div>
            
            <button
              type="submit"
              disabled={loading}
              className={`w-full flex items-center justify-center py-3 px-4 rounded-lg text-white font-semibold transition-colors ${
                loading
                  ? 'bg-gray-400 cursor-not-allowed'
                  : 'bg-[#8D6B1D] hover:bg-[#7A5E1A] focus:ring-2 focus:ring-[#8D6B1D] focus:ring-offset-2'
              }`}
            >
              {loading ? (
                <>
                  <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
                  {t('register.submitting')}
                </>
              ) : (
                t('register.registerNow')
              )}
            </button>
          </form>
        ) : mode === 'company' ? (
          <form onSubmit={handleCompanySubmit} className="space-y-6">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <label htmlFor="companyName" className="block text-sm font-medium text-[#0F172A] mb-2">
                  {t('register.companyName')} *
                </label>
                <input
                  type="text"
                  id="companyName"
                  name="companyName"
                  value={companyForm.companyName}
                  onChange={handleCompanyChange}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg bg-white/60 focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent transition-colors text-primary"
                  required
                />
              </div>
              
              <div>
                <label htmlFor="contactPersonName" className="block text-sm font-medium text-[#0F172A] mb-2">
                  {t('register.contactPersonName')} *
                </label>
                <input
                  type="text"
                  id="contactPersonName"
                  name="contactPersonName"
                  value={companyForm.contactPersonName}
                  onChange={handleCompanyChange}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg bg-white/60 focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent transition-colors text-primary"
                  required
                />
              </div>
            </div>
            
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <label htmlFor="companyEmail" className="block text-sm font-medium text-[#0F172A] mb-2">
                  {t('register.companyEmail')} *
                </label>
                <input
                  type="email"
                  id="companyEmail"
                  name="companyEmail"
                  value={companyForm.companyEmail}
                  onChange={handleCompanyChange}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg bg-white/60 focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent transition-colors text-primary"
                  required
                />
              </div>
              
              <div>
                <label htmlFor="confirmCompanyEmail" className="block text-sm font-medium text-[#0F172A] mb-2">
                  {t('register.confirmEmail')} *
                </label>
                <input
                  type="email"
                  id="confirmCompanyEmail"
                  name="confirmCompanyEmail"
                  value={companyForm.confirmCompanyEmail}
                  onChange={handleCompanyChange}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg bg-white/60 focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent transition-colors text-primary"
                  required
                />
              </div>
            </div>
            
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <label htmlFor="companyPhone" className="block text-sm font-medium text-[#0F172A] mb-2">
                  {t('register.companyPhone')} *
                </label>
                <TelephoneInput
                  id="companyPhone"
                  name="companyPhone"
                  ref={companyPhoneRef}
                  autoComplete="tel"
                  placeholder={t('autofix.k8eaa7b3b')}
                  required
                  onChange={e =>
                    setCompanyForm(prev => ({ ...prev, companyPhone: (e.target as HTMLInputElement).value }))
                  }
                />
              </div>

              <div>
                <label htmlFor="contactPersonPhone" className="block text-sm font-medium text-[#0F172A] mb-2">
                  {t('register.contactPersonPhone')} *
                </label>
                <TelephoneInput
                  id="contactPersonPhone"
                  name="contactPersonPhone"
                  ref={contactPhoneRef}
                  autoComplete="tel"
                  placeholder={t('autofix.k9f56d4ac')}
                  required
                  onChange={e =>
                    setCompanyForm(prev => ({
                      ...prev,
                      contactPersonPhone: (e.target as HTMLInputElement).value,
                    }))
                  }
                />
              </div>
            </div>
            
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <label htmlFor="password" className="block text-sm font-medium text-[#0F172A] mb-2">
                  {t('register.password')} *
                </label>
                <div className="relative">
                  <input
                    type={showCompanyPassword ? 'text' : 'password'}
                    id="password"
                    name="password"
                    value={companyForm.password}
                    onChange={handleCompanyChange}
                    autoComplete="new-password"
                    className="w-full px-3 py-2 pr-10 border border-gray-300 rounded-lg bg-white/60 focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent transition-colors text-primary"
                    required
                  />
                  <button
                    type="button"
                    onClick={() => setShowCompanyPassword(!showCompanyPassword)}
                    className="absolute inset-y-0 right-0 pr-3 flex items-center"
                  >
                    {showCompanyPassword ? (
                      <EyeSlashIcon className="h-4 w-4 text-slate-600" />
                    ) : (
                      <EyeIcon className="h-4 w-4 text-slate-600" />
                    )}
                  </button>
                </div>
                {companyForm.password && renderPasswordStrength(companyForm.password)}
              </div>
              
              <div>
                <label htmlFor="confirmPassword" className="block text-sm font-medium text-[#0F172A] mb-2">
                  {t('register.confirmPassword')} *
                </label>
                <input
                  type={showCompanyPassword ? 'text' : 'password'}
                  id="confirmPassword"
                  name="confirmPassword"
                  value={companyForm.confirmPassword}
                  onChange={handleCompanyChange}
                  autoComplete="new-password"
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg bg-white/60 focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent transition-colors text-primary"
                  required
                />
              </div>
            </div>
            
            <button
              type="submit"
              disabled={loading}
              className={`w-full flex items-center justify-center py-3 px-4 rounded-lg text-white font-semibold transition-colors ${
                loading
                  ? 'bg-gray-400 cursor-not-allowed'
                  : 'bg-[#8D6B1D] hover:bg-[#7A5E1A] focus:ring-2 focus:ring-[#8D6B1D] focus:ring-offset-2'
              }`}
            >
              {loading ? (
                <>
                  <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
                  {t('register.submitting')}
                </>
              ) : (
                t('register.submitCompany')
              )}
            </button>
          </form>
        ) : (
          <form onSubmit={handleGuestSubmit} className="space-y-6">
            <div className="p-4 bg-amber-50/70 backdrop-blur-[18px] border border-amber-200/70 rounded-lg mb-2">
              <p className="text-amber-800 text-sm font-medium">
                {t('register.guestNote')}
              </p>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <label htmlFor="guestFirstName" className="block text-sm font-medium text-[#0F172A] mb-2">
                  {t('register.firstName')} *
                </label>
                <input
                  type="text"
                  id="guestFirstName"
                  name="firstName"
                  value={guestForm.firstName}
                  onChange={handleGuestChange}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg bg-white/60 focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent transition-colors text-primary"
                  required
                />
              </div>
              <div>
                <label htmlFor="guestLastName" className="block text-sm font-medium text-[#0F172A] mb-2">
                  {t('register.lastName')} *
                </label>
                <input
                  type="text"
                  id="guestLastName"
                  name="lastName"
                  value={guestForm.lastName}
                  onChange={handleGuestChange}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg bg-white/60 focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent transition-colors text-primary"
                  required
                />
              </div>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <label htmlFor="guestEmail" className="block text-sm font-medium text-[#0F172A] mb-2">
                  {t('register.email')} *
                </label>
                <input
                  type="email"
                  id="guestEmail"
                  name="email"
                  value={guestForm.email}
                  onChange={handleGuestChange}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg bg-white/60 focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent transition-colors text-primary"
                  required
                />
              </div>
              <div>
                <label htmlFor="guestConfirmEmail" className="block text-sm font-medium text-[#0F172A] mb-2">
                  {t('register.confirmEmail')} *
                </label>
                <input
                  type="email"
                  id="guestConfirmEmail"
                  name="confirmEmail"
                  value={guestForm.confirmEmail}
                  onChange={handleGuestChange}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg bg-white/60 focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent transition-colors text-primary"
                  required
                />
              </div>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <label htmlFor="guestPassword" className="block text-sm font-medium text-[#0F172A] mb-2">
                  {t('register.password')} *
                </label>
                <div className="relative">
                  <input
                    type={showPersonalPassword ? 'text' : 'password'}
                    id="guestPassword"
                    name="password"
                    value={guestForm.password}
                    onChange={handleGuestChange}
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg bg-white/60 focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent transition-colors text-primary pr-10"
                    required
                  />
                  <button
                    type="button"
                    onClick={() => setShowPersonalPassword(!showPersonalPassword)}
                    className="absolute inset-y-0 right-0 px-3 flex items-center text-slate-500 hover:text-[#8D6B1D]"
                  >
                    {showPersonalPassword ? (
                      <EyeSlashIcon className="h-5 w-5" />
                    ) : (
                      <EyeIcon className="h-5 w-5" />
                    )}
                  </button>
                </div>
                {guestForm.password && renderPasswordStrength(guestForm.password)}
              </div>
              <div>
                <label htmlFor="guestConfirmPassword" className="block text-sm font-medium text-[#0F172A] mb-2">
                  {t('register.confirmPassword')} *
                </label>
                <input
                  type="password"
                  id="guestConfirmPassword"
                  name="confirmPassword"
                  value={guestForm.confirmPassword}
                  onChange={handleGuestChange}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg bg-white/60 focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent transition-colors text-primary"
                  required
                />
              </div>
            </div>

            <button
              type="submit"
              disabled={loading}
              className={`w-full flex items-center justify-center py-3 px-4 rounded-lg text-white font-semibold transition-colors ${
                loading
                  ? 'bg-gray-400 cursor-not-allowed'
                  : 'bg-[#8D6B1D] hover:bg-[#7A5E1A] focus:ring-2 focus:ring-[#8D6B1D] focus:ring-offset-2'
              }`}
            >
              {loading ? (
                <>
                  <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
                  {t('register.submitting')}
                </>
              ) : (
                t('register.submitGuest')
              )}
            </button>
          </form>
        )}
      </div>
      
      {/* Login Link */}
      <div className="mt-8 text-center">
        <p className="text-slate-700">
          {t('register.alreadyHaveAccount')}{' '}
          <a 
            href="/login" 
            className="text-[#8D6B1D] hover:text-[#7A5E1A] font-medium transition-colors"
          >
            {t('register.loginHere')}
          </a>
        </p>
      </div>
    </div>
  )
}