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

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

// Validation schema using Yup
const schema = yup.object().shape({
  bio: yup.string().required("نوشتن bio الزامی است"),
  // selectedButton: yup.boolean().required("لطفا یکی از گزینه ها را انتخاب کنید"),
});

function PublicRelations() {
  const router = useRouter();
  const { request, loading } = useAxios();

  const user = useUser();

  const formik = useFormik({
    initialValues: {
      selectedButton: null as boolean | null,
      bio: "",
    },
    validationSchema: schema,
    onSubmit: async (values, { setSubmitting }) => {
      try {
        await request("PATCH", "/verify/conversation", {
          conversation_projects: values.selectedButton,
          bio: values.bio,
        });
        router.push("/settings/edit");
      } catch (err: any) {
        toast.error(err?.message || "خطای نامشخصی رخ داد.");
      } finally {
        setSubmitting(false);
      }
    },
  });
  useEffect(() => {
    formik.setValues({
      selectedButton: user?.conversation_projects ?? null,
      bio: user?.bio ?? "",
    });
  }, [user]);

  return (
    <Container>
      <div className="p-4 flex flex-col items-center h-screen justify-center">
        <span className="text-xl font-bold text-foreground">روابط عمومی</span>
        <div className="mt-5"></div>

        {/* <p className="my-10 text-sm font-bold">
          مایلید پروژه هایی گفتگو محور به شما پیشنهاد شود؟
        </p> */}
        <form
          onSubmit={formik.handleSubmit}
          className="w-full max-w-sm flex flex-col items-center"
        >
          {/* <div className="flex w-full gap-2 max-w-[300px]">
            <AuthNextButton
              type="button"
              onClick={() => formik.setFieldValue("selectedButton", true)}
              className={`mt-5 text-xs w-full max-w-[250px] flex  items-center justify-center flex-row-reverse gap-2 px-1 ${
                formik.values.selectedButton === true
                  ? "!bg-[#FC8EAC] !border-[#FC8EAC] !text-white"
                  : ""
              }`}
            >
              روابط عمومی بالایی دارم
            </AuthNextButton>
            <AuthNextButton
              type="button"
              onClick={() => formik.setFieldValue("selectedButton", false)}
              className={`mt-5 text-xs w-full max-w-[250px] flex  items-center justify-center flex-row-reverse gap-2 px-1 ${
                formik.values.selectedButton === false
                  ? "!bg-[#FC8EAC] !border-[#FC8EAC] !text-white"
                  : ""
              }`}
            >
              اهل معاشرت نیستم
            </AuthNextButton>
          </div>
          {/* Error Message */}
          {/* {formik.errors.selectedButton && formik.touched.selectedButton && ( */}
          {/* <div className="text-red-500 mt-2 text-sm"> */}
          {/* {formik.errors.selectedButton} */}
          {/* </div> */}
          {/* )}  */}
          <small className="font-bold mt-10"> در مورد خودتان چیزی بگویید</small>
          <textarea
            name="bio"
            placeholder="بیو"
            className={`border mt-4 w-full max-w-[290px] p-3 rounded-2xl border-border-primary-light dark:border-border-primary-dark bg-secondary-light dark:bg-secondary-dark font-medium ${
              formik.touched.bio && formik.errors.bio
                ? "border-red-500 dark:border-red-500"
                : "border-gray-300"
            }`}
            value={formik.values.bio}
            onChange={(e) => {
              // محدود کردن به 500 کاراکتر
              if (e.target.value.length <= 500) {
                formik.setFieldValue("bio", e.target.value);
              }
            }}
            onBlur={formik.handleBlur}
          />

          {/* شمارشگر کاراکتر */}
          <small className="mt-1 text-gray-500 block text-right">
            {formik.values.bio.length}/500
          </small>

          {formik.touched.bio && formik.errors.bio && (
            <small className="text-red-500 mt-2 block">
              {formik.errors.bio}
            </small>
          )}

          <AuthNextButton type="submit" className="mt-20" loading={loading} disabled={loading}>
            ویرایش
          </AuthNextButton>
        </form>
      </div>
    </Container>
  );
}

export default PublicRelations;
