"use client";

import { useEffect, useState } from "react";
import { usePathname, useRouter } from "next/navigation";
import { RefreshCw, Home } from "lucide-react";
import Link from "next/link";
import { BackButton } from "./backBtn";
import { Button, buttonVariants } from "../ui/button";
import User from "./User";

export default function NavBar({
  user,
}: {
  user?: {
    name: string
    email: string
    image?: string | null
  }
}) {
  const [isScrolled, setIsScrolled] = useState(false);
  const pathname  = usePathname();
  const router    = useRouter();
  const isHome    = pathname === "/";

  useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 40);
    };

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

  const iconClass = `rounded-full transition-all duration-300 w-10 h-10 ${
    isScrolled
      ? "bg-foreground/5 hover:bg-foreground/10 text-foreground"
      : "bg-background/20 hover:bg-background/40 backdrop-blur-md text-primary-foreground border border-white/10"
  }`;

  return (
    <div
      className={`fixed top-4 sm:top-6 left-4 right-4 sm:left-0 sm:right-0 w-[calc(100%-2rem)] p-4 z-50 flex justify-between items-center max-w-6xl mx-auto rounded-2xl transition-all duration-500 ${
        isScrolled
          ? "bg-background/70 backdrop-blur-xl border border-border/40 shadow-sm translate-y-0"
          : "bg-transparent border-transparent shadow-none translate-y-2 sm:translate-y-4"
      }`}
    >
      {/* Left side: back on detail pages, refresh on home */}
      {isHome ? (
        <Button
          size="icon"
          variant="ghost"
          aria-label="Refresh"
          onClick={() => router.refresh()}
          className={iconClass}
        >
          <RefreshCw className="w-5 h-5" />
        </Button>
      ) : (
        <BackButton />
      )}

      {/* Center: Home button (hidden on home page) */}
      {!isHome && (
        <Link
          href="/"
          aria-label="Go to home"
          className={iconClass + " flex items-center justify-center absolute left-1/2 -translate-x-1/2"}
        >
          <Home className="w-5 h-5" />
        </Link>
      )}

      {/* Right side: user */}
      <div className="flex items-center gap-2">
        {/* <Link href="/" className={buttonVariants({variant: "link"})}>Read from Koha</Link> */}
        <User user={user} />
      </div>
    </div>
  );
}