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

import Container from "@/components/elements/Container";
import LocalePageShell from "@/components/i18n/LocalePageShell";
import React, { useEffect, useMemo } 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";
import { useTranslation } from "react-i18next";

function PublicRelations() {
  const { t } = useTranslation("common");
  const router = useRouter();
  const { request, loading } = useAxios();
  const user = useUser();

  const schema = useMemo(
    () =>
      yup.object().shape({
        bio: yup.string().required(t("settings.edit.publicRelations.bioRequired")),
      }),
    [t]
  );

  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 || t("settings.edit.unknownError"));
      } finally {
        setSubmitting(false);
      }
    },
  });

  useEffect(() => {
    formik.setValues({
      selectedButton: user?.conversation_projects ?? null,
      bio: user?.bio ?? "",
    });
  }, [user]);

  return (
    <LocalePageShell>
      <Container>
        <div className="p-4 flex flex-col items-center h-screen justify-center">
          <span className="text-xl font-bold text-foreground">
            {t("settings.edit.nav.publicRelations")}
          </span>
          <form onSubmit={formik.handleSubmit} className="w-full max-w-sm flex flex-col items-center">
            <small className="font-bold mt-10">{t("settings.edit.bio.aboutYou")}</small>
            <textarea
              name="bio"
              placeholder={t("settings.edit.publicRelations.bioPlaceholder")}
              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) => {
                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}>
              {t("settings.edit.save")}
            </AuthNextButton>
          </form>
        </div>
      </Container>
    </LocalePageShell>
  );
}

export default PublicRelations;
