function MainComponent() { const [state, setState] = useState({ activeTab: "list", surveys: [], selectedSurvey: null, createForm: { question: "", choices: [ "", "", "" ], maxResponses: 1, showCodes: false, generatedCodes: [] }, takeForm: { password: "", selectedChoice: "", error: "" } }); const updateState = (updates)=>{ setState((current)=>({ ...current, ...updates })); }; const updateCreateForm = (updates)=>{ setState((current)=>({ ...current, createForm: { ...current.createForm, ...updates } })); }; const updateTakeForm = (updates)=>{ setState((current)=>({ ...current, takeForm: { ...current.takeForm, ...updates } })); }; const generateAccessCodes = (count)=>{ const codes = []; const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"; for(let i = 0; i < count; i++){ let code = ""; for(let j = 0; j < 6; j++){ code += characters.charAt(Math.floor(Math.random() * characters.length)); } codes.push(code); } return codes; }; const handleCreateSurvey = async (e)=>{ e.preventDefault(); const { question, choices, maxResponses } = state.createForm; const codes = generateAccessCodes(maxResponses); const results = choices.map((choice)=>({ choice, votes: 0 })); try { const response = await fetch("/api/db/survey_3options1", { method: "POST", body: JSON.stringify({ query: `INSERT INTO surveys (question, choices, max_responses, responses, access_codes, used_codes, results) VALUES (?, ?, ?, ?, ?, ?, ?)`, values: [ question, JSON.stringify(choices), maxResponses, 0, JSON.stringify(codes), JSON.stringify([]), JSON.stringify(results) ] }) }); const data = await response.json(); const newSurvey = { id: data.lastID, question, choices, maxResponses, responses: 0, accessCodes: codes, usedCodes: [], results }; updateState({ surveys: [ ...state.surveys, newSurvey ] }); updateCreateForm({ generatedCodes: codes, showCodes: true }); } catch (error) { console.error("Error creating survey:", error); } }; const handleCreateAnother = ()=>{ updateCreateForm({ question: "", choices: [ "", "", "" ], maxResponses: 1, showCodes: false, generatedCodes: [] }); }; const handleSubmitResponse = async (e)=>{ e.preventDefault(); const { password, selectedChoice } = state.takeForm; const survey = state.surveys.find((s)=>s.id === state.selectedSurvey.id); if (!survey.accessCodes.includes(password)) { updateTakeForm({ error: "Invalid access code" }); return; } if (survey.usedCodes.includes(password)) { updateTakeForm({ error: "This access code has already been used" }); return; } if (survey.responses >= survey.maxResponses) { updateTakeForm({ error: "Survey has reached maximum responses" }); return; } const updatedResults = survey.results.map((result)=>result.choice === selectedChoice ? { ...result, votes: result.votes + 1 } : result); try { await fetch("/api/db/survey_3options1", { method: "POST", body: JSON.stringify({ query: `UPDATE surveys SET responses = responses + 1, used_codes = ?, results = ? WHERE id = ?`, values: [ JSON.stringify([ ...survey.usedCodes, password ]), JSON.stringify(updatedResults), survey.id ] }) }); const updatedSurvey = { ...survey, responses: survey.responses + 1, usedCodes: [ ...survey.usedCodes, password ], results: updatedResults }; updateState({ surveys: state.surveys.map((s)=>s.id === updatedSurvey.id ? updatedSurvey : s), selectedSurvey: updatedSurvey, activeTab: "results" }); updateTakeForm({ password: "", selectedChoice: "", error: "" }); } catch (error) { console.error("Error submitting response:", error); updateTakeForm({ error: "Failed to submit response" }); } }; useEffect(()=>{ const loadSurveys = async ()=>{ try { const response = await fetch("/api/db/survey_3options1", { method: "POST", body: JSON.stringify({ query: "SELECT * FROM surveys" }) }); const data = await response.json(); if (data.length > 0) { const parsedSurveys = data.map((survey)=>({ ...survey, choices: JSON.parse(survey.choices), accessCodes: JSON.parse(survey.access_codes), usedCodes: JSON.parse(survey.used_codes), results: JSON.parse(survey.results) })); updateState({ surveys: parsedSurveys }); } } catch (error) { console.error("Error loading surveys:", error); } }; loadSurveys(); const interval = setInterval(loadSurveys, 5000); return ()=>clearInterval(interval); }, []); const renderList = ()=>/*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow", __source: { fileName: "", lineNumber: 203, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-6", __source: { fileName: "", lineNumber: 204, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold font-roboto", __source: { fileName: "", lineNumber: 205, columnNumber: 9 }, __self: this }, "All Surveys"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>updateState({ activeTab: "create" }), className: "bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 font-roboto", __source: { fileName: "", lineNumber: 206, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-plus mr-2", __source: { fileName: "", lineNumber: 210, columnNumber: 11 }, __self: this }), "Create Survey")), state.surveys.map((survey)=>/*#__PURE__*/ React.createElement("div", { key: survey.id, className: "border-b last:border-b-0 p-6", __source: { fileName: "", lineNumber: 214, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-4", __source: { fileName: "", lineNumber: 215, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 216, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 217, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold font-roboto mb-2", __source: { fileName: "", lineNumber: 218, columnNumber: 17 }, __self: this }, survey.question), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 font-roboto", __source: { fileName: "", lineNumber: 221, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chart-bar mr-2", __source: { fileName: "", lineNumber: 222, columnNumber: 19 }, __self: this }), survey.responses, " of ", survey.maxResponses, " responses")), /*#__PURE__*/ React.createElement("div", { className: "flex gap-4", __source: { fileName: "", lineNumber: 226, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>updateState({ selectedSurvey: survey, activeTab: "take" }), disabled: survey.responses >= survey.maxResponses, className: `px-4 py-2 rounded-lg border font-roboto ${survey.responses >= survey.maxResponses ? "bg-gray-100 text-gray-400 border-gray-300 cursor-not-allowed" : "text-blue-600 hover:text-blue-800 border-blue-600 hover:border-blue-800"}`, __source: { fileName: "", lineNumber: 227, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-pencil-alt mr-2", __source: { fileName: "", lineNumber: 241, columnNumber: 19 }, __self: this }), "Take Survey"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>updateState({ selectedSurvey: survey, activeTab: "results" }), className: "text-gray-600 hover:text-gray-800 px-4 py-2 rounded-lg border border-gray-300 hover:border-gray-400 font-roboto", __source: { fileName: "", lineNumber: 243, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chart-pie mr-2", __source: { fileName: "", lineNumber: 252, columnNumber: 19 }, __self: this }), "View Results"))), /*#__PURE__*/ React.createElement("div", { className: "w-full bg-gray-200 rounded-full h-2", __source: { fileName: "", lineNumber: 256, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-blue-600 h-2 rounded-full transition-all duration-300", style: { width: `${survey.responses / survey.maxResponses * 100}%` }, __source: { fileName: "", lineNumber: 257, columnNumber: 15 }, __self: this })))))); const renderCreate = ()=>/*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow p-6", __source: { fileName: "", lineNumber: 271, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-6 font-roboto", __source: { fileName: "", lineNumber: 272, columnNumber: 7 }, __self: this }, "Create New Survey"), state.createForm.showCodes ? /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 274, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-green-50 border border-green-200 rounded-lg p-4 mb-6", __source: { fileName: "", lineNumber: 275, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-green-700 font-roboto", __source: { fileName: "", lineNumber: 276, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check-circle mr-2", __source: { fileName: "", lineNumber: 277, columnNumber: 15 }, __self: this }), "Survey created successfully!")), /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-roboto", __source: { fileName: "", lineNumber: 281, columnNumber: 11 }, __self: this }, "Access Codes"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 md:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 282, columnNumber: 11 }, __self: this }, state.createForm.generatedCodes.map((code, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-gray-50 p-3 rounded-lg text-center border border-gray-200", __source: { fileName: "", lineNumber: 284, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-mono text-lg", __source: { fileName: "", lineNumber: 288, columnNumber: 17 }, __self: this }, code)))), /*#__PURE__*/ React.createElement("div", { className: "flex gap-4 mt-6", __source: { fileName: "", lineNumber: 292, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleCreateAnother, className: "flex-1 bg-blue-600 text-white py-2 px-4 rounded hover:bg-blue-700 font-roboto", __source: { fileName: "", lineNumber: 293, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-plus mr-2", __source: { fileName: "", lineNumber: 297, columnNumber: 15 }, __self: this }), "Create Another Survey"))) : /*#__PURE__*/ React.createElement("form", { onSubmit: handleCreateSurvey, className: "space-y-4", __source: { fileName: "", lineNumber: 302, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 303, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-roboto mb-2", __source: { fileName: "", lineNumber: 304, columnNumber: 13 }, __self: this }, "Survey Question"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "question", value: state.createForm.question, onChange: (e)=>updateCreateForm({ question: e.target.value }), className: "w-full p-2 border rounded", required: true, __source: { fileName: "", lineNumber: 305, columnNumber: 13 }, __self: this })), state.createForm.choices.map((choice, index)=>/*#__PURE__*/ React.createElement("div", { key: index, __source: { fileName: "", lineNumber: 315, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-roboto mb-2", __source: { fileName: "", lineNumber: 316, columnNumber: 15 }, __self: this }, "Choice ", index + 1), /*#__PURE__*/ React.createElement("input", { type: "text", value: choice, onChange: (e)=>{ const newChoices = [ ...state.createForm.choices ]; newChoices[index] = e.target.value; updateCreateForm({ choices: newChoices }); }, className: "w-full p-2 border rounded", required: true, __source: { fileName: "", lineNumber: 319, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 332, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-roboto mb-2", __source: { fileName: "", lineNumber: 333, columnNumber: 13 }, __self: this }, "Maximum Responses"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "maxResponses", min: "1", value: state.createForm.maxResponses, onChange: (e)=>updateCreateForm({ maxResponses: parseInt(e.target.value) }), className: "w-full p-2 border rounded", required: true, __source: { fileName: "", lineNumber: 334, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-blue-600 text-white py-2 px-4 rounded hover:bg-blue-700 font-roboto", __source: { fileName: "", lineNumber: 346, columnNumber: 11 }, __self: this }, "Create Survey"))); const renderTake = ()=>/*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow p-6", __source: { fileName: "", lineNumber: 358, columnNumber: 5 }, __self: this }, state.selectedSurvey && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-6 font-roboto", __source: { fileName: "", lineNumber: 361, columnNumber: 11 }, __self: this }, state.selectedSurvey.question), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 364, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between text-sm text-gray-600 mb-2", __source: { fileName: "", lineNumber: 365, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 366, columnNumber: 15 }, __self: this }, state.selectedSurvey.responses, " responses"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 367, columnNumber: 15 }, __self: this }, state.selectedSurvey.maxResponses - state.selectedSurvey.responses, " ", "remaining")), /*#__PURE__*/ React.createElement("div", { className: "w-full bg-gray-200 rounded-full h-2", __source: { fileName: "", lineNumber: 373, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-blue-600 h-2 rounded-full transition-all duration-300", style: { width: `${state.selectedSurvey.responses / state.selectedSurvey.maxResponses * 100}%` }, __source: { fileName: "", lineNumber: 374, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmitResponse, className: "space-y-4", __source: { fileName: "", lineNumber: 386, columnNumber: 11 }, __self: this }, state.selectedSurvey.choices.map((choice, index)=>/*#__PURE__*/ React.createElement("label", { key: index, className: "flex items-center space-x-3 cursor-pointer", __source: { fileName: "", lineNumber: 388, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "radio", name: "choice", value: choice, onChange: (e)=>updateTakeForm({ selectedChoice: e.target.value }), className: "h-4 w-4 text-blue-600", required: true, __source: { fileName: "", lineNumber: 392, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-gray-700 font-roboto", __source: { fileName: "", lineNumber: 402, columnNumber: 17 }, __self: this }, choice))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 405, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-roboto mb-2", __source: { fileName: "", lineNumber: 406, columnNumber: 15 }, __self: this }, "Access Code"), /*#__PURE__*/ React.createElement("input", { type: "text", value: state.takeForm.password, onChange: (e)=>updateTakeForm({ password: e.target.value.toUpperCase() }), className: "w-full p-2 border rounded font-mono", required: true, __source: { fileName: "", lineNumber: 407, columnNumber: 15 }, __self: this })), state.takeForm.error && /*#__PURE__*/ React.createElement("div", { className: "bg-red-50 border border-red-200 rounded-lg p-3", __source: { fileName: "", lineNumber: 418, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-red-600 text-sm", __source: { fileName: "", lineNumber: 419, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-exclamation-circle mr-2", __source: { fileName: "", lineNumber: 420, columnNumber: 19 }, __self: this }), state.takeForm.error)), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-blue-600 text-white py-2 px-4 rounded hover:bg-blue-700 font-roboto", __source: { fileName: "", lineNumber: 425, columnNumber: 13 }, __self: this }, "Submit Response")))); const renderResults = ()=>/*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow p-6", __source: { fileName: "", lineNumber: 438, columnNumber: 5 }, __self: this }, state.selectedSurvey && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-6 font-roboto", __source: { fileName: "", lineNumber: 441, columnNumber: 11 }, __self: this }, state.selectedSurvey.question), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 mb-6 font-roboto", __source: { fileName: "", lineNumber: 444, columnNumber: 11 }, __self: this }, "Total Responses: ", state.selectedSurvey.responses, " of", " ", state.selectedSurvey.maxResponses), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 448, columnNumber: 11 }, __self: this }, state.selectedSurvey.results.map((result)=>{ const percentage = state.selectedSurvey.responses > 0 ? (result.votes / state.selectedSurvey.responses * 100).toFixed(1) : 0; return /*#__PURE__*/ React.createElement("div", { key: result.choice, className: "relative", __source: { fileName: "", lineNumber: 458, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between mb-2", __source: { fileName: "", lineNumber: 459, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-roboto flex items-center", __source: { fileName: "", lineNumber: 460, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 461, columnNumber: 23 }, __self: this }, result.choice), /*#__PURE__*/ React.createElement("span", { className: "ml-4 text-gray-500", __source: { fileName: "", lineNumber: 462, columnNumber: 23 }, __self: this }, "(", result.votes, " votes)")), /*#__PURE__*/ React.createElement("span", { className: "font-roboto", __source: { fileName: "", lineNumber: 466, columnNumber: 21 }, __self: this }, percentage, "%")), /*#__PURE__*/ React.createElement("div", { className: "h-4 bg-gray-200 rounded-full overflow-hidden", __source: { fileName: "", lineNumber: 468, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-full bg-blue-500 rounded-full transition-all duration-300", style: { width: `${percentage}%` }, __source: { fileName: "", lineNumber: 469, columnNumber: 21 }, __self: this }))); })))); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-50 p-8", __source: { fileName: "", lineNumber: 484, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 485, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex border-b mb-6", __source: { fileName: "", lineNumber: 486, columnNumber: 9 }, __self: this }, [ "list", "create", "take", "results" ].map((tab)=>/*#__PURE__*/ React.createElement("button", { key: tab, onClick: ()=>updateState({ activeTab: tab }), className: `px-6 py-3 font-roboto ${state.activeTab === tab ? "border-b-2 border-blue-600 text-blue-600" : "text-gray-500 hover:text-gray-700"}`, __source: { fileName: "", lineNumber: 488, columnNumber: 13 }, __self: this }, tab.charAt(0).toUpperCase() + tab.slice(1)))), state.activeTab === "list" && renderList(), state.activeTab === "create" && renderCreate(), state.activeTab === "take" && renderTake(), state.activeTab === "results" && renderResults())); }