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

import AuthPageLayout, {
  AuthFormFooter,
  AuthPageContent,
} from "@/components/auth/AuthPageLayout";
import React, { useState } from "react";
import useAxios from "@/hooks/useAxios";
import * as yup from "yup";
import { useRouter } from "next/navigation";
import AuthNextButton from "@/components/auth/AuthNextButton";
import toast from "react-hot-toast";
import AuthUserDetails from "@/components/auth/AuthUserDetails";
import Image from "next/image";

// Validation schema using Yup
const schema = yup.object().shape({
  size: yup.string().required("انتخاب سایز الزامی است"),
  weight: yup.string().required("وارد کردن وزن الزامی است"),
  height: yup.string().required("وارد کردن قد الزامی است"),
});

const sizes = ["34", "36", "38", "40", "42", "44", "46", "48", "50"];

function Sizes() {
  const [height, setHeight] = useState<string>("");
  const [weight, setWeight] = useState<string>("");
  const [size, setSize] = useState<string | null>(null);
  const [selectedButton, setSelectedButton] = useState<number>(1); // Default: 1 for "قد"
  const router = useRouter();
  const { request, loading } = useAxios();
  const mobile =
    typeof window !== "undefined" ? localStorage.getItem("mobile") : null;

  const [expertise] = useState<string>(
    typeof window !== "undefined" ? localStorage.getItem("expertise") || "" : ""
  );

  if (expertise !== "مدل") {
    router.push("/verify/public-relations");
  }

  const handleCheck = async () => {
    try {
      await schema.validate({ height, weight, size });
      await sendSizesHandler();
    } catch (validationError: any) {
      toast.error(validationError.message, {
        duration: 4000,
      });
    }
  };

  const sendSizesHandler = async () => {
    try {
      const data = {
        mobile,
        height,
        weight,
        size,
      };
      await request("POST", "/verify/sizes", data);
      router.push("/verify/colors");
    } catch (error: any) {
      toast.error(error?.message || "خطای نامشخصی رخ داد.");
    }
  };

  const handleButtonPress = (buttonIndex: number) => {
    setSelectedButton(buttonIndex);
  };

  const handleSizeSelection = (buttonIndex: string) => {
    setSize(buttonIndex);
  };

  return (
    <AuthPageLayout>
      <AuthPageContent>
        <span className="text-xl font-bold">سایز</span>
        <div className="mt-5">
          <AuthUserDetails />
        </div>

        <p className="mt-8 text-center text-sm font-bold">مشخصات ظاهری</p>

        {/* Buttons for categories */}
        <div className="flex gap-2 mt-4 w-full max-w-[320px]">
          <button
            className={`p-1 rounded-full w-1/3 border text-sm flex items-center justify-center gap-1  ${
              selectedButton === 1
                ? "bg-[#FC8EAC] border-[#FC8EAC]"
                : "bg-tertiary-light dark:bg-tertiary-dark text-black border-gray-400"
            }`}
            onClick={() => handleButtonPress(1)}
          >
            <Image
              src={"/images/icons/ruler&pen.svg"}
              width={25}
              height={25}
              className="dark:invert"
              alt="قد"
            />
            قد
          </button>
          <button
            className={`p-1 rounded-full w-1/3 border text-sm flex items-center justify-center gap-1 ${
              selectedButton === 2
                ? "bg-[#FC8EAC] border-[#FC8EAC]"
                : "bg-tertiary-light dark:bg-tertiary-dark border-gray-400"
            }`}
            onClick={() => handleButtonPress(2)}
          >
            <Image
              src={"/images/icons/weight.svg"}
              width={25}
              height={25}
              className="dark:invert"
              alt="وزن"
            />
            وزن
          </button>
          <button
            className={`p-1 rounded-full w-1/3 border text-sm flex items-center justify-center gap-1 ${
              selectedButton === 3
                ? "bg-[#FC8EAC] border-[#FC8EAC]"
                : "bg-tertiary-light dark:bg-tertiary-dark border-gray-400"
            }`}
            onClick={() => handleButtonPress(3)}
          >
            <Image
              src={"/images/icons/timer.svg"}
              width={25}
              height={25}
              className="dark:invert"
              alt="سایز"
            />
            سایز
          </button>
        </div>

        {/* Inputs based on selected button */}
        <div className="mt-6 w-full max-w-md flex flex-col items-center">
          {selectedButton === 1 && (
            <input
              type="number"
              placeholder="قد"
              className="w-20 mx-auto p-2 mb-4 border rounded-full text-center bg-tertiary-light dark:bg-tertiary-dark"
              value={height}
              onChange={(e) => setHeight(e.target.value)}
            />
          )}
          {selectedButton === 2 && (
            <input
              type="number"
              placeholder="وزن"
              className="w-20 mx-auto p-2 mb-4 border rounded-full text-center bg-tertiary-light dark:bg-tertiary-dark"
              value={weight}
              onChange={(e) => setWeight(e.target.value)}
            />
          )}
          {selectedButton === 3 && (
            <div className="grid grid-cols-3 gap-2 w-full max-w-[320px]">
              {sizes.map((sizeOption) => (
                <button
                  key={sizeOption}
                  className={`p-2 py-1 rounded-full border text-sm full ${
                    size === sizeOption
                      ? "bg-[#FC8EAC] text-white border-[#FC8EAC]"
                      : "bg-tertiary-light dark:bg-tertiary-dark border-gray-400"
                  }`}
                  onClick={() => handleSizeSelection(sizeOption)}
                >
                  {sizeOption}
                </button>
              ))}
            </div>
          )}
        </div>
      </AuthPageContent>

      <AuthFormFooter onSkip={() => router.push("/verify/colors")}>
        <AuthNextButton
          type="button"
          onClick={handleCheck}
          loading={loading}
          disabled={loading}
        >
          ثبت و ادامه
        </AuthNextButton>
      </AuthFormFooter>
    </AuthPageLayout>
  );
}

export default Sizes;
