import React from 'react'; import { motion, AnimatePresence } from 'framer-motion'; import { X, Mail, Phone, MapPin, Briefcase, GraduationCap, Award, User, Loader2 } from 'lucide-react'; import { supabase } from '../supabaseClient'; const FullProfileOverlay = ({ candidate, onClose }) => { const [profile, setProfile] = React.useState(null); const [loading, setLoading] = React.useState(true); React.useEffect(() => { const fetchFullProfile = async () => { if (!candidate?.userId && !candidate?.id) return; setLoading(true); try { const targetId = candidate.userId || candidate.id; const { data, error } = await supabase .from('profiles') .select('*') .eq('id', targetId) .single(); if (error) throw error; setProfile(data); } catch (error) { console.error("Error fetching full profile:", error); setProfile(candidate); } finally { setLoading(false); } }; fetchFullProfile(); }, [candidate]); if (!candidate) return null; if (loading) { return (

); } const displayData = profile || candidate; // Helper to safely parse skills (array or CSV string) const parseSkills = (data) => { if (Array.isArray(data)) return data; if (typeof data === 'string') return data.split(',').map(s => s.trim()).filter(Boolean); return []; }; const allSkills = [...new Set([ ...parseSkills(displayData.skills), ...parseSkills(displayData.technical_skills) ])]; const fullCandidate = { ...displayData, name: displayData.full_name || displayData.name || 'No Name Provided', role: displayData.current_position || displayData.role || 'Applicant', email: displayData.email || 'No email available', phone: displayData.phone || 'No phone provided', location: displayData.location || 'Remote', avatar: displayData.avatar_url || displayData.avatar || `https://ui-avatars.com/api/?name=${encodeURIComponent(displayData.full_name || 'User')}`, about: displayData.summary || displayData.headline || "No summary available.", skills: allSkills, education: Array.isArray(displayData.education) ? displayData.education : [], experience_details: Array.isArray(displayData.work_experience) ? displayData.work_experience : [], projects: Array.isArray(displayData.projects) ? displayData.projects : [] }; return ( {/* === Header === */}

{fullCandidate.name}

{fullCandidate.role}

{fullCandidate.email} {fullCandidate.phone} {fullCandidate.location}

{/* === Content Body === */}

{/* Left Column */}

{/* About */}

About

{fullCandidate.about}

{/* Skills */}

Skills

{fullCandidate.skills?.map((skill, i) => ( {skill} ))}

{/* Projects Pointers */}

Key Projects

{fullCandidate.projects?.map((project, i) => (

{typeof project === 'object' ? (project.title || project.name) : project}

{typeof project === 'object' && project.description && (

{project.description}

)}

))}

{/* Right Column */}

{/* Experience Timeline */}

Experience

{/* Vertical Line */}

{fullCandidate.experience_details.map((exp, i) => (

{/* Dot */}

{exp.role || exp.job_title}

{exp.company} {exp.duration || exp.years}

{exp.description}

))}

{/* Education */}

Education

{fullCandidate.education.map((edu, i) => (

{edu.degree || edu.course}

{edu.school || edu.institution}

{edu.year}

))}

{/* === Footer === */}

); }; export default FullProfileOverlay;