import { Button, Form, Input } from "@heroui/react"
import { useMutation } from "@tanstack/react-query"
import { createFileRoute, redirect } from "@tanstack/react-router"
import { createServerFn, useServerFn } from "@tanstack/react-start"
import { getSupabaseServerClient } from "@/integrations/supabase/supabase"

export const signupFn = createServerFn({ method: "POST" })
	.validator(
		(d: { email: string; password: string; redirectUrl?: string }) => d
	)
	.handler(async ({ data }) => {
		const supabase = getSupabaseServerClient()
		const { error } = await supabase.auth.signUp({
			email: data.email,
			password: data.password
		})
		if (error) {
			return {
				error: true,
				message: error.message
			}
		}

		throw redirect({
			href: data.redirectUrl || "/"
		})
	})

export const Route = createFileRoute("/signup")({
	component: SignupComp
})

function SignupComp() {
	const signup = useServerFn(signupFn)
	const signupMutation = useMutation({
		mutationKey: ["signup"],
		mutationFn: async (data: {
			email: string
			password: string
			redirectUrl?: string
		}) => {
			return signup({
				data: {
					email: data.email,
					password: data.password,
					redirectUrl: data.redirectUrl
				}
			})
		}
	})
	return (
		<div className="flex justify-center items-center flex-col h-screen">
			<p className="font-semibold mb-3">Signup</p>
			<Form
				className="grid gap-2 max-w-5xl w-full"
				onSubmit={(e) => {
					e.preventDefault()
					const formData = new FormData(e.currentTarget)
					const email = formData.get("email") as string
					const password = formData.get("password") as string
					signupMutation.mutate({
						email,
						password
					})
				}}
			>
				<Input name="email" type="email" placeholder="Email" />
				<Input name="password" type="password" placeholder="Password" />
				<Button type="submit" isLoading={signupMutation.isPending}>
					Enviar
				</Button>
			</Form>
		</div>
	)
}