function MainComponent() { const [topic, setTopic] = useState(""); const [numQuestions, setNumQuestions] = useState(3); const [questions, setQuestions] = useState([]); const [currentQuestion, setCurrentQuestion] = useState(0); const [selectedOption, setSelectedOption] = useState(null); const [isVerified, setIsVerified] = useState(false); const [score, setScore] = useState(0); const [isGenerating, setIsGenerating] = useState(false); const [error, setError] = useState(null); const [isComplete, setIsComplete] = useState(false); const handleGenerate = async ()=>{ if (!topic.trim()) return; setIsGenerating(true); setError(null); try { const response = await fetch("/api/generar-cuestionario", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ prompt: topic, numQuestions: numQuestions }) }); const data = await response.json(); if (data.error) throw new Error(data.error); setQuestions(data.questions); setCurrentQuestion(0); setScore(0); setIsComplete(false); } catch (err) { setError("No se pudo generar el cuestionario. Por favor intente nuevamente."); } finally{ setIsGenerating(false); } }; const handleVerify = ()=>{ if (selectedOption === null) return; if (questions[currentQuestion].options[selectedOption] === questions[currentQuestion].correctAnswer) { setScore(score + 1); } setIsVerified(true); }; const handleNext = ()=>{ if (currentQuestion === questions.length - 1) { setIsComplete(true); } else { setCurrentQuestion(currentQuestion + 1); setSelectedOption(null); setIsVerified(false); } }; const handleDownload = async ()=>{ if (!questions.length) return; try { const response = await fetch("/api/exportar-html", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ questions: questions }) }); if (!response.ok) throw new Error("Error en la respuesta del servidor"); const data = await response.json(); if (!data.html) throw new Error("No se recibió el contenido HTML"); const blob = new Blob([ data.html ], { type: "text/html" }); const url = window.URL.createObjectURL(blob); const downloadLink = document.createElement("a"); downloadLink.href = url; downloadLink.download = "cuestionario.html"; document.body.appendChild(downloadLink); downloadLink.click(); document.body.removeChild(downloadLink); window.URL.revokeObjectURL(url); } catch (error) { console.error("Error al descargar:", error); setError("No se pudo descargar el cuestionario. Por favor intente nuevamente."); } }; const getPollinationImage = (prompt)=>{ return `https://image.pollinations.ai/prompt/${encodeURIComponent(prompt)}`; }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-white dark:bg-gray-900 p-4 md:p-8", __source: { fileName: "", lineNumber: 94, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto", __source: { fileName: "", lineNumber: 95, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-gray-900 dark:text-white mb-8", __source: { fileName: "", lineNumber: 96, columnNumber: 9 }, __self: this }, "Generador de Cuestionarios (Pollinations)"), /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 99, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex gap-4 mb-4", __source: { fileName: "", lineNumber: 100, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: topic, onChange: (e)=>setTopic(e.target.value), placeholder: "Ingresa el tema del cuestionario", className: "flex-1 p-3 rounded-md border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white", __source: { fileName: "", lineNumber: 101, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("select", { value: numQuestions, onChange: (e)=>setNumQuestions(Number(e.target.value)), className: "p-3 rounded-md border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white", __source: { fileName: "", lineNumber: 108, columnNumber: 13 }, __self: this }, [ 3, 5, 7, 10 ].map((num)=>/*#__PURE__*/ React.createElement("option", { key: num, value: num, __source: { fileName: "", lineNumber: 114, columnNumber: 17 }, __self: this }, num, " preguntas")))), /*#__PURE__*/ React.createElement("div", { className: "flex gap-3 flex-wrap", __source: { fileName: "", lineNumber: 120, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleGenerate, disabled: isGenerating || !topic.trim(), className: "px-6 py-3 bg-gray-900 dark:bg-gray-800 text-white rounded-md hover:bg-gray-700 dark:hover:bg-gray-700 transition-colors disabled:opacity-50", __source: { fileName: "", lineNumber: 121, columnNumber: 13 }, __self: this }, isGenerating ? "Generando..." : "Generar Cuestionario"), questions.length > 0 && /*#__PURE__*/ React.createElement("button", { onClick: handleDownload, className: "px-6 py-3 bg-gray-900 dark:bg-gray-800 text-white rounded-md hover:bg-gray-700 dark:hover:bg-gray-700 transition-colors", __source: { fileName: "", lineNumber: 129, columnNumber: 15 }, __self: this }, "Descargar HTML"))), error && /*#__PURE__*/ React.createElement("div", { className: "p-4 mb-6 bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 rounded-md", __source: { fileName: "", lineNumber: 140, columnNumber: 11 }, __self: this }, error), isGenerating && /*#__PURE__*/ React.createElement("div", { className: "text-center py-12", __source: { fileName: "", lineNumber: 146, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "animate-pulse text-gray-700 dark:text-gray-300", __source: { fileName: "", lineNumber: 147, columnNumber: 13 }, __self: this }, "Generando preguntas...")), questions.length > 0 && !isComplete && /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", __source: { fileName: "", lineNumber: 154, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white dark:bg-gray-800 rounded-lg p-6 shadow-sm flex items-center justify-center", __source: { fileName: "", lineNumber: 155, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: getPollinationImage(questions[currentQuestion].question), alt: "Imagen relacionada con la pregunta", className: "max-w-full h-auto rounded-lg", __source: { fileName: "", lineNumber: 156, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "bg-white dark:bg-gray-800 rounded-lg p-6 shadow-sm", __source: { fileName: "", lineNumber: 162, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 163, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm text-gray-500 dark:text-gray-400", __source: { fileName: "", lineNumber: 164, columnNumber: 17 }, __self: this }, "Pregunta ", currentQuestion + 1, " de ", questions.length), /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold text-gray-900 dark:text-white mt-2", __source: { fileName: "", lineNumber: 167, columnNumber: 17 }, __self: this }, questions[currentQuestion].question)), /*#__PURE__*/ React.createElement("div", { className: "space-y-3", __source: { fileName: "", lineNumber: 171, columnNumber: 15 }, __self: this }, questions[currentQuestion].options.map((option, index)=>/*#__PURE__*/ React.createElement("button", { key: index, onClick: ()=>!isVerified && setSelectedOption(index), className: `w-full p-4 text-left rounded-md transition-colors ${selectedOption === index ? "bg-gray-900 text-white" : "bg-gray-50 dark:bg-gray-700 text-gray-700 dark:text-gray-200"} ${isVerified && option === questions[currentQuestion].correctAnswer ? "bg-green-100 text-[#1a5e20] dark:bg-green-900/20 border-green-500" : ""}`, disabled: isVerified, __source: { fileName: "", lineNumber: 173, columnNumber: 19 }, __self: this }, option))), /*#__PURE__*/ React.createElement("div", { className: "mt-6 flex gap-3", __source: { fileName: "", lineNumber: 193, columnNumber: 15 }, __self: this }, !isVerified ? /*#__PURE__*/ React.createElement("button", { onClick: handleVerify, disabled: selectedOption === null, className: "px-6 py-3 bg-gray-900 dark:bg-gray-800 text-white rounded-md hover:bg-gray-700 dark:hover:bg-gray-700 transition-colors disabled:opacity-50", __source: { fileName: "", lineNumber: 195, columnNumber: 19 }, __self: this }, "Verificar") : /*#__PURE__*/ React.createElement("button", { onClick: handleNext, className: "px-6 py-3 bg-gray-900 dark:bg-gray-800 text-white rounded-md hover:bg-gray-700 dark:hover:bg-gray-700 transition-colors", __source: { fileName: "", lineNumber: 203, columnNumber: 19 }, __self: this }, currentQuestion === questions.length - 1 ? "Finalizar" : "Siguiente")))), isComplete && /*#__PURE__*/ React.createElement("div", { className: "bg-white dark:bg-gray-800 rounded-lg p-6 text-center", __source: { fileName: "", lineNumber: 218, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-gray-900 dark:text-white mb-4", __source: { fileName: "", lineNumber: 219, columnNumber: 13 }, __self: this }, "¡Cuestionario Completado!"), /*#__PURE__*/ React.createElement("p", { className: "text-xl text-gray-700 dark:text-gray-300 mb-6", __source: { fileName: "", lineNumber: 222, columnNumber: 13 }, __self: this }, "Tu puntuación: ", score, "/", questions.length)))); }