oms-website-nextjs/components/VacancyApplicationForm.tsx

// src/components/VacancyApplicationForm.tsx (Example structure and styling)
"use client"; // This likely needs to be a client component for form handling

import React, { useState, useCallback, ChangeEvent, DragEvent } from "react";
import { FaUpload, FaFileAlt, FaTimes } from "react-icons/fa"; // Import icons

interface VacancyApplicationFormProps {
  vacancyId: string;
  vacancyTitle: string;
  // onFormClose?: () => void; // Optional: If you add a close button
}

export default function VacancyApplicationForm({
  vacancyId,
  vacancyTitle,
}: VacancyApplicationFormProps) {
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    phone: "",
    linkedin: "",
    coverLetter: "",
    // Add other fields as needed
  });
  const [resumeFile, setResumeFile] = useState<File | null>(null);
  const [isDragging, setIsDragging] = useState(false);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [submitStatus, setSubmitStatus] = useState<
    "idle" | "success" | "error"
  >("idle");

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

  // --- File Input Handling ---
  const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
    if (e.target.files && e.target.files.length > 0) {
      setResumeFile(e.target.files[0]);
      e.target.value = ""; // Reset input value for potential re-upload
    }
  };

  const handleDragEnter = useCallback((e: DragEvent<HTMLDivElement>) => {
    e.preventDefault();
    e.stopPropagation();
    setIsDragging(true);
  }, []);

  const handleDragLeave = useCallback((e: DragEvent<HTMLDivElement>) => {
    e.preventDefault();
    e.stopPropagation();
    setIsDragging(false);
  }, []);

  const handleDragOver = useCallback(
    (e: DragEvent<HTMLDivElement>) => {
      e.preventDefault(); // Necessary to allow drop
      e.stopPropagation();
      if (!isDragging) setIsDragging(true); // Ensure state is true while over
    },
    [isDragging]
  );

  const handleDrop = useCallback((e: DragEvent<HTMLDivElement>) => {
    e.preventDefault();
    e.stopPropagation();
    setIsDragging(false);
    if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
      setResumeFile(e.dataTransfer.files[0]);
      e.dataTransfer.clearData();
    }
  }, []);

  const removeFile = () => {
    setResumeFile(null);
  };
  // --- End File Input Handling ---

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setIsSubmitting(true);
    setSubmitStatus("idle");

    const data = new FormData();
    data.append("vacancyId", vacancyId);
    data.append("vacancyTitle", vacancyTitle);
    data.append("name", formData.name);
    data.append("email", formData.email);
    data.append("phone", formData.phone);
    data.append("linkedin", formData.linkedin);
    data.append("coverLetter", formData.coverLetter);
    if (resumeFile) {
      data.append("resume", resumeFile, resumeFile.name);
    }

    try {
      // Replace with your actual API endpoint for form submission
      const response = await fetch("/api/apply", {
        method: "POST",
        body: data, // FormData handles multipart/form-data automatically
      });

      if (!response.ok) {
        throw new Error("Submission failed");
      }

      setSubmitStatus("success");
      // Optionally reset form:
      // setFormData({ name: '', email: '', ... });
      // setResumeFile(null);
      // Optionally close form: onFormClose?.();
    } catch (error) {
      console.error("Application submission error:", error);
      setSubmitStatus("error");
    } finally {
      setIsSubmitting(false);
    }
  };

  // --- Base Input Styling ---
  const inputBaseStyle =
    "block w-full px-4 py-2 mt-1 text-gray-700 bg-white border border-gray-300 rounded-md focus:border-gold-500 focus:ring focus:ring-gold-500 focus:ring-opacity-50 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 dark:focus:border-gold-500 font-poppins";

  return (
    <form onSubmit={handleSubmit} className="space-y-6 font-poppins">
      {/* Example Fields */}
      <div>
        <label htmlFor="name" className="text-gray-700 dark:text-gray-200">
          Full Name *
        </label>
        <input
          id="name"
          name="name"
          type="text"
          required
          className={inputBaseStyle}
          value={formData.name}
          onChange={handleInputChange}
        />
      </div>
      <div>
        <label htmlFor="email" className="text-gray-700 dark:text-gray-200">
          Email Address *
        </label>
        <input
          id="email"
          name="email"
          type="email"
          required
          className={inputBaseStyle}
          value={formData.email}
          onChange={handleInputChange}
        />
      </div>
      <div>
        <label htmlFor="phone" className="text-gray-700 dark:text-gray-200">
          Phone Number
        </label>
        <input
          id="phone"
          name="phone"
          type="tel"
          className={inputBaseStyle}
          value={formData.phone}
          onChange={handleInputChange}
        />
      </div>
      <div>
        <label htmlFor="linkedin" className="text-gray-700 dark:text-gray-200">
          LinkedIn Profile URL
        </label>
        <input
          id="linkedin"
          name="linkedin"
          type="url"
          className={inputBaseStyle}
          value={formData.linkedin}
          onChange={handleInputChange}
          placeholder="https://linkedin.com/in/yourprofile"
        />
      </div>

      {/* --- Styled File Upload Area --- */}
      <div>
        <label className="text-gray-700 dark:text-gray-200 block mb-2">
          Resume/CV *
        </label>
        <div
          className={`relative flex flex-col items-center justify-center w-full p-6 transition-colors duration-300 ease-in-out border-2 border-dashed rounded-lg cursor-pointer hover:border-gold-500/80 ${
            isDragging
              ? "border-gold-500 bg-gold-50"
              : "border-gray-300 hover:bg-gray-50"
          }`}
          onDragEnter={handleDragEnter}
          onDragLeave={handleDragLeave}
          onDragOver={handleDragOver}
          onDrop={handleDrop}
          onClick={() => document.getElementById("resume-upload")?.click()} // Trigger hidden input
        >
          {/* Hidden Actual Input */}
          <input
            id="resume-upload"
            name="resume"
            type="file"
            className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
            onChange={handleFileChange}
            accept=".pdf,.doc,.docx,.txt" // Specify accepted file types
            aria-hidden="true" // Hide from accessibility tree as visual element handles interaction
          />

          {/* Visual Cue */}
          <FaUpload
            className={`w-8 h-8 mb-3 ${
              isDragging ? "text-gold-600" : "text-gray-400"
            }`}
            style={{ color: isDragging ? "#c8a93d" : undefined }}
          />
          <p
            className={`text-sm font-semibold text-center ${
              isDragging ? "text-gold-700" : "text-gray-600"
            }`}
          >
            {isDragging ? "Drop file here" : "Drag & drop your file here"}
          </p>
          <p className="text-xs text-gray-500 text-center">
            or click to browse
          </p>
          <p className="mt-2 text-xs text-gray-500">(PDF, DOC, DOCX, TXT)</p>
        </div>

        {/* Display Selected File */}
        {resumeFile && (
          <div className="mt-3 flex items-center justify-between px-3 py-2 text-sm text-gray-700 bg-gray-100 border border-gray-200 rounded-md">
            <div className="flex items-center gap-2">
              <FaFileAlt className="w-4 h-4 text-gray-500" />
              <span className="font-medium truncate max-w-[200px] sm:max-w-xs">
                {resumeFile.name}
              </span>
              <span className="text-xs text-gray-500">
                ({(resumeFile.size / 1024).toFixed(1)} KB)
              </span>
            </div>
            <button
              type="button"
              onClick={removeFile}
              className="text-red-500 hover:text-red-700 focus:outline-none"
              aria-label="Remove file"
            >
              <FaTimes className="w-4 h-4" />
            </button>
          </div>
        )}
      </div>
      {/* --- End File Upload Area --- */}

      <div>
        <label
          htmlFor="coverLetter"
          className="text-gray-700 dark:text-gray-200"
        >
          Cover Letter (Optional)
        </label>
        <textarea
          id="coverLetter"
          name="coverLetter"
          rows={4}
          className={`${inputBaseStyle} resize-vertical`}
          value={formData.coverLetter}
          onChange={handleInputChange}
        ></textarea>
      </div>

      {/* Submit Button & Status */}
      <div className="flex flex-col items-center space-y-3 pt-4">
        <button
          type="submit"
          disabled={
            isSubmitting || !formData.name || !formData.email || !resumeFile
          } // Basic validation example
          className="w-full md:w-auto px-8 py-3 font-bold text-white bg-gray-800 rounded-md hover:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-300"
        >
          {isSubmitting ? "Submitting..." : "Submit Application"}
        </button>

        {submitStatus === "success" && (
          <p className="text-sm text-green-600">
            Application submitted successfully!
          </p>
        )}
        {submitStatus === "error" && (
          <p className="text-sm text-red-600">
            Submission failed. Please try again.
          </p>
        )}
      </div>
    </form>
  );
}