/* eslint-disable @typescript-eslint/no-explicit-any */
"use client";

import AuthHead from "@/components/auth/AuthHead";
import AuthInput from "@/components/auth/AuthInput";
import Container from "@/components/elements/Container";
import React from "react";
import useAxios from "@/hooks/useAxios";
import { useFormik } from "formik";
import * as yup from "yup";
import { useRouter } from "next/navigation";
import { IVerifyOtp } from "@/types/types";
import AuthNextButton from "@/components/auth/AuthNextButton";
import toast from "react-hot-toast";

// ✅ فقط چک می‌کنیم مقدار وارد شده باشه
const schema = yup.object().shape({
  username: yup
    .string()
    .required("نام کاربری الزامی است")
    .min(1, "نام کاربری باید حداقل ۱ کاراکتر باشد")
    .max(100, "نام کاربری نمی‌تواند بیشتر از ۱۰۰ کاراکتر باشد"),
});

function UsernamePage() {
  const router = useRouter();
  const { request, loading } = useAxios();
  const mobile =
    typeof window !== "undefined" ? localStorage.getItem("mobile") : null;

  const formik = useFormik({
    initialValues: {
      username: "",
    },
    validationSchema: schema,
    onSubmit: async (values) => {
      try {
        await request("POST", "/register/username", {
          mobile,
          user_name: values.username,
        }) as IVerifyOtp;

        localStorage.setItem("username", values.username);
        router.push("/register/password");
      } catch (err: any) {
        console.log("Unhandled error:", err?.message);
        if (err?.response?.data?.message) {
          toast.error(err.response.data.message);
        } else {
          toast.error("خطایی رخ داد، دوباره تلاش کنید");
        }
      }
    },
  });

  return (
    <Container>
      <div className="p-4 flex flex-col items-center h-screen justify-center">
        <AuthHead title="نام کاربری" />
        <form
          onSubmit={formik.handleSubmit}
          className="w-full max-w-sm flex flex-col items-center"
        >
          <AuthInput
            name="username"
            type="text"
            placeholder="نام کاربری خود را وارد کنید"
            dir="auto" // ✅ اجازه ورود همه کاراکترها (فارسی، انگلیسی، ایموجی...)
            className={`border ${
              formik.touched.username && formik.errors.username
                ? "border-red-500 dark:border-red-500"
                : "border-gray-300"
            }`}
            value={formik.values.username}
            onChange={formik.handleChange}
            onBlur={formik.handleBlur}
          />
          {formik.touched.username && formik.errors.username && (
            <small className="text-red-500 mt-2 block">
              {formik.errors.username}
            </small>
          )}
          <AuthNextButton type="submit" className="mt-20" disabled={loading}>
            {loading ? "در حال ارسال..." : "ثبت و ادامه"}
          </AuthNextButton>
        </form>
      </div>
    </Container>
  );
}

export default UsernamePage;
