"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,
  AccordionItem,
  AccordionTrigger,
  AccordionContent,
} from "@/components/ui/accordion";
import { Checkbox } from "@/components/ui/checkbox";
import { Label } from "@/components/ui/label";
import { useTranslations } from "next-intl";

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

export default function TermsConditions({
  onFormValidChange,
}: TermsConditionsProps) {
  const t = useTranslations("ReservationPage");
  const tValidation = useTranslations("Validation");

  const validationSchema = yup.object().shape({
    termsAccepted: yup
      .boolean()
      .required(tValidation("termsMustAccept"))
      .oneOf([true], tValidation("termsMustAccept")),
  });

  type FormValues = yup.InferType<typeof validationSchema>;

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

  watch();

  const prevIsValidRef = useRef<boolean>(isValid);
  const callbackRef = useRef(onFormValidChange);

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

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

  return (
    <Accordion type="single" collapsible defaultValue="item-1">
      <AccordionItem value="item-1">
        <AccordionTrigger className="text-[16px] font-bold">
          {t("termsAndConditions")}
        </AccordionTrigger>
        <AccordionContent className="pt-5 flex flex-col gap-5">
          <div className="flex flex-col gap-1">
            <div className="flex items-center gap-2">
              <Controller
                name="termsAccepted"
                control={control}
                render={({ field }) => (
                  <Checkbox
                    id="terms"
                    checked={field.value}
                    onCheckedChange={field.onChange}
                  />
                )}
              />
              <Label htmlFor="terms" className="cursor-pointer gap-0">
                {t("iHaveReadAndAgree")}{" "}
                <span className="text-vendor-secondary underline">
                  {t("termsAndConditionsLink")}
                </span>
                <span className="text-red-500 ml-px">*</span>
              </Label>
            </div>
            {errors.termsAccepted && (
              <p className="text-sm text-red-500">
                {errors.termsAccepted.message}
              </p>
            )}
          </div>
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}