// Sticky top navigation. Tabs are role-gated — submitters see Hochladen,
// voters see Zu prüfen + Verlauf, mods additionally Meldungen, admins
// additionally Audit + Statistik + Sperren. Profile is always available.
//
// Visually the header is a frosted-glass strip floating above the dusk
// orbs: 24px backdrop-blur + soft lila border underneath. The wordmark
// uses the Pacifico brand font with a sunset-gradient text fill. Tabs
// are 10px-radius chips that fill with a lila tint when active.

function Header({ me, route, setRoute, onLogout }) {
  const isAdmin      = me?.group === 'admin';
  const isModOrAdmin = me?.group === 'mod' || isAdmin;

  // Order matters: home first (default landing), then create/review
  // actions, then moderation tools (mods+admin), then admin-only,
  // then profile. The same order is what shows up in the role-pill
  // hover menu if we ever add one.
  const tabs = [
    { id: 'home',    label: 'Entdecken', icon: 'house',          show: true },
    { id: 'playlists', label: 'Playlists', icon: 'list',         show: true },
    // "Hochladen" hosts both the single-track form and (admins only)
    // the bulk-upload sub-mode. No separate bulk tab — keeps the
    // navbar lean and the bulk tool out of sight for non-admins.
    { id: 'submit',  label: 'Hochladen', icon: 'cloud-arrow-up', show: canSubmit(me) || canForceAccept(me) },
    { id: 'inbox',   label: 'Zu prüfen', icon: 'inbox',          show: canVote(me) },
    // Verlauf is no longer its own tab — it lives as a sub-tab inside
    // Statistik now (see stats.jsx) so admins have one consolidated
    // dashboard for "what happened" instead of two separate routes.
    { id: 'reports', label: 'Meldungen', icon: 'flag',           show: isModOrAdmin },
    { id: 'audit',   label: 'Audit',     icon: 'scroll',         show: isAdmin },
    { id: 'stats',   label: 'Statistik', icon: 'chart-line',     show: canForceAccept(me) },
    // "Sperren" rolled into the new Künstler page in May 2026 —
    // admins manage profiles, uploads, and blocks from a single
    // surface there.
    { id: 'artists', label: 'Künstler',  icon: 'users',          show: canForceAccept(me) },
    { id: 'me',      label: 'Profil',    icon: 'user',           show: true },
  ].filter(t => t.show);

  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 20,
      padding: '14px 28px',
      backdropFilter: `blur(var(--blur-nav)) saturate(140%)`,
      WebkitBackdropFilter: `blur(var(--blur-nav)) saturate(140%)`,
      background: 'rgba(21,8,40,0.55)',
      borderBottom: '1px solid var(--border-soft)',
      display: 'flex', alignItems: 'center', gap: 20,
    }}>

      {/* Wordmark — Pacifico sunset, doubles as a home-link */}
      <button
        onClick={() => setRoute('home')}
        style={{
          display: 'flex', alignItems: 'center', gap: 10,
          background: 'transparent', border: 'none', cursor: 'pointer',
          padding: 0, color: 'inherit',
        }}
      >
        <div style={{
          width: 34, height: 34, borderRadius: 10,
          background: 'var(--grad-sunset)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          boxShadow: 'var(--glow-coral)',
        }}>
          <ApIcon name="music" size={15} color="var(--foam)"/>
        </div>
        <span style={{
          fontFamily: 'var(--font-display)', fontSize: 26, lineHeight: 1,
          background: 'var(--grad-sunset)',
          WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent',
        }}>Storytime</span>
        <span style={{ color: 'var(--fg-4)', fontWeight: 500, fontSize: 14, marginLeft: 2 }}>/ Musik</span>
      </button>

      {/* Tabs */}
      <nav style={{ display: 'flex', gap: 2, marginLeft: 8, flexWrap: 'wrap' }}>
        {tabs.map(t => {
          const active = route === t.id;
          return (
            <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: active ? 'rgba(169,114,244,0.18)' : 'transparent',
              color: active ? 'var(--lila-200)' : 'var(--fg-2)',
              fontSize: 13.5, fontWeight: 600, opacity: active ? 1 : 0.78,
              fontFamily: 'inherit',
              transition: 'background 150ms var(--ease-out), color 150ms var(--ease-out)',
              whiteSpace: 'nowrap',
            }}>
              <ApIcon name={t.icon} size={13}/>
              {t.label}
            </button>
          );
        })}
      </nav>

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

      {/* Profile cluster — role pill, avatar+name (click → /me),
          logout. Avatar+name reuses the /me tab routing so a single
          click is enough whether you're on a stat page or anywhere
          else. */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        <RolePill player={me}/>
        <button onClick={() => setRoute('me')} style={{
          background: 'transparent', border: 'none', cursor: 'pointer', padding: 0,
          display: 'flex', alignItems: 'center', gap: 8, color: 'inherit', fontFamily: 'inherit',
        }}>
          <Avatar player={me} size={32}/>
          <span style={{ fontSize: 13, fontWeight: 600 }}>{me.name}</span>
        </button>
        <button onClick={onLogout} title="Abmelden" aria-label="Abmelden" style={{
          background: 'transparent', border: 'none', cursor: 'pointer',
          color: 'var(--fg-3)', padding: 8, display: 'flex',
        }}>
          <ApIcon name="logout" size={16}/>
        </button>
      </div>
    </header>
  );
}

window.Header = Header;