import React, { useState, useRef } from 'react'; import { motion } from 'framer-motion'; import { DownloadIcon, ArrowLeftIcon, PlusIcon, TrashIcon } from './Icons'; export default function ResumeBuilder({ analysisResult, onBack }) { const printRef = useRef(null); const missingKeywords = analysisResult?.matches?.filter(m => !m.found) || []; const resumeData = analysisResult?.resume_data || {}; // Form State - Auto-fill from resume_data if available const [personalInfo, setPersonalInfo] = useState({ fullName: resumeData.name || '', email: resumeData.email || '', phone: resumeData.phone || '', location: resumeData.location || '', linkedin: resumeData.linkedin || '', portfolio: resumeData.portfolio || '' }); const [summary, setSummary] = useState(resumeData.summary || ''); const [experience, setExperience] = useState( resumeData.work_experience?.length > 0 ? resumeData.work_experience.map((exp, idx) => ({ id: Date.now() + idx, company: exp.company || '', role: exp.role || '', startDate: exp.years || exp.start_date || '', endDate: exp.end_date || '', description: Array.isArray(exp.responsibilities) ? exp.responsibilities.map(r => `• ${r}`).join('\n') : (exp.responsibilities || exp.description || '') })) : [{ id: 1, company: '', role: '', startDate: '', endDate: '', description: '' }] ); const [education, setEducation] = useState( resumeData.education?.length > 0 ? resumeData.education.map((edu, idx) => ({ id: Date.now() + idx, institution: edu.institution || '', degree: edu.course || edu.degree || '', startDate: edu.year || edu.start_date || '', endDate: edu.end_date || '', location: edu.location || '' })) : [{ id: 1, institution: '', degree: '', startDate: '', endDate: '' }] ); const [projects, setProjects] = useState( resumeData.projects?.length > 0 ? resumeData.projects.map((proj, idx) => ({ id: Date.now() + idx, name: proj.title || proj.name || '', description: proj.description || '', link: proj.link || '' })) : [{ id: 1, name: '', description: '', link: '' }] ); const [certifications, setCertifications] = useState( resumeData.certifications?.length > 0 ? resumeData.certifications.map((cert, idx) => { if (typeof cert === 'string') { const parts = cert.split(/ - | – | — |: /); if (parts.length > 1) { return { id: Date.now() + idx, issuer: parts[0].trim(), name: parts.slice(1).join(' - ').trim(), date: '' }; } return { id: Date.now() + idx, name: cert, issuer: '', date: '' }; } return { id: Date.now() + idx, name: cert.name || cert.title || '', issuer: cert.issuer || '', date: cert.date || '' }; }) : [{ id: 1, name: '', issuer: '', date: '' }] ); const initialSkills = []; if (resumeData.technical_skills) initialSkills.push(...resumeData.technical_skills); if (resumeData.skills) initialSkills.push(...resumeData.skills); const [skills, setSkills] = useState(initialSkills.join(', ')); const [themeColor, setThemeColor] = useState('#000000'); // Drag and Drop Handlers const handleDragStart = (e, keyword) => { e.dataTransfer.setData("text/plain", keyword); }; const handleDrop = (e, setter, currentValue) => { e.preventDefault(); const draggedText = e.dataTransfer.getData("text/plain"); if (draggedText) { // Append the dropped text // Determine if we need a comma or space based on context (hacky but functional for this scope) const separator = currentValue ? (setter === setSkills ? ', ' : ' ') : ''; setter(`${currentValue}${separator}${draggedText}`); } }; const handleExperienceDrop = (e, id, currentValue) => { e.preventDefault(); const draggedText = e.dataTransfer.getData("text/plain"); if (draggedText) { const separator = currentValue ? ' ' : ''; updateExperience(id, 'description', `${currentValue}${separator}${draggedText}`); } }; const handleProjectDrop = (e, id, currentValue) => { e.preventDefault(); const draggedText = e.dataTransfer.getData("text/plain"); if (draggedText) { const separator = currentValue ? ' ' : ''; updateProject(id, 'description', `${currentValue}${separator}${draggedText}`); } }; const handleDragOver = (e) => { e.preventDefault(); // Necessary to allow dropping }; // Handlers const handlePersonalInfoChange = (e) => { const { name, value } = e.target; setPersonalInfo(prev => ({ ...prev, [name]: value })); }; const addExperience = () => { setExperience(prev => [...prev, { id: Date.now(), company: '', role: '', startDate: '', endDate: '', description: '' }]); }; const updateExperience = (id, field, value) => { setExperience(prev => prev.map(exp => exp.id === id ? { ...exp, [field]: value } : exp)); }; const removeExperience = (id) => { setExperience(prev => prev.filter(exp => exp.id !== id)); }; const addEducation = () => { setEducation(prev => [...prev, { id: Date.now(), institution: '', degree: '', startDate: '', endDate: '' }]); }; const updateEducation = (id, field, value) => { setEducation(prev => prev.map(edu => edu.id === id ? { ...edu, [field]: value } : edu)); }; const removeEducation = (id) => { setEducation(prev => prev.filter(edu => edu.id !== id)); }; const addProject = () => setProjects(prev => [...prev, { id: Date.now(), name: '', description: '', link: '' }]); const updateProject = (id, field, value) => setProjects(prev => prev.map(proj => proj.id === id ? { ...proj, [field]: value } : proj)); const removeProject = (id) => setProjects(prev => prev.filter(proj => proj.id !== id)); const addCertification = () => setCertifications(prev => [...prev, { id: Date.now(), name: '', issuer: '', date: '' }]); const updateCertification = (id, field, value) => setCertifications(prev => prev.map(cert => cert.id === id ? { ...cert, [field]: value } : cert)); const removeCertification = (id) => setCertifications(prev => prev.filter(cert => cert.id !== id)); const handlePrint = () => { window.print(); }; const inputStyle = { width: '100%', padding: '0.75rem', borderRadius: '0.5rem', border: '1px solid rgba(236, 183, 26, 0.46)', backgroundColor: 'rgba(255,255,255,0.05)', color: 'white', marginBottom: '1rem', fontFamily: 'inherit', }; const labelStyle = { display: 'block', marginBottom: '0.5rem', color: '#d1d5db', fontSize: '0.875rem' }; const sectionHeaderStyle = { fontSize: '1.25rem', fontWeight: 'bold', color: '#FBBF24', marginBottom: '1rem', borderBottom: '1px solid rgba(236, 183, 26, 0.3)', paddingBottom: '0.5rem' }; const resumeSectionHeaderStyle = { fontSize: '14px', fontVariant: 'small-caps', fontWeight: 'bold', textTransform: 'uppercase', borderBottom: `1px solid ${themeColor}`, color: themeColor, paddingBottom: '2px', marginBottom: '8px', letterSpacing: '1px' }; return (
{/* Left Panel: Form & Gaps */}
{/* Header Actions */}
setThemeColor(e.target.value)} style={{ position: 'absolute', top: '-10px', left: '-10px', width: '50px', height: '50px', cursor: 'pointer', opacity: 0 }} title="Change Resume Theme Color" />
{/* Fix Your Gaps Panel */} {missingKeywords.length > 0 && (

Fix Your ATS Gaps

Drag and drop these keywords into your text fields below.

{missingKeywords.map((match, idx) => ( handleDragStart(e, match.keyword)} style={{ backgroundColor: 'rgba(239, 68, 68, 0.2)', color: '#FCA5A5', padding: '0.25rem 0.5rem', borderRadius: '0.25rem', fontSize: '0.75rem', border: '1px solid rgba(239, 68, 68, 0.4)', cursor: 'grab' }} > {match.keyword} ))}
)} {/* Builder Form */}
{/* Personal Info */}

Personal Information

{/* Summary */}

Professional Summary