// Header — fixed, blurred top bar. Name on the left, ghost nav + theme
// toggle on the right; collapses to a menu button on small widths.
const { Button: WButton } = window.WINTELAcademicDesignSystem_045d4f;

function SocialIcon({ icon }) {
  if (icon === 'orcid') {
    return (
      <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor" style={{ display: 'block' }} aria-label="ORCID">
        <path d="m12 0c-6.628 0-12 5.372-12 12s5.372 12 12 12 12-5.372 12-12-5.372-12-12-12zm-4.631 4.378c.525 0 .947.431.947.947s-.422.947-.947.947a.95.95 0 0 1 -.947-.947c0-.525.422-.947.947-.947zm-.722 3.038h1.444v10.041h-1.444zm3.562 0h3.9c3.712 0 5.344 2.653 5.344 5.025 0 2.578-2.016 5.025-5.325 5.025h-3.919zm1.444 1.303v7.444h2.297c3.272 0 4.022-2.484 4.022-3.722 0-2.016-1.284-3.722-4.097-3.722z"></path>
      </svg>
    );
  }
  if (icon === 'researchgate') {
    const rg = (window.__resources && window.__resources.rgIcon) || 'assets/researchgate.png';
    return (
      <span aria-label="ResearchGate" style={{
        display: 'block', width: 16, height: 16, backgroundColor: 'currentColor',
        WebkitMaskImage: 'url(' + rg + ')', maskImage: 'url(' + rg + ')',
        WebkitMaskSize: 'contain', maskSize: 'contain',
        WebkitMaskRepeat: 'no-repeat', maskRepeat: 'no-repeat',
        WebkitMaskPosition: 'center', maskPosition: 'center',
      }} />
    );
  }
  if (icon === 'ieee') {
    return (
      <span aria-label="IEEE Xplore" style={{
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        fontFamily: 'var(--font-mono)', fontSize: '8.5px', fontWeight: 700,
        letterSpacing: '-0.03em', lineHeight: 1, color: 'currentColor',
      }}>IEEE</span>
    );
  }
  if (icon === 'scholar') {
    return (
      <svg viewBox="0 0 50 50" width="16" height="16" fill="currentColor" style={{ display: 'block' }} aria-label="Google Scholar">
        <path d="M 25 3 C 12.85 3 3 12.85 3 25 C 3 37.15 12.85 47 25 47 C 37.15 47 47 37.15 47 25 C 47 12.85 37.15 3 25 3 z M 21 11 L 38 11 L 36.980469 11.880859 C 36.980469 11.920859 37 11.96 37 12 L 37 17.279297 C 37.6 17.619297 38 18.26 38 19 L 38 25 C 38 26.1 37.1 27 36 27 C 34.9 27 34 26.1 34 25 L 34 19 C 34 18.26 34.4 17.619297 35 17.279297 L 35 13.570312 L 31.410156 16.650391 C 31.760156 17.350391 32 18.200234 32 19.240234 C 32 21.960234 30.480703 23.309766 28.970703 24.509766 C 28.500703 24.989766 27.949219 25.510312 27.949219 26.320312 C 27.949219 27.120313 28.500391 27.570625 28.900391 27.890625 L 30.189453 28.919922 C 31.779453 30.279922 33.220703 31.530547 33.220703 34.060547 C 33.220703 37.510547 29.930469 41 23.730469 41 C 18.500469 41 15.980469 38.47 15.980469 35.75 C 15.980469 34.43 16.629766 32.559531 18.759766 31.269531 C 20.989766 29.879531 24.020391 29.690078 25.650391 29.580078 C 25.140391 28.920078 24.560547 28.230078 24.560547 27.080078 C 24.560547 26.470078 24.749687 26.100391 24.929688 25.650391 C 24.529688 25.690391 24.129531 25.730469 23.769531 25.730469 C 19.969531 25.730469 17.799297 22.85 17.779297 20 L 11 20 L 21 11 z M 24.269531 14.240234 C 23.339531 14.240234 22.33 14.710938 21.75 15.460938 C 21.14 16.220938 20.949219 17.210156 20.949219 18.160156 C 20.949219 20.620156 22.370938 24.699219 25.460938 24.699219 C 26.370938 24.699219 27.339922 24.259922 27.919922 23.669922 C 28.739922 22.819922 28.820312 21.65 28.820312 21 C 28.820312 18.35 27.269531 14.240234 24.269531 14.240234 z M 26.039062 30.609375 C 25.719062 30.609375 23.769766 30.679219 22.259766 31.199219 C 21.459766 31.499219 19.160156 32.370469 19.160156 34.980469 C 19.160156 37.590469 21.64 39.460938 25.5 39.460938 C 28.97 39.460938 30.800781 37.760234 30.800781 35.490234 C 30.800781 33.620234 29.620859 32.630391 26.880859 30.650391 C 26.590859 30.610391 26.409063 30.609375 26.039062 30.609375 z"></path>
      </svg>
    );
  }
  if (icon === 'dblp') {
    return (
      <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor" style={{ display: 'block' }} aria-label="dblp">
        <path d="M3.075.002c-.096.013-.154.092-.094.31L4.97 7.73 3.1 8.6s-.56.26-.4.85l2.45 9.159s.16.59.72.33l6.169-2.869 1.3-.61s.52-.24.42-.79l-.01-.06-1.13-4.22-.658-2.45-.672-2.49v-.04s-.16-.59-.84-1L3.5.141s-.265-.16-.425-.139zM18.324 5.03a.724.724 0 0 0-.193.06l-5.602 2.6.862 3.2 1.09 4.08.01.06c.05.47-.411.79-.411.79l-1.88.87.5 1.89.04.1c.07.17.28.6.81.91l6.95 4.269s.68.41.52-.17l-1.981-7.4 1.861-.86s.56-.26.4-.85L18.85 5.42s-.116-.452-.526-.39z"></path>
      </svg>
    );
  }
  if (icon === 'scopus') {
    return (
      <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor" style={{ display: 'block' }} aria-label="Scopus">
        <path d="M24 19.059l-.14-1.777c-1.426.772-2.945 1.076-4.465 1.076-3.319 0-5.96-2.782-5.96-6.475 0-3.903 2.595-6.31 5.633-6.31 1.917 0 3.39.303 4.792 1.075L24 4.895c-1.286-.608-2.337-.889-4.698-.889-4.534 0-7.97 3.53-7.97 8.017 0 5.12 4.09 7.924 7.9 7.924 1.916 0 3.506-.257 4.768-.888zm-14.954-3.46c0-2.22-1.964-3.225-3.857-4.347C3.716 10.364 2.15 9.756 2.15 8.12c0-1.215.889-2.548 2.642-2.548 1.519 0 2.57.234 3.903 1.029l.117-1.847c-1.239-.514-2.127-.748-4.137-.748C1.8 4.006.047 5.876.047 8.26c0 2.384 2.103 3.413 4.02 4.581 1.426.865 2.922 1.45 2.922 2.992 0 1.496-1.333 2.571-2.922 2.571-1.566 0-2.594-.35-3.786-1.075L0 19.176c1.215.56 2.454.818 4.16.818 2.385 0 4.885-1.473 4.885-4.395z"></path>
      </svg>
    );
  }
  return <i className={icon} style={{ fontSize: 16, lineHeight: 1 }} />;
}

