"use client";
import { z } from "zod";
import { useAuth } from "@/lib/context/auth-context";
import reviewService from "@/lib/services/review";
import { ReviewRequest } from "@/lib/types/models/review";
import Modal from "@/modules/ui/modal";
import StarRating from "@/modules/ui/star-rating";
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { toast } from "sonner";

const reviewSchema = z.object({
  productId: z.string().min(1, "Product ID is required"),
  rating: z
    .number()
    .int("Rating must be an integer")
    .min(1, "Rating must be at least 1")
    .max(5, "Rating must be at most 5"),
  review: z
    .string()
    .min(20, "Review must be at least 20")
    .max(2000, "Review is too long"),
});
export type ReviewRequestFrom = z.infer<typeof reviewSchema>;
export default function Page({
  isModalOpen = false,
  productId,
  setIsModalOpen,
}: {
  isModalOpen: boolean;
  productId: string;
  setIsModalOpen: (isOpen: boolean) => void;
}) {
  const { user } = useAuth();
  const userId = user?.id;
  const {
    register,
    handleSubmit,
    getValues,
    setValue,
    formState: { errors, isSubmitting },
    reset,
  } = useForm<ReviewRequestFrom>({
    resolver: zodResolver(reviewSchema),
    defaultValues: {
      productId: productId,
      rating: 0,
      review: "",
    },
  });

  const onSubmit = async (data: ReviewRequestFrom) => {
    try {
      const payload: ReviewRequest = { userId: userId ? userId : "", ...data };
      const res = await reviewService.submitReview(payload);
      if (res.status) {
        toast.success("Review added successfully");
        reset();
        setIsModalOpen(false);
      }
    } catch (err) {
      console.error(err);
    }
  };

  return (
    <Modal
      isOpen={isModalOpen}
      onClose={() => setIsModalOpen(false)}
      size="sm"
      title="Add a Review"
    >
      <form onSubmit={handleSubmit(onSubmit)}>
        <div className="px-4">
          <h3 className="text-md font-semibold">
            Overall, how satisfied were you with your product purchase
            experience
          </h3>
          <div className="text-sm leading-[16px] text-[#4D4D4D] my-5">
            Your feedback will help us improve
          </div>
          <StarRating
            width={36}
            height={36}
            fillRating={getValues("rating")}
            onChangeRating={(value) => setValue("rating", value)}
          />
          {errors?.rating && (
            <p className="text-sm text-red-500">{errors?.rating?.message}</p>
          )}
          <div className="text-sm leading-[16px] text-[#4D4D4D] my-5">
            Help us improve, what was the hardest part?
          </div>
          <textarea
            id="message"
            rows={4}
            className="block p-2 w-full text-sm text-gray-900 bg-gray-50 rounded-xl border border-gray-300 focus:outline-none "
            placeholder="Add Review ..."
            {...register("review")}
          ></textarea>
          {errors?.review && (
            <p className="text-sm text-red-500">{errors?.review?.message}</p>
          )}
          <button
            className="w-full bg-primary text-white font-semibold py-3 rounded-full my-8 hover:bg-primary-900 transition"
            type="submit"
            disabled={isSubmitting}
          >
            Submit
          </button>
        </div>
      </form>
    </Modal>
  );
}