"use client";

import { Button } from "@/components/ui/button";
import { LogIn, Menu, Search } from "lucide-react";
import Image from "next/image";
import Link from "next/link";
import { useEffect, useState } from "react";
import { ModeToggle } from "./mode-toggle";
import ToggleLanguage from "./toggle-language";
import { Input } from "./ui/input";

export default function Header() {
  const [isScrollingUp, setIsScrollingUp] = useState(true); // Track scroll direction
  const [prevScrollPos, setPrevScrollPos] = useState(0);

  useEffect(() => {
    const handleScroll = () => {
      const currentScrollPos = window.scrollY;

      // Determine scroll direction
      if (currentScrollPos < prevScrollPos) {
        setIsScrollingUp(true); // Scrolling up
      } else {
        setIsScrollingUp(false); // Scrolling down
      }

      // Update previous scroll position
      setPrevScrollPos(currentScrollPos);
    };

    // Attach scroll event listener
    window.addEventListener("scroll", handleScroll);

    // Cleanup listener on unmount
    return () => window.removeEventListener("scroll", handleScroll);
  }, [prevScrollPos]);

  return (
    <header className="mx-auto backdrop-blur-xs left-1/2 -translate-x-1/2 fixed w-full z-10 md:px-6 py-3 px-2 md:p-4">
      <div className="flex w-full shrink-0 items-center justify-between relative">
        {/* Left Section */}
        <div className="flex sm:gap-2 gap-1">
          <div className="md:block hidden relative lg:w-[250px] sm:w-[120px]">
            <Input className="pr-9 bg-background" placeholder="جستجو..." />
            <Search className="absolute right-0 top-0 m-2.5 h-4 w-4 text-muted-foreground" />
          </div>
          <Button
            variant="outline"
            size={"icon"}
            className="md:hidden px-2 py-1"
          >
            <Menu />
          </Button>
          <ModeToggle />
          <ToggleLanguage />
        </div>
        <Link
          href={"/"}
          className="absolute left-1/2 -translate-x-1/2 flex items-center"
        >
          <Image src={"/logo.png"} width={30} height={30} alt="logo" />
          <h1 className="font-bold tracking-tighter leading-normal pe-2 text-xl text-parch">
            پارچ کست
          </h1>
        </Link>
        {/* Right Section */}
        <div className="flex gap-2">
          <Button className="bg-parch cursor-pointer">
            <span className="md:block hidden">ورود | ثبت نام</span>
            <LogIn className="md:hidden block" />
          </Button>
        </div>
      </div>
      <div
        className={`md:flex hidden w-full shrink-0 items-center gap-8 mt-4 justify-center transition-all duration-300 ${
          isScrollingUp ? "opacity-100 h-auto" : "opacity-0 h-0 overflow-hidden"
        }`}
      >
        <Link href={"/"} className="text-parch-link">
          حمایت از پادکست
        </Link>
        <Link href={"/"} className="text-parch-link">
          همکاری با اسپانسر
        </Link>{" "}
        <Link href={"/"} className="text-parch-link">
          تماس با ما
        </Link>{" "}
        <Link href={"/"} className="text-parch-link">
          درباره ما
        </Link>{" "}
      </div>
    </header>
  );
}