"use client";
import { useEffect, useState } from "react";
import Image from "next/image";
import Notification from "./notification";
import { useScreenSizeContext } from "@/src/utils/providers/screenSizesContext";
import SearchUi from "./search";
import { BellIcon, X } from "lucide-react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { Button } from "@/components/ui/button";
import { useGetUserProfile } from "@/src/utils/hooks/useGetUserProfile";

export default function Navigation() {
  const [avaliableTry, setAvaliableTry] = useState(false);
  const [tryCount, setTryCount] = useState<number | any>('');
  const { isMobile, isTablet, isDesktop, isClient } = useScreenSizeContext();
  const [openNotification, setOpenNotificartions] = useState<boolean>(false);
  const pathname = usePathname();

  const shouldHide = pathname.includes("verify-address-payment");

  const { data } = useGetUserProfile();

 useEffect(() => {
  console.log('Effect ran with data:', data);

  if (data?.payload) {
    setTryCount(data.payload.available_retry);
  }
}, [data]);



  useEffect(() => {
    console.log(isMobile, "mobile screen");
    console.log(isTablet, "ipad screen");
    console.log(isDesktop, "desktop screen");
  }, [isMobile, isTablet, isDesktop]);

  return (
    <div className="h-24 flex items-center shadow shadow-[#00000040] bg-[#FFFFFF] font-inter max-w-screen">
      <section className="w-full h-full flex items-center justify-between">
        <div className="flex h-full items-center gap-x-6">
          <Link
            href={"/"}
            className="px-12 h-full flex items-center gap-2 shadow shadow-[#00000040]"
          >
            <div className="relative">
              <Image
                src="/images/logo.svg"
                
                style={{ objectFit: "contain" }}
                alt="logo"
                width={50}
                height={50}
              />
            </div>
            <div className="text-[20px] whitespace-nowrap font-jaini">
              Happy Homes Creators
            </div>
          </Link>

          {isClient && (isDesktop || isTablet) && !shouldHide && <SearchUi />}
        </div>
        <div
          className="flex items-center gap-4"
          
        >
          {tryCount > 0 && (
            <div className="relative w-[26px] h-[26px]" onClick={() => setAvaliableTry(true)}>
            <Image
              src="/images/Warranty.svg"
              alt="icon"
              className="object-cover pulse"
              fill
            />
          </div>)}
        
          {isClient && !shouldHide && <Notification />}
        </div>

        {avaliableTry && (
          <div
            onClick={() => setAvaliableTry(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={() => setAvaliableTry(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>

              <div className="flex items-center justify-center flex-col gap-4">
                <Image
                  src="/images/Commercial.svg"
                  alt="commercial"
                  className="object-cover"
                  width={60}
                  height={60}
                />
                <h3 className="font-[600]">NOTICE</h3>
                <p className="text-center">
                  You now have <span className="font-bold"> {tryCount} </span> free subscription to show interest in any
                  user of your choice. Please endeavour to use this subscription
                  as soon as possible
                </p>
              </div>
            </div>
          </div>
        )}
      </section>
    </div>
  );
}
