// frontend/src/App.jsx
import React, { useState } from 'react';
import useResume from './hooks/useResume';
import { AuthProvider, useAuth } from './contexts/AuthContext';
import { ResumeProvider } from './contexts/ResumeContext';
import Sidebar from './components/Sidebar';
import ResumeForm from './components/ResumeForm';
import PreviewPanel from './components/PreviewPanel';
import FileUploader from './components/FileUploader';
import TemplateSelector from './components/TemplateSelector';
import ATSAnalyzer from './components/ATSAnalyzer';
import StepIndicator from './components/StepIndicator';
import AuthModal from './components/AuthModal';

const AppContent = () => {
    const { user, loading } = useAuth();
    const { setResumeData } = useResume();
    const [activeStep, setActiveStep] = useState(1);
    const [showAuthModal, setShowAuthModal] = useState(!user && !loading);

    if (loading) {
        return (
            <div className="flex items-center justify-center h-screen">
                <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600"></div>
            </div>
        );
    }

    if (!user) {
        return <AuthModal isOpen={true} onClose={() => {}} />;
    }

    const steps = ['Upload/Form', 'Edit', 'Preview', 'Download'];

    return (
        <div className="flex h-screen bg-gray-50 dark:bg-gray-900">
            <Sidebar activeStep={activeStep} setActiveStep={setActiveStep} />
            
            <div className="flex-1 overflow-y-auto">
                <div className="max-w-7xl mx-auto p-6">
                    <StepIndicator activeStep={activeStep} steps={steps} />
                    
                    {activeStep === 1 && (
                        <div className="space-y-6">
                            <FileUploader onDataExtracted={(data) => {
                                setResumeData(prev => ({ ...prev, ...data }));
                                setActiveStep(2);
                            }} />
                            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                                <ResumeForm onEnhance={() => setActiveStep(2)} />
                                <div className="space-y-6">
                                    <TemplateSelector />
                                    <ATSAnalyzer />
                                </div>
                            </div>
                        </div>
                    )}
                    
                    {activeStep === 2 && (
                        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                            <ResumeForm onEnhance={() => {}} />
                            <div className="space-y-6">
                                <TemplateSelector />
                                <ATSAnalyzer />
                            </div>
                        </div>
                    )}
                    
                    {activeStep === 3 && (
                        <div className="grid grid-cols-1 gap-6">
                            <PreviewPanel />
                        </div>
                    )}
                    
                    {activeStep === 4 && (
                        <div className="text-center py-12">
                            <h2 className="text-3xl font-bold mb-4">Ready to Download!</h2>
                            <p className="text-gray-600 mb-8">Review your resume and click download in the preview panel</p>
                            <PreviewPanel />
                        </div>
                    )}
                    
                    <div className="flex justify-between mt-8 pt-4 border-t">
                        <button
                            onClick={() => setActiveStep(Math.max(1, activeStep - 1))}
                            className="btn-secondary"
                            disabled={activeStep === 1}
                        >
                            Previous
                        </button>
                        {activeStep < steps.length && (
                            <button
                                onClick={() => setActiveStep(Math.min(steps.length, activeStep + 1))}
                                className="btn-primary"
                            >
                                Next
                            </button>
                        )}
                    </div>
                </div>
            </div>
        </div>
    );
};

function App() {
    return (
        <AuthProvider>
            <ResumeProvider>
                <AppContent />
            </ResumeProvider>
        </AuthProvider>
    );
}

export default App;