"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import {
  ChevronLeft,
  ChevronRight,
  Menu,
  Search,
  HelpCircle,
  Settings,
  User,
  LogOut,
} from "lucide-react";
import { signOut } from "next-auth/react";
import { GlobalSearchModal } from "@/modules/search/components/global-search-modal";

interface NavbarProps {
  user?: {
    name?: string | null;
    email?: string | null;
  };
  isSidebarExpanded?: boolean;
  onToggleSidebar?: () => void;
  onOpenMobileMenu?: () => void;
}

export function Navbar({
  user,
  isSidebarExpanded = true,
  onToggleSidebar,
  onOpenMobileMenu,
}: NavbarProps) {
  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
  const [isSearchOpen, setIsSearchOpen] = useState(false);

  useEffect(() => {
    function handleKeyDown(event: KeyboardEvent) {
      if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
        event.preventDefault();
        setIsSearchOpen(true);
      }
    }

    window.addEventListener("keydown", handleKeyDown);
    return () => window.removeEventListener("keydown", handleKeyDown);
  }, []);

  return (
    <header className="sticky top-0 z-40 h-14 bg-white/95 backdrop-blur-md border-b border-zinc-200/80 px-3 sm:px-5 flex items-center justify-between shrink-0 select-none shadow-xs">
      {/* Left Section: Brand & Sidebar Controls */}
      <div className="flex items-center gap-3">
        {/* Mobile Hamburger Button */}
        <button
          type="button"
          onClick={onOpenMobileMenu}
          aria-label="Abrir menu de navegação"
          className="lg:hidden p-2 rounded-xl text-zinc-600 hover:text-zinc-900 hover:bg-zinc-100 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-600 focus-visible:ring-offset-2"
        >
          <Menu className="w-5 h-5" />
        </button>

        {/* Desktop Sidebar Toggle Button */}
        <button
          type="button"
          onClick={onToggleSidebar}
          aria-label={isSidebarExpanded ? "Recolher menu lateral" : "Expandir menu lateral"}
          title={isSidebarExpanded ? "Recolher menu lateral" : "Expandir menu lateral"}
          className="flex items-center justify-center w-8 h-8 rounded-xl bg-[#0F9FDF] text-white shadow-xs hover:bg-[#0C87BD] active:scale-95 transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#0F9FDF] focus-visible:ring-offset-2 cursor-pointer"
        >
          {isSidebarExpanded ? (
            <ChevronLeft className="w-5 h-5 font-black stroke-[3]" />
          ) : (
            <ChevronRight className="w-5 h-5 font-black stroke-[3]" />
          )}
        </button>

        {/* Brand Name Link */}
        <Link
          href="/"
          className="flex items-center gap-2 text-sm font-extrabold text-zinc-900 hover:text-[#0F9FDF] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#0F9FDF] focus-visible:ring-offset-2 rounded-lg px-1 py-0.5"
        >
          <span className="hidden sm:inline tracking-tight">Newsletter Platform</span>
        </Link>
      </div>

      {/* Right Actions */}
      <div className="flex items-center gap-2 sm:gap-3">
        {/* Icon Action Buttons */}
        <div className="flex items-center gap-1 text-zinc-600">
          <button
            type="button"
            onClick={() => setIsSearchOpen(true)}
            className="p-2 rounded-xl hover:bg-zinc-100 hover:text-zinc-900 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#0F9FDF] focus-visible:ring-offset-2"
            title="Buscar (Ctrl+K)"
            aria-label="Buscar"
          >
            <Search className="w-4 h-4" />
          </button>

          <button
            type="button"
            className="p-2 rounded-xl hover:bg-zinc-100 hover:text-zinc-900 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#0F9FDF] focus-visible:ring-offset-2"
            title="Ajuda & Suporte"
            aria-label="Ajuda e suporte"
          >
            <HelpCircle className="w-4 h-4" />
          </button>

          <Link
            href="/settings/domains"
            className="p-2 rounded-xl hover:bg-zinc-100 hover:text-zinc-900 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#0F9FDF] focus-visible:ring-offset-2"
            title="Configurações de Domínios"
            aria-label="Configurações de domínios"
          >
            <Settings className="w-4 h-4" />
          </Link>
        </div>

        {/* User Dropdown */}
        <div className="relative">
          <button
            type="button"
            onClick={() => setIsDropdownOpen((prev) => !prev)}
            aria-label="Menu do usuário"
            aria-expanded={isDropdownOpen}
            className="w-8 h-8 rounded-full bg-[#0F9FDF] text-white flex items-center justify-center text-xs font-bold hover:ring-2 hover:ring-[#0F9FDF]/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#0F9FDF] focus-visible:ring-offset-2 transition-all ml-1 cursor-pointer"
          >
            {user?.name ? user.name.charAt(0).toUpperCase() : <User className="w-4 h-4" />}
          </button>

          {isDropdownOpen && (
            <div className="absolute right-0 mt-2 w-56 bg-white border border-zinc-200 text-zinc-800 rounded-2xl shadow-xl p-2 z-50 animate-in fade-in zoom-in-95 duration-100">
              <div className="px-3 py-2 border-b border-zinc-100">
                <p className="text-xs font-bold text-zinc-900 truncate">{user?.name || "Usuário"}</p>
                <p className="text-[11px] text-zinc-500 truncate">{user?.email || "contato@plataforma.com"}</p>
              </div>
              <div className="py-1">
                <Link
                  href="/settings/domains"
                  onClick={() => setIsDropdownOpen(false)}
                  className="flex items-center px-3 py-2 text-xs font-semibold text-zinc-700 hover:text-zinc-900 hover:bg-zinc-100 rounded-xl transition-colors"
                >
                  <Settings className="w-3.5 h-3.5 mr-2 text-[#0F9FDF]" />
                  Domínios & Configurações
                </Link>
              </div>
              <div className="pt-1 border-t border-zinc-100">
                <button
                  type="button"
                  onClick={async () => {
                    setIsDropdownOpen(false);
                    await signOut({ redirect: false });
                    window.location.replace("/login");
                  }}
                  className="w-full flex items-center px-3 py-2 text-xs font-semibold text-rose-600 hover:bg-rose-50 rounded-xl transition-colors cursor-pointer"
                >
                  <LogOut className="w-3.5 h-3.5 mr-2" />
                  Sair da Conta
                </button>
              </div>
            </div>
          )}
        </div>
      </div>

      <GlobalSearchModal open={isSearchOpen} onOpenChange={setIsSearchOpen} />
    </header>
  );
}