function Header({ data, theme, onToggleTheme, onNavigate, view }) {
  const [menuOpen, setMenuOpen] = React.useState(false);
  const isNarrow = window.matchMedia('(max-width: 640px)').matches;

  const navLinks = data.nav.map((n) => {
    const isActive = n.view === view;
    const activeFill = theme === 'light' ? '#c0152f' : '#2563eb';
    return (
      <WButton key={n.name} variant="ghost" size="sm"
        onClick={() => { onNavigate(n.view); setMenuOpen(false); }}
        style={{ fontWeight: isActive ? 'var(--weight-semibold)' : 'var(--weight-normal)', color: isActive ? '#fff' : 'var(--text-body)', background: isActive ? activeFill : 'transparent', borderRadius: '0.5rem', padding: isActive ? '0.2rem 0.55rem' : '0.2rem 0.3rem', fontSize: 'calc(var(--text-xs) * 1.1)', whiteSpace: 'nowrap' }}>
        {n.name}
      </WButton>
    );
  });

  return (
    <div style={{
      position: 'sticky', top: 0, zIndex: 20, width: '100%',
      background: 'var(--surface-header)', backdropFilter: 'blur(12px)',
      WebkitBackdropFilter: 'blur(12px)',
    }}>
      <nav style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        margin: '0 auto', maxWidth: 'var(--reading-column)', width: '100%',
        padding: '0.75rem 2rem', boxSizing: 'border-box',
      }}>
        <div style={{ display: isNarrow ? 'none' : 'flex', alignItems: 'center', gap: 0, flexWrap: 'nowrap', marginLeft: '-0.3rem', minWidth: 0 }}>{navLinks}</div>
        {isNarrow && (
          <WButton variant="ghost" size="icon" aria-label="Menu" onClick={() => setMenuOpen(!menuOpen)}>
            <i className={menuOpen ? 'ri-close-line' : 'ri-menu-line'} style={{ fontSize: 20 }} />
          </WButton>
        )}
        <WButton variant="ghost" size="icon" aria-label="Toggle theme" onClick={onToggleTheme}>
          <i className={theme === 'light' ? 'ri-sun-line' : 'ri-moon-line'} style={{ fontSize: 20 }} />
        </WButton>
      </nav>
      {isNarrow && menuOpen && (
        <div style={{ display: 'flex', flexDirection: 'column', padding: '0 1rem 1rem', gap: 4, maxWidth: 'var(--reading-column)', margin: '0 auto' }}>
          {navLinks}
        </div>
      )}
    </div>
  );
}

Object.assign(window, { Header, SocialIcon });