import React, { useState } from "react";

const MAIN_LINKS = [
  { name: "Startseite", href: "/" },
  { name: "Über mich", href: "/about-me" },
  { name: "Ziele", href: "/goals" },
  { name: "Kontakt", href: "/contact" },
];

const PROJECT_LINKS = [
  {
    category: "Fertige Projekte",
    items: [
      { name: "Sprachstudie Wikipedia", href: "/projects/languagestudy" },
      { name: "Server Architektur", href: "/projects/server" },
      { name: "TDoT AI Demo", href: "/projects/tdot" },
    ],
  },
  {
    category: "In Arbeit",
    items: [
      { name: "KI Sprachenlern Roleplay", href: "/projects/language-roleplay" },
    ],
  },
  {
    category: "Pausiert",
    items: [
      { name: "Krimi Dinner mit KI", href: "/projects/crime-dinner" },
    ],
  },
  {
    category: "Abschlussprojekte",
    items: [
      { name: "Wohnungssuche und Fahrgemeinschaften", href: "/finalprojects/wufg" },
      { name: "Online Casino", href: "/finalprojects/onlineCasino" },
    ],
  },
];

function Navigation() {
  const [isOpen, setIsOpen] = useState(false);
  const [dropdownOpen, setDropdownOpen] = useState(false);

  const toggleMenu = () => {
    setIsOpen(!isOpen);
  };

  const toggleDropdown = () => {
    setDropdownOpen(!dropdownOpen);
  };

  return (
    <nav className="bg-white border-b border-gray-200">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between h-16">
          <div className="flex">
            <div className="flex-shrink-0 flex items-center">
              <a
                href="/"
                className="text-xl font-bold text-gray-800 hover:text-gray-900"
              >
                Simon Altschäffl
              </a>
            </div>
          </div>

          {/* Desktop Menu */}
          <div className="hidden md:flex md:items-center md:space-x-4">
            {MAIN_LINKS.map((link) => (
              <a
                key={link.name}
                href={link.href}
                className="text-gray-600 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium"
              >
                {link.name}
              </a>
            ))}

            {/* Dropdown */}
            <div className="relative">
              <button
                onClick={toggleDropdown}
                onMouseEnter={() => setDropdownOpen(true)}
                className="text-gray-600 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium inline-flex items-center focus:outline-none"
              >
                <span>Projekte</span>
                <svg
                  className="ml-1 h-5 w-5"
                  fill="currentColor"
                  viewBox="0 0 20 20"
                >
                  <path
                    fillRule="evenodd"
                    d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
                    clipRule="evenodd"
                  />
                </svg>
              </button>

              {dropdownOpen && (
                <div
                  className="absolute right-0 mt-2 w-64 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-50"
                  onMouseLeave={() => setDropdownOpen(false)}
                >
                  <div className="py-1" role="menu" aria-orientation="vertical">
                    {PROJECT_LINKS.map((section, index) => (
                      <React.Fragment key={section.category}>
                        {index > 0 && (
                          <div className="border-t border-gray-100 my-1"></div>
                        )}
                        <span className="block px-4 py-2 text-xs font-semibold text-gray-400 uppercase tracking-wider">
                          {section.category}
                        </span>
                        {section.items.map((item) => (
                          <a
                            key={item.name}
                            href={item.href}
                            className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
                            role="menuitem"
                          >
                            {item.name}
                          </a>
                        ))}
                      </React.Fragment>
                    ))}
                  </div>
                </div>
              )}
            </div>
          </div>

          {/* Mobile menu button */}
          <div className="flex md:hidden items-center">
            <button
              onClick={toggleMenu}
              type="button"
              className="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500"
              aria-controls="mobile-menu"
              aria-expanded="false"
            >
              <span className="sr-only">Open main menu</span>
              {!isOpen ? (
                <svg
                  className="block h-6 w-6"
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                  aria-hidden="true"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth="2"
                    d="M4 6h16M4 12h16M4 18h16"
                  />
                </svg>
              ) : (
                <svg
                  className="block h-6 w-6"
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                  aria-hidden="true"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth="2"
                    d="M6 18L18 6M6 6l12 12"
                  />
                </svg>
              )}
            </button>
          </div>
        </div>
      </div>

      {/* Mobile Menu */}
      {isOpen && (
        <div className="md:hidden" id="mobile-menu">
          <div className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
            {MAIN_LINKS.map((link) => (
              <a
                key={link.name}
                href={link.href}
                className="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50"
              >
                {link.name}
              </a>
            ))}

            <div className="border-t border-gray-200 pt-4 pb-3">
              <div className="flex items-center px-5">
                <div className="flex-shrink-0">
                  <span className="font-medium text-gray-500">Projekte</span>
                </div>
              </div>
              <div className="mt-3 px-2 space-y-1">
                {PROJECT_LINKS.map((section, index) => (
                  <React.Fragment key={section.category}>
                    <span
                      className={`block px-3 py-2 text-xs font-bold text-gray-400 uppercase ${index > 0 ? "mt-2" : ""
                        }`}
                    >
                      {section.category}
                    </span>
                    {section.items.map((item) => (
                      <a
                        key={item.name}
                        href={item.href}
                        className="block px-3 py-2 rounded-md text-base font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-50"
                      >
                        {item.name}
                      </a>
                    ))}
                  </React.Fragment>
                ))}
              </div>
            </div>
          </div>
        </div>
      )}
    </nav>
  );
}

export default Navigation;