import type { FanProfile, NavGroup, NavItem, ScreenId } from "../../types/passport";
import { formatCompactNumber } from "../../utils/passportMetrics";

interface AppHeaderProps {
  activeScreen: ScreenId;
  navItems: NavItem[];
  passportScore: number;
  profile: FanProfile;
  onNavigate: (screen: ScreenId) => void;
  onRestartOnboarding: () => void;
}

const navGroups: { id: NavGroup; label: string }[] = [
  { id: "primary", label: "Passport" },
  { id: "collection", label: "Collections" },
  { id: "play", label: "Play daily" },
  { id: "social", label: "Community" },
];

export default function AppHeader({
  activeScreen,
  navItems,
  passportScore,
  profile,
  onNavigate,
  onRestartOnboarding,
}: AppHeaderProps) {
  return (
    <header className="app-header">
      <a className="skip-link" href="#passport-main">
        Skip to passport content
      </a>

      <div className="header-top">
        <div className="brand-lockup">
          <span aria-hidden="true" className="brand-mark">
            📘
          </span>
          <div>
            <p className="brand-title">Fan Passport</p>
            <span className="brand-subtitle">World Cup Journey</span>
          </div>
        </div>

        <button className="button-ghost" onClick={onRestartOnboarding} type="button">
          Restart demo
        </button>
      </div>

      <div className="header-profile" aria-label="Current fan passport summary">
        <span aria-hidden="true" className="header-avatar">
          {profile.avatarEmoji}
        </span>
        <div>
          <strong>{profile.displayName}</strong>
          <p className="card-meta">{profile.handle}</p>
        </div>
        <div className="header-score">
          <strong>{formatCompactNumber(passportScore)}</strong>
          <p className="card-meta">points</p>
        </div>
      </div>

      <nav aria-label="Main passport navigation" className="desktop-nav">
        {navGroups.map((group) => {
          const items = navItems.filter((item) => item.group === group.id);

          if (items.length === 0) {
            return null;
          }

          return (
            <section aria-labelledby={`nav-group-${group.id}`} key={group.id}>
              <h2 className="nav-group-title" id={`nav-group-${group.id}`}>
                {group.label}
              </h2>
              <div className="nav-group-list">
                {items.map((item) => (
                  <button
                    aria-current={activeScreen === item.id ? "page" : undefined}
                    className="nav-button"
                    key={item.id}
                    onClick={() => onNavigate(item.id)}
                    type="button"
                  >
                    <span aria-hidden="true" className="nav-icon">
                      {item.icon}
                    </span>
                    <span className="nav-copy">
                      <span className="nav-label">{item.label}</span>
                      <span className="nav-description">{item.description}</span>
                    </span>
                  </button>
                ))}
              </div>
            </section>
          );
        })}
      </nav>

      <nav aria-label="Quick passport navigation" className="mobile-nav-strip">
        {navItems.map((item) => (
          <button
            aria-current={activeScreen === item.id ? "page" : undefined}
            className="mobile-strip-button"
            key={item.id}
            onClick={() => onNavigate(item.id)}
            type="button"
          >
            <span aria-hidden="true">{item.icon}</span>
            {item.shortLabel}
          </button>
        ))}
      </nav>
    </header>
  );
}