"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 { useRouter } from 'next/navigation';

export function TopBar({ collapsed, onToggleSidebar }: { collapsed: boolean; onToggleSidebar: () => void }) {
  const { theme, setTheme } = useTheme();
  const router = useRouter();

  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">
          <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>

        <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>
    </div>
  );
}