'use client';

import { useState } from 'react';
import { HiOutlineMail } from 'react-icons/hi';
import { jobService } from '@/services/jobService';

export default function ApplyJobForm({ jobId }: { jobId: number }) {
  const [formData, setFormData] = useState({
    full_name: '',
    email: '',
    phone: '',
    cover_letter: '',
  });
  const [cvFile, setCvFile] = useState<File | null>(null);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [status, setStatus] = useState<'idle' | 'success' | 'error'>('idle');
  const [errorMessage, setErrorMessage] = useState('');

  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!cvFile) {
      alert('Vui lòng đính kèm CV (định dạng PDF)!');
      return;
    }

    setIsSubmitting(true);
    setStatus('idle');
    setErrorMessage('');

    try {
      const data = new FormData();
      data.append('job', jobId.toString());
      data.append('full_name', formData.full_name);
      data.append('email', formData.email);
      data.append('phone', formData.phone);
      data.append('cv_file', cvFile);
      if (formData.cover_letter) {
        data.append('cover_letter', formData.cover_letter);
      }

      await jobService.applyForJob(data);
      setStatus('success');
      setFormData({ full_name: '', email: '', phone: '', cover_letter: '' });
      setCvFile(null);
    } catch (e: any) {
      console.error(e);
      setStatus('error');
      setErrorMessage(e.response?.data?.message || 'Có lỗi xảy ra khi gửi hồ sơ. Vui lòng thử lại sau.');
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <div className="bg-white rounded-2xl shadow-sm border border-surface-200 p-6 md:p-8 sticky top-28">
      <h3 className="text-xl font-bold text-dark-800 mb-6 text-center">Ứng tuyển ngay</h3>
      
      {status === 'success' ? (
        <div className="text-center py-6">
          <div className="w-16 h-16 bg-green-100 text-green-500 rounded-full flex items-center justify-center mx-auto mb-4 text-3xl">✓</div>
          <h4 className="text-lg font-bold text-dark-800 mb-2">Nộp hồ sơ thành công!</h4>
          <p className="text-dark-500 text-sm">Chúng tôi đã nhận được hồ sơ của bạn và sẽ liên hệ lại trong thời gian sớm nhất nếu phù hợp.</p>
          <button 
            onClick={() => setStatus('idle')}
            className="mt-6 px-6 py-2 bg-surface-100 text-dark-600 rounded-lg hover:bg-surface-200"
          >
            Nộp hồ sơ khác
          </button>
        </div>
      ) : (
        <>
          <form onSubmit={handleSubmit} className="space-y-4">
            <div>
              <label className="block text-sm font-medium text-dark-700 mb-1.5">Họ và tên *</label>
              <input 
                type="text" 
                name="full_name"
                value={formData.full_name}
                onChange={handleChange}
                className="w-full px-4 py-2.5 rounded-lg border border-surface-300 focus:outline-none focus:border-primary-500 focus:ring-1 focus:ring-primary-500" 
                required 
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-dark-700 mb-1.5">Email *</label>
              <input 
                type="email" 
                name="email"
                value={formData.email}
                onChange={handleChange}
                className="w-full px-4 py-2.5 rounded-lg border border-surface-300 focus:outline-none focus:border-primary-500 focus:ring-1 focus:ring-primary-500" 
                required 
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-dark-700 mb-1.5">Số điện thoại *</label>
              <input 
                type="tel" 
                name="phone"
                value={formData.phone}
                onChange={handleChange}
                className="w-full px-4 py-2.5 rounded-lg border border-surface-300 focus:outline-none focus:border-primary-500 focus:ring-1 focus:ring-primary-500" 
                required 
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-dark-700 mb-1.5">CV Đính kèm (PDF) *</label>
              <div className="border-2 border-dashed border-surface-300 rounded-lg p-4 text-center hover:border-primary-400 transition-colors cursor-pointer bg-surface-50 relative">
                <span className="text-sm text-dark-500">
                  {cvFile ? cvFile.name : 'Nhấn để tải file lên (Tối đa 5MB)'}
                </span>
                <input 
                  type="file" 
                  accept=".pdf" 
                  className="absolute inset-0 w-full h-full opacity-0 cursor-pointer" 
                  onChange={(e) => setCvFile(e.target.files?.[0] || null)}
                  required 
                />
              </div>
            </div>
            <div>
              <label className="block text-sm font-medium text-dark-700 mb-1.5">Lời giới thiệu</label>
              <textarea 
                name="cover_letter"
                value={formData.cover_letter}
                onChange={handleChange}
                rows={3} 
                className="w-full px-4 py-2.5 rounded-lg border border-surface-300 focus:outline-none focus:border-primary-500 focus:ring-1 focus:ring-primary-500 resize-none" 
              />
            </div>
            
            {status === 'error' && (
              <div className="p-3 bg-red-50 text-red-600 text-sm rounded-lg">
                {errorMessage}
              </div>
            )}

            <button 
              type="submit" 
              disabled={isSubmitting}
              className="w-full py-3.5 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-300 disabled:cursor-not-allowed text-white font-semibold rounded-xl transition-colors shadow-md shadow-primary-500/20 mt-4"
            >
              {isSubmitting ? 'Đang gửi...' : 'Gửi hồ sơ ứng tuyển'}
            </button>
          </form>
          
          <div className="mt-6 pt-6 border-t border-surface-200 text-center">
            <p className="text-sm text-dark-500 mb-2">Hoặc gửi hồ sơ trực tiếp qua email:</p>
            <a href="mailto:hr@vitalistpharma.com.vn" className="inline-flex items-center gap-2 text-primary-600 font-medium hover:underline">
              <HiOutlineMail className="w-5 h-5" /> hr@vitalistpharma.com.vn
            </a>
          </div>
        </>
      )}
    </div>
  );
}