"use client";

import "../pages/style/top-bar.css";
import { Button } from "@/components/ui/button";
import { GradientText } from "@/components/ui/gradient-text";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { useTheme } from "next-themes";
import {
  Sun,
  Moon,
  User,
  Settings,
  LogOut,
  Bell,
  PanelsLeftBottom,
} from "lucide-react";
import { usePathname, useRouter } from "next/navigation";
import { useEffect, useMemo, useState } from "react";

export function TopBar({
  collapsed,
  onToggleSidebar,
}: {
  collapsed: boolean;
  onToggleSidebar: () => void;
}) {
  const { theme, setTheme } = useTheme();
  const router = useRouter();
  const pathname = usePathname();
  const [isLogin, setIsLogin] = useState(false);
  useEffect(() => {
    const currentUser = localStorage.getItem("currentUser");
    if (JSON.parse(currentUser || "{}")?.token) {
      setIsLogin(true);
    } else {
      setIsLogin(false);
    }
  }, [pathname]);
  const handleAnimationEnd = (event: React.AnimationEvent<HTMLDivElement>) => {
    const element = event.currentTarget;
    element.classList.remove("on");
  };

  const handleMouseEnter = (event: React.MouseEvent<HTMLDivElement>) => {
    const element = event.currentTarget;
    element.classList.add("on");
  };

  return (
    <div className="fixed right-0 top-0 left-0 h-16 header z-50">
      <div className="h-full flex items-center justify-between pr-6 pl-2">
        <div className="flex items-center space-x-4">
          {isLogin && (
            <Button
              className="button-NxtqWZ"
              variant="ghost"
              size="sm"
              onClick={onToggleSidebar}
            >
              <PanelsLeftBottom className="h-4 w-4" />
            </Button>
          )}
          <div
            className={`flex items-center cursor-pointer space-x-4 link-logo roll event-on`}
            onClick={() => router.push("/")}
            onMouseEnter={handleMouseEnter}
            onAnimationEnd={handleAnimationEnd}
          >
            <span className="translate">
              <span>
                <h1 className="logo text-2xl font-bold">
                  <GradientText
                    text="MovieFlow"
                    startPercentage={30}
                    endPercentage={70}
                  />
                </h1>
              </span>
              <span>
                <h1 className="logo text-2xl font-bold">
                  <GradientText
                    text="MovieFlow"
                    startPercentage={30}
                    endPercentage={70}
                  />
                </h1>
              </span>
            </span>
          </div>
        </div>

        {isLogin ? (
          <div className="flex items-center space-x-4">
            {/* Notifications */}
            <Button variant="ghost" size="sm">
              <Bell className="h-4 w-4" />
            </Button>

            {/* Theme Toggle */}
            {/* <Button
              variant="ghost"
              size="sm"
              onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
            >
              <Sun className="h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
              <Moon className="absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
            </Button> */}

            {/* User Menu */}
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="ghost" size="sm">
                  <User className="h-4 w-4" />
                  <span className="ml-2">User</span>
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end">
                <DropdownMenuItem>
                  <Settings className="mr-2 h-4 w-4" />
                  Settings
                </DropdownMenuItem>
                <DropdownMenuSeparator />
                <DropdownMenuItem>
                  <LogOut className="mr-2 h-4 w-4" />
                  Log out
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </div>
        ) : (
          <div className="flex items-center space-x-4" style={{ pointerEvents: 'auto' }}>
            <div
              className="flex justify-center items-center text-white text-base w-[100px] h-[40px] cursor-pointer event-on hover:opacity-80 transition-opacity"
              onClick={() => router.push("/login")}
              data-alt="login-button"
              style={{ pointerEvents: 'auto' }}
            >
              Login
            </div>
            <div
              className="flex justify-center items-center text-black text-base bg-white rounded-full w-[100px] h-[40px] cursor-pointer event-on hover:opacity-80 transition-opacity"
              onClick={() => router.push("/signup")}
              data-alt="signup-button"
              style={{ pointerEvents: 'auto' }}
            >
              Sign up
            </div>
          </div>
        )}
      </div>
    </div>
  );
}