import React, { useState, useMemo } from 'react'; import { Head, Link, router } from '@inertiajs/react'; import EmployerLayout from '../../Layouts/EmployerLayout'; import { CheckCircle2, Globe2, Briefcase, DollarSign, MessageSquare, Trash2, SlidersHorizontal, ShieldCheck, AlertTriangle, Sparkles, Star, Eye, User, X, HeartHandshake, CheckCircle } from 'lucide-react'; const getLanguageFlag = (lang) => { const flags = { 'English': '🇬🇧', 'Arabic': '🇦🇪', 'Tagalog': '🇵🇭', 'Hindi': '🇮🇳', 'Swahili': '🇰🇪', 'French': '🇫🇷', 'Indonesian': '🇮🇩' }; return flags[lang] || '🌐'; }; export default function Shortlist({ shortlistedWorkers }) { const [workers, setWorkers] = useState(shortlistedWorkers || []); // Comparison & Quick Preview State const [comparisonIds, setComparisonIds] = useState([]); const [previewWorker, setPreviewWorker] = useState(null); const removeWorker = (id) => { // Optimistic UI state update setWorkers(workers.filter(w => w.id !== id)); setComparisonIds(comparisonIds.filter(i => i !== id)); // Persist change to database router.post(`/employer/shortlist/${id}/remove`, {}, { preserveScroll: true }); }; const handleToggleComparison = (id) => { if (comparisonIds.includes(id)) { setComparisonIds(comparisonIds.filter(i => i !== id)); } else { if (comparisonIds.length >= 3) { alert('You can compare a maximum of 3 candidates.'); return; } setComparisonIds([...comparisonIds, id]); } }; const comparedWorkers = useMemo(() => { return workers.filter(w => comparisonIds.includes(w.id)); }, [workers, comparisonIds]); return (

You have {workers.length} candidates saved for review

Browse more workers
{workers.length > 0 ? (
{workers.map((worker) => { const isComparing = comparisonIds.includes(worker.id); return (
{/* Card Header with Photo Option and Availability indicator */}
{/* Photo (optional) container */}
{worker.photo ? ( {worker.name} ) : ( )}
{worker.name} {worker.verified && ( Verified )}
{/* Emirates ID Status Verification Badge & Visa Status */}
{worker.emirates_id_status}
{worker.visa_status && (worker.visa_status.toLowerCase().includes('tourist') || worker.visa_status.toLowerCase().includes('visit')) ? (
{worker.visa_status} (Warning)
) : worker.visa_status && worker.visa_status.toLowerCase().includes('cancelled') ? (
{worker.visa_status} (Warning)
) : (
{worker.visa_status}
)}
{worker.nationality} • {worker.age} yrs
{/* Top Right Availability status and trash remove button */}
{worker.availability_status}
{/* Card Body */}
{/* Category Pill, Ratings & Cost */}
{worker.category}
{worker.salary} AED /mo
{/* Details Table */}
Exp: {worker.experience}
{worker.preferred_job_type}
{worker.rating || '4.5'} ({worker.reviews_count || '12'} reviews)
{/* Core exact platform Skills List */}
Platform Skills
{worker.skills?.map(skill => ( {skill} ))}
{/* Languages Badges with Visual Flags */}
Languages Spoken
{worker.languages?.map(lang => ( {getLanguageFlag(lang)} {lang} ))}
{/* Actions block */}
Open Profile Message
); })}
) : (
Your shortlist is empty

Explore candidate profiles and add them to your saved shortlist.

Find Workers Now
)} {/* Worker Comparison Drawer */} {comparisonIds.length > 0 && (

Comparing Workers ({comparedWorkers.length} of 3)

{comparedWorkers.map(w => (
{w.photo ? ( {w.name} ) : ( {w.name.charAt(0)} )}
{w.name}
{w.nationality} • {w.category}
Salary: {w.salary} AED
Age: {w.age} yrs
Job Type: {w.preferred_job_type}
Status: {w.availability_status}
{/* Skills Display in Comparison */}
Skills
{w.skills?.map(skill => ( {skill} ))}
))}
)} {/* Quick Preview Modal overlay */} {previewWorker && (
{previewWorker.photo ? ( {previewWorker.name} ) : ( )}

{previewWorker.name}

{previewWorker.verified && }
{previewWorker.emirates_id_status}
{previewWorker.nationality} • {previewWorker.category}
{previewWorker.bio ? (

"{previewWorker.bio}"

) : (

No bio details provided.

)}
Expectations
{previewWorker.salary} AED / mo
Languages
{previewWorker.languages?.map(lang => ( {getLanguageFlag(lang)} {lang} ))}
Availability Status
{previewWorker.availability_status}
Job Preference
{previewWorker.preferred_job_type}
{/* Core Platform Skills inside Quick Preview */}
Platform Skills
{previewWorker.skills?.map(skill => ( {skill} ))}
View Full Details
)}
); }