"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 UserInfo {
  firstName?: string | null;
  lastName?: string | null;
  email?: string | null;
}

function getDisplayName(user: UserInfo | null, profileReady: boolean): string {
  const fullName = [user?.firstName, user?.lastName].filter(Boolean).join(" ");
  const emailPrefix = user?.email?.split("@")[0];

  if (profileReady) {
    return fullName || emailPrefix || "Account";
  }
  return emailPrefix || "Account";
}

function getInitials(user: UserInfo | null, profileReady: boolean, displayName: string): string {
  if (profileReady && user?.firstName && user?.lastName) {
    return `${user.firstName[0]}${user.lastName[0]}`.toUpperCase();
  }
  return displayName.slice(0, 2).toUpperCase();
}

interface HeaderProps {
  onMenuClick: () => void;
  user: UserInfo | null;
  profileReady: boolean;
}

export const Header = memo(function Header({ onMenuClick, user, profileReady }: HeaderProps) {
  const displayName = getDisplayName(user, profileReady);
  const initials = getInitials(user, profileReady, displayName);

  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-2 sm:gap-3 px-3 sm:px-6">
        {/* Mobile menu button - 44px minimum touch target */}
        <button
          type="button"
          className="md:hidden flex items-center justify-center w-11 h-11 -ml-1 rounded-xl text-muted-foreground hover:text-foreground hover:bg-muted/60 active:bg-muted/80 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" />

        {/* Right side actions */}
        <div className="flex items-center gap-1 sm:gap-2">
          {/* Notification bell */}
          <NotificationBell />

          {/* Help link - visible on larger screens */}
          <Link
            href="/account/support"
            prefetch
            aria-label="Help"
            className="hidden sm:inline-flex items-center justify-center w-11 h-11 rounded-xl text-muted-foreground hover:text-foreground hover:bg-muted/60 active:bg-muted/80 transition-all duration-200"
            title="Support Center"
          >
            <QuestionMarkCircleIcon className="h-5 w-5" />
          </Link>

          {/* Profile link - enhanced for mobile */}
          <Link
            href="/account/settings"
            prefetch
            className="group flex items-center gap-2 sm:gap-2.5 px-2 sm:px-3 py-1.5 min-h-[44px] text-sm font-medium text-muted-foreground hover:text-foreground hover:bg-muted/60 active:bg-muted/80 rounded-xl transition-all duration-200"
          >
            <div className="h-8 w-8 sm:h-7 sm: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 group-hover:shadow-md transition-shadow">
              {initials}
            </div>
            {/* Show truncated name on mobile, full name on larger screens */}
            <span className="hidden xs:inline sm:hidden max-w-[80px] truncate text-sm">
              {displayName.split(" ")[0]}
            </span>
            <span className="hidden sm:inline">{displayName}</span>
          </Link>
        </div>
      </div>
    </div>
  );
});
