import { useState } from "react";
import { Dialog } from "@headlessui/react";
import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline";
import { NavLink, Link } from "react-router-dom";
import { Button } from '../UI';

const navigation = [
  { name: "Дома", href: "/" },
  { name: "За нас", href: "/about" },
  { name: "Галерија", href: "/gallery" },
  { name: "Контакт", href: "/contact" },
  // { name: "Админ", href: "/admin" },
  { name: "Логин", href: "/login" },
];

export default function Navbar() {
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

  return (
    <div className="w-full bg-gradient-to-b from-primary-900 to-primary-800 border-b border-primary-700/50">
      <header className="relative">
        <nav className="container-base py-4" aria-label="Global">
          <div className="flex items-center justify-between">
            {/* Left Logo */}
            <Link to="/" className="p-2 hover:bg-white/20 transition-colors">
              <img
                className="h-10 w-auto transition-transform duration-300 hover:scale-105"
                src="/imklogorgb.png"
                alt="IMK logo"
              />
            </Link>

            {/* Centered Desktop Navigation */}
            <div className="hidden lg:flex flex-grow justify-center mx-8">
              <div className="flex items-center gap-x-1">
                {navigation.map((item) => (
                  <NavLink
                    key={item.name}
                    to={item.href}
                    className={({ isActive }) =>
                      `px-4 py-2 text-sm font-medium rounded-lg transition-all duration-200
                      ${isActive 
                        ? 'bg-primary-700 text-white shadow-lg' 
                        : 'text-neutral-200 hover:bg-primary-700/50 hover:text-white'}`
                    }
                  >
                    {item.name}
                  </NavLink>
                ))}
              </div>
            </div>

            {/* Right Side - TUF Logo & Mobile Menu */}
            <div className="flex items-center gap-x-4">
              {/* TUF Logo */}
              <a href="/" className="hidden lg:flex p-2 hover:bg-white/20 transition-colors">
                <img
                  className="h-10 w-auto transition-transform duration-300 hover:scale-105"
                  src="/tuf.png"
                  alt="TUF logo"
                />
              </a>

              {/* Mobile menu button */}
              <Button
                variant="ghost"
                className="lg:hidden text-white hover:bg-primary-700/50"
                onClick={() => setMobileMenuOpen(true)}
              >
                <span className="sr-only">Open main menu</span>
                <Bars3Icon className="h-6 w-6" aria-hidden="true" />
              </Button>
            </div>
          </div>
        </nav>

        {/* Mobile menu */}
        <Dialog
          as="div"
          className="lg:hidden"
          open={mobileMenuOpen}
          onClose={setMobileMenuOpen}
        >
          <div className="fixed inset-0 z-50 bg-neutral-900/50 backdrop-blur-sm" />
          <Dialog.Panel className="fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-primary-900 px-6 py-6 sm:max-w-sm">
            <div className="flex items-center justify-between">
              <Link to="/" className="bg-white/10 rounded-lg p-2">
                <img
                  className="h-8 w-auto"
                  src="/imklogorgb.png"
                  alt="IMK logo"
                />
              </Link>
              <Button
                variant="ghost"
                onClick={() => setMobileMenuOpen(false)}
                className="text-white hover:bg-primary-700/50"
              >
                <span className="sr-only">Close menu</span>
                <XMarkIcon className="h-6 w-6" aria-hidden="true" />
              </Button>
            </div>
            <div className="mt-6 flow-root">
              <div className="space-y-1 py-6">
                {navigation.map((item) => (
                  <NavLink
                    key={item.name}
                    to={item.href}
                    className={({ isActive }) =>
                      `block px-3 py-2 text-base font-medium rounded-lg transition-colors
                      ${isActive
                        ? 'bg-primary-700 text-white'
                        : 'text-neutral-200 hover:bg-primary-700/50 hover:text-white'
                      }`
                    }
                    onClick={() => setMobileMenuOpen(false)}
                  >
                    {item.name}
                  </NavLink>
                ))}
              </div>
            </div>
          </Dialog.Panel>
        </Dialog>
      </header>
    </div>
  );
}