"use client"

import { useState, useRef } from 'react'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Card } from '@/components/ui/card'
import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar'
import { 
  User, 
  UserPlus,
  Phone,
  Mail,
  Briefcase,
  DollarSign,
  AlertCircle,
  Save,
  X,
  Camera,
  Calendar,
  MessageCircle,
  FileImage,
  RefreshCw
} from 'lucide-react'
import { toast } from 'sonner'
import { 
  formatPhoneInput, 
  formatSalary,
  formatNameInput,
  isValidEmail,
  isValidPhone,
  isValidSalary,
  isValidBirthDate
} from '@/lib/input-masks'

interface EmployeeCompactFormProps {
  onSave: (employeeData: {
    firstName: string
    lastName: string
    middleName?: string
    phone: string
    email?: string
    position: string
    salary?: number
    avatar?: string
    birthDate?: string
    telegram?: string
    whatsapp?: string
    passportPhoto?: string
    hireDate: string
  }) => void
  onCancel: () => void
  isLoading?: boolean
}

interface ValidationErrors {
  [key: string]: string
}

export function EmployeeCompactForm({ onSave, onCancel, isLoading = false }: EmployeeCompactFormProps) {
  const [formData, setFormData] = useState({
    firstName: '',
    lastName: '',
    middleName: '',
    phone: '',
    email: '',
    position: '',
    salary: 0,
    avatar: '',
    birthDate: '',
    telegram: '',
    whatsapp: '',
    passportPhoto: ''
  })

  const [errors, setErrors] = useState<ValidationErrors>({})
  const [isUploadingAvatar, setIsUploadingAvatar] = useState(false)
  const [isUploadingPassport, setIsUploadingPassport] = useState(false)
  const avatarInputRef = useRef<HTMLInputElement>(null)
  const passportInputRef = useRef<HTMLInputElement>(null)

  const validateField = (field: string, value: string | number): string | null => {
    switch (field) {
      case 'firstName':
      case 'lastName':
        if (!value || String(value).trim() === '') {
          return field === 'firstName' ? 'Имя обязательно' : 'Фамилия обязательна'
        }
        if (String(value).length < 2) {
          return field === 'firstName' ? 'Имя минимум 2 символа' : 'Фамилия минимум 2 символа'
        }
        if (!/^[а-яёА-ЯЁa-zA-Z\s-]+$/.test(String(value))) {
          return field === 'firstName' ? 'Только буквы, пробелы и дефисы' : 'Только буквы, пробелы и дефисы'
        }
        break
        
      case 'middleName':
        if (value && String(value).length > 0) {
          if (String(value).length < 2) {
            return 'Отчество минимум 2 символа'
          }
          if (!/^[а-яёА-ЯЁa-zA-Z\s-]+$/.test(String(value))) {
            return 'Только буквы, пробелы и дефисы'
          }
        }
        break
        
      case 'position':
        if (!value || String(value).trim() === '') {
          return 'Должность обязательна'
        }
        if (String(value).length < 2) {
          return 'Должность минимум 2 символа'
        }
        break
        
      case 'phone':
      case 'whatsapp':
        if (field === 'phone' && (!value || String(value).trim() === '')) {
          return 'Телефон обязателен'
        }
        if (value && String(value).trim() !== '' && !isValidPhone(String(value))) {
          return 'Некорректный формат телефона'
        }
        break
        
      case 'email':
        if (value && String(value).trim() !== '' && !isValidEmail(String(value))) {
          return 'Некорректный email'
        }
        break
        
      case 'birthDate':
        if (value && String(value).trim() !== '') {
          const validation = isValidBirthDate(String(value))
          if (!validation.valid) {
            return validation.message || 'Некорректная дата рождения'
          }
        }
        break
        
      case 'salary':
        const salaryValidation = isValidSalary(Number(value))
        if (!salaryValidation.valid) {
          return salaryValidation.message || 'Некорректная зарплата'
        }
        break
    }
    
    return null
  }

  const handleInputChange = (field: string, value: string | number) => {
    let processedValue = value

    // Применяем маски ввода
    if (typeof value === 'string') {
      switch (field) {
        case 'phone':
        case 'whatsapp':
          processedValue = formatPhoneInput(value)
          break
        case 'firstName':
        case 'lastName':
        case 'middleName':
          processedValue = formatNameInput(value)
          break
      }
    }

    setFormData(prev => ({
      ...prev,
      [field]: processedValue
    }))

    // Валидация в реальном времени
    const error = validateField(field, processedValue)
    setErrors(prev => ({
      ...prev,
      [field]: error || ''
    }))
  }

  const handleSalaryChange = (value: string) => {
    const numericValue = parseInt(value.replace(/\D/g, '')) || 0
    setFormData(prev => ({
      ...prev,
      salary: numericValue
    }))

    const error = validateField('salary', numericValue)
    setErrors(prev => ({
      ...prev,
      salary: error || ''
    }))
  }

  const handleFileUpload = async (file: File, type: 'avatar' | 'passport') => {
    const setLoading = type === 'avatar' ? setIsUploadingAvatar : setIsUploadingPassport
    setLoading(true)
    
    try {
      const formDataUpload = new FormData()
      formDataUpload.append('file', file)
      
      let endpoint: string
      
      if (type === 'avatar') {
        formDataUpload.append('userId', `temp_${Date.now()}`)
        endpoint = '/api/upload-avatar'
      } else {
        // Для фото паспорта используем специальный endpoint для документов
        formDataUpload.append('documentType', 'passport-photo')
        endpoint = '/api/upload-employee-document'
      }

      const response = await fetch(endpoint, {
        method: 'POST',
        body: formDataUpload
      })

      if (!response.ok) {
        const errorData = await response.json()
        throw new Error(errorData.error || `Ошибка загрузки ${type === 'avatar' ? 'аватара' : 'паспорта'}`)
      }

      const result = await response.json()
      
      setFormData(prev => ({
        ...prev,
        [type === 'avatar' ? 'avatar' : 'passportPhoto']: result.url
      }))

      toast.success(`${type === 'avatar' ? 'Аватар' : 'Фото паспорта'} успешно загружен`)
    } catch (error) {
      console.error(`Error uploading ${type}:`, error)
      const errorMessage = error instanceof Error ? error.message : `Ошибка при загрузке ${type === 'avatar' ? 'аватара' : 'паспорта'}`
      toast.error(errorMessage)
    } finally {
      setLoading(false)
    }
  }

  const validateForm = (): boolean => {
    const newErrors: ValidationErrors = {}
    
    // Валидируем все поля
    Object.keys(formData).forEach(field => {
      const error = validateField(field, formData[field as keyof typeof formData])
      if (error) {
        newErrors[field] = error
      }
    })

    setErrors(newErrors)
    return Object.keys(newErrors).filter(key => newErrors[key]).length === 0
  }

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()

    if (!validateForm()) {
      toast.error('Исправьте ошибки в форме')
      return
    }

    // Подготавливаем данные для отправки
    const employeeData = {
      firstName: formData.firstName,
      lastName: formData.lastName,
      middleName: formData.middleName || undefined,
      phone: formData.phone,
      email: formData.email || undefined,
      position: formData.position,
      salary: formData.salary || undefined,
      avatar: formData.avatar || undefined,
      birthDate: formData.birthDate || undefined,
      telegram: formData.telegram || undefined,
      whatsapp: formData.whatsapp || undefined,
      passportPhoto: formData.passportPhoto || undefined,
      hireDate: new Date().toISOString().split('T')[0]
    }

    onSave(employeeData)
  }

  // Компонент для отображения ошибок
  const ErrorMessage = ({ error }: { error: string }) => {
    if (!error) return null
    return (
      <div className="flex items-center gap-1 mt-1 text-red-400 text-xs">
        <AlertCircle className="h-3 w-3 flex-shrink-0" />
        <span>{error}</span>
      </div>
    )
  }

  const getInitials = () => {
    const first = formData.firstName.charAt(0).toUpperCase()
    const last = formData.lastName.charAt(0).toUpperCase()
    return `${first}${last}`
  }

  return (
    <Card className="glass-card p-4 mb-6">
      <form onSubmit={handleSubmit}>
        <div className="space-y-4">
          {/* Заголовок */}
          <div className="flex items-center gap-2 mb-4">
            <UserPlus className="h-5 w-5 text-purple-400" />
            <h3 className="text-white font-semibold">Быстрое добавление сотрудника</h3>
            <span className="text-white/60 text-sm ml-2">(табель работы будет доступен после создания)</span>
          </div>
          
          <div className="flex items-center gap-4">
            {/* Аватар с возможностью загрузки */}
            <div className="flex-shrink-0">
              <div className="relative">
                <Avatar className="h-12 w-12 ring-2 ring-white/20">
                  {formData.avatar && formData.avatar.trim() !== '' ? (
                    <AvatarImage src={formData.avatar} alt="Аватар сотрудника" />
                  ) : null}
                  <AvatarFallback className="bg-gradient-to-br from-purple-500 to-purple-600 text-white font-semibold">
                    {getInitials() || <User className="h-6 w-6" />}
                  </AvatarFallback>
                </Avatar>
                <div className="absolute -bottom-1 -right-1">
                  <label htmlFor="avatar-upload-compact" className="cursor-pointer">
                    <div className="w-5 h-5 bg-purple-600 rounded-full flex items-center justify-center hover:bg-purple-700 transition-colors">
                      {isUploadingAvatar ? (
                        <RefreshCw className="h-2.5 w-2.5 text-white animate-spin" />
                      ) : (
                        <Camera className="h-2.5 w-2.5 text-white" />
                      )}
                    </div>
                  </label>
                </div>
              </div>
            </div>

          {/* Основные поля в одну строку */}
          <div className="flex-1 grid grid-cols-6 gap-3 items-start">
            {/* Имя */}
            <div className="relative">
              <Input
                value={formData.firstName}
                onChange={(e) => handleInputChange('firstName', e.target.value)}
                placeholder="Имя *"
                className={`glass-input text-white placeholder:text-white/40 h-10 text-sm ${errors.firstName ? 'border-red-400' : ''}`}
                required
              />
              <ErrorMessage error={errors.firstName} />
            </div>
            
            {/* Фамилия */}
            <div className="relative">
              <Input
                value={formData.lastName}
                onChange={(e) => handleInputChange('lastName', e.target.value)}
                placeholder="Фамилия *"
                className={`glass-input text-white placeholder:text-white/40 h-10 text-sm ${errors.lastName ? 'border-red-400' : ''}`}
                required
              />
              <ErrorMessage error={errors.lastName} />
            </div>

            {/* Должность */}
            <div className="relative">
              <Input
                value={formData.position}
                onChange={(e) => handleInputChange('position', e.target.value)}
                placeholder="Должность *"
                className={`glass-input text-white placeholder:text-white/40 h-10 text-sm ${errors.position ? 'border-red-400' : ''}`}
                required
              />
              <ErrorMessage error={errors.position} />
            </div>
            
            {/* Телефон */}
            <div className="relative">
              <Input
                value={formData.phone}
                onChange={(e) => handleInputChange('phone', e.target.value)}
                placeholder="Телефон *"
                className={`glass-input text-white placeholder:text-white/40 h-10 text-sm ${errors.phone ? 'border-red-400' : ''}`}
                required
              />
              <ErrorMessage error={errors.phone} />
            </div>
            
            {/* Email */}
            <div className="relative">
              <Input
                type="email"
                value={formData.email}
                onChange={(e) => handleInputChange('email', e.target.value)}
                placeholder="Email"
                className={`glass-input text-white placeholder:text-white/40 h-10 text-sm ${errors.email ? 'border-red-400' : ''}`}
              />
              <ErrorMessage error={errors.email} />
            </div>
            
            {/* Зарплата */}
            <div className="relative">
              <Input
                value={formData.salary ? formatSalary(formData.salary.toString()) : ''}
                onChange={(e) => handleSalaryChange(e.target.value)}
                placeholder="Зарплата"
                className={`glass-input text-white placeholder:text-white/40 h-10 text-sm ${errors.salary ? 'border-red-400' : ''}`}
              />
              <ErrorMessage error={errors.salary} />
            </div>
          </div>

          {/* Кнопки управления */}
          <div className="flex gap-2 flex-shrink-0">
            <Button
              type="button"
              size="sm"
              variant="ghost"
              onClick={onCancel}
              className="text-red-400/60 hover:text-red-300 hover:bg-red-500/10 h-10 w-10 p-0"
            >
              <X className="h-4 w-4" />
            </Button>
            <Button
              type="submit"
              disabled={isLoading || isUploadingAvatar || isUploadingPassport}
              size="sm"
              className="bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-500 hover:to-pink-500 text-white border-0 shadow-lg shadow-purple-500/25 hover:shadow-purple-500/40 transition-all duration-300 h-10 px-4"
            >
              {isLoading ? (
                'Создание...'
              ) : (
                <>
                  <Save className="h-4 w-4 mr-2" />
                  Добавить
                </>
              )}
            </Button>
          </div>
          </div>

          {/* Дополнительные поля - всегда видимы */}
          <div className="mt-4 p-4 bg-white/5 rounded-lg border border-white/10">
            <h4 className="text-white/80 font-medium mb-3 flex items-center gap-2">
              <User className="h-4 w-4" />
              Дополнительная информация
            </h4>
            
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
              {/* Дата рождения */}
              <div className="relative">
                <label className="text-white/70 text-xs mb-1 block">Дата рождения</label>
                <Input
                  type="date"
                  value={formData.birthDate}
                  onChange={(e) => handleInputChange('birthDate', e.target.value)}
                  className={`glass-input text-white h-9 text-sm ${errors.birthDate ? 'border-red-400' : ''}`}
                />
                <ErrorMessage error={errors.birthDate} />
              </div>

              {/* Telegram */}
              <div className="relative">
                <label className="text-white/70 text-xs mb-1 block">Telegram</label>
                <Input
                  value={formData.telegram}
                  onChange={(e) => handleInputChange('telegram', e.target.value)}
                  placeholder="@username"
                  className={`glass-input text-white placeholder:text-white/40 h-9 text-sm ${errors.telegram ? 'border-red-400' : ''}`}
                />
                <ErrorMessage error={errors.telegram} />
              </div>

              {/* WhatsApp */}
              <div className="relative">
                <label className="text-white/70 text-xs mb-1 block">WhatsApp</label>
                <Input
                  value={formData.whatsapp}
                  onChange={(e) => handleInputChange('whatsapp', e.target.value)}
                  placeholder="+7 (999) 123-45-67"
                  className={`glass-input text-white placeholder:text-white/40 h-9 text-sm ${errors.whatsapp ? 'border-red-400' : ''}`}
                />
                <ErrorMessage error={errors.whatsapp} />
              </div>

              {/* Фото паспорта */}
              <div className="relative">
                <label className="text-white/70 text-xs mb-1 block">Фото паспорта</label>
                <div className="flex items-center gap-2">
                  <div className="relative flex-1">
                    <div className="w-full h-9 rounded-lg border border-white/20 bg-white/5 flex items-center justify-center overflow-hidden">
                      {formData.passportPhoto && formData.passportPhoto.trim() !== '' ? (
                        <img 
                          src={formData.passportPhoto} 
                          alt="Фото паспорта" 
                          className="w-full h-full object-cover"
                        />
                      ) : (
                        <span className="text-white/40 text-xs">Не загружено</span>
                      )}
                    </div>
                  </div>
                  <label htmlFor="passport-upload-compact" className="cursor-pointer">
                    <div className="w-9 h-9 bg-blue-600 rounded-lg flex items-center justify-center hover:bg-blue-700 transition-colors">
                      {isUploadingPassport ? (
                        <RefreshCw className="h-4 w-4 text-white animate-spin" />
                      ) : (
                        <Camera className="h-4 w-4 text-white" />
                      )}
                    </div>
                  </label>
                </div>
              </div>
            </div>
          </div>

          {/* Скрытые input для загрузки файлов */}
          <input
            id="avatar-upload-compact"
            ref={avatarInputRef}
            type="file"
            accept="image/*"
            onChange={(e) => e.target.files?.[0] && handleFileUpload(e.target.files[0], 'avatar')}
            className="hidden"
            disabled={isUploadingAvatar}
          />
          
          <input
            id="passport-upload-compact"
            ref={passportInputRef}
            type="file"
            accept="image/*"
            onChange={(e) => e.target.files?.[0] && handleFileUpload(e.target.files[0], 'passport')}
            className="hidden"
            disabled={isUploadingPassport}
          />
        </div>
      </form>
    </Card>
  )
}