"use client";

import { useState, FormEvent, ChangeEvent } from "react";
import { JobPosition, careerService } from "@/lib/api/careerService";

interface JobApplicationFormProps {
  job: JobPosition;
  onClose?: () => void;
}

interface FormData {
  // Required fields
  first_name: string;
  last_name: string;
  email: string;
  resume: File | null;
  consent: boolean;
  
  // Optional fields
  phone: string;
  current_position: string;
  current_company: string;
  years_of_experience: string;
  cover_letter: string;
  portfolio_url: string;
  linkedin_url: string;
  github_url: string;
  website_url: string;
  available_from: string;
  notice_period: string;
  expected_salary: string;
  salary_currency: string;
}

const JobApplicationForm = ({ job, onClose }: JobApplicationFormProps) => {
  const [formData, setFormData] = useState<FormData>({
    // Required fields
    first_name: "",
    last_name: "",
    email: "",
    resume: null,
    consent: false,
    
    // Optional fields
    phone: "",
    current_position: "",
    current_company: "",
    years_of_experience: "",
    cover_letter: "",
    portfolio_url: "",
    linkedin_url: "",
    github_url: "",
    website_url: "",
    available_from: "",
    notice_period: "",
    expected_salary: "",
    salary_currency: "USD",
  });

  const [isSubmitting, setIsSubmitting] = useState(false);
  const [message, setMessage] = useState<{ type: "success" | "error" | null; text: string }>({
    type: null,
    text: "",
  });

  const handleInputChange = (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
    const { name, value, type } = e.target;
    
    if (type === "checkbox") {
      const checked = (e.target as HTMLInputElement).checked;
      setFormData(prev => ({ ...prev, [name]: checked }));
    } else {
      setFormData(prev => ({ ...prev, [name]: value }));
    }
  };

  const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0] || null;
    
    setFormData(prev => ({ ...prev, resume: file }));
    
    if (file) {
      // Validate file type
      const allowedTypes = ["application/pdf", "application/msword", "application/vnd.openxmlformats-officedocument.wordprocessingml.document"];
      if (!allowedTypes.includes(file.type)) {
        setMessage({ type: "error", text: "Please upload a PDF, DOC, or DOCX file" });
        return;
      }
      
      // Validate file size (5MB)
      if (file.size > 5 * 1024 * 1024) {
        setMessage({ type: "error", text: "Resume file size must be less than 5MB" });
        return;
      }
      
      setMessage({ type: null, text: "" });
    }
  };

  const validateForm = (): boolean => {
    // Check required fields
    if (!formData.first_name.trim()) {
      setMessage({ type: "error", text: "First name is required" });
      return false;
    }
    
    if (!formData.last_name.trim()) {
      setMessage({ type: "error", text: "Last name is required" });
      return false;
    }
    
    if (!formData.email.trim()) {
      setMessage({ type: "error", text: "Email is required" });
      return false;
    }
    
    // Basic email validation
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailRegex.test(formData.email)) {
      setMessage({ type: "error", text: "Please enter a valid email address" });
      return false;
    }
    
    if (!formData.resume) {
      setMessage({ type: "error", text: "Resume is required" });
      return false;
    }
    
    if (!formData.consent) {
      setMessage({ type: "error", text: "You must consent to data processing to apply" });
      return false;
    }
    
    return true;
  };

  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    
    if (!validateForm()) {
      return;
    }
    
    setIsSubmitting(true);
    setMessage({ type: null, text: "" });
    
    try {
      // Prepare application data exactly as backend expects
      const applicationData = {
        // Required fields
        job: job.id,
        first_name: formData.first_name.trim(),
        last_name: formData.last_name.trim(),
        email: formData.email.trim(),
        resume: formData.resume!,
        consent: formData.consent,
        
        // Optional fields - only include if not empty
        ...(formData.phone.trim() && { phone: formData.phone.trim() }),
        ...(formData.current_position.trim() && { current_position: formData.current_position.trim() }),
        ...(formData.current_company.trim() && { current_company: formData.current_company.trim() }),
        ...(formData.years_of_experience.trim() && { years_of_experience: formData.years_of_experience.trim() }),
        ...(formData.cover_letter.trim() && { cover_letter: formData.cover_letter.trim() }),
        ...(formData.portfolio_url.trim() && { portfolio_url: formData.portfolio_url.trim() }),
        ...(formData.linkedin_url.trim() && { linkedin_url: formData.linkedin_url.trim() }),
        ...(formData.github_url.trim() && { github_url: formData.github_url.trim() }),
        ...(formData.website_url.trim() && { website_url: formData.website_url.trim() }),
        ...(formData.available_from && { available_from: formData.available_from }),
        ...(formData.notice_period.trim() && { notice_period: formData.notice_period.trim() }),
        ...(formData.expected_salary && { expected_salary: parseFloat(formData.expected_salary) }),
        ...(formData.salary_currency && { salary_currency: formData.salary_currency }),
      };
      
      const result = await careerService.submitApplication(applicationData);
      
      setMessage({
        type: "success",
        text: "Application submitted successfully! We'll be in touch soon.",
      });
      
      // Reset form
      setFormData({
        first_name: "",
        last_name: "",
        email: "",
        resume: null,
        consent: false,
        phone: "",
        current_position: "",
        current_company: "",
        years_of_experience: "",
        cover_letter: "",
        portfolio_url: "",
        linkedin_url: "",
        github_url: "",
        website_url: "",
        available_from: "",
        notice_period: "",
        expected_salary: "",
        salary_currency: "USD",
      });
      
      // Reset file input
      const fileInput = document.getElementById('resume') as HTMLInputElement;
      if (fileInput) fileInput.value = '';
      
    } catch (error) {
      setMessage({
        type: "error",
        text: error instanceof Error ? error.message : "Failed to submit application. Please try again.",
      });
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <div className="job-application-modal">
      <div className="modal-overlay" onClick={onClose} />
      <div className="modal-content">
        {/* Header */}
        <div className="form-header">
          {onClose && (
            <button className="close-button" onClick={onClose} type="button">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M18 6L6 18M6 6l12 12" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            </button>
          )}
          
          <div className="header-content">
            <div className="header-icon">
              <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M16 6V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2M8 6h8M6 6h12l-1 14H7L6 6z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            </div>
            <h2 className="form-title">Apply for {job.title}</h2>
            <p className="form-subtitle">
              Join our team • {job.location} • {job.employment_type.replace('-', ' ')}
            </p>
          </div>
        </div>

        {/* Message */}
        {message.type && (
          <div className={`alert alert-${message.type}`}>
            <div className="alert-icon">
              {message.type === "success" ? (
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M20 6L9 17l-5-5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
              ) : (
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="2"/>
                  <line x1="15" y1="9" x2="9" y2="15" stroke="currentColor" strokeWidth="2"/>
                  <line x1="9" y1="9" x2="15" y2="15" stroke="currentColor" strokeWidth="2"/>
                </svg>
              )}
            </div>
            <span>{message.text}</span>
          </div>
        )}

        {/* Form */}
        <form onSubmit={handleSubmit} className="application-form">
          <div className="form-scrollable">
            {/* Required Fields Section */}
            <div className="form-section">
              <div className="section-header">
                <h3 className="section-title">Personal Information</h3>
                <span className="section-subtitle">Required fields are marked with *</span>
              </div>
              
              <div className="form-grid">
                <div className="form-group">
                  <label className="form-label required">First Name</label>
                  <input
                    type="text"
                    name="first_name"
                    value={formData.first_name}
                    onChange={handleInputChange}
                    className="form-input"
                    placeholder="Enter your first name"
                    required
                  />
                </div>
                
                <div className="form-group">
                  <label className="form-label required">Last Name</label>
                  <input
                    type="text"
                    name="last_name"
                    value={formData.last_name}
                    onChange={handleInputChange}
                    className="form-input"
                    placeholder="Enter your last name"
                    required
                  />
                </div>
                
                <div className="form-group form-group-full">
                  <label className="form-label required">Email Address</label>
                  <input
                    type="email"
                    name="email"
                    value={formData.email}
                    onChange={handleInputChange}
                    className="form-input"
                    placeholder="Enter your email address"
                    required
                  />
                </div>
                
                <div className="form-group form-group-full">
                  <label className="form-label required">Resume</label>
                  <div className="file-input-wrapper">
                    <input
                      type="file"
                      id="resume"
                      name="resume"
                      onChange={handleFileChange}
                      accept=".pdf,.doc,.docx"
                      className="file-input"
                      required
                    />
                    <label 
                      htmlFor="resume" 
                      className="file-input-display"
                    >
                      <div className="file-info">
                        <div className="file-input-icon">
                          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                            <polyline points="14,2 14,8 20,8" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                          </svg>
                        </div>
                        <span className="file-input-text">
                          {formData.resume ? formData.resume.name : "Choose file (PDF, DOC, DOCX - Max 5MB)"}
                        </span>
                      </div>
                      <div className="upload-button">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                        </svg>
                        Upload
                      </div>
                    </label>
                  </div>
                  {formData.resume && (
                    <div className="file-selected">
                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M20 6L9 17l-5-5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                      </svg>
                      <span>File selected: {formData.resume.name}</span>
                    </div>
                  )}
                </div>
                
                <div className="form-group form-group-full">
                  <div className="checkbox-wrapper">
                    <input
                      type="checkbox"
                      id="consent"
                      name="consent"
                      checked={formData.consent}
                      onChange={handleInputChange}
                      className="checkbox-input"
                      required
                    />
                    <label htmlFor="consent" className="checkbox-label">
                      <div className="checkbox-box">
                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M20 6L9 17l-5-5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                        </svg>
                      </div>
                      <span>I consent to data processing for recruitment purposes *</span>
                    </label>
                  </div>
                </div>
              </div>
            </div>

            {/* Professional Information */}
            <div className="form-section">
              <div className="section-header">
                <h3 className="section-title">Professional Background</h3>
                <span className="section-subtitle">All fields are required</span>
              </div>
              
              <div className="form-grid">
                <div className="form-group">
                  <label className="form-label required">Phone Number</label>
                  <input
                    type="tel"
                    name="phone"
                    value={formData.phone}
                    onChange={handleInputChange}
                    className="form-input"
                    placeholder="+1 (555) 000-0000"
                    required
                  />
                </div>
                
                <div className="form-group">
                  <label className="form-label required">Years of Experience</label>
                  <input
                    type="text"
                    name="years_of_experience"
                    value={formData.years_of_experience}
                    onChange={handleInputChange}
                    className="form-input"
                    placeholder="e.g., 3-5 years"
                    required
                  />
                </div>
                
                <div className="form-group">
                  <label className="form-label required">Current Position</label>
                  <input
                    type="text"
                    name="current_position"
                    value={formData.current_position}
                    onChange={handleInputChange}
                    className="form-input"
                    placeholder="Your current job title"
                    required
                  />
                </div>
                
                <div className="form-group">
                  <label className="form-label required">Current Company</label>
                  <input
                    type="text"
                    name="current_company"
                    value={formData.current_company}
                    onChange={handleInputChange}
                    className="form-input"
                    placeholder="Your current employer"
                    required
                  />
                </div>
                
                <div className="form-group form-group-full">
                  <label className="form-label required">Cover Letter / Message</label>
                  <textarea
                    name="cover_letter"
                    value={formData.cover_letter}
                    onChange={handleInputChange}
                    className="form-textarea"
                    rows={4}
                    placeholder="Tell us why you're interested in this position and what you can bring to our team..."
                    required
                  />
                </div>
              </div>
            </div>

            {/* Links & Portfolio */}
            <div className="form-section">
              <div className="section-header">
                <h3 className="section-title">Portfolio & Links</h3>
                <span className="section-subtitle">All fields are required</span>
              </div>
              
              <div className="form-grid">
                <div className="form-group">
                  <label className="form-label required">Portfolio URL</label>
                  <input
                    type="url"
                    name="portfolio_url"
                    value={formData.portfolio_url}
                    onChange={handleInputChange}
                    className="form-input"
                    placeholder="https://yourportfolio.com"
                    required
                  />
                </div>
                
                <div className="form-group">
                  <label className="form-label required">LinkedIn Profile</label>
                  <input
                    type="url"
                    name="linkedin_url"
                    value={formData.linkedin_url}
                    onChange={handleInputChange}
                    className="form-input"
                    placeholder="https://linkedin.com/in/yourname"
                    required
                  />
                </div>
                
                <div className="form-group">
                  <label className="form-label required">GitHub Profile</label>
                  <input
                    type="url"
                    name="github_url"
                    value={formData.github_url}
                    onChange={handleInputChange}
                    className="form-input"
                    placeholder="https://github.com/yourname"
                    required
                  />
                </div>
                
                <div className="form-group">
                  <label className="form-label required">Personal Website</label>
                  <input
                    type="url"
                    name="website_url"
                    value={formData.website_url}
                    onChange={handleInputChange}
                    className="form-input"
                    placeholder="https://yourwebsite.com"
                    required
                  />
                </div>
              </div>
            </div>

            {/* Availability & Salary */}
            <div className="form-section">
              <div className="section-header">
                <h3 className="section-title">Availability & Expectations</h3>
                <span className="section-subtitle">All fields are required</span>
              </div>
              
              <div className="form-grid">
                <div className="form-group">
                  <label className="form-label required">Available From</label>
                  <input
                    type="date"
                    name="available_from"
                    value={formData.available_from}
                    onChange={handleInputChange}
                    className="form-input"
                    required
                  />
                </div>
                
                <div className="form-group">
                  <label className="form-label required">Notice Period</label>
                  <input
                    type="text"
                    name="notice_period"
                    value={formData.notice_period}
                    onChange={handleInputChange}
                    className="form-input"
                    placeholder="e.g., 2 weeks, 1 month, Immediate"
                    required
                  />
                </div>
                
                <div className="form-group">
                  <label className="form-label required">Expected Salary</label>
                  <input
                    type="number"
                    name="expected_salary"
                    value={formData.expected_salary}
                    onChange={handleInputChange}
                    className="form-input"
                    placeholder="50000"
                    required
                  />
                </div>
                
                <div className="form-group">
                  <label className="form-label required">Currency</label>
                  <select
                    name="salary_currency"
                    value={formData.salary_currency}
                    onChange={handleInputChange}
                    className="form-select"
                    required
                  >
                    <option value="USD">USD ($)</option>
                    <option value="EUR">EUR (€)</option>
                    <option value="GBP">GBP (£)</option>
                    <option value="INR">INR (₹)</option>
                    <option value="AUD">AUD (A$)</option>
                    <option value="CAD">CAD (C$)</option>
                  </select>
                </div>
              </div>
            </div>
          </div>

          {/* Form Footer */}
          <div className="form-footer">
            <div className="form-actions">
              {onClose && (
                <button
                  type="button"
                  onClick={onClose}
                  disabled={isSubmitting}
                  className="btn btn-secondary"
                >
                  Cancel
                </button>
              )}
              <button
                type="submit"
                disabled={isSubmitting}
                className="btn btn-primary"
              >
                {isSubmitting ? (
                  <>
                    <div className="loading-spinner" />
                    <span>Submitting...</span>
                  </>
                ) : (
                  <>
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                    </svg>
                    <span>Submit Application</span>
                  </>
                )}
              </button>
            </div>
            <p className="form-footer-text">
              By submitting this application, you agree to our terms and privacy policy.
            </p>
          </div>
        </form>
      </div>

      <style jsx>{`
        .job-application-modal {
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          z-index: 1000;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 20px;
          backdrop-filter: blur(8px);
        }

        .modal-overlay {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: rgba(0, 0, 0, 0.5);
        }

        .modal-content {
          position: relative;
          width: 100%;
          max-width: 800px;
          max-height: 90vh;
          background: white;
          border-radius: 16px;
          box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
          display: flex;
          flex-direction: column;
          overflow: hidden;
        }

        .form-header {
          position: relative;
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          color: white;
          padding: 32px;
          text-align: center;
        }

        .close-button {
          position: absolute;
          top: 16px;
          right: 16px;
          background: rgba(255, 255, 255, 0.2);
          border: none;
          color: white;
          width: 40px;
          height: 40px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          transition: all 0.2s ease;
        }

        .close-button:hover {
          background: rgba(255, 255, 255, 0.3);
          transform: scale(1.1);
        }

        .header-icon {
          width: 64px;
          height: 64px;
          background: rgba(255, 255, 255, 0.2);
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 0 auto 16px;
          backdrop-filter: blur(10px);
        }

        .form-title {
          font-size: 28px;
          font-weight: 700;
          margin: 0 0 8px;
          line-height: 1.2;
        }

        .form-subtitle {
          font-size: 16px;
          opacity: 0.9;
          margin: 0;
          font-weight: 400;
        }

        .alert {
          margin: 24px 24px 0;
          padding: 16px 20px;
          border-radius: 12px;
          display: flex;
          align-items: center;
          gap: 12px;
          font-weight: 500;
          border: 2px solid;
        }

        .alert-success {
          background: #d4f8db;
          color: #0f5132;
          border-color: #22c55e;
        }

        .alert-error {
          background: #fce8e8;
          color: #721c24;
          border-color: #ef4444;
        }

        .alert-icon {
          flex-shrink: 0;
        }

        .application-form {
          display: flex;
          flex-direction: column;
          flex: 1;
          min-height: 0;
        }

        .form-scrollable {
          flex: 1;
          overflow-y: auto;
          padding: 32px;
          padding-bottom: 0;
        }

        .form-section {
          margin-bottom: 40px;
        }

        .section-header {
          margin-bottom: 24px;
        }

        .section-title {
          font-size: 20px;
          font-weight: 600;
          color: #1f2937;
          margin: 0 0 4px;
        }

        .section-subtitle {
          font-size: 14px;
          color: #6b7280;
          margin: 0;
        }

        .form-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
          gap: 20px;
        }

        .form-group {
          display: flex;
          flex-direction: column;
        }

        .form-group-full {
          grid-column: 1 / -1;
        }

        .form-label {
          font-size: 14px;
          font-weight: 600;
          color: #374151;
          margin-bottom: 8px;
          display: flex;
          align-items: center;
          gap: 4px;
        }

        .form-label.required::after {
          content: '*';
          color: #ef4444;
          font-weight: 700;
        }

        .form-input,
        .form-textarea,
        .form-select {
          width: 100%;
          padding: 12px 16px;
          border: 2px solid #e5e7eb;
          border-radius: 8px;
          font-size: 14px;
          font-weight: 400;
          color: #1f2937;
          background: white;
          transition: all 0.2s ease;
        }

        .form-input:focus,
        .form-textarea:focus,
        .form-select:focus {
          outline: none;
          border-color: #667eea;
          box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }

        .form-input::placeholder,
        .form-textarea::placeholder {
          color: #9ca3af;
        }

        .form-textarea {
          resize: vertical;
          min-height: 100px;
        }

        .file-input-wrapper {
          position: relative;
        }

        .file-input {
          position: absolute;
          left: -9999px;
          width: 1px;
          height: 1px;
          opacity: 0;
        }

        .file-input-display {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 12px;
          padding: 12px 16px;
          border: 2px dashed #d1d5db;
          border-radius: 8px;
          background: #f9fafb;
          cursor: pointer;
          transition: all 0.2s ease;
          width: 100%;
        }

        .file-input-display:hover {
          border-color: #667eea;
          background: #f3f4f6;
        }

        .file-input-display:hover .upload-button {
          background: #667eea;
          color: white;
        }

        .upload-button {
          display: flex;
          align-items: center;
          gap: 6px;
          padding: 6px 12px;
          background: #e5e7eb;
          color: #374151;
          border-radius: 6px;
          font-size: 12px;
          font-weight: 600;
          transition: all 0.2s ease;
          flex-shrink: 0;
        }

        .file-info {
          display: flex;
          align-items: center;
          gap: 12px;
          flex: 1;
          min-width: 0;
        }

        .file-input-icon {
          color: #6b7280;
          flex-shrink: 0;
        }

        .file-input-text {
          font-size: 14px;
          color: #6b7280;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          font-weight: 500;
        }

        .file-selected {
          display: flex;
          align-items: center;
          gap: 8px;
          margin-top: 8px;
          padding: 8px 12px;
          background: #ecfdf5;
          color: #059669;
          border-radius: 6px;
          font-size: 13px;
          font-weight: 500;
        }

        .checkbox-wrapper {
          display: flex;
          align-items: flex-start;
          gap: 12px;
        }

        .checkbox-input {
          display: none;
        }

        .checkbox-label {
          display: flex;
          align-items: flex-start;
          gap: 12px;
          cursor: pointer;
          font-size: 14px;
          color: #374151;
          line-height: 1.5;
        }

        .checkbox-box {
          width: 20px;
          height: 20px;
          border: 2px solid #d1d5db;
          border-radius: 4px;
          display: flex;
          align-items: center;
          justify-content: center;
          background: white;
          transition: all 0.2s ease;
          flex-shrink: 0;
          margin-top: 2px;
        }

        .checkbox-box svg {
          opacity: 0;
          transform: scale(0.8);
          transition: all 0.2s ease;
        }

        .checkbox-input:checked + .checkbox-label .checkbox-box {
          background: #667eea;
          border-color: #667eea;
        }

        .checkbox-input:checked + .checkbox-label .checkbox-box svg {
          opacity: 1;
          transform: scale(1);
          color: white;
        }

        .form-footer {
          padding: 24px 32px;
          border-top: 1px solid #e5e7eb;
          background: #f9fafb;
        }

        .form-actions {
          display: flex;
          gap: 12px;
          justify-content: flex-end;
          margin-bottom: 16px;
        }

        .btn {
          display: flex;
          align-items: center;
          gap: 8px;
          padding: 12px 24px;
          border-radius: 8px;
          font-size: 14px;
          font-weight: 600;
          cursor: pointer;
          transition: all 0.2s ease;
          border: 2px solid;
          min-width: 140px;
          justify-content: center;
        }

        .btn:disabled {
          cursor: not-allowed;
          opacity: 0.6;
        }

        .btn-primary {
          background: #667eea;
          color: white;
          border-color: #667eea;
        }

        .btn-primary:hover:not(:disabled) {
          background: #5a6fd8;
          border-color: #5a6fd8;
          transform: translateY(-1px);
          box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
        }

        .btn-secondary {
          background: white;
          color: #6b7280;
          border-color: #d1d5db;
        }

        .btn-secondary:hover:not(:disabled) {
          background: #f3f4f6;
          color: #374151;
        }

        .loading-spinner {
          width: 16px;
          height: 16px;
          border: 2px solid rgba(255, 255, 255, 0.3);
          border-top: 2px solid white;
          border-radius: 50%;
          animation: spin 1s linear infinite;
        }

        .form-footer-text {
          font-size: 12px;
          color: #6b7280;
          text-align: center;
          margin: 0;
          line-height: 1.4;
        }

        @keyframes spin {
          0% { transform: rotate(0deg); }
          100% { transform: rotate(360deg); }
        }

        /* Responsive Design */
        @media (max-width: 768px) {
          .job-application-modal {
            padding: 0;
          }

          .modal-content {
            max-width: 100%;
            max-height: 100vh;
            border-radius: 0;
          }

          .form-header {
            padding: 24px 20px;
          }

          .form-title {
            font-size: 24px;
          }

          .form-scrollable {
            padding: 24px 20px 0;
          }

          .form-footer {
            padding: 20px;
          }

          .form-grid {
            grid-template-columns: 1fr;
          }

          .form-actions {
            flex-direction: column-reverse;
          }

          .btn {
            width: 100%;
          }
        }

        /* Smooth scrolling */
        .form-scrollable {
          scroll-behavior: smooth;
        }

        .form-scrollable::-webkit-scrollbar {
          width: 6px;
        }

        .form-scrollable::-webkit-scrollbar-track {
          background: #f1f5f9;
          border-radius: 3px;
        }

        .form-scrollable::-webkit-scrollbar-thumb {
          background: #cbd5e1;
          border-radius: 3px;
        }

        .form-scrollable::-webkit-scrollbar-thumb:hover {
          background: #94a3b8;
        }
      `}</style>
    </div>
  );
};

export default JobApplicationForm;