"use client"

import type { JSX } from "react"

import { FunctionComponent } from "react"
import { useForm } from "react-hook-form"

import Link from "next/link"
import { useRouter } from "next/navigation"

import api from "@shared/api"
import { useCookie } from "@shared/hooks/useCookie"
import {
	ACCESS_TOKEN_COOKIE,
	REFRESH_TOKEN_COOKIE,
} from "@shared/lib/constants"
import { Button, Form, TextField } from "@shared/ui"

import { ILoginPageProps } from "./LoginPage.d"
import styles from "./LoginPage.module.scss"

interface ILoginFormData {
	login: string
	password: string
}

export const LoginPage: FunctionComponent<
	ILoginPageProps
> = (): JSX.Element => {
	const router = useRouter()
	const [, setAccessTokenCookie] = useCookie(ACCESS_TOKEN_COOKIE)
	const [, setRefreshTokenCookie] = useCookie(REFRESH_TOKEN_COOKIE)

	const { mutate, isPending } = api.useMutation("post", "/auth/login", {
		onSuccess: ({ access, refresh, user }) => {
			setAccessTokenCookie(access)
			setRefreshTokenCookie(refresh)
			router.push("/")
		},
		onError: (error) => {
			console.error("Login failed:", error)
		},
	})

	const { register, handleSubmit } = useForm<ILoginFormData>()

	const onSubmit = (data: ILoginFormData): void => {
		mutate({
			body: {
				username: data.login,
				password: data.password,
			},
		})
	}

	return (
		<div className={styles.root} data-testid="LoginPage">
			<Form className={styles.form} onSubmit={handleSubmit(onSubmit)}>
				<h1 className={styles.title}>Вход</h1>
				<div className={styles.fields}>
					<TextField
						id="login"
						label="Логин"
						placeholder="Ваш логин"
						{...register("login")}
					/>
					<TextField
						id="password"
						label="Пароль"
						placeholder="Ваш пароль"
						type="password"
						{...register("password")}
					/>
				</div>
				<Button type="submit" variant="primary" disabled={isPending}>
					Войти
				</Button>
				<div className={styles.actions}>
					<Link className={styles.link} href="/register">
						Нет аккаунта? Зарегистрироваться
					</Link>
				</div>
			</Form>
		</div>
	)
}