function MainComponent() { const [role, setRole] = useState(null); const [sessionCode, setSessionCode] = useState(""); const [error, setError] = useState(null); const [loading, setLoading] = useState(false); const handleCreateSession = async ()=>{ try { setLoading(true); setError(null); const response = await fetch("/api/createsession", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({}) }); if (!response.ok) { throw new Error(`Error del servidor: ${response.status}`); } const data = await response.json(); if (!data.success || !data.session) { throw new Error(data.error || "Error al crear la sesión: respuesta inválida"); } if (!data.session.session_code) { throw new Error("La sesión creada no tiene un código válido"); } window.location.href = `/writer?code=${data.session.session_code}`; } catch (err) { console.error("Error al crear la sesión:", err); setError(err.message || "Error al crear la sesión"); } finally{ setLoading(false); } }; const handleJoinSession = async (e)=>{ e.preventDefault(); try { setLoading(true); setError(null); const response = await fetch("/api/get-session", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ session_code: sessionCode }) }); if (!response.ok) { throw new Error("Error al unirse a la sesión"); } const data = await response.json(); if (data.success && data.session) { window.location.assign(`/reader?code=${sessionCode}`); } else { throw new Error(data.error || "Sesión no encontrada"); } } catch (err) { console.error("Error joining session:", err); setError(err.message); } finally{ setLoading(false); } }; return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("head", { __source: { fileName: "", lineNumber: 78, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("title", { __source: { fileName: "", lineNumber: 79, columnNumber: 9 }, __self: this }, "The Big Text - Tu mensaje. En grande. En tiempo real."), /*#__PURE__*/ React.createElement("link", { rel: "icon", type: "image/png", href: "https://ucarecdn.com/2bef5756-05c4-436c-b76f-56e5b41f01b4/-/format/auto/", __source: { fileName: "", lineNumber: 80, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 85, columnNumber: 9 }, __self: this }, ` :root { color-scheme: light dark; } .dark { color-scheme: dark; } `)), /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-50 text-black flex items-center justify-center p-4", __source: { fileName: "", lineNumber: 95, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-sm w-full space-y-6 text-center", __source: { fileName: "", lineNumber: 96, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-center", __source: { fileName: "", lineNumber: 97, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/2bef5756-05c4-436c-b76f-56e5b41f01b4/-/format/auto/", alt: "The Big Text Logo", className: "w-24 h-24", __source: { fileName: "", lineNumber: 98, columnNumber: 13 }, __self: this })), !role ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 107, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 108, columnNumber: 17 }, __self: this }, "The Big Text"), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 109, columnNumber: 17 }, __self: this }, "Tu mensaje. En grande. En tiempo real.")), /*#__PURE__*/ React.createElement("div", { className: "space-y-3", __source: { fileName: "", lineNumber: 114, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setRole("writer"), className: "w-full bg-black hover:bg-gray-800 text-white font-medium py-3 px-4 rounded-lg transition-colors text-sm", __source: { fileName: "", lineNumber: 115, columnNumber: 17 }, __self: this }, "Soy Escritor"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setRole("reader"), className: "w-full border border-black hover:bg-gray-100 text-black font-medium py-3 px-4 rounded-lg transition-colors text-sm", __source: { fileName: "", lineNumber: 121, columnNumber: 17 }, __self: this }, "Soy Lector")), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg shadow-sm border border-gray-100", __source: { fileName: "", lineNumber: 129, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-sm font-medium mb-3", __source: { fileName: "", lineNumber: 130, columnNumber: 17 }, __self: this }, "¿Cómo funciona?"), /*#__PURE__*/ React.createElement("ol", { className: "space-y-3 text-left", __source: { fileName: "", lineNumber: 131, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: "flex items-start text-sm", __source: { fileName: "", lineNumber: 132, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "flex items-center justify-center w-5 h-5 bg-black text-white rounded-full mr-2 flex-shrink-0 text-xs", __source: { fileName: "", lineNumber: 133, columnNumber: 21 }, __self: this }, "1"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 136, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-medium", __source: { fileName: "", lineNumber: 137, columnNumber: 23 }, __self: this }, "Elige tu rol"), /*#__PURE__*/ React.createElement("p", { className: "text-xs text-gray-600", __source: { fileName: "", lineNumber: 138, columnNumber: 23 }, __self: this }, "Escritor o lector"))), /*#__PURE__*/ React.createElement("li", { className: "flex items-start text-sm", __source: { fileName: "", lineNumber: 141, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "flex items-center justify-center w-5 h-5 bg-black text-white rounded-full mr-2 flex-shrink-0 text-xs", __source: { fileName: "", lineNumber: 142, columnNumber: 21 }, __self: this }, "2"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 145, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-medium", __source: { fileName: "", lineNumber: 146, columnNumber: 23 }, __self: this }, "Comparte el código"), /*#__PURE__*/ React.createElement("p", { className: "text-xs text-gray-600", __source: { fileName: "", lineNumber: 147, columnNumber: 23 }, __self: this }, "Conecta escritor y lector"))), /*#__PURE__*/ React.createElement("li", { className: "flex items-start text-sm", __source: { fileName: "", lineNumber: 152, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "flex items-center justify-center w-5 h-5 bg-black text-white rounded-full mr-2 flex-shrink-0 text-xs", __source: { fileName: "", lineNumber: 153, columnNumber: 21 }, __self: this }, "3"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 156, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-medium", __source: { fileName: "", lineNumber: 157, columnNumber: 23 }, __self: this }, "¡Listo!"), /*#__PURE__*/ React.createElement("p", { className: "text-xs text-gray-600", __source: { fileName: "", lineNumber: 158, columnNumber: 23 }, __self: this }, "Texto en tiempo real")))))) : /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 167, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold", __source: { fileName: "", lineNumber: 168, columnNumber: 15 }, __self: this }, role === "writer" ? "Crear Nueva Sesión" : "Unirse a Sesión"), role === "writer" ? /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 173, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleCreateSession, disabled: loading, className: "w-full bg-black hover:bg-gray-800 disabled:bg-gray-400 text-white font-medium py-3 px-4 rounded-lg transition-colors text-sm", __source: { fileName: "", lineNumber: 174, columnNumber: 19 }, __self: this }, loading ? "Creando..." : "Crear Nueva Sesión")) : /*#__PURE__*/ React.createElement("form", { onSubmit: handleJoinSession, className: "space-y-3", __source: { fileName: "", lineNumber: 183, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: sessionCode, onChange: (e)=>setSessionCode(e.target.value.toUpperCase()), placeholder: "Ingresa el código", className: "w-full border border-gray-300 text-black px-4 py-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-black text-sm", maxLength: 6, required: true, name: "sessionCode", __source: { fileName: "", lineNumber: 184, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: loading || !sessionCode, className: "w-full bg-black hover:bg-gray-800 disabled:bg-gray-400 text-white font-medium py-3 px-4 rounded-lg transition-colors text-sm", __source: { fileName: "", lineNumber: 196, columnNumber: 19 }, __self: this }, loading ? "Uniéndose..." : "Unirse a Sesión")), error && /*#__PURE__*/ React.createElement("div", { className: "text-red-600 text-sm", __source: { fileName: "", lineNumber: 206, columnNumber: 25 }, __self: this }, error), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setRole(null); setError(null); }, className: "text-gray-600 hover:text-black text-sm", __source: { fileName: "", lineNumber: 208, columnNumber: 15 }, __self: this }, "← Volver"))))); }