'use client';

import { ThemeToggle } from '@/components/theme-toggle';
import { Menu, PanelLeftClose, PanelLeft, LogOut } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
import SidebarContent from '@/components/ui/SidebarContent';
import Link from 'next/link';
import { useRouter } from 'next/navigation';

interface NavbarProps {
  onSidebarToggle: () => void;
  isSidebarCollapsed: boolean;
}

const Navbar = ({ onSidebarToggle, isSidebarCollapsed }: NavbarProps) => {
  const router = useRouter();

  const handleLogout = async () => {
    try {
      const response = await fetch('/api/auth/logout', {
        method: 'POST',
      });

      if (response.ok) {
        router.push('/');
      }
    } catch (error) {
      console.error('Logout error:', error);
    }
  };

  return (
    <div className="bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 border-b py-2 px-5 flex justify-between items-center z-30 sticky top-0">
      <div className="flex items-center gap-2">
        {/* Mobile Menu Button */}
        <div className="md:hidden">
          <Sheet>
            <SheetTrigger asChild>
              <Button variant="outline" size="icon">
                <Menu className="h-5 w-5" />
                <span className="sr-only">Toggle menu</span>
              </Button>
            </SheetTrigger>
            <SheetContent side="left" className="p-0 w-[250px] overflow-y-auto">
              <SidebarContent />
            </SheetContent>
          </Sheet>
        </div>
        
        {/* Desktop Sidebar Toggle Button */}
        <div className="hidden md:block">
          <Button 
            variant="outline" 
            size="icon" 
            onClick={onSidebarToggle}
            title={isSidebarCollapsed ? "Tampilkan Sidebar" : "Sembunyikan Sidebar"}
          >
            {isSidebarCollapsed ? (
              <PanelLeft className="h-5 w-5" />
            ) : (
              <PanelLeftClose className="h-5 w-5" />
            )}
            <span className="sr-only">Toggle sidebar</span>
          </Button>
        </div>
        
        <Link href="/dashboard" className="flex items-center text-lg font-semibold hover:text-primary transition-colors">
          <img src="/podif-icon.png" alt="PODIF Logo" className="h-6 w-auto mr-2" />
          PODIF
        </Link>
      </div>

      <div className="flex items-center gap-4">
        <ThemeToggle />
        <Button 
          variant="outline" 
          size="icon" 
          onClick={handleLogout}
          title="Logout"
        >
          <LogOut className="h-5 w-5" />
          <span className="sr-only">Logout</span>
        </Button>
      </div>
    </div>
  );
};

export default Navbar;