"use client";

import { useEffect, useRef } from "react";
import { useForm, Controller } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { useTranslations } from "next-intl";
import { useBooking } from "@/context/BookingContext";

interface ProfessionalInformationProps {
  onFormValidChange?: (isValid: boolean) => void;
}

export default function ProfessionalInformation({
  onFormValidChange,
}: ProfessionalInformationProps) {
  const t = useTranslations("ReservationPage");
  const tValidation = useTranslations("Validation");
  const { setProfessionalInformation } = useBooking();

  const validationSchema = yup.object({
    company: yup
      .string()
      .required(tValidation("firstNameRequired"))
      .min(1, tValidation("firstNameRequired")),
    position: yup
      .string()
      .required(tValidation("firstNameRequired"))
      .min(1, tValidation("firstNameRequired")),
  });

  type FormValues = yup.InferType<typeof validationSchema>;

  const {
    control,
    watch,
    formState: { isValid, errors },
  } = useForm<FormValues>({
    resolver: yupResolver(validationSchema),
    mode: "onChange",
    defaultValues: {
      company: "",
      position: "",
    },
  });

  const formValues = watch();

  const prevIsValidRef = useRef<boolean>(isValid);
  const callbackRef = useRef(onFormValidChange);
  const prevFormValuesRef = useRef<string>("");
  const setProfessionalInfoRef = useRef(setProfessionalInformation);

  useEffect(() => {
    callbackRef.current = onFormValidChange;
  }, [onFormValidChange]);

  useEffect(() => {
    if (prevIsValidRef.current !== isValid) {
      prevIsValidRef.current = isValid;
      callbackRef.current?.(isValid);
    }
  }, [isValid]);

  useEffect(() => {
    if (
      isValid &&
      formValues.company &&
      formValues.position &&
      setProfessionalInfoRef.current
    ) {
      const formValuesString = JSON.stringify({
        company: formValues.company,
        position: formValues.position,
      });

      if (prevFormValuesRef.current !== formValuesString) {
        prevFormValuesRef.current = formValuesString;
        setProfessionalInfoRef.current({
          company: formValues.company.trim(),
          position: formValues.position.trim(),
        });
      }
    }
  }, [isValid, formValues.company, formValues.position]);

  return (
    <Accordion type="single" collapsible defaultValue="item-1">
      <AccordionItem value="item-1">
        <AccordionTrigger className="text-[16px] font-bold">
          {t("professionalInformation")}
        </AccordionTrigger>
        <AccordionContent className="pt-5 grid grid-cols-1 sm:grid-cols-2 gap-5">
          <div className="flex flex-col gap-1">
            <Label htmlFor="company">
              {t("yourCompanyOrganization")}
              <span className="text-red-500 ml-px">*</span>
            </Label>
            <Controller
              name="company"
              control={control}
              render={({ field }) => (
                <>
                  <Input
                    id="company"
                    placeholder={t("yourCompanyOrganization")}
                    {...field}
                  />
                  {errors.company && (
                    <p className="text-sm text-red-500">
                      {errors.company.message}
                    </p>
                  )}
                </>
              )}
            />
          </div>
          <div className="flex flex-col gap-1">
            <Label htmlFor="position">
              {t("yourPosition")}
              <span className="text-red-500 ml-px">*</span>
            </Label>
            <Controller
              name="position"
              control={control}
              render={({ field }) => (
                <>
                  <Input
                    id="position"
                    placeholder={t("yourPosition")}
                    {...field}
                  />
                  {errors.position && (
                    <p className="text-sm text-red-500">
                      {errors.position.message}
                    </p>
                  )}
                </>
              )}
            />
          </div>
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}