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

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

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

  return (
    <div className="absolute w-full z-50">
      <header className="relative bg-transparent">
        <nav
          className="container mx-auto flex items-center justify-between p-6 lg:px-8"
          aria-label="Global"
        >
          {/* Logo */}
          <div className="flex lg:flex-1">
            <a href="/" className="flex items-center -m-1.5 p-1.5">
              <img
                className="h-12 w-auto hover:scale-105 transition-transform duration-300"
                src="/imklogorgb.png"
                alt="IMK logo"
              />
            </a>
          </div>

          {/* Mobile menu button */}
          <div className="flex lg:hidden">
            <button
              type="button"
              className="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-white hover:bg-white/10 transition-colors duration-300"
              onClick={() => setMobileMenuOpen(true)}
            >
              <span className="sr-only">Open main menu</span>
              <Bars3Icon className="h-6 w-6" aria-hidden="true" />
            </button>
          </div>

          {/* Desktop navigation */}
          <div className="hidden lg:flex lg:gap-x-12">
            {navigation.map((item) => (
              <NavLink
                key={item.name}
                to={item.href}
                className={({ isActive }) =>
                  `text-base font-semibold leading-6 transition-all duration-300
                  ${isActive 
                    ? 'text-white border-b-2 border-white' 
                    : 'text-gray-200 hover:text-white hover:border-b-2 hover:border-white/50'
                  }`
                }
              >
                {item.name}
              </NavLink>
            ))}
          </div>

          {/* TUF Logo */}
          <div className="hidden lg:flex lg:flex-1 lg:justify-end">
            <a href="/" className="flex items-center -m-1.5 p-1.5">
              <img
                className="h-12 w-auto hover:scale-105 transition-transform duration-300"
                src="/tuf.png"
                alt="TUF logo"
              />
            </a>
          </div>
        </nav>

        {/* Mobile menu */}
        <Dialog
          as="div"
          className="lg:hidden"
          open={mobileMenuOpen}
          onClose={setMobileMenuOpen}
        >
          <div className="fixed inset-0 z-50" />
          <Dialog.Panel className="fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-gradient-to-b from-blue-900 to-blue-800 px-6 py-6 sm:max-w-sm">
            <div className="flex items-center justify-between">
              <a href="/" className="-m-1.5 p-1.5">
                <img
                  className="h-8 w-auto"
                  src="/imklogorgb.png"
                  alt="IMK logo"
                />
              </a>
              <button
                type="button"
                className="-m-2.5 rounded-md p-2.5 text-white hover:bg-white/10 transition-colors duration-300"
                onClick={() => setMobileMenuOpen(false)}
              >
                <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="-my-6 divide-y divide-white/10">
                <div className="space-y-2 py-6">
                  {navigation.map((item) => (
                    <NavLink
                      key={item.name}
                      to={item.href}
                      className={({ isActive }) =>
                        `-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 transition-colors duration-300
                        ${isActive
                          ? 'text-white bg-white/10'
                          : 'text-gray-200 hover:bg-white/5 hover:text-white'
                        }`
                      }
                      onClick={() => setMobileMenuOpen(false)}
                    >
                      {item.name}
                    </NavLink>
                  ))}
                </div>
              </div>
            </div>
          </Dialog.Panel>
        </Dialog>
      </header>
    </div>
  );
}