"use client";
import { Accordion } from "@/shared/ui/accordion";
import { Button } from "@/shared/ui/button";
import {
  NavigationMenu,
  NavigationMenuList,
} from "@/shared/ui/navigation-menu";
import {
  Sheet,
  SheetContent,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/shared/ui/sheet";
import { LogOut, LucidePhoneCall, Menu, User } from "lucide-react";
import { menu } from "../lib/data";
import { PRODUCT_INFO } from "@/shared/constants/data";
import RenderMenuItem from "./RenderItem";
import RenderMobileMenuItem from "./RenderMobileMenuItem";
import { ChangeLang } from "./ChangeLang";
import { useEffect, useState } from "react";
import { Link } from "@/shared/config/i18n/navigation";
import Image from "next/image";
import { useAuthStore } from "@/shared/store/authStore";
import formatPhone from "@/shared/lib/formatPhone";
import { useTranslations } from "next-intl";

const Navbar = () => {
  const t = useTranslations("");
  const { user, logout } = useAuthStore();
  const [isScrolled, setIsScrolled] = useState<boolean>(false);
  useEffect(() => {
    const handleScroll = () => {
      if (window.scrollY > 100) {
        setIsScrolled(true);
      } else {
        setIsScrolled(false);
      }
    };

    window.addEventListener("scroll", handleScroll);
    return () => {
      window.removeEventListener("scroll", handleScroll);
    };
  }, []);

  return (
    <section>
      <div
        className={`mx-auto transition-all fixed top-0 w-full left-0 z-50 duration-300`}
      >
        <div
          className={`p-5 transition-all duration-300 bg-white shadow-2xs mx-auto ${
            isScrolled
              ? "bg-white rounded-md max-w-[96rem] md:max-w-[82%] m-5"
              : "max-w-full"
          }`}
        >
          {/* Desktop Menu */}
          <nav className="hidden justify-between lg:flex">
            <div className="flex items-center gap-6">
              {/* Logo */}
              <Link href={"/"} className="flex items-center gap-2">
                <Image
                  width={200}
                  height={100}
                  src={PRODUCT_INFO.logo}
                  className="max-h-12"
                  alt={PRODUCT_INFO.name}
                />
              </Link>
              <div className="flex items-center">
                <NavigationMenu>
                  <NavigationMenuList>
                    {menu.map((item) => RenderMenuItem(item))}
                  </NavigationMenuList>
                </NavigationMenu>
              </div>
            </div>
            <div className="flex gap-2 items-center">
              <ChangeLang />
              <Button className={"py-0"} asChild>
                <Link href={`tel:${PRODUCT_INFO.contact.phone}`}>
                  <LucidePhoneCall />
                  {formatPhone(PRODUCT_INFO.contact.phone)}
                </Link>
              </Button>
              {!!user ? (
                <>
                  <Button
                    size={"icon"}
                    variant={"secondary"}
                    className={"py-0"}
                    asChild
                  >
                    <Link href={"/profile"}>
                      <User />
                    </Link>
                  </Button>
                  <Button
                    size={"icon"}
                    variant={"ghost"}
                    className={"py-0"}
                    onClick={() => {
                      logout();
                    }}
                  >
                    <LogOut />
                  </Button>
                </>
              ) : (
                <Button variant={"secondary"} className={"py-0"} asChild>
                  <Link href={"/auth/login"}>{t("Kirish")}</Link>
                </Button>
              )}
            </div>
          </nav>

          {/* Mobile Menu */}
          <div className="block lg:hidden">
            <div className="flex items-center justify-between">
              {/* Logo */}
              <Link href={"/"} className="flex items-center gap-2">
                <Image
                  width={100}
                  height={100}
                  src={PRODUCT_INFO.logo}
                  className="max-h-8"
                  alt={PRODUCT_INFO.name}
                />
              </Link>
              <Sheet>
                <div className="space-x-2">
                  <ChangeLang />
                  <SheetTrigger asChild>
                    <Button variant="outline" size="icon">
                      <Menu className="size-4" />
                    </Button>
                  </SheetTrigger>
                </div>
                <SheetContent className="overflow-y-auto">
                  <SheetHeader>
                    <SheetTitle>
                      <Link href={"/"} className="flex items-center gap-2">
                        <Image
                          width={100}
                          height={100}
                          src={PRODUCT_INFO.logo}
                          className="max-h-8"
                          alt={PRODUCT_INFO.name}
                        />
                      </Link>
                    </SheetTitle>
                  </SheetHeader>
                  <div className="flex flex-col gap-6 p-4">
                    <Accordion
                      type="single"
                      collapsible
                      className="flex w-full flex-col gap-4"
                    >
                      {menu.map((item) => RenderMobileMenuItem(item))}
                    </Accordion>

                    <div className="flex flex-col gap-3">
                      <Button asChild variant="outline">
                        <Link href={`tel:${PRODUCT_INFO.contact.phone}`}>
                          {formatPhone(PRODUCT_INFO.contact.phone)}
                        </Link>
                      </Button>
                      <Button asChild>
                        {formatPhone(PRODUCT_INFO.contact.phone)}
                      </Button>
                    </div>
                  </div>
                </SheetContent>
              </Sheet>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default Navbar;
