import React from 'react';
import { Hero } from './components/Hero';
import { Gallery } from './components/Gallery';
import { Button } from './components/ui/Button';
import { popularSheets } from './data/mockData';

import { HowItWorks } from './components/HowItWorks';

function App() {
    const [generatedSheet, setGeneratedSheet] = React.useState(null);
    const [isGenerating, setIsGenerating] = React.useState(false);

    const [history, setHistory] = React.useState([]);

    const handleGenerate = async (data) => {
        setIsGenerating(true);
        try {
            const response = await fetch('/api/generate', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(data),
            });

            if (!response.ok) throw new Error('Generation failed');

            const result = await response.json();
            setGeneratedSheet(result);

            // Add to history
            const newHistoryItem = {
                id: Date.now(),
                title: result.title,
                subtitle: result.subtitle,
                age: data.age,
                downloads: 0,
                bgColor: 'bg-primary-50', // Default color
                // We'll need to figure out how to preview it in the gallery. 
                // For now, Gallery expects 'bgColor'. 
            };
            setHistory(prev => [newHistoryItem, ...prev]);

        } catch (error) {
            console.error("Error generating sheet:", error);
            // Optional: Show error state
        } finally {
            setIsGenerating(false);
        }
    };

    const galleryItems = history.length > 0 ? history.slice(0, 3) : popularSheets.slice(0, 3);
    const galleryTitle = history.length > 0 ? "Your Recent Creations" : "Most Popular Printables";

    return (
        <div className="min-h-screen bg-slate-50/50">
            {/* Navbar */}
            <nav className="border-b border-slate-200 bg-white/80 backdrop-blur-md sticky top-0 z-50">
                <div className="max-w-7xl mx-auto px-4 h-16 flex items-center justify-between">
                    <div className="flex items-center gap-2">
                        <span className="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-violet-600 to-indigo-600">
                            WonderSheets
                        </span>
                        <span className="text-yellow-400 text-xl">✨</span>
                    </div>

                    <div className="hidden md:flex items-center gap-8 text-sm font-medium text-slate-600">
                        <a href="#" className="hover:text-primary-600">Gallery</a>
                        <a href="#how-it-works" className="hover:text-primary-600">How it Works</a>
                    </div>
                </div>
            </nav>

            {/* Main Content */}
            <main className="max-w-7xl mx-auto px-4">
                <Hero onGenerate={handleGenerate} generatedSheet={generatedSheet} isGenerating={isGenerating} />
                <Gallery items={galleryItems} title={galleryTitle} />
            </main>

            <HowItWorks />

            {/* Footer */}
            <footer className="bg-white border-t border-slate-200 mt-20 py-12">
                <div className="max-w-7xl mx-auto px-4 text-center text-slate-500 text-sm">
                    <p>© 2024 WonderSheets. All rights reserved.</p>
                </div>
            </footer>
        </div>
    );
}

export default App;