"use client";

import Link from "next/link";
import { memo } from "react";
import { Bars3Icon, QuestionMarkCircleIcon } from "@heroicons/react/24/outline";
import { NotificationBell } from "@/features/notifications";

interface HeaderProps {
  onMenuClick: () => void;
  user: { firstName?: string | null; lastName?: string | null; email?: string | null } | null;
  profileReady: boolean;
}

export const Header = memo(function Header({ onMenuClick, user, profileReady }: HeaderProps) {
  const displayName = profileReady
    ? [user?.firstName, user?.lastName].filter(Boolean).join(" ") ||
      user?.email?.split("@")[0] ||
      "Account"
    : user?.email?.split("@")[0] || "Account";

  // Get initials for avatar
  const initials =
    profileReady && user?.firstName && user?.lastName
      ? `${user.firstName[0]}${user.lastName[0]}`.toUpperCase()
      : displayName.slice(0, 2).toUpperCase();

  return (
    <div className="relative z-40 bg-header border-b border-header-border/50 backdrop-blur-xl">
      <div className="flex items-center h-16 gap-3 px-4 sm:px-6">
        <button
          type="button"
          className="md:hidden p-2 rounded-xl text-muted-foreground hover:text-foreground hover:bg-muted/60 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-primary/20"
          onClick={onMenuClick}
          aria-label="Open navigation"
        >
          <Bars3Icon className="h-6 w-6" />
        </button>

        <div className="flex-1" />

        <div className="flex items-center gap-1">
          <NotificationBell />

          <Link
            href="/account/support"
            prefetch
            aria-label="Help"
            className="hidden sm:inline-flex p-2.5 rounded-xl text-muted-foreground hover:text-foreground hover:bg-muted/60 transition-all duration-200"
            title="Support Center"
          >
            <QuestionMarkCircleIcon className="h-5 w-5" />
          </Link>

          <Link
            href="/account/settings"
            prefetch
            className="group flex items-center gap-2.5 px-3 py-1.5 text-sm font-medium text-muted-foreground hover:text-foreground hover:bg-muted/60 rounded-xl transition-all duration-200"
          >
            <div className="h-7 w-7 rounded-lg bg-gradient-to-br from-primary to-primary-hover flex items-center justify-center text-xs font-bold text-primary-foreground shadow-sm">
              {initials}
            </div>
            <span className="hidden sm:inline">{displayName}</span>
          </Link>
        </div>
      </div>
    </div>
  );
});
