import Button from "@/components/ui/Button";
import Input from "@/components/ui/Input";
import { withTitle } from "@/constructors/Component";
import { UrlsTitle } from "@/enums/urls";
import { useAppContext } from "@/providers/AuthProvider";
import apiClient from "@/services/api";
import { FunctionComponent } from "preact";
import { useLocation } from "preact-iso";
import "preact/debug";
import { Controller, SubmitHandler, useForm } from "react-hook-form";
import { ILoginForm } from "./login.dto";
import classes from "./login.module.scss";

interface IRegisterForm extends ILoginForm {
  confirmPassword: string;
}

const RegisterPage: FunctionComponent = () => {
  const { isLoggedIn } = useAppContext();
  const { route } = useLocation();
  const { control, handleSubmit, formState, setError } = useForm({
    defaultValues: {
      login: "",
      password: "",
      confirmPassword: "",
    },
    mode: "onChange",
  });
  const register: SubmitHandler<IRegisterForm> = async (data) => {
    if (data.password !== data.confirmPassword) {
      setError("confirmPassword", { message: "Пароли не совпадают" });
      return;
    }
    try {
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      const response = await apiClient<{ success: boolean; user?: any; error?: string }>("/api/register/", {
        method: "POST",
        body: JSON.stringify({ username: data.login, password: data.password }),
        needsCsrf: true,
      });

      if (response.success) {
        route("/login", true);
      } else {
        const errorMessage = response.error || "Неверный логин или пароль";
        setError("login", { message: errorMessage });
        setError("password", { message: " " });
        setError("confirmPassword", { message: " " });
      }
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
    } catch (error: any) {
      console.error("Register failed:", error);
      const errorMessage = "Ошибка входа. Попробуйте позже.";
      setError("login", { message: errorMessage });
      setError("password", { message: " " });
      setError("confirmPassword", { message: " " });
    }
  };
  if (isLoggedIn.value) route("/profile/tasks", true);
  return !isLoggedIn.value ? (
    <div class={classes.login_container}>
      <div class={classes.login_card}>
        <p class={classes.login_card_name}>Антихвост</p>
        <form onSubmit={handleSubmit(register)}>
          <Controller
            name="login"
            control={control}
            rules={{
              required: "Введите логин",
              minLength: { value: 3, message: "Логин должен быть не менее 3 символов" },
            }}
            render={({ field }) => (
              <Input placeholder="Логин" textAlign="center" error={formState.errors.login?.message} {...field} />
            )}
          />
          <Controller
            name="password"
            control={control}
            rules={{
              required: "Введите пароль",
              minLength: { value: 8, message: "Пароль должен быть не менее 8 символов" },
            }}
            render={({ field }) => (
              <Input
                placeholder="Пароль"
                textAlign="center"
                type="password"
                error={formState.errors.password?.message}
                {...field}
              />
            )}
          />
          <Controller
            name="confirmPassword"
            control={control}
            rules={{
              required: "Введите пароль",
              minLength: { value: 8, message: "Пароль должен быть не менее 8 символов" },
            }}
            render={({ field }) => (
              <Input
                placeholder="Повторите пароль"
                textAlign="center"
                type="password"
                error={formState.errors.confirmPassword?.message}
                {...field}
              />
            )}
          />
          <Button type="submit" color="secondary" className="w-full">
            Зарегистрироваться
          </Button>
        </form>
        <span class="mt-5 text-center text-xs">
          Уже есть аккаунт?{" "}
          <button
            class="cursor-pointer text-blue-500 underline"
            onClick={() => {
              route("/login", true);
            }}
          >
            Войти
          </button>
        </span>
      </div>
    </div>
  ) : (
    <p>Redirecting...</p>
  );
};

export default withTitle(UrlsTitle.REGISTER, RegisterPage);
