"use client";

import { Button } from "@/components/ui/button";
import LoadingSpinner from "@/src/components/reusables/ui/LoadingSpinner";
import { useAppSelector } from "@/src/redux/hook";
import { X } from "lucide-react";
import React, { Dispatch, SetStateAction } from "react";

interface NudgeProps {
  openNudge: boolean;
  setopenNudge: Dispatch<SetStateAction<boolean>>;
  isLoading: boolean;
  handleNudge: ({ targetUserId }: any) => Promise<void>;
  nudgeCount: number;
}

const NudgePopup = ({
  openNudge,
  setopenNudge,
  isLoading,
  handleNudge,
  nudgeCount,
}: NudgeProps) => {
  const otherUsersProfile = useAppSelector(
    (state) => state.profile.otherUsersProfile
  );
  return (
    <div
      onClick={() => setopenNudge(false)}
      className="fixed inset-0 bg-black/40 backdrop-blur-md flex items-center justify-center z-50"
    >
      {/* Modal Box */}
      <div
        onClick={(e) => e.stopPropagation()}
        className="bg-white rounded-lg p-6 w-[90%] max-w-md relative shadow-lg"
      >
        {/* Cancel Icon */}
        <button
          onClick={() => setopenNudge(false)}
          className="absolute top-4 right-4 text-gray-500 hover:text-gray-700 transition"
          aria-label="Close"
        >
          <X className="w-5 h-5" />
        </button>

        {/* Modal Content */}
        <h3>Are you sure?</h3>
        <p className="my-4 text-sm">
          By clicking continue, you are proceeding with this action.
        </p>

        {nudgeCount === 0 && (
          <p className="mb-5 text-sm">
            Note: You can nudge this user <strong>twice</strong>.
          </p>
        )}

        {nudgeCount === 1 && (
          <p className="mb-5 text-sm">
            Note: You can nudge this user <strong>once</strong> more.
          </p>
        )}

        <div className="flex items-center justify-end w-full gap-4">
          <Button
            onClick={() => setopenNudge(false)}
            className="bg-[#8C8C8C] text-white rounded-full cursor-pointer"
          >
            Cancel
          </Button>
          <Button
            onClick={() =>
              handleNudge({ targetUserId: otherUsersProfile?.user_id })
            }
            className="bg-[#EF2424] hover:bg-[#EF2424]/90 text-white rounded-full cursor-pointer"
          >
            {isLoading ? <LoadingSpinner /> : "Continue"}
          </Button>
        </div>
      </div>
    </div>
  );
};

export default NudgePopup;
