// frontend/src/components/PreviewPanel.jsx
import React, { useRef } from 'react';
import { useResume } from '../contexts/ResumeContext';
import { exportToPDF } from '../services/pdfExport';
import { DocumentArrowDownIcon } from '@heroicons/react/24/outline';

const PreviewPanel = () => {
    const { resumeData, template } = useResume();
    const previewRef = useRef();

    const handleDownload = async () => {
        if (previewRef.current) {
            await exportToPDF(previewRef.current, template);
        }
    };

    const getTemplateClasses = () => {
        switch(template) {
            case 'minimal':
                return 'font-sans border-0 p-6';
            case 'professional':
                return 'font-serif bg-gray-50 shadow-lg p-8';
            default:
                return 'font-sans bg-white rounded-lg shadow-xl p-8';
        }
    };

    const renderExperience = () => {
        if (!resumeData.experience || resumeData.experience.length === 0) return null;
        return (
            <div className="mb-6">
                <h3 className="text-xl font-semibold border-b-2 pb-2 mb-4">Work Experience</h3>
                {resumeData.experience.map((exp, idx) => (
                    <div key={idx} className="mb-4">
                        <div className="flex justify-between items-start">
                            <div>
                                <h4 className="font-bold text-lg">{exp.role}</h4>
                                <p className="text-gray-600">{exp.company}</p>
                            </div>
                            <p className="text-sm text-gray-500">{exp.startDate} - {exp.endDate}</p>
                        </div>
                        <p className="mt-2 text-gray-700 whitespace-pre-line">{exp.description}</p>
                    </div>
                ))}
            </div>
        );
    };

    const renderEducation = () => {
        if (!resumeData.education || resumeData.education.length === 0) return null;
        return (
            <div className="mb-6">
                <h3 className="text-xl font-semibold border-b-2 pb-2 mb-4">Education</h3>
                {resumeData.education.map((edu, idx) => (
                    <div key={idx} className="mb-3">
                        <div className="flex justify-between">
                            <h4 className="font-bold">{edu.degree}</h4>
                            <p className="text-sm text-gray-500">{edu.year}</p>
                        </div>
                        <p className="text-gray-600">{edu.school}</p>
                    </div>
                ))}
            </div>
        );
    };

    return (
        <div>
            <div className="flex justify-between items-center mb-4">
                <h2 className="text-2xl font-bold">Live Preview</h2>
                <button onClick={handleDownload} className="btn-primary flex items-center gap-2">
                    <DocumentArrowDownIcon className="w-5 h-5" />
                    Download PDF
                </button>
            </div>
            <div className="card overflow-auto max-h-[calc(100vh-200px)]">
                <div ref={previewRef} className={getTemplateClasses()}>
                    <div className="text-center mb-6">
                        <h1 className="text-3xl font-bold">{resumeData.fullName || 'Your Name'}</h1>
                        <p className="text-xl text-gray-600 mt-2">{resumeData.jobTitle || 'Job Title'}</p>
                        <p className="text-gray-500 mt-1">{resumeData.email}</p>
                    </div>
                    
                    {resumeData.summary && (
                        <div className="mb-6">
                            <h3 className="text-xl font-semibold border-b-2 pb-2 mb-4">Professional Summary</h3>
                            <p className="text-gray-700">{resumeData.summary}</p>
                        </div>
                    )}
                    
                    {resumeData.skills && (
                        <div className="mb-6">
                            <h3 className="text-xl font-semibold border-b-2 pb-2 mb-4">Skills</h3>
                            <div className="flex flex-wrap gap-2">
                                {resumeData.skills.split(',').map((skill, idx) => (
                                    <span key={idx} className="bg-gray-100 px-3 py-1 rounded-full text-sm">
                                        {skill.trim()}
                                    </span>
                                ))}
                            </div>
                        </div>
                    )}
                    
                    {renderExperience()}
                    {renderEducation()}
                </div>
            </div>
        </div>
    );
};

export default PreviewPanel;