// Top nav bar — only renders tabs the current viewer can actually use.

function Header({ me, route, setRoute, onLogout, dark }) {
  // Mods see the reports tab too; admins additionally see stats, blocks
  // and the audit log (which surfaces sensitive actor + IP traces).
  const isAdmin      = me?.group === 'admin';
  const isModOrAdmin = me?.group === 'mod' || isAdmin;
  const tabs = [
    { id: 'submit',  label: 'Hochladen',  icon: 'plus',   show: canSubmit(me) },
    { id: 'inbox',   label: 'Zu prüfen',  icon: 'inbox',  show: canVote(me) },
    { id: 'decided', label: 'Verlauf',    icon: 'check',  show: canVote(me) },
    { id: 'reports', label: 'Meldungen',  icon: 'shield', show: isModOrAdmin },
    { id: 'audit',   label: 'Audit',      icon: 'clock',  show: isAdmin },
    { id: 'stats',   label: 'Statistik',  icon: 'wave',   show: canForceAccept(me) },
    { id: 'blocks',  label: 'Sperren',    icon: 'shield', show: canForceAccept(me) },
  ];
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 10,
      padding: '14px 28px',
      backdropFilter: 'blur(24px) saturate(140%)',
      WebkitBackdropFilter: 'blur(24px) saturate(140%)',
      background: dark ? 'rgba(10,10,20,0.55)' : 'rgba(255,255,255,0.5)',
      borderBottom: dark ? '1px solid rgba(255,255,255,0.08)' : '1px solid rgba(0,0,0,0.06)',
      display: 'flex', alignItems: 'center', gap: 24,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, fontWeight: 800, fontSize: 16, letterSpacing: -0.3 }}>
        <div style={{
          width: 30, height: 30, borderRadius: 8,
          background: 'linear-gradient(135deg, #ff4d8d, #7c3aed)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <ApIcon name="music" size={16} color="#fff"/>
        </div>
        <span>Storytime</span>
        <span style={{ opacity: 0.4, fontWeight: 500 }}>/ Musik</span>
      </div>

      <nav style={{ display: 'flex', gap: 4, marginLeft: 12 }}>
        {tabs.filter(t => t.show).map(t => (
          <button key={t.id} onClick={() => setRoute(t.id)} style={{
            display: 'flex', alignItems: 'center', gap: 7, padding: '8px 14px',
            borderRadius: 10, border: 'none', cursor: 'pointer',
            background: route === t.id
              ? (dark ? 'rgba(255,77,141,0.15)' : 'rgba(255,77,141,0.12)')
              : 'transparent',
            color: route === t.id ? '#ff4d8d' : 'inherit',
            fontSize: 13.5, fontWeight: 600, opacity: route === t.id ? 1 : 0.75,
          }}>
            <ApIcon name={t.icon} size={16}/>
            {t.label}
          </button>
        ))}
      </nav>

      <div style={{ flex: 1 }}/>

      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <ApRolePill player={me} dark={dark}/>
        <button onClick={() => setRoute('me')} style={{
          background: 'none', border: 'none', cursor: 'pointer', padding: 0,
          display: 'flex', alignItems: 'center', gap: 8, color: 'inherit',
        }}>
          <ApAvatar player={me} size={32}/>
          <span style={{ fontSize: 13, fontWeight: 600 }}>{me.name}</span>
        </button>
        <button onClick={onLogout} title="Abmelden" style={{
          background: 'none', border: 'none', cursor: 'pointer', color: 'inherit', opacity: 0.5,
          padding: 6, display: 'flex', alignItems: 'center',
        }}>
          <ApIcon name="logout" size={18}/>
        </button>
      </div>
    </header>
  );
}

window.Header = Header;