"use client";

import Link from "next/link";
import { useState } from "react";
import { ThemeToggle } from "@/components/layout/ThemeToggle";
import { Avatar } from "@/components/ui/Avatar";
import { NavLink, type NavItemWithChildren } from "@/components/layout/NavLink";
import { logoutUser } from "@/lib/actions/auth";

export interface HeaderUser {
  username: string;
  avatarUrl: string | null;
  unreadCount: number;
}

function NotificationBell({ unreadCount }: { unreadCount: number }) {
  return (
    <Link href="/notifications" className="relative text-charcoal hover:text-terracotta" aria-label="Notifications">
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" aria-hidden="true">
        <path
          d="M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"
          stroke="currentColor"
          strokeWidth="2"
          strokeLinecap="round"
          strokeLinejoin="round"
        />
        <path
          d="M13.73 21a2 2 0 0 1-3.46 0"
          stroke="currentColor"
          strokeWidth="2"
          strokeLinecap="round"
          strokeLinejoin="round"
        />
      </svg>
      {unreadCount > 0 && (
        <span className="absolute -right-1.5 -top-1.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-terracotta px-1 text-[10px] font-medium text-white">
          {unreadCount > 99 ? "99+" : unreadCount}
        </span>
      )}
    </Link>
  );
}

function UserMenu({ user }: { user: HeaderUser }) {
  return (
    <div className="flex items-center gap-4">
      <NotificationBell unreadCount={user.unreadCount} />
      <Link href={`/profile/${user.username}`} className="flex items-center gap-2">
        <Avatar username={user.username} avatarUrl={user.avatarUrl} size="sm" />
        <span className="text-sm font-medium text-charcoal hover:text-terracotta">
          {user.username}
        </span>
      </Link>
      <form action={logoutUser}>
        <button
          type="submit"
          className="text-sm font-medium text-charcoal/60 hover:text-terracotta"
        >
          Log out
        </button>
      </form>
    </div>
  );
}

export function Header({
  currentUser,
  headerItems,
}: {
  currentUser: HeaderUser | null;
  headerItems: NavItemWithChildren[];
}) {
  const [menuOpen, setMenuOpen] = useState(false);

  return (
    <header className="border-b border-charcoal/10 bg-warm-white">
      <div className="mx-auto flex max-w-6xl items-center justify-between px-6 py-4">
        <Link href="/" className="flex items-center gap-2">
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img src="/logo.png" alt="Cellar Labels" className="h-12 w-12" />
        </Link>

        <nav className="hidden items-center gap-6 sm:flex">
          {headerItems.map((item) => (
            <NavLink key={item.id} item={item} />
          ))}
          {currentUser && <UserMenu user={currentUser} />}
          <ThemeToggle />
        </nav>

        <button
          type="button"
          className="text-charcoal sm:hidden"
          aria-expanded={menuOpen}
          aria-label="Toggle menu"
          onClick={() => setMenuOpen((open) => !open)}
        >
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true">
            <path
              d="M4 6h16M4 12h16M4 18h16"
              stroke="currentColor"
              strokeWidth="2"
              strokeLinecap="round"
            />
          </svg>
        </button>
      </div>

      {menuOpen && (
        <nav className="flex flex-col gap-4 border-t border-charcoal/10 px-6 py-4 sm:hidden">
          {headerItems.map((item) => (
            <div key={item.id} className="flex flex-col gap-3">
              <Link
                href={item.url}
                className={
                  item.isButtonStyle
                    ? "w-fit rounded-full bg-terracotta px-4 py-2 text-sm font-medium text-white hover:bg-terracotta/90"
                    : "text-sm font-medium text-charcoal hover:text-terracotta"
                }
                onClick={() => setMenuOpen(false)}
              >
                {item.label}
              </Link>
              {item.children.length > 0 && (
                <div className="flex flex-col gap-3 pl-4">
                  {item.children.map((child) => (
                    <Link
                      key={child.id}
                      href={child.url}
                      className="text-sm font-medium text-charcoal/70 hover:text-terracotta"
                      onClick={() => setMenuOpen(false)}
                    >
                      {child.label}
                    </Link>
                  ))}
                </div>
              )}
            </div>
          ))}
          {currentUser && (
            <>
              <Link
                href={`/profile/${currentUser.username}`}
                className="flex items-center gap-2 text-sm font-medium text-charcoal hover:text-terracotta"
                onClick={() => setMenuOpen(false)}
              >
                <Avatar username={currentUser.username} avatarUrl={currentUser.avatarUrl} size="sm" />
                {currentUser.username}
              </Link>
              <Link
                href="/notifications"
                className="text-sm font-medium text-charcoal hover:text-terracotta"
                onClick={() => setMenuOpen(false)}
              >
                Notifications
                {currentUser.unreadCount > 0 && ` (${currentUser.unreadCount})`}
              </Link>
              <form action={logoutUser}>
                <button
                  type="submit"
                  className="text-sm font-medium text-charcoal/60 hover:text-terracotta"
                >
                  Log out
                </button>
              </form>
            </>
          )}
          <ThemeToggle className="w-fit" />
        </nav>
      )}
    </header>
  );
}