function MainComponent() { const [error, setError] = useState(null); const [loading, setLoading] = useState(false); const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [name, setName] = useState(""); const [role, setRole] = useState("student"); const [showSubscription, setShowSubscription] = useState(false); const [selectedPlan, setSelectedPlan] = useState(null); const [passwordStrength, setPasswordStrength] = useState(""); const subscriptionPlans = [ { id: "basic", name: "Basic", price: 29, features: [ "Up to 2 classrooms", "Basic analytics", "Email support" ] }, { id: "pro", name: "Pro", price: 79, features: [ "Unlimited classrooms", "Advanced analytics", "Priority support", "AI Course Generator" ] } ]; const { signUpWithCredentials } = useAuth(); useEffect(()=>{ if (role === "teacher") { setShowSubscription(true); } else { setShowSubscription(false); setSelectedPlan(null); } }, [ role ]); const checkPasswordStrength = (pwd)=>{ if (pwd.length < 8) return "weak"; if (pwd.length < 12 && /[A-Z]/.test(pwd) && /[0-9]/.test(pwd)) return "medium"; if (pwd.length >= 12 && /[A-Z]/.test(pwd) && /[0-9]/.test(pwd) && /[!@#$%^&*]/.test(pwd)) return "strong"; return "medium"; }; const handlePasswordChange = (e)=>{ const pwd = e.target.value; setPassword(pwd); setPasswordStrength(checkPasswordStrength(pwd)); }; const handleSubscription = async ()=>{ try { const response = await fetch("/api/create-subscription", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ plan: selectedPlan, email, name }) }); if (!response.ok) { throw new Error("Failed to create subscription"); } const { sessionUrl } = await response.json(); window.location.href = sessionUrl; } catch (err) { console.error(err); setError("Failed to set up subscription. Please try again."); setLoading(false); } }; const onSubmit = async (e)=>{ e.preventDefault(); setLoading(true); setError(null); if (!email || !password || !name) { setError("Please fill in all required fields"); setLoading(false); return; } if (password.length < 8) { setError("Password must be at least 8 characters long"); setLoading(false); return; } if (role === "teacher" && !selectedPlan) { setError("Please select a subscription plan"); setLoading(false); return; } try { if (role === "teacher") { await handleSubscription(); return; } await signUpWithCredentials({ email, password, name, role, callbackUrl: "/dashboard", redirect: true }); } catch (err) { const errorMessages = { OAuthSignin: "Couldn’t start sign-up. Please try again or use a different method.", OAuthCallback: "Sign-up failed after redirecting. Please try again.", OAuthCreateAccount: "Couldn’t create an account with this sign-up option. Try another one.", EmailCreateAccount: "This email can’t be used. It may already be registered.", Callback: "Something went wrong during sign-up. Please try again.", OAuthAccountNotLinked: "This account is linked to a different sign-in method. Try using that instead.", CredentialsSignin: "Invalid email or password. If you already have an account, try signing in instead.", AccessDenied: "You don’t have permission to sign up.", Configuration: "Sign-up isn’t working right now. Please try again later.", Verification: "Your sign-up link has expired. Request a new one." }; setError(errorMessages[err.message] || "Something went wrong. Please try again."); setLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex min-h-screen w-full items-center justify-center bg-gray-900 p-4", __source: { fileName: "", lineNumber: 153, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("form", { noValidate: true, onSubmit: onSubmit, className: "w-full max-w-md rounded-2xl bg-gray-800 p-8 shadow-xl", __source: { fileName: "", lineNumber: 154, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "mb-8 text-center text-3xl font-bold text-white", __source: { fileName: "", lineNumber: 159, columnNumber: 9 }, __self: this }, "Create Your Account"), /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 163, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 164, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-300", __source: { fileName: "", lineNumber: 165, columnNumber: 13 }, __self: this }, "Full Name"), /*#__PURE__*/ React.createElement("div", { className: "overflow-hidden rounded-lg border border-gray-600 bg-gray-700 px-4 py-3 focus-within:border-blue-500 focus-within:ring-1 focus-within:ring-blue-500", __source: { fileName: "", lineNumber: 168, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { required: true, name: "name", type: "text", value: name, onChange: (e)=>setName(e.target.value), placeholder: "Enter your full name", className: "w-full bg-transparent text-lg text-white placeholder-gray-400 outline-none", __source: { fileName: "", lineNumber: 169, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 181, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-300", __source: { fileName: "", lineNumber: 182, columnNumber: 13 }, __self: this }, "Email"), /*#__PURE__*/ React.createElement("div", { className: "overflow-hidden rounded-lg border border-gray-600 bg-gray-700 px-4 py-3 focus-within:border-blue-500 focus-within:ring-1 focus-within:ring-blue-500", __source: { fileName: "", lineNumber: 185, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { required: true, name: "email", type: "email", value: email, onChange: (e)=>setEmail(e.target.value), placeholder: "Enter your email", className: "w-full bg-transparent text-lg text-white placeholder-gray-400 outline-none", __source: { fileName: "", lineNumber: 186, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 198, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-300", __source: { fileName: "", lineNumber: 199, columnNumber: 13 }, __self: this }, "Password"), /*#__PURE__*/ React.createElement("div", { className: "overflow-hidden rounded-lg border border-gray-600 bg-gray-700 px-4 py-3 focus-within:border-blue-500 focus-within:ring-1 focus-within:ring-blue-500", __source: { fileName: "", lineNumber: 202, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { required: true, name: "password", type: "password", value: password, onChange: handlePasswordChange, className: "w-full rounded-lg bg-transparent text-lg text-white placeholder-gray-400 outline-none", placeholder: "Enter your password (min 8 characters)", __source: { fileName: "", lineNumber: 203, columnNumber: 15 }, __self: this })), password && /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2 mt-2", __source: { fileName: "", lineNumber: 214, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1 h-2 bg-gray-600 rounded-full overflow-hidden", __source: { fileName: "", lineNumber: 215, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `h-full transition-all ${passwordStrength === "weak" ? "bg-red-500 w-1/3" : passwordStrength === "medium" ? "bg-yellow-500 w-2/3" : "bg-green-500 w-full"}`, __source: { fileName: "", lineNumber: 216, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("span", { className: `text-xs ${passwordStrength === "weak" ? "text-red-400" : passwordStrength === "medium" ? "text-yellow-400" : "text-green-400"}`, __source: { fileName: "", lineNumber: 226, columnNumber: 17 }, __self: this }, passwordStrength)), /*#__PURE__*/ React.createElement("p", { className: "text-xs text-gray-400 mt-1", __source: { fileName: "", lineNumber: 239, columnNumber: 13 }, __self: this }, "Use at least 8 characters with uppercase, numbers, and symbols for a strong password")), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 245, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-300", __source: { fileName: "", lineNumber: 246, columnNumber: 13 }, __self: this }, "I am a"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 249, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "button", onClick: ()=>setRole("student"), className: `px-4 py-3 rounded-lg border ${role === "student" ? "border-blue-500 bg-blue-600 text-white" : "border-gray-600 text-gray-300 hover:border-blue-500 bg-gray-700"} transition-colors`, __source: { fileName: "", lineNumber: 250, columnNumber: 15 }, __self: this }, "Student"), /*#__PURE__*/ React.createElement("button", { type: "button", onClick: ()=>setRole("teacher"), className: `px-4 py-3 rounded-lg border ${role === "teacher" ? "border-blue-500 bg-blue-600 text-white" : "border-gray-600 text-gray-300 hover:border-blue-500 bg-gray-700"} transition-colors`, __source: { fileName: "", lineNumber: 261, columnNumber: 15 }, __self: this }, "Teacher"))), showSubscription && /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 276, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-medium text-white", __source: { fileName: "", lineNumber: 277, columnNumber: 15 }, __self: this }, "Choose Your Plan"), /*#__PURE__*/ React.createElement("div", { className: "grid gap-4", __source: { fileName: "", lineNumber: 280, columnNumber: 15 }, __self: this }, subscriptionPlans.map((plan)=>/*#__PURE__*/ React.createElement("div", { key: plan.id, onClick: ()=>setSelectedPlan(plan.id), className: `cursor-pointer rounded-lg border p-4 ${selectedPlan === plan.id ? "border-blue-500 bg-blue-600/20" : "border-gray-600 hover:border-blue-500"}`, __source: { fileName: "", lineNumber: 282, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-2", __source: { fileName: "", lineNumber: 291, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "text-white font-medium", __source: { fileName: "", lineNumber: 292, columnNumber: 23 }, __self: this }, plan.name), /*#__PURE__*/ React.createElement("span", { className: "text-blue-400", __source: { fileName: "", lineNumber: 293, columnNumber: 23 }, __self: this }, "$", plan.price, "/month")), /*#__PURE__*/ React.createElement("ul", { className: "space-y-2", __source: { fileName: "", lineNumber: 295, columnNumber: 21 }, __self: this }, plan.features.map((feature, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "text-gray-300 text-sm flex items-center", __source: { fileName: "", lineNumber: 297, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check text-green-400 mr-2", __source: { fileName: "", lineNumber: 301, columnNumber: 27 }, __self: this }), feature))))))), error && /*#__PURE__*/ React.createElement("div", { className: "rounded-lg bg-red-900 border border-red-500 p-3 text-sm text-red-300", __source: { fileName: "", lineNumber: 313, columnNumber: 13 }, __self: this }, error), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: loading, className: "w-full rounded-lg bg-blue-600 px-4 py-3 text-base font-medium text-white transition-colors hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-gray-800 disabled:opacity-50", __source: { fileName: "", lineNumber: 318, columnNumber: 11 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("span", { className: "flex items-center justify-center gap-2", __source: { fileName: "", lineNumber: 324, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin", __source: { fileName: "", lineNumber: 325, columnNumber: 17 }, __self: this }), role === "teacher" ? "Setting Up Subscription..." : "Creating Account...") : role === "teacher" ? "Continue to Payment" : "Create Account"), /*#__PURE__*/ React.createElement("p", { className: "text-center text-sm text-gray-400", __source: { fileName: "", lineNumber: 337, columnNumber: 11 }, __self: this }, "Already have an account?", " ", /*#__PURE__*/ React.createElement("a", { href: "/account/signin", className: "text-blue-400 hover:text-blue-300", __source: { fileName: "", lineNumber: 339, columnNumber: 13 }, __self: this }, "Sign in"))))); } async function handler({ redirectURL, priceId }) { const session = getSession(); if (!session?.user?.email) { return { error: "Authentication required" }; } try { // Get or create customer const customerData = await stripe.customers.list({ email: session.user.email, limit: 1 }); let [customer] = customerData?.data || []; if (!customer) { customer = await stripe.customers.create({ email: session.user.email, metadata: { userId: session.user.id } }); // Update user with new Stripe ID await sql` UPDATE auth_users SET stripe_id = ${customer.id} WHERE email = ${session.user.email} `; } // Create checkout session const checkoutSession = await stripe.checkout.sessions.create({ customer: customer.id, payment_method_types: [ "card" ], line_items: [ { price: priceId || process.env.STRIPE_PRICE_ID, quantity: 1 } ], mode: "subscription", allow_promotion_codes: true, subscription_data: { trial_period_days: process.env.STRIPE_TRIAL_DAYS || null, metadata: { userId: session.user.id } }, success_url: `${redirectURL}?session_id={CHECKOUT_SESSION_ID}`, cancel_url: redirectURL }); return { url: checkoutSession.url }; } catch (error) { console.error("Stripe checkout error:", error); return { error: "Failed to create checkout session", details: error.message }; } }