"use client";

import { Form, TextInput, Button, InlineNotification, Stack, Loading } from '@carbon/react'
import type { RecoveryFlow, UiNode, UiNodeInputAttributes, UpdateRecoveryFlowBody } from "@ory/client"
import { filterNodesByGroups, isUiNodeInputAttributes } from '@ory/integrations/ui';
import { useSearchParams, useRouter } from "next/navigation"
import { useState, useEffect } from "react"
import ory from "@/lib/ory"

function Recovery() {
	const [flow, setFlow] = useState<RecoveryFlow>()
	const [error, setError] = useState<string>()
	const router = useRouter()
	const searchParams = useSearchParams()
	const flowId = searchParams.get("flow")
	const returnTo = searchParams.get("return_to")
	const user = searchParams.get("user")

	const handleSubmit = (email: string) => {
		if (!flow) {
			return
		}

		const submitData: UpdateRecoveryFlowBody = {
			email,
			method: "code",
			csrf_token: flow.ui.nodes.find(
				(node) => node.attributes.name === "csrf_token"
			)?.attributes.value as string,
		}

		// FIX: remove
		// console.log(flow)
		// console.log(submitData)

		ory
			.updateRecoveryFlow({
				flow: String(flow.id),
				updateRecoveryFlowBody: submitData,
			})
			.then(({ data }) => {
				setFlow(data)
				setError(undefined)
			})
			.catch((error) => {
				console.error(error)
				if (error.response?.status === 400) {
					setFlow(error.response.data)
					// setError(error.response.data.ui.messages?.[0]?.text)
				}
			})
	}

	useEffect(() => {
		if (flow) {
			return
		}

		if (flowId) {
			ory
				.getRecoveryFlow({ id: String(flowId) })
				.then(({ data }) => {
					setFlow(data)
					// if (user) {
					// 	handleSubmit({ email: user })
					// }
				})
				.catch((error) => {
					// TODO: handle
					console.error(error)
					setError(error.message)
					router.push("/auth/recovery")
				})
			return
		}

		ory
			.createBrowserRecoveryFlow({
				returnTo: returnTo ? String(returnTo) : undefined,
			})
			.then(({ data }) => {
				setFlow(data)
				router.push(`/auth/recovery?flow=${data.id}`)
				// if (user) {
				// 	handleSubmit({ email: user })
				// }
			})
			.catch((error) => {
				console.error(error)
				setError(error.message)
			})
	}, [flowId, router, returnTo, flow, user])

	// eslint-disable-next-line consistent-return
	const mapUINode = (node: UiNode, _: number) => {
		// other node types are also supported
		// if (isUiNodeTextAttributes(node.attributes)) {
		// if (isUiNodeImageAttributes(node.attributes)) {
		// if (isUiNodeAnchorAttributes(node.attributes)) {
		if (isUiNodeInputAttributes(node.attributes)) {
			const attrs = node.attributes as UiNodeInputAttributes
			const nodeType = attrs.type

			// FIX: remove
			console.log(attrs)

			switch (nodeType) {
				case "button":
				case "submit":
					return (

						<Button type="submit" className="w-full" name={attrs.name} value={attrs.value}>
							{attrs.name}
							{/* Reset Password */}
						</Button>
						// <button
						// 	type={attrs.type as "submit" | "reset" | "button" | undefined}
						// 	name={attrs.name}
						// 	value={attrs.value}
						// />
					)
				// case "text":
				// return (<div>{attrs.</div>)
				default:
					return (
						<TextInput
							id="email"
							name={attrs.name}
							type={attrs.type}
							labelText=""
							placeholder="Enter email"
							autoComplete={
								attrs.autocomplete || attrs.name === "identifier"
									? "username"
									: ""
							}
							required={attrs.required}
							disabled={attrs.disabled}
							defaultValue={attrs.value}
						/>
						// <input
						// 	name={attrs.name}
						// 	type={attrs.type}
						// 	autoComplete={
						// 		attrs.autocomplete || attrs.name === "identifier"
						// 			? "username"
						// 			: ""
						// 	}
						// 	defaultValue={attrs.value}
						// 	required={attrs.required}
						// 	disabled={attrs.disabled}
						// />
					)
			}
		}
	}

	if (!flow) {
		return <Loading />
	}

	return (
		<div className="container max-w-md mx-auto p-6">
			<Stack gap={7}>
				<Form
					method={flow.ui.method}
					action={flow.ui.action}
					onSubmit={(e) => {
						e.preventDefault()
						const formData = new FormData(e.currentTarget)
						// FIX:remove. Figure out how to get token into form so we can get it here?
						const body = Object.fromEntries(formData) as unknown as UpdateRecoveryFlowBody;
						handleSubmit(formData.get("email") as string)
					}}>
					<Stack gap={7}>
						{filterNodesByGroups({
							nodes: flow.ui.nodes,
							// we will also map default fields here such as csrf_token
							groups: ["default", "code"],
						}).map((node, idx) => mapUINode(node, idx))}

						{flow.state === "sent_email" && (
							<InlineNotification
								kind="success"
								title="Success"
								subtitle="Recovery email has been sent. Please check your inbox."
								hideCloseButton
							/>
						)}
						{error && (
							<InlineNotification
								kind="error"
								title="Error"
								subtitle={error}
								hideCloseButton
							/>
						)}

						<Button
							kind="ghost"
							onClick={() => { router.push("/auth/login"); }}
							className="w-full"
						>
							Back to Login
						</Button>
					</Stack>
				</Form>
			</Stack>
		</div>
	)
}

export default Recovery