/**
 * AppHeader Component
 * LOTR-themed unified header with navigation, page title, and user stats.
 * Fantasy-modern design: elvish border, ring icon, gold shimmer accents,
 * responsive hamburger menu for mobile.
 *
 * Used across all main pages (Dashboard, Quests, Map, Inventory).
 */

import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import { Button } from './ui/Button';
import ScoringCard from './ScoringCard';
import './AppHeader.css';

interface AppHeaderProps {
  page: 'dashboard' | 'quests' | 'map' | 'inventory';
  gold: number;
  completedQuests: number;
  averageSavings?: number | null;
  onLogout: () => void;
}

/** SVG ring icon — the One Ring as a minimal emblem */
const RingIcon: React.FC = () => (
  <svg
    width="30"
    height="30"
    viewBox="0 0 30 30"
    fill="none"
    aria-hidden="true"
    className="lotr-header__ring-svg"
  >
    <circle cx="15" cy="15" r="11" stroke="#DAA520" strokeWidth="2.5" fill="none" />
    <circle cx="15" cy="15" r="6.5" stroke="#B8860B" strokeWidth="1.5" fill="none" />
    <circle cx="15" cy="15" r="2.5" fill="#DAA520" />
    {/* Small gem highlights at cardinal points */}
    <circle cx="15" cy="3.5" r="1" fill="#FFD700" opacity="0.8" />
    <circle cx="15" cy="26.5" r="1" fill="#FFD700" opacity="0.8" />
    <circle cx="3.5" cy="15" r="1" fill="#FFD700" opacity="0.8" />
    <circle cx="26.5" cy="15" r="1" fill="#FFD700" opacity="0.8" />
  </svg>
);

const PAGE_CONFIG: Record<string, { title: string; icon: string }> = {
  dashboard: { title: 'Dashboard', icon: '🏰' },
  quests: { title: 'Quests', icon: '📜' },
  map: { title: 'Middle-Earth Map', icon: '🗺️' },
  inventory: { title: 'Inventory', icon: '🎒' },
};

interface NavLink {
  to: string;
  label: string;
  icon: string;
  pageKey: 'dashboard' | 'quests' | 'map' | 'inventory';
}

const NAV_LINKS: NavLink[] = [
  { to: '/dashboard', label: 'Dashboard', icon: '🏰', pageKey: 'dashboard' },
  { to: '/quests', label: 'Quests', icon: '📜', pageKey: 'quests' },
  { to: '/map', label: 'Middle-Earth Map', icon: '🗺️', pageKey: 'map' },
  { to: '/inventory', label: 'Inventory', icon: '🎒', pageKey: 'inventory' },
];

const AppHeader: React.FC<AppHeaderProps> = ({
  page,
  gold,
  completedQuests,
  averageSavings,
  onLogout,
}) => {
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  const currentPage = PAGE_CONFIG[page] ?? PAGE_CONFIG.dashboard;

  return (
    <header
      className={`lotr-header${isMenuOpen ? ' lotr-header--menu-open' : ''}`}
      role="banner"
    >
      {/* Top gold shimmer accent line */}
      <div className="lotr-header__top-accent" aria-hidden="true" />

      <div className="lotr-header__inner">
        {/* ── BRAND ── */}
        <div className="lotr-header__brand">
          <span className="lotr-header__ring-wrap">
            <RingIcon />
          </span>
          <div className="lotr-header__brand-text">
            <span className="lotr-header__subtitle">The Fellowship</span>
            <h1 className="lotr-header__page-title">
              <span aria-hidden="true">{currentPage.icon}</span>{' '}
              {currentPage.title}
            </h1>
          </div>
        </div>

        {/* ── NAVIGATION ──
            Always in DOM (single instance) so tests find testids reliably.
            On mobile: hidden via CSS unless lotr-header--menu-open. ── */}
        <nav
          className="lotr-header__nav"
          data-tour="main-navigation"
          data-testid="header-navigation"
          aria-label="Main navigation"
          id="main-navigation"
        >
          {NAV_LINKS.map((link) => {
            const isActive = page === link.pageKey;
            return (
              <Link
                key={link.to}
                to={link.to}
                className={`lotr-nav-link${isActive ? ' lotr-nav-link--active text-gold font-bold' : ' text-parchment hover:text-gold'}`}
                data-testid={`header-nav-${link.to.slice(1)}`}
                aria-current={isActive ? 'page' : undefined}
                onClick={() => setIsMenuOpen(false)}
              >
                <span className="lotr-nav-link__icon" aria-hidden="true">
                  {link.icon}
                </span>
                <span className="lotr-nav-link__label">{link.label}</span>
              </Link>
            );
          })}
        </nav>

        {/* ── CONTROLS (scoring + logout) ──
            Always in DOM. On desktop → right column.
            On mobile closed → CSS hidden; on mobile open → reflowed below nav. ── */}
        <div className="lotr-header__controls">
          <ScoringCard
            gold={gold}
            completedQuests={completedQuests}
            averageSavings={averageSavings}
          />
          <Button
            onClick={onLogout}
            variant="secondary"
            className="lotr-logout-btn text-sm whitespace-nowrap"
            data-testid="header-logout-button"
          >
            Leave Fellowship
          </Button>
        </div>

        {/* ── HAMBURGER (mobile only) ── */}
        <button
          className={`lotr-hamburger${isMenuOpen ? ' lotr-hamburger--open' : ''}`}
          onClick={() => setIsMenuOpen((prev) => !prev)}
          aria-expanded={isMenuOpen}
          aria-controls="main-navigation"
          aria-label={isMenuOpen ? 'Close navigation menu' : 'Open navigation menu'}
          data-testid="header-mobile-menu-btn"
          type="button"
        >
          <span className="lotr-hamburger__bar" aria-hidden="true" />
          <span className="lotr-hamburger__bar" aria-hidden="true" />
          <span className="lotr-hamburger__bar" aria-hidden="true" />
        </button>
      </div>

      {/* ── ELVISH WAVY BORDER DECORATION ── */}
      <div className="lotr-header__elvish-border" aria-hidden="true">
        <svg
          viewBox="0 0 1440 14"
          preserveAspectRatio="none"
          className="lotr-header__border-svg"
        >
          <path
            d="M0,7 C90,1 180,13 270,7 C360,1 450,13 540,7 C630,1 720,13 810,7 C900,1 990,13 1080,7 C1170,1 1260,13 1350,7 C1395,4 1420,10 1440,7"
            fill="none"
            stroke="url(#elvishGold)"
            strokeWidth="1.5"
          />
          <defs>
            <linearGradient id="elvishGold" x1="0%" y1="0%" x2="100%" y2="0%">
              <stop offset="0%" stopColor="#B8860B" stopOpacity="0" />
              <stop offset="15%" stopColor="#DAA520" stopOpacity="0.9" />
              <stop offset="50%" stopColor="#FFD700" stopOpacity="1" />
              <stop offset="85%" stopColor="#DAA520" stopOpacity="0.9" />
              <stop offset="100%" stopColor="#B8860B" stopOpacity="0" />
            </linearGradient>
          </defs>
        </svg>
        {/* Decorative gem accents at the midpoint */}
        <span className="lotr-header__gems">◆◇◆</span>
      </div>
    </header>
  );
};

export default AppHeader;
