import React, { useState } from 'react'; import { motion, AnimatePresence } from 'framer-motion'; import { Wand2, Dice5, Download, Printer } from 'lucide-react'; import html2canvas from 'html2canvas'; import { jsPDF } from 'jspdf'; import { Button } from './ui/Button'; import { Input } from './ui/Input'; import { sections } from '../data/mockData'; export const Hero = ({ onGenerate, generatedSheet, isGenerating }) => { const [theme, setTheme] = useState(''); const [age, setAge] = useState(5); const [selectedSection, setSelectedSection] = useState('coloring'); // Sync state when a sheet is restored React.useEffect(() => { if (generatedSheet) { setTheme(generatedSheet.title || ''); if (generatedSheet.age) setAge(generatedSheet.age); // If sections exist, restore the first one's type as selected if (generatedSheet.sections && generatedSheet.sections.length > 0) { // Map section type back to ID if possible, or fallback const secType = generatedSheet.sections[0].type; // e.g. "coloring" // Our IDs match the types mostly, but let's be safe // IDs: coloring, numbers, writing, find-the-way, counting // Types from prompt: coloring|numbers|writing|find-the-way|counting // So direct mapping should work. // But wait, finding the ID that matches the type/id from result // In App.jsx we assume result has sections. // The prompt returns 'type' and we use that? No, prompt returns 'id' and 'type'. // Let's use the first section's ID if valid. const secId = generatedSheet.sections[0].id; // e.g. "coloring-123" // This ID from AI might be "coloring-main". We need to map it to our internal IDs: 'coloring', 'writing', 'numbers', etc. // Internal IDs in Hero are: 'coloring', 'numbers', 'writing', 'find-way' (wait, it's 'find-way' not 'find-the-way'!), 'counting'. // Let's check mockData for IDs. // sections: [{id: 'find-way', label: 'Find the Way', ...}] // AI prompt was: "find-the-way" for type. // We need to map "find-the-way" -> "find-way". const typeToId = { 'coloring': 'coloring', 'numbers': 'numbers', 'writing': 'writing', 'find-the-way': 'find-way', 'counting': 'counting' }; if (typeToId[secType]) { setSelectedSection(typeToId[secType]); } } } }, [generatedSheet]); const handleSectionChange = (id) => { if (!isGenerating) { setSelectedSection(id); } }; const handleSurpriseMe = async () => { if (isGenerating) return; try { // Optional: indicate "thinking" state here if needed, or rely on parent loading state // since we don't have a separate loading state, we can reuse isGenerating logic or add one. // For now, we'll just set the values when they arrive. const res = await fetch('http://localhost:3001/api/surprise', { method: 'POST' }); if (!res.ok) throw new Error('Surprise failed'); const idea = await res.json(); // Validate section ID exists in our map, else fallback const validSection = sections.find(s => s.id === idea.section) ? idea.section : 'coloring'; setTheme(idea.theme); setAge(idea.age); setSelectedSection(validSection); // Auto-generate for surprise if (onGenerate) { onGenerate({ theme: idea.theme, age: idea.age, sections: [validSection] }); } } catch (err) { console.error(err); // Fallback to local random if network/AI fails const funnyThemes = ['Dinosaur Disco', 'Unicorn Space Party', 'Pirate Picnic', 'Robot Garden']; const randomTheme = funnyThemes[Math.floor(Math.random() * funnyThemes.length)]; setTheme(randomTheme); setAge(Math.floor(Math.random() * 5) + 3); const randomSection = sections[Math.floor(Math.random() * sections.length)].id; setSelectedSection(randomSection); if (onGenerate) { onGenerate({ theme: randomTheme, age: Math.floor(Math.random() * 5) + 3, sections: [randomSection] }); } } }; const handleCreate = () => { if (onGenerate && !isGenerating) { onGenerate({ theme, age, sections: [selectedSection] }); } }; // Use generated result or default preview const previewTheme = generatedSheet ? generatedSheet.title : (theme || 'Unicorn & Rainbow'); const previewSubtitle = generatedSheet ? generatedSheet.subtitle : 'Coloring & Counting'; const generatePDF = async () => { const element = document.getElementById('sheet-preview'); const canvas = await html2canvas(element); const data = canvas.toDataURL('image/png'); const pdf = new jsPDF(); const imgProperties = pdf.getImageProperties(data); const pdfWidth = pdf.internal.pageSize.getWidth(); const pdfHeight = (imgProperties.height * pdfWidth) / imgProperties.width; pdf.addImage(data, 'PNG', 0, 0, pdfWidth, pdfHeight); return pdf; }; const handleDownload = async () => { try { const pdf = await generatePDF(); pdf.save(`${previewTheme.replace(/\s+/g, '_')}.pdf`); } catch (err) { console.error("PDF generation failed:", err); } }; const handlePrint = async () => { try { const pdf = await generatePDF(); pdf.autoPrint(); window.open(pdf.output('bloburl'), '_blank'); } catch (err) { console.error("PDF print failed:", err); } }; return (
{/* ... Left side controls remain unchanged ... */}
Instantly create personalized learning pages for your kid.

Just add imagination! We use AI to generate educational worksheets tailored to your child's interests.

{/* Theme Input */}
setTheme(e.target.value)} />
{/* Age Slider */}
3 to 7 years
setAge(parseInt(e.target.value))} className="w-full h-3 bg-slate-100 rounded-lg appearance-none cursor-pointer accent-primary-600 disabled:opacity-50" />
34567
{/* Sections */}
{sections.map(section => { const isSelected = selectedSection === section.id; return ( ) })}
{/* Actions */}
{/* Right Side - Preview */}
{isGenerating && (
Designing your sheet... Adding some magic ✨ )}

{previewTheme}

{previewSubtitle}

{generatedSheet ? (
{generatedSheet.sections && generatedSheet.sections.map((sec, idx) => (
{sec.type}
{/* Handle both new content_svg and legacy content fields */} {(sec.content_svg || sec.content || '').trim().startsWith(' ) : (
{sec.content_svg || sec.content}
)}
))}
) : ( <> {/* Mock Content for Default View */}
🦄
{[1, 2, 3, 4, 5].map(n => (
{n}
))}
)}
); };