import React, { useState, useMemo } from 'react'; import { Head, Link, router } from '@inertiajs/react'; import EmployerLayout from '../../Layouts/EmployerLayout'; import { useTranslation } from '../../lib/LanguageContext'; import { CheckCircle2, Globe2, Briefcase, DollarSign, MessageSquare, Trash2, SlidersHorizontal, ShieldCheck, AlertTriangle, Sparkles, Star, Eye, User, X, HeartHandshake, CheckCircle, MapPin, Calendar } from 'lucide-react'; const getLanguageFlag = (lang) => { const flags = { 'English': '🇬🇧', 'Arabic': '🇦🇪', 'Tagalog': '🇵🇭', 'Hindi': '🇮🇳', 'Swahili': '🇰🇪', 'French': '🇫🇷', 'Indonesian': '🇮🇩' }; return flags[lang] || '🌐'; }; export default function Shortlist({ shortlistedWorkers }) { const { t } = useTranslation(); 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(t('max_compare_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 (

{t('candidates_saved', 'You have {count} candidates saved for review').split('{count}')[0]} {workers.length} {t('candidates_saved', 'You have {count} candidates saved for review').split('{count}')[1]}

{t('browse_more', '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} {false && ( {t('verified', 'Verified')} )}
{/* Passport Status Verification Badge & Visa Status */}
{worker.visa_expiry_date ? (
Visa Exp: {worker.visa_expiry_date}
) : (
Visa Expiry Pending
)} {worker.visa_status && (worker.visa_status.toLowerCase().includes('tourist') || worker.visa_status.toLowerCase().includes('visit')) ? (
{worker.visa_status} ({t('warning', 'Warning')})
) : worker.visa_status && worker.visa_status.toLowerCase().includes('cancelled') ? (
{worker.visa_status} ({t('warning', 'Warning')})
) : (
{worker.visa_status}
)}
{worker.nationality} • {worker.age} yrs
{/* Top Right Availability status and trash remove button */}
{/* Card Body */}
{/* Ratings & Cost */}
{worker.salary} AED /mo
{/* Details Table */}
Exp: {worker.experience}
{worker.preferred_job_type}
{worker.preferred_location || 'Not Specified'}
{worker.rating || '4.5'} ({worker.reviews_count || '12'})
{/* Core exact platform Skills List */}
{t('platform_skills', 'Platform Skills')}
{worker.skills?.map(skill => ( {skill} ))}
{/* Languages Badges with Visual Flags */}
{t('languages_spoken', 'Languages Spoken')}
{worker.languages?.map(lang => ( {getLanguageFlag(lang)} {lang} ))}
{/* Actions block */}
{t('open_profile', 'Open Profile')} {t('message', 'Message')}
); })}
) : (
{t('shortlist_empty', 'Your shortlist is empty')}

{t('shortlist_empty_desc', 'Explore candidate profiles and add them to your saved shortlist.')}

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

{t('comparing_workers', 'Comparing Workers')} ({comparedWorkers.length} of 3)

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

{previewWorker.name}

{previewWorker.visa_expiry_date ? (
Visa Exp: {previewWorker.visa_expiry_date}
) : (
Visa Expiry Pending
)}
{previewWorker.nationality}
{t('expectations', 'Expectations')}
{previewWorker.salary} AED / mo
{t('job_type', 'Job Type')}
{previewWorker.preferred_job_type}
{t('gender', 'Gender')}
{previewWorker.gender || 'Female'}
{t('visa_status', 'Visa Status')}
{previewWorker.visa_status || 'Residence Visa'}
{t('preferred_location', 'Preferred Location')}
{previewWorker.preferred_location || 'Not Specified'}
{t('languages', 'Languages')}
{previewWorker.languages?.map(lang => ( {getLanguageFlag(lang)} {lang} ))}
{/* Core Platform Skills inside Quick Preview */}
{t('platform_skills', 'Platform Skills')}
{previewWorker.skills?.map(skill => ( {skill} ))}
{t('view_full_details', 'View Full Details')}
)}
); }