'use client';

import { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
import { api } from '@/lib/api';
import PhoneInput from '@/components/PhoneInput';
import { useAuth } from '@/components/auth-context';
import { showConfirmDelete, showError, showSuccess } from '@/lib/confirm';
import SearchableSelect from '@/components/SearchableSelect';
import LocationAsyncSelect from '@/components/LocationAsyncSelect';
import BackToDashboard from '@/components/BackToDashboard';
import { ResumePreviewModal } from '@/components/ResumePreviewModal';

const YEAR_OPTIONS = Array.from({ length: 40 }, (_, i) => {
  const year = new Date().getFullYear() - i;
  return { value: String(year), label: String(year) };
});

const SKILL_OPTIONS = [
  'Python', 'Java', 'JavaScript', 'TypeScript', 'React', 'Next.js', 'Node.js',
  'Django', 'HTML', 'CSS', 'Tailwind CSS', 'SQL', 'PostgreSQL', 'MongoDB',
  'AWS', 'Docker', 'Kubernetes', 'Git', 'REST API', 'GraphQL', 'DevOps',
  'Communication', 'Leadership', 'Project Management',
].map((s) => ({ value: s, label: s }));

const initialFormState = {
  user_id: '',
  first_name: '',
  last_name: '',
  email: '',
  phone_number: '',
  alternate_phone_number: '',
  date_of_birth: '',
  gender: '',
  city: '',
  state: '',
  country: '',
  current_address: '',
  permanent_address: '',
  fresher: true,
  total_experience: '',
  employment_type: '',
  current_company: '',
  previous_company: '',
  current_role: '',
  current_ctc: '',
  expected_ctc: '',
  notice_period: '',
  notice_period_id: '',
  current_location: '',
  preferred_location: '',
  highest_qualification: '',
  university: '',
  college: '',
  passing_year: '',
  percentage_cgpa: '',
  skills: '',
  languages: '',
  linkedin: '',
  github: '',
  portfolio: '',
  personal_website: '',
  availability: 'Immediate',
  status: 'Draft',
  professional_summary: '',
  resume: '',
};

export default function AddCandidatePage() {
  const router = useRouter();
  const { user } = useAuth();

  const [formData, _setFormData] = useState(initialFormState);
  const [selectedJobIds, setSelectedJobIds] = useState<number[]>([]);
  const [jobOptions, setJobOptions] = useState<{ value: number; label: string; title: string; company: string; status: string }[]>([]);
  const [jobPickerSearch, setJobPickerSearch] = useState('');
  const [editedFields, setEditedFields] = useState<Set<string>>(new Set());
  const [isDragging, setIsDragging] = useState(false);
  const [isParsing, setIsParsing] = useState(false);
  const [parsingProgress, setParsingProgress] = useState(0);
  const [uploadedFileName, setUploadedFileName] = useState('');
  const [resumeFileObj, setResumeFileObj] = useState<File | null>(null);

  const [selectedCountryId, setSelectedCountryId] = useState<number | null>(null);
  const [selectedStateId, setSelectedStateId] = useState<number | null>(null);
  const [designationOptions, setDesignationOptions] = useState<{ value: string; label: string }[]>([]);
  const [noticePeriodOptions, setNoticePeriodOptions] = useState<{ id: number; value: number; label: string }[]>([]);

  const [submitting, setSubmitting] = useState(false);
  const [formErrors, setFormErrors] = useState<any>({});
  const [formErrorList, setFormErrorList] = useState<string[]>([]);
  const [activeFormTab, setActiveFormTab] = useState<'personal' | 'academic' | 'experience' | 'projects' | 'references'>('personal');
  const [resumeView, setResumeView] = useState<{ url: string; name: string } | null>(null);

  const [experiences, setExperiences] = useState<any[]>([]);
  const [educations, setEducations] = useState<any[]>([]);
  const [projects, setProjects] = useState<any[]>([]);
  const [references, setReferences] = useState<any[]>([]);

  const setFormData = (value: any) => {
    if (typeof value === 'function') {
      _setFormData((prev: any) => {
        const next = value(prev);
        const changed = Object.keys(next).filter((k) => next[k] !== prev[k]);
        if (changed.length > 0) {
          setEditedFields((prevEdited) => {
            const nextEdited = new Set(prevEdited);
            changed.forEach((f) => nextEdited.add(f));
            return nextEdited;
          });
        }
        return next;
      });
    } else {
      _setFormData((prev: any) => {
        const next = { ...prev, ...value };
        const changed = Object.keys(next).filter((k) => next[k] !== prev[k]);
        if (changed.length > 0) {
          setEditedFields((prevEdited) => {
            const nextEdited = new Set(prevEdited);
            changed.forEach((f) => nextEdited.add(f));
            return nextEdited;
          });
        }
        return next;
      });
    }
  };

  useEffect(() => {
    if (!user) return;
    const canAddCandidates = user.role === 'ADMIN' || (user.permissions?.includes('candidates.add_candidate') ?? false);
    if (!canAddCandidates) {
      router.push('/candidates');
      return;
    }

    // Load available job orders for pipeline assignment
    (api.get('/jobs/?page_size=500') as Promise<any>)
      .then((r) => {
        const data = r?.data?.results ?? r?.data ?? [];
        setJobOptions((Array.isArray(data) ? data : [])
          .filter((j: any) => j.status === 'Published')
          .map((j: any) => ({
            value: j.id,
            label: `#${j.id} ${j.title}${j.client_name ? ` · ${j.client_name}` : ''}`,
            title: j.title,
            company: j.client_name || 'Internal',
            status: j.status || '',
          })));
      })
      .catch(() => { });

    // Load master designations
    (api.get('/master-designation?page_size=500') as Promise<any>)
      .then((r) => {
        const data = r?.data?.results ?? r?.data ?? [];
        setDesignationOptions((Array.isArray(data) ? data : []).map((d: any) => {
          const name = typeof d === 'string' ? d : d.name;
          return { value: name, label: name };
        }));
      })
      .catch(() => { });

    // Load notice periods
    (api.get('/public/notice-periods/') as Promise<any>)
      .then((r) => {
        const items = r?.data?.results || r?.results || r?.data || (Array.isArray(r) ? r : []);
        if (items && items.length) setNoticePeriodOptions(items);
      })
      .catch(() => { });
  }, [user, router]);

  const handleDragOver = (e: React.DragEvent) => {
    e.preventDefault();
    setIsDragging(true);
  };

  const handleDragLeave = () => {
    setIsDragging(false);
  };

  const handleDrop = (e: React.DragEvent) => {
    e.preventDefault();
    setIsDragging(false);
    const files = e.dataTransfer.files;
    if (files && files.length > 0) processResumeFile(files[0]);
  };

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const files = e.target.files;
    if (files && files.length > 0) processResumeFile(files[0]);
  };

  const processResumeFile = async (file: File) => {
    const ext = (file.name.split('.').pop() || '').toLowerCase();
    if (ext !== 'pdf' || (file.type && file.type !== 'application/pdf')) {
      showError(`Unsupported file type ".${ext || 'unknown'}". Only PDF resumes are supported.`, 'Invalid file');
      return;
    }
    if (file.size === 0) {
      showError('This file is empty. Please choose a valid resume PDF.', 'Invalid file');
      return;
    }
    if (file.size > 5 * 1024 * 1024) {
      showError(`File is too large (${(file.size / 1024 / 1024).toFixed(1)} MB). Maximum allowed is 5 MB.`, 'File too large');
      return;
    }

    setUploadedFileName(file.name);
    setResumeFileObj(file);
    setIsParsing(true);
    setParsingProgress(10);

    const progressInterval = setInterval(() => {
      setParsingProgress((prev) => {
        if (prev >= 90) {
          clearInterval(progressInterval);
          return 90;
        }
        return prev + 15;
      });
    }, 200);

    try {
      const formDataObj = new FormData();
      formDataObj.append('file', file);
      const res = (await api.upload('/candidates/upload-resume/', formDataObj)) as any;
      clearInterval(progressInterval);
      setParsingProgress(100);

      const result = res.data || res;
      if (result.parsed) {
        const parsed = result.parsed_data || {};
        const cap = (s: string) => (s ? s[0].toUpperCase() + s.slice(1).toLowerCase() : '');
        setFormData((prev: any) => ({
          ...prev,
          resume: result.resume_url || result.file_path || prev.resume,
          first_name: parsed.first_name ? cap(parsed.first_name) : prev.first_name,
          last_name: parsed.last_name ? cap(parsed.last_name) : prev.last_name,
          email: parsed.email || prev.email,
          phone_number: parsed.phone_number || prev.phone_number,
          total_experience: parsed.total_experience !== undefined ? String(parsed.total_experience) : prev.total_experience,
          current_company: parsed.current_company || prev.current_company,
          current_role: parsed.current_role ? cap(parsed.current_role) : prev.current_role,
          highest_qualification: parsed.highest_qualification || prev.highest_qualification,
          skills: Array.isArray(parsed.skills) ? parsed.skills.join(', ') : parsed.skills || prev.skills,
          professional_summary: parsed.professional_summary || prev.professional_summary,
        }));
        showSuccess('Resume uploaded and parsed successfully!', 'Success');
      }
    } catch (err: any) {
      clearInterval(progressInterval);
      showError(err?.message || 'Unable to parse resume. Please fill the form manually.', 'Parse Error');
    } finally {
      setIsParsing(false);
    }
  };

  const handleRemoveResume = async () => {
    const result = await showConfirmDelete('Removing the resume will also reset the whole form. Continue?');
    if (!result.isConfirmed) return;
    setFormData(initialFormState);
    setResumeFileObj(null);
    setExperiences([]);
    setEducations([]);
    setProjects([]);
    setReferences([]);
    setFormErrors({});
    setFormErrorList([]);
    setEditedFields(new Set());
    setUploadedFileName('');
    setParsingProgress(0);
  };

  const handleFirstNameChange = (value: string) => {
    const sanitized = value.replace(/[^a-zA-Z\s'-]/g, '');
    setFormData({ ...formData, first_name: sanitized });
  };

  const handleLastNameChange = (value: string) => {
    const sanitized = value.replace(/[^a-zA-Z\s'-]/g, '');
    setFormData({ ...formData, last_name: sanitized });
  };

  const handlePhoneChange = (value: string) => {
    const sanitized = value.replace(/\D/g, '').slice(0, 10);
    setFormData({ ...formData, phone_number: sanitized });
  };

  const handleAlternatePhoneChange = (value: string) => {
    const sanitized = value.replace(/\D/g, '').slice(0, 10);
    setFormData({ ...formData, alternate_phone_number: sanitized });
  };

  const handleSubmitCandidate = async (e: React.FormEvent) => {
    e.preventDefault();
    setSubmitting(true);
    setFormErrors({});
    setFormErrorList([]);

    try {
      const skillsArray = formData.skills ? formData.skills.split(',').map((s) => s.trim()).filter(Boolean) : [];
      const languagesArray = formData.languages ? formData.languages.split(',').map((l) => l.trim()).filter(Boolean) : [];

      const payload: any = {
        first_name: formData.first_name.trim(),
        last_name: formData.last_name.trim(),
        email: formData.email.trim(),
        phone_number: formData.phone_number.trim(),
        alternate_phone_number: formData.alternate_phone_number.trim(),
        date_of_birth: formData.date_of_birth || null,
        gender: formData.gender || '',
        city: formData.city.trim(),
        state: formData.state.trim(),
        country: formData.country.trim(),
        current_address: formData.current_address.trim(),
        permanent_address: formData.permanent_address.trim(),
        fresher: formData.fresher,
        total_experience: formData.total_experience ? parseFloat(formData.total_experience) : null,
        employment_type: formData.employment_type || '',
        current_company: formData.current_company.trim(),
        previous_company: formData.previous_company.trim(),
        current_role: formData.current_role.trim(),
        current_ctc: formData.current_ctc ? parseFloat(formData.current_ctc) : null,
        expected_ctc: formData.expected_ctc ? parseFloat(formData.expected_ctc) : null,
        notice_period: formData.notice_period || '',
        notice_period_id: formData.notice_period_id ? parseInt(formData.notice_period_id) : null,
        current_location: formData.current_location.trim(),
        preferred_location: formData.preferred_location.trim(),
        highest_qualification: formData.highest_qualification.trim(),
        university: formData.university.trim(),
        college: formData.college.trim(),
        passing_year: formData.passing_year ? parseInt(formData.passing_year) : null,
        percentage_cgpa: formData.percentage_cgpa ? parseFloat(formData.percentage_cgpa) : null,
        skills: skillsArray,
        languages: languagesArray,
        linkedin: formData.linkedin.trim(),
        github: formData.github.trim(),
        portfolio: formData.portfolio.trim(),
        personal_website: formData.personal_website.trim(),
        availability: formData.availability || 'Immediate',
        status: formData.status || 'Draft',
        professional_summary: formData.professional_summary.trim(),
        experiences: experiences.map((exp) => ({
          company_name: exp.company_name.trim(),
          role: exp.role.trim(),
          joining_date: exp.joining_date || null,
          last_working_date: exp.last_working_date || null,
          is_current_company: exp.is_current_company || false,
          current_ctc: exp.current_ctc ? parseFloat(exp.current_ctc) : null,
          expected_ctc: exp.expected_ctc ? parseFloat(exp.expected_ctc) : null,
          notice_period: exp.notice_period || '',
          achievements: exp.achievements || '',
          responsibilities: exp.responsibilities || '',
          reason_for_leaving: exp.reason_for_leaving || '',
        })),
        educations: educations.map((edu) => ({
          degree_name: edu.degree_name.trim(),
          field_of_study: edu.field_of_study.trim(),
          institution_name: edu.institution_name.trim(),
          passing_year: edu.passing_year ? parseInt(edu.passing_year) : null,
          percentage_cgpa: edu.percentage_cgpa ? parseFloat(edu.percentage_cgpa) : null,
        })),
        projects: projects.map((proj) => ({
          project_name: proj.project_name.trim(),
          description: proj.description.trim(),
          technologies_used: proj.technologies_used.trim(),
          duration: proj.duration.trim(),
          role: proj.role.trim(),
        })),
        references: references.map((ref) => ({
          name: ref.name.trim(),
          company: ref.company.trim(),
          designation: ref.designation.trim(),
          email: ref.email.trim(),
          phone: ref.phone.trim(),
          relationship: ref.relationship.trim(),
        })),
        assign_job_ids: selectedJobIds,
        manually_edited_fields: Array.from(editedFields),
      };

      if (formData.user_id) payload.user_id = parseInt(formData.user_id);
      if (formData.resume) payload.resume = formData.resume;

      const res = (await api.post('/candidates/', payload)) as any;
      const candidateId = res?.data?.id || res?.id;

      if (resumeFileObj && candidateId) {
        try {
          const fd = new FormData();
          fd.append('file', resumeFileObj);
          await api.upload(`/candidates/${candidateId}/upload-resume/`, fd);
        } catch { }
      }

      showSuccess('Candidate profile created successfully!');
      router.push('/candidates');
    } catch (err: any) {
      console.error(err);
      const fieldErrors = err?.data || err?.response?.data;
      if (fieldErrors && typeof fieldErrors === 'object') {
        setFormErrors(fieldErrors);
        const flatten = (val: any, prefix = ''): string[] => {
          if (val == null) return [];
          if (typeof val === 'string') return [prefix ? `${prefix}: ${val}` : val];
          if (Array.isArray(val)) return val.flatMap((v, i) => (v && typeof v === 'object') ? flatten(v, prefix ? `${prefix}[${i + 1}]` : `#${i + 1}`) : flatten(v, prefix));
          if (typeof val === 'object') return Object.entries(val).flatMap(([k, v]) => flatten(v, prefix ? `${prefix}.${k}` : k));
          return [prefix ? `${prefix}: ${String(val)}` : String(val)];
        };
        const all = flatten(fieldErrors);
        setFormErrorList(all);
        showError(all.slice(0, 6).join('\n'), 'Please fix the following');
      } else {
        setFormErrorList([err?.message || 'An unexpected error occurred.']);
        showError(err?.message || 'An unexpected error occurred.', 'Error');
      }
    } finally {
      setSubmitting(false);
    }
  };

  const addExperience = () => {
    setExperiences([
      ...experiences,
      {
        company_name: '', role: '', joining_date: '', last_working_date: '',
        is_current_company: false, current_ctc: '', expected_ctc: '',
        notice_period: '', achievements: '', responsibilities: '', reason_for_leaving: '',
      },
    ]);
  };

  const addEducation = () => {
    setEducations([
      ...educations,
      { degree_name: '', field_of_study: '', institution_name: '', passing_year: '', percentage_cgpa: '' },
    ]);
  };

  const addProject = () => {
    setProjects([
      ...projects,
      { project_name: '', description: '', technologies_used: '', duration: '', role: '' },
    ]);
  };

  const addReference = () => {
    setReferences([
      ...references,
      { name: '', company: '', designation: '', email: '', phone: '', relationship: '' },
    ]);
  };

  const renderError = (field: string) => {
    if (formErrors && formErrors[field]) {
      return <p className="text-rose-500 text-[10px] font-bold mt-1">{Array.isArray(formErrors[field]) ? formErrors[field][0] : formErrors[field]}</p>;
    }
    return null;
  };

  if (!user) return null;

  return (
    <main className="flex-1 p-4 sm:p-8 overflow-y-auto w-full max-w-7xl mx-auto space-y-6">
      <BackToDashboard />

      <div className="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-none p-5 shadow-sm space-y-4">
        <div className="flex items-center justify-between border-b border-slate-100 dark:border-slate-800 pb-4">
          <h2 className="text-base font-black text-slate-800 dark:text-white flex items-center gap-2">
            <i className="fa-solid fa-user-plus mr-2 text-indigo-500"></i>Create Candidate Profile
          </h2>
          <div className="flex items-center gap-2">
            <button
              onClick={() => router.push('/candidates')}
              className="bg-[#405189] hover:bg-[#334267] text-white rounded-none px-4 py-2 text-xs font-bold cursor-pointer transition inline-flex items-center gap-1.5"
            >
              <i className="fa-solid fa-list"></i> View Candidates
            </button>
            <button
              onClick={() => router.push('/candidates')}
              className="bg-slate-50 dark:bg-slate-950 hover:bg-slate-100 dark:hover:bg-slate-800 border border-slate-200 dark:border-slate-800 rounded-none px-4 py-2 text-xs font-semibold cursor-pointer transition text-slate-700 dark:text-slate-300"
            >
              Cancel &times;
            </button>
          </div>
        </div>

        {/* Profile completeness meter */}
        {(() => {
          const fd: any = formData;
          const checks: [string, boolean][] = [
            ['Résumé', !!fd.resume],
            ['Name', !!(fd.first_name && fd.last_name)],
            ['Email', !!fd.email],
            ['Phone', !!fd.phone_number],
            ['Location', !!(fd.current_location || fd.city)],
            ['Skills', !!fd.skills],
            ['Education', educations.length > 0 || !!fd.highest_qualification],
            ['Experience', !!fd.fresher || experiences.length > 0 || !!fd.current_role],
            ['Summary', !!fd.professional_summary],
          ];
          const hasFilledAny = !!(
            fd.resume || fd.first_name || fd.last_name || fd.email || fd.phone_number ||
            fd.current_location || fd.city || fd.skills || fd.highest_qualification ||
            fd.professional_summary || educations.length > 0 || experiences.length > 0
          );
          const done = hasFilledAny ? checks.filter(([, v]) => v).length : 0;
          const pct = Math.round((done / checks.length) * 100);
          const barColor = pct >= 80 ? 'bg-emerald-500' : pct >= 50 ? 'bg-amber-500' : 'bg-rose-500';
          const pending = checks.filter(([, v]) => !v).map(([k]) => k);
          return (
            <div className="bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-none p-3">
              <div className="flex items-center justify-between mb-1.5">
                <span className="text-[11px] font-black uppercase tracking-wider text-slate-600 dark:text-slate-300">
                  Profile completeness
                </span>
                <span className={`text-sm font-black ${pct >= 80 ? 'text-emerald-600' : pct >= 50 ? 'text-amber-600' : 'text-rose-600'}`}>{pct}%</span>
              </div>
              <div className="w-full h-2 bg-slate-200 dark:bg-slate-800 rounded-none overflow-hidden">
                <div className={`h-full ${barColor} transition-all duration-500`} style={{ width: `${pct}%` }} />
              </div>
              {pending.length > 0 && (
                <p className="text-[10px] text-slate-400 mt-1.5">
                  Still needed: <span className="font-semibold text-slate-500 dark:text-slate-400">{pending.join(', ')}</span>
                </p>
              )}
            </div>
          );
        })()}

        {/* Resume Upload Card */}
        <div className="bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-none p-3 mb-4 space-y-2">
          <h3 className="text-xs font-black text-slate-850 dark:text-white uppercase tracking-wider flex items-center gap-2">
            <i className="fa-solid fa-file-pdf text-indigo-500 text-sm"></i>
            Upload Resume
          </h3>

          {!formData.resume ? (
            <div
              onDragOver={handleDragOver}
              onDragLeave={handleDragLeave}
              onDrop={handleDrop}
              className={`border-2 border-dashed rounded-none p-3 text-center transition ${isDragging ? 'border-indigo-600 bg-indigo-50/50 dark:bg-indigo-950/20' : 'border-slate-250 hover:border-slate-350 dark:border-slate-800 dark:hover:border-slate-700'}`}
            >
              <div className="flex flex-col items-center justify-center gap-1.5">
                <div className="bg-indigo-50 dark:bg-indigo-950 p-1.5 rounded-full text-indigo-600 dark:text-indigo-400">
                  <i className="fa-solid fa-cloud-arrow-up text-base"></i>
                </div>
                <div>
                  <p className="text-[10px] font-bold text-slate-750 dark:text-slate-200">Drag &amp; Drop Resume</p>
                  <p className="text-[8px] text-slate-400 mt-0.5">or</p>
                </div>
                <label className="bg-[#405189] hover:bg-[#364574] text-white px-2.5 py-1 rounded-none text-[9px] font-bold cursor-pointer transition shadow-md">
                  Browse
                  <input type="file" accept=".pdf" onChange={handleFileChange} className="hidden" />
                </label>
                <div className="text-[8px] text-slate-400 space-y-0"><p>PDF (.pdf) • Max 5 MB</p></div>
              </div>
            </div>
          ) : (
            <div className="bg-white dark:bg-slate-950 border border-slate-200 dark:border-slate-850 rounded-none p-2 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-2">
              <div className="flex items-center gap-2">
                <div className="bg-emerald-50 dark:bg-emerald-950/40 p-1 rounded-none text-emerald-600 dark:text-emerald-455">
                  <i className="fa-solid fa-file-pdf text-sm"></i>
                </div>
                <div>
                  <p className="text-[8px] uppercase font-bold text-slate-400">Resume</p>
                  <p className="text-[10px] font-bold text-slate-800 dark:text-white mt-0.5">{uploadedFileName || 'Resume.pdf'}</p>
                  <p className="text-[8px] text-emerald-600 dark:text-emerald-450 font-bold mt-0.5 flex items-center gap-1">
                    <i className="fa-solid fa-circle-check text-xs"></i> Uploaded
                  </p>
                </div>
              </div>
              <div className="flex flex-wrap items-center gap-1 text-[9px] w-full sm:w-auto justify-end">
                <button
                  type="button"
                  onClick={() => setResumeView({
                    url: (formData as any).resume_url || formData.resume,
                    name: `${formData.first_name || 'Candidate'} ${formData.last_name || ''} — ${uploadedFileName || 'Resume.pdf'}`
                  })}
                  className="bg-slate-50 hover:bg-slate-100 dark:bg-slate-900 dark:hover:bg-slate-800 border border-slate-250 dark:border-slate-800 px-2 py-0.5 rounded-none font-bold cursor-pointer transition text-slate-700 dark:text-slate-300"
                >
                  View
                </button>
                <label className="bg-slate-50 hover:bg-slate-100 dark:bg-slate-900 dark:hover:bg-slate-800 border border-slate-250 dark:border-slate-800 px-2 py-0.5 rounded-none font-bold cursor-pointer transition text-slate-700 dark:text-slate-300">
                  Replace
                  <input type="file" accept=".pdf" onChange={handleFileChange} className="hidden" />
                </label>
                <button
                  type="button"
                  onClick={handleRemoveResume}
                  className="bg-rose-50 hover:bg-rose-100 dark:bg-rose-950/20 dark:hover:bg-rose-950/40 text-rose-600 dark:text-rose-450 border border-rose-200/50 dark:border-rose-900/30 px-2.5 py-1 rounded-none font-bold cursor-pointer transition"
                >
                  Remove
                </button>
              </div>
            </div>
          )}

          {isParsing && (
            <div className="bg-indigo-50/50 dark:bg-indigo-950/20 border border-indigo-100/80 dark:border-indigo-900/40 rounded-none p-4 flex items-center gap-4 animate-pulse">
              <div className="animate-spin rounded-full h-5 w-5 border-2 border-indigo-600 border-t-transparent"></div>
              <div className="flex-1 space-y-1.5">
                <div className="flex items-center justify-between text-xs font-bold text-indigo-650 dark:text-indigo-405">
                  <span>Parsing Resume...</span>
                  <span>{parsingProgress}%</span>
                </div>
                <div className="w-full bg-slate-200 dark:bg-slate-800 rounded-full h-1.5 overflow-hidden">
                  <div className="bg-indigo-600 h-1.5 rounded-full transition-all duration-300" style={{ width: `${parsingProgress}%` }}></div>
                </div>
              </div>
            </div>
          )}
        </div>

        {/* Tab Headers */}
        <div className="flex flex-wrap gap-1.5 border-b border-slate-100 dark:border-slate-800 pb-3">
          {[
            { id: 'personal', label: '1. Personal Info' },
            { id: 'academic', label: '2. Education & Skills' },
            { id: 'experience', label: '3. Work Experience' },
            { id: 'projects', label: '4. Projects' },
            { id: 'references', label: '5. References' },
          ].map((tab) => (
            <button
              key={tab.id}
              type="button"
              onClick={() => setActiveFormTab(tab.id as any)}
              className={`px-3 py-2 rounded-none text-xs font-bold transition cursor-pointer ${activeFormTab === tab.id ? 'bg-indigo-600 text-white shadow-md shadow-indigo-600/15' : 'bg-slate-50 hover:bg-slate-100 dark:bg-slate-950 dark:hover:bg-slate-800 text-slate-600 dark:text-slate-400'}`}
            >
              {tab.label}
            </button>
          ))}
        </div>

        {formErrorList.length > 0 && (
          <div className="rounded-none border border-rose-200 dark:border-rose-900 bg-rose-50 dark:bg-rose-950/30 p-3">
            <div className="flex items-center gap-2 mb-1.5">
              <i className="fa-solid fa-circle-exclamation text-rose-500 text-sm"></i>
              <span className="text-xs font-extrabold text-rose-700 dark:text-rose-300">
                Please fix {formErrorList.length} issue{formErrorList.length > 1 ? 's' : ''} before saving
              </span>
            </div>
            <ul className="max-h-32 overflow-y-auto list-disc pl-8 space-y-0.5 text-[11px] text-rose-600 dark:text-rose-300/90 font-semibold">
              {formErrorList.map((msg, i) => (
                <li key={i}>{msg}</li>
              ))}
            </ul>
          </div>
        )}

        <form onSubmit={handleSubmitCandidate} className="space-y-6 text-xs text-slate-700 dark:text-slate-300">
          <fieldset disabled={isParsing} className="space-y-6">

            {activeFormTab === 'personal' && (
              <div className="space-y-6">
                {(() => {
                  const filtered = jobOptions.filter((j) => j.label.toLowerCase().includes(jobPickerSearch.toLowerCase()));
                  const allChecked = filtered.length > 0 && filtered.every((j) => selectedJobIds.includes(j.value));
                  return (
                    <div className="bg-[#405189]/5 border border-[#405189]/20 rounded-none p-4">
                      <div className="flex items-center justify-between mb-2">
                        <label className="text-[10px] uppercase font-bold text-[#405189]">Assign to Job Order(s) — optional</label>
                        <span className="text-[10px] text-slate-400">{selectedJobIds.length} selected</span>
                      </div>
                      <div className="relative mb-2">
                        <i className="fa-solid fa-magnifying-glass absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 text-[10px]"></i>
                        <input value={jobPickerSearch} onChange={(e) => setJobPickerSearch(e.target.value)} placeholder="Search job orders..."
                          className="w-full bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-none pl-8 pr-3 py-2 text-xs focus:outline-none" />
                      </div>
                      <div className="border border-slate-200 dark:border-slate-800 rounded-none overflow-auto max-h-44 bg-white dark:bg-slate-900">
                        <table className="w-full text-xs">
                          <thead className="bg-slate-50 dark:bg-slate-950/40 text-slate-400 text-left text-[10px] uppercase sticky top-0">
                            <tr>
                              <th className="px-3 py-1.5 w-8">
                                <input type="checkbox" checked={allChecked} className="accent-[#405189]"
                                  onChange={(e) => {
                                    const ids = filtered.map((j) => j.value);
                                    setSelectedJobIds((prev) => e.target.checked ? Array.from(new Set([...prev, ...ids])) : prev.filter((x) => !ids.includes(x)));
                                  }} />
                              </th>
                              <th className="px-3 py-1.5 font-semibold">Ref. #</th>
                              <th className="px-3 py-1.5 font-semibold">Title</th>
                              <th className="px-3 py-1.5 font-semibold">Company</th>
                              <th className="px-3 py-1.5 font-semibold">Status</th>
                            </tr>
                          </thead>
                          <tbody>
                            {filtered.map((j) => {
                              const checked = selectedJobIds.includes(j.value);
                              return (
                                <tr key={j.value} className="border-t border-slate-100 dark:border-slate-800 hover:bg-slate-50 dark:hover:bg-slate-800/40 cursor-pointer"
                                  onClick={() => setSelectedJobIds((prev) => checked ? prev.filter((x) => x !== j.value) : [...prev, j.value])}>
                                  <td className="px-3 py-1.5"><input type="checkbox" checked={checked} readOnly className="accent-[#405189]" /></td>
                                  <td className="px-3 py-1.5 font-extrabold text-[#405189] dark:text-indigo-300">#{j.value}</td>
                                  <td className="px-3 py-1.5 font-bold text-slate-700 dark:text-slate-300">{j.title}</td>
                                  <td className="px-3 py-1.5 text-slate-500 dark:text-slate-400">{j.company}</td>
                                  <td className="px-3 py-1.5">
                                    <span className={`inline-flex px-2 py-0.5 rounded-none text-[10px] font-bold ${j.status === 'Published' ? 'bg-emerald-50 text-emerald-700 dark:bg-emerald-950/40 dark:text-emerald-300' : 'bg-amber-50 text-amber-700 dark:bg-amber-950/40 dark:text-amber-300'}`}>{j.status || '—'}</span>
                                  </td>
                                </tr>
                              );
                            })}
                            {filtered.length === 0 && <tr><td colSpan={5} className="px-3 py-4 text-center text-slate-400">No job orders.</td></tr>}
                          </tbody>
                        </table>
                      </div>
                    </div>
                  );
                })()}

                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                  <div>
                    <label className="block text-[10px] uppercase font-bold text-slate-400 mb-1">First Name *</label>
                    <input type="text" required value={formData.first_name} onChange={(e) => handleFirstNameChange(e.target.value)} placeholder="John"
                      className="w-full bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-none px-3 py-2.5 text-xs focus:outline-none text-slate-800 dark:text-white" />
                    {renderError('first_name')}
                  </div>

                  <div>
                    <label className="block text-[10px] uppercase font-bold text-slate-400 mb-1">Last Name *</label>
                    <input type="text" required value={formData.last_name} onChange={(e) => handleLastNameChange(e.target.value)} placeholder="Doe"
                      className="w-full bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-none px-3 py-2.5 text-xs focus:outline-none text-slate-800 dark:text-white" />
                    {renderError('last_name')}
                  </div>

                  <div>
                    <label className="block text-[10px] uppercase font-bold text-slate-400 mb-1">Phone Number *</label>
                    <PhoneInput required value={formData.phone_number} onChange={(v) => setFormData((prev: any) => ({ ...prev, phone_number: v }))} />
                    {renderError('phone_number')}
                  </div>

                  <div>
                    <label className="block text-[10px] uppercase font-bold text-slate-400 mb-1">Alternate Phone</label>
                    <PhoneInput value={formData.alternate_phone_number} onChange={(v) => setFormData((prev: any) => ({ ...prev, alternate_phone_number: v }))} />
                  </div>

                  <div>
                    <label className="block text-[10px] uppercase font-bold text-slate-400 mb-1">Email Address *</label>
                    <input type="email" required value={formData.email} onChange={(e) => setFormData({ ...formData, email: e.target.value })} placeholder="john.doe@example.com"
                      className="w-full bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-none px-3 py-2.5 text-xs focus:outline-none text-slate-800 dark:text-white" />
                    {renderError('email')}
                  </div>

                  <div>
                    <label className="block text-[10px] uppercase font-bold text-slate-400 mb-1">Date of Birth</label>
                    <input type="date" value={formData.date_of_birth} onChange={(e) => setFormData({ ...formData, date_of_birth: e.target.value })}
                      className="w-full bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-none px-3 py-2.5 text-xs focus:outline-none text-slate-800 dark:text-white" />
                  </div>

                  <div>
                    <label className="block text-[10px] uppercase font-bold text-slate-400 mb-1">Gender</label>
                    <SearchableSelect value={formData.gender} onChange={(val) => setFormData({ ...formData, gender: val })} placeholder="Select gender..."
                      options={[{ value: 'Male', label: 'Male' }, { value: 'Female', label: 'Female' }, { value: 'Other', label: 'Other' }]} />
                  </div>

                  <div>
                    <label className="block text-[10px] uppercase font-bold text-slate-400 mb-1">Country</label>
                    <LocationAsyncSelect locationType="country" value={formData.country || ''} onChange={(val, option) => {
                      const opt = Array.isArray(option) ? option[0] : option;
                      const cid = opt?.id ? Number(opt.id) : null;
                      const cname = opt?.name || (typeof val === 'string' ? val : '');
                      setSelectedCountryId(cid); setSelectedStateId(null);
                      setFormData({ ...formData, country: cname, state: '', city: '' });
                    }} />
                  </div>

                  <div>
                    <label className="block text-[10px] uppercase font-bold text-slate-400 mb-1">State</label>
                    <LocationAsyncSelect locationType="state" countryId={selectedCountryId} value={formData.state || ''} onChange={(val, option) => {
                      const opt = Array.isArray(option) ? option[0] : option;
                      const sid = opt?.id ? Number(opt.id) : null;
                      const sname = opt?.name || (typeof val === 'string' ? val : '');
                      setSelectedStateId(sid); setFormData({ ...formData, state: sname, city: '' });
                    }} />
                  </div>

                  <div>
                    <label className="block text-[10px] uppercase font-bold text-slate-400 mb-1">City</label>
                    <LocationAsyncSelect locationType="city" countryId={selectedCountryId} stateId={selectedStateId} value={formData.city || ''} onChange={(val, option) => {
                      const opt = Array.isArray(option) ? option[0] : option;
                      const cname = opt?.name || (typeof val === 'string' ? val : '');
                      setFormData({ ...formData, city: cname });
                    }} />
                  </div>

                  <div>
                    <label className="block text-[10px] uppercase font-bold text-slate-400 mb-1">Preferred Cities</label>
                    <LocationAsyncSelect
                      locationType="city"
                      allowAny
                      isMulti
                      value={formData.preferred_location ? formData.preferred_location.split(',').map((s) => s.trim()).filter(Boolean) : []}
                      onChange={(vals: any) => {
                        const arr = (vals || []).map((v: any) => (typeof v === 'object' ? v.value : v));
                        setFormData({ ...formData, preferred_location: arr.join(', ') });
                      }}
                      placeholder="Select preferred cities..."
                      controlBgClass="bg-white dark:bg-slate-900"
                    />
                  </div>
                </div>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div>
                    <label className="block text-[10px] uppercase font-bold text-slate-400 mb-1">Current Address</label>
                    <textarea value={formData.current_address} onChange={(e) => setFormData({ ...formData, current_address: e.target.value })} rows={3}
                      className="w-full bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-none px-3 py-2.5 text-xs focus:outline-none text-slate-800 dark:text-white" />
                  </div>
                  <div>
                    <label className="block text-[10px] uppercase font-bold text-slate-400 mb-1">Permanent Address</label>
                    <textarea value={formData.permanent_address} onChange={(e) => setFormData({ ...formData, permanent_address: e.target.value })} rows={3}
                      className="w-full bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-none px-3 py-2.5 text-xs focus:outline-none text-slate-800 dark:text-white" />
                  </div>
                </div>
              </div>
            )}

            {activeFormTab === 'academic' && (
              <div className="space-y-6">
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                  <div>
                    <label className="block text-[10px] uppercase font-bold text-slate-400 mb-1">Highest Qualification</label>
                    <input type="text" value={formData.highest_qualification} onChange={(e) => setFormData({ ...formData, highest_qualification: e.target.value })}
                      className="w-full bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-none px-3 py-2.5 text-xs focus:outline-none text-slate-800 dark:text-white" />
                  </div>
                  <div>
                    <label className="block text-[10px] uppercase font-bold text-slate-400 mb-1">University / Board</label>
                    <input type="text" value={formData.university} onChange={(e) => setFormData({ ...formData, university: e.target.value })}
                      className="w-full bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-none px-3 py-2.5 text-xs focus:outline-none text-slate-800 dark:text-white" />
                  </div>
                  <div>
                    <label className="block text-[10px] uppercase font-bold text-slate-400 mb-1">College / School</label>
                    <input type="text" value={formData.college} onChange={(e) => setFormData({ ...formData, college: e.target.value })}
                      className="w-full bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-none px-3 py-2.5 text-xs focus:outline-none text-slate-800 dark:text-white" />
                  </div>
                  <div>
                    <label className="block text-[10px] uppercase font-bold text-slate-400 mb-1">Passing Year</label>
                    <SearchableSelect value={formData.passing_year ? String(formData.passing_year) : ''} onChange={(val) => setFormData({ ...formData, passing_year: val || '' })}
                      placeholder="Select year..." options={YEAR_OPTIONS} />
                  </div>
                  <div>
                    <label className="block text-[10px] uppercase font-bold text-slate-400 mb-1">Percentage / CGPA</label>
                    <input type="text" value={formData.percentage_cgpa} onChange={(e) => setFormData({ ...formData, percentage_cgpa: e.target.value })}
                      className="w-full bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-none px-3 py-2.5 text-xs focus:outline-none text-slate-800 dark:text-white" />
                  </div>
                  <div>
                    <label className="block text-[10px] uppercase font-bold text-slate-400 mb-1">Availability</label>
                    <SearchableSelect value={formData.availability} onChange={(val) => setFormData({ ...formData, availability: val })} placeholder="Select availability..." isClearable={false}
                      options={[{ value: 'Immediate', label: 'Immediate' }, { value: '15 Days', label: '15 Days' }, { value: '30 Days', label: '30 Days' }, { value: '60 Days', label: '60 Days' }, { value: '90 Days', label: '90 Days' }]} />
                  </div>
                </div>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div>
                    <label className="block text-[10px] uppercase font-bold text-slate-400 mb-1">Key Skills</label>
                    <SearchableSelect isMulti isCreatable options={SKILL_OPTIONS} value={formData.skills ? formData.skills.split(',').map((s) => s.trim()).filter(Boolean) : []}
                      onChange={(vals: any) => {
                        const arr = (vals || []).map((v: any) => (typeof v === 'object' ? v.value : v));
                        setFormData({ ...formData, skills: arr.join(', ') });
                      }} placeholder="Select or type skills..." />
                  </div>
                  <div>
                    <label className="block text-[10px] uppercase font-bold text-slate-400 mb-1">Languages</label>
                    <SearchableSelect isMulti isCreatable options={[{ value: 'English', label: 'English' }, { value: 'Hindi', label: 'Hindi' }, { value: 'Spanish', label: 'Spanish' }, { value: 'French', label: 'French' }, { value: 'German', label: 'German' }]}
                      value={formData.languages ? formData.languages.split(',').map((l) => l.trim()).filter(Boolean) : []}
                      onChange={(vals: any) => {
                        const arr = (vals || []).map((v: any) => (typeof v === 'object' ? v.value : v));
                        setFormData({ ...formData, languages: arr.join(', ') });
                      }} placeholder="Select or type languages..." />
                  </div>
                </div>
              </div>
            )}

            {activeFormTab === 'experience' && (
              <div className="space-y-6">
                <div className="flex items-center gap-2">
                  <input type="checkbox" id="fresher" checked={formData.fresher} onChange={(e) => setFormData({ ...formData, fresher: e.target.checked })} className="accent-indigo-600" />
                  <label htmlFor="fresher" className="text-xs font-bold text-slate-700 dark:text-slate-300">Candidate is a Fresher (No prior work experience)</label>
                </div>

                {!formData.fresher && (
                  <>
                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                      <div>
                        <label className="block text-[10px] uppercase font-bold text-slate-400 mb-1">Total Experience (Years)</label>
                        <input type="number" step="0.1" value={formData.total_experience} onChange={(e) => setFormData({ ...formData, total_experience: e.target.value })}
                          className="w-full bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-none px-3 py-2.5 text-xs focus:outline-none text-slate-800 dark:text-white" />
                      </div>
                      <div>
                        <label className="block text-[10px] uppercase font-bold text-slate-400 mb-1">Current Employer</label>
                        <input type="text" value={formData.current_company} onChange={(e) => setFormData({ ...formData, current_company: e.target.value })}
                          className="w-full bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-none px-3 py-2.5 text-xs focus:outline-none text-slate-800 dark:text-white" />
                      </div>
                      <div>
                        <label className="block text-[10px] uppercase font-bold text-slate-400 mb-1">Current Designation</label>
                        <SearchableSelect isCreatable options={designationOptions} value={formData.current_role} onChange={(val) => setFormData({ ...formData, current_role: val })} placeholder="Select or type designation..." />
                      </div>
                      <div>
                        <label className="block text-[10px] uppercase font-bold text-slate-400 mb-1">Current CTC (LPA)</label>
                        <input type="number" step="0.1" value={formData.current_ctc} onChange={(e) => setFormData({ ...formData, current_ctc: e.target.value })}
                          className="w-full bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-none px-3 py-2.5 text-xs focus:outline-none text-slate-800 dark:text-white" />
                      </div>
                    </div>

                    <div className="border-t border-slate-100 dark:border-slate-800 pt-4 space-y-4">
                      <div className="flex items-center justify-between">
                        <h4 className="text-xs font-bold text-slate-700 dark:text-slate-300">Previous Work History</h4>
                        <button type="button" onClick={addExperience} className="text-xs font-bold text-indigo-600 hover:text-indigo-700 flex items-center gap-1">
                          <i className="fa-solid fa-plus text-[10px]"></i> Add Experience Row
                        </button>
                      </div>

                      {experiences.map((exp, index) => (
                        <div key={index} className="bg-slate-50 dark:bg-slate-950 border border-slate-200 dark:border-slate-800 rounded-none p-3 space-y-3">
                          <div className="flex justify-between items-center">
                            <span className="text-[11px] font-bold text-slate-500">Experience #{index + 1}</span>
                            <button type="button" onClick={() => setExperiences(experiences.filter((_, i) => i !== index))} className="text-rose-500 hover:text-rose-600 text-xs font-bold">Remove</button>
                          </div>
                          <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
                            <input type="text" placeholder="Company Name" value={exp.company_name} onChange={(e) => { const u = [...experiences]; u[index].company_name = e.target.value; setExperiences(u); }} className="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-none px-2.5 py-1.5 text-xs" />
                            <input type="text" placeholder="Role / Designation" value={exp.role} onChange={(e) => { const u = [...experiences]; u[index].role = e.target.value; setExperiences(u); }} className="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-none px-2.5 py-1.5 text-xs" />
                            <input type="text" placeholder="Reason for leaving" value={exp.reason_for_leaving} onChange={(e) => { const u = [...experiences]; u[index].reason_for_leaving = e.target.value; setExperiences(u); }} className="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-none px-2.5 py-1.5 text-xs" />
                          </div>
                        </div>
                      ))}
                    </div>
                  </>
                )}
              </div>
            )}

            {activeFormTab === 'projects' && (
              <div className="space-y-4">
                <div className="flex items-center justify-between">
                  <h4 className="text-xs font-bold text-slate-700 dark:text-slate-300">Key Projects</h4>
                  <button type="button" onClick={addProject} className="text-xs font-bold text-indigo-600 hover:text-indigo-700 flex items-center gap-1">
                    <i className="fa-solid fa-plus text-[10px]"></i> Add Project
                  </button>
                </div>
                {projects.map((proj, index) => (
                  <div key={index} className="bg-slate-50 dark:bg-slate-950 border border-slate-200 dark:border-slate-800 rounded-none p-3 space-y-3">
                    <div className="flex justify-between items-center">
                      <span className="text-[11px] font-bold text-slate-500">Project #{index + 1}</span>
                      <button type="button" onClick={() => setProjects(projects.filter((_, i) => i !== index))} className="text-rose-500 hover:text-rose-600 text-xs font-bold">Remove</button>
                    </div>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                      <input type="text" placeholder="Project Title" value={proj.project_name} onChange={(e) => { const u = [...projects]; u[index].project_name = e.target.value; setProjects(u); }} className="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-none px-2.5 py-1.5 text-xs" />
                      <input type="text" placeholder="Technologies Used" value={proj.technologies_used} onChange={(e) => { const u = [...projects]; u[index].technologies_used = e.target.value; setProjects(u); }} className="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-none px-2.5 py-1.5 text-xs" />
                    </div>
                    <textarea placeholder="Project Description" value={proj.description} onChange={(e) => { const u = [...projects]; u[index].description = e.target.value; setProjects(u); }} rows={2} className="w-full bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-none px-2.5 py-1.5 text-xs" />
                  </div>
                ))}
              </div>
            )}

            {activeFormTab === 'references' && (
              <div className="space-y-4">
                <div className="flex items-center justify-between">
                  <h4 className="text-xs font-bold text-slate-700 dark:text-slate-300">Professional References</h4>
                  <button type="button" onClick={addReference} className="text-xs font-bold text-indigo-600 hover:text-indigo-700 flex items-center gap-1">
                    <i className="fa-solid fa-plus text-[10px]"></i> Add Reference
                  </button>
                </div>
                {references.map((ref, index) => (
                  <div key={index} className="bg-slate-50 dark:bg-slate-950 border border-slate-200 dark:border-slate-800 rounded-none p-3 space-y-3">
                    <div className="flex justify-between items-center">
                      <span className="text-[11px] font-bold text-slate-500">Reference #{index + 1}</span>
                      <button type="button" onClick={() => setReferences(references.filter((_, i) => i !== index))} className="text-rose-500 hover:text-rose-600 text-xs font-bold">Remove</button>
                    </div>
                    <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
                      <input type="text" placeholder="Full Name" value={ref.name} onChange={(e) => { const u = [...references]; u[index].name = e.target.value; setReferences(u); }} className="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-none px-2.5 py-1.5 text-xs" />
                      <input type="text" placeholder="Company" value={ref.company} onChange={(e) => { const u = [...references]; u[index].company = e.target.value; setReferences(u); }} className="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-none px-2.5 py-1.5 text-xs" />
                      <input type="email" placeholder="Email" value={ref.email} onChange={(e) => { const u = [...references]; u[index].email = e.target.value; setReferences(u); }} className="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-none px-2.5 py-1.5 text-xs" />
                    </div>
                  </div>
                ))}
              </div>
            )}

            <div className="flex items-center justify-end gap-3 pt-4 border-t border-slate-100 dark:border-slate-800">
              <button
                type="button"
                onClick={() => router.push('/candidates')}
                className="bg-slate-100 dark:bg-slate-800 hover:bg-slate-200 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-300 px-5 py-2.5 rounded-none text-xs font-bold cursor-pointer transition"
              >
                Cancel
              </button>
              <button
                type="submit"
                disabled={submitting || isParsing}
                className="bg-[#405189] hover:bg-[#364574] text-white px-6 py-2.5 rounded-none text-xs font-bold cursor-pointer transition shadow-md disabled:opacity-50 flex items-center gap-2"
              >
                {submitting ? (
                  <><i className="fa-solid fa-spinner fa-spin"></i> Saving Candidate...</>
                ) : (
                  <><i className="fa-solid fa-check"></i> Save Candidate Profile</>
                )}
              </button>
            </div>
          </fieldset>
        </form>
      </div>

      {resumeView && (
        <ResumePreviewModal
          url={resumeView.url}
          name={resumeView.name}
          onClose={() => setResumeView(null)}
        />
      )}
    </main>
  );
}