"use client";

import { Brand } from "@/components/brand/Brand";
import { Icon } from "@/components/ui/Icon";
import { Avatar } from "@/components/ui/Avatar";
import { usePopover } from "@/lib/ui/popover";
import { logoutAction } from "./actions";
import { NotificationsButton } from "./NotificationsButton";
import { HeaderNav } from "./HeaderNav";
import { PRESENCE_META, type Presence } from "@/lib/presence";
import type { NavGroup } from "@/lib/navigation";

type Props = {
  groups: NavGroup[];
  user: {
    name: string;
    email: string;
    roleLabel: string;
    avatarUrl: string | null;
    presence: Presence;
  };
};

export function TopNav({ groups, user }: Props) {
  const { open: menuOpen, toggle: toggleMenu, ref: menuRef } = usePopover("user-menu");

  return (
    <header className="sticky top-0 z-50 pt-3 pb-1">
      <div className="container-app">
        <nav className="glass flex items-center gap-3 rounded-[999px] px-3 py-2">
          <Brand size={30} href="/dashboard" />

          {/* Kategorien-Navigation mit Hover-Menüs */}
          <div className="ml-1 flex-1 overflow-visible">
            <HeaderNav groups={groups} />
          </div>

          <div className="ml-auto flex items-center gap-2">
            <NotificationsButton />

            {/* Benutzer-Menü */}
            <div className="relative" ref={menuRef}>
              <button
                className="pill"
                data-active={menuOpen}
                onClick={toggleMenu}
                aria-haspopup="menu"
                aria-expanded={menuOpen}
              >
                <Avatar name={user.name} src={user.avatarUrl} size={24} status={user.presence} />
                <span className="hidden sm:inline">{user.name.split(" ")[0]}</span>
                <Icon name="chevron" size={14} style={{ transform: "rotate(90deg)" }} />
              </button>

              {menuOpen ? (
                <div
                  role="menu"
                  className="card-sm pop-solid animate-in absolute right-0 mt-2 w-60"
                  style={{ zIndex: 60 }}
                >
                  <div className="flex items-center gap-3 px-1 pb-2">
                    <Avatar name={user.name} src={user.avatarUrl} size={40} status={user.presence} />
                    <div className="min-w-0">
                      <div className="truncate font-bold">{user.name}</div>
                      <div className="truncate text-muted text-xs">{user.email}</div>
                    </div>
                  </div>
                  <div className="flex items-center gap-2">
                    <span className="badge">{user.roleLabel}</span>
                    <span className="status-badge" data-presence={user.presence}>
                      <span className="status-badge-dot" style={{ background: PRESENCE_META[user.presence].color }} />
                      {PRESENCE_META[user.presence].label}
                    </span>
                  </div>
                  <div className="my-2 h-px" style={{ background: "var(--line)" }} />
                  <a href="/account" className="pill w-full justify-start" style={{ border: "none", background: "transparent" }}>
                    <Icon name="user" size={16} /> Mein Konto
                  </a>
                  <form action={logoutAction}>
                    <button type="submit" className="pill mt-1 w-full justify-start" style={{ border: "none", background: "transparent" }}>
                      <Icon name="logout" size={16} /> Abmelden
                    </button>
                  </form>
                </div>
              ) : null}
            </div>
          </div>
        </nav>
      </div>
    </header>
  );
}