// frontend/src/components/ResumeForm.jsx
import React from 'react';
import { useResume } from '../contexts/ResumeContext';
import { PlusIcon, TrashIcon, SparklesIcon } from '@heroicons/react/24/outline';

const ResumeForm = ({ onEnhance }) => {
    const { resumeData, setResumeData, enhanceWithAI } = useResume();

    const updateField = (field, value) => {
        setResumeData(prev => ({ ...prev, [field]: value }));
    };

    const addExperience = () => {
        setResumeData(prev => ({
            ...prev,
            experience: [...prev.experience, { company: '', role: '', startDate: '', endDate: '', description: '' }]
        }));
    };

    const updateExperience = (index, field, value) => {
        const updated = [...resumeData.experience];
        updated[index][field] = value;
        setResumeData(prev => ({ ...prev, experience: updated }));
    };

    const removeExperience = (index) => {
        if (resumeData.experience.length > 1) {
            setResumeData(prev => ({
                ...prev,
                experience: prev.experience.filter((_, i) => i !== index)
            }));
        }
    };

    const addEducation = () => {
        setResumeData(prev => ({
            ...prev,
            education: [...prev.education, { school: '', degree: '', year: '' }]
        }));
    };

    const updateEducation = (index, field, value) => {
        const updated = [...resumeData.education];
        updated[index][field] = value;
        setResumeData(prev => ({ ...prev, education: updated }));
    };

    const removeEducation = (index) => {
        if (resumeData.education.length > 1) {
            setResumeData(prev => ({
                ...prev,
                education: prev.education.filter((_, i) => i !== index)
            }));
        }
    };

    const handleEnhance = async () => {
        await enhanceWithAI();
        if (onEnhance) onEnhance();
    };

    return (
        <div className="space-y-6">
            <div className="flex justify-between items-center">
                <h2 className="text-2xl font-bold">Edit Resume</h2>
                <button onClick={handleEnhance} className="btn-primary flex items-center gap-2">
                    <SparklesIcon className="w-5 h-5" />
                    Enhance with AI
                </button>
            </div>

            <div className="card p-6 space-y-4">
                <h3 className="text-lg font-semibold">Personal Information</h3>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <input type="text" placeholder="Full Name" value={resumeData.fullName}
                        onChange={(e) => updateField('fullName', e.target.value)} className="input-field" />
                    <input type="email" placeholder="Email" value={resumeData.email}
                        onChange={(e) => updateField('email', e.target.value)} className="input-field" />
                    <input type="text" placeholder="Job Title" value={resumeData.jobTitle}
                        onChange={(e) => updateField('jobTitle', e.target.value)} className="input-field" />
                    <input type="number" placeholder="Years of Experience" value={resumeData.yearsOfExperience}
                        onChange={(e) => updateField('yearsOfExperience', e.target.value)} className="input-field" />
                </div>
                <textarea placeholder="Professional Summary" rows="3" value={resumeData.summary}
                    onChange={(e) => updateField('summary', e.target.value)} className="input-field" />
                <input type="text" placeholder="Skills (comma-separated)" value={resumeData.skills}
                    onChange={(e) => updateField('skills', e.target.value)} className="input-field" />
            </div>

            <div className="card p-6">
                <div className="flex justify-between items-center mb-4">
                    <h3 className="text-lg font-semibold">Work Experience</h3>
                    <button onClick={addExperience} className="text-primary-600 hover:text-primary-700 flex items-center gap-1">
                        <PlusIcon className="w-5 h-5" /> Add
                    </button>
                </div>
                {resumeData.experience.map((exp, idx) => (
                    <div key={idx} className="border-t first:border-t-0 pt-4 first:pt-0 mt-4 first:mt-0">
                        <div className="flex justify-between mb-3">
                            <h4 className="font-medium">Experience #{idx + 1}</h4>
                            {resumeData.experience.length > 1 && (
                                <button onClick={() => removeExperience(idx)} className="text-red-500 hover:text-red-700">
                                    <TrashIcon className="w-5 h-5" />
                                </button>
                            )}
                        </div>
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                            <input type="text" placeholder="Company" value={exp.company}
                                onChange={(e) => updateExperience(idx, 'company', e.target.value)} className="input-field" />
                            <input type="text" placeholder="Role" value={exp.role}
                                onChange={(e) => updateExperience(idx, 'role', e.target.value)} className="input-field" />
                            <input type="text" placeholder="Start Date" value={exp.startDate}
                                onChange={(e) => updateExperience(idx, 'startDate', e.target.value)} className="input-field" />
                            <input type="text" placeholder="End Date" value={exp.endDate}
                                onChange={(e) => updateExperience(idx, 'endDate', e.target.value)} className="input-field" />
                        </div>
                        <textarea placeholder="Description" rows="2" value={exp.description}
                            onChange={(e) => updateExperience(idx, 'description', e.target.value)} className="input-field mt-3" />
                    </div>
                ))}
            </div>

            <div className="card p-6">
                <div className="flex justify-between items-center mb-4">
                    <h3 className="text-lg font-semibold">Education</h3>
                    <button onClick={addEducation} className="text-primary-600 hover:text-primary-700 flex items-center gap-1">
                        <PlusIcon className="w-5 h-5" /> Add
                    </button>
                </div>
                {resumeData.education.map((edu, idx) => (
                    <div key={idx} className="border-t first:border-t-0 pt-4 first:pt-0 mt-4 first:mt-0">
                        <div className="flex justify-between mb-3">
                            <h4 className="font-medium">Education #{idx + 1}</h4>
                            {resumeData.education.length > 1 && (
                                <button onClick={() => removeEducation(idx)} className="text-red-500 hover:text-red-700">
                                    <TrashIcon className="w-5 h-5" />
                                </button>
                            )}
                        </div>
                        <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
                            <input type="text" placeholder="School" value={edu.school}
                                onChange={(e) => updateEducation(idx, 'school', e.target.value)} className="input-field" />
                            <input type="text" placeholder="Degree" value={edu.degree}
                                onChange={(e) => updateEducation(idx, 'degree', e.target.value)} className="input-field" />
                            <input type="text" placeholder="Year" value={edu.year}
                                onChange={(e) => updateEducation(idx, 'year', e.target.value)} className="input-field" />
                        </div>
                    </div>
                ))}
            </div>
        </div>
    );
};

export default ResumeForm;