/* global React, MEMBERS, Avatar, Eyebrow */
const { useState, useEffect, useRef } = React;

function TopBar({ activeId, setActiveId, route, setRoute, tweaks }) {
  const active = MEMBERS.find(m => m.id === activeId);
  const [open, setOpen] = useState(false);
  const ref = useRef(null);
  useEffect(() => {
    const handler = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener('mousedown', handler);
    return () => document.removeEventListener('mousedown', handler);
  }, []);

  const nav = [
    { id: 'dash',     label: 'Översikt' },
    { id: 'tester',   label: 'Tester' },
    { id: 'logg',     label: 'Träningslogg' },
    { id: 'program',  label: 'Program' },
  ];

  return (
    <div style={{
      position: 'sticky', top: 0, zIndex: 30,
      height: 64, borderBottom: '1px solid var(--border)',
      background: 'rgba(252,252,253,0.85)', backdropFilter: 'blur(12px)',
      display: 'flex', alignItems: 'center', gap: 32,
      padding: '0 32px',
    }}>
      {/* Logo */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <div style={{
          width: 22, height: 22, borderRadius: 4,
          background: 'var(--ink-950)', color: '#fff',
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M6.5 6.5 L17.5 17.5 M17.5 6.5 L6.5 17.5 M12 3 V21 M3 12 H21" />
          </svg>
        </div>
        <div style={{ fontFamily: 'var(--font-sans)', fontSize: 15, fontWeight: 500, letterSpacing: '-0.01em' }}>
          Familjeträning
        </div>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--fg-subtle)', letterSpacing: '0.08em', textTransform: 'uppercase', borderLeft: '1px solid var(--border)', paddingLeft: 10, marginLeft: 4 }}>
          {window.getActiveSeason ? window.getActiveSeason().name : 'Sommar 2026'}
        </div>
      </div>

      {/* Nav */}
      <nav style={{ display: 'flex', gap: 4 }}>
        {nav.map(n => {
          const active = route === n.id;
          return (
            <button
              key={n.id} onClick={() => setRoute(n.id)}
              style={{
                background: active ? 'var(--ink-50)' : 'transparent',
                color: active ? 'var(--fg)' : 'var(--fg-muted)',
                fontFamily: 'var(--font-sans)', fontSize: 13, fontWeight: active ? 500 : 400,
                border: 'none', borderRadius: 4, padding: '8px 12px',
                cursor: 'pointer', transition: 'background 120ms, color 120ms',
              }}
            >{n.label}</button>
          );
        })}
      </nav>

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

      {/* Member switcher */}
      <div ref={ref} style={{ position: 'relative' }}>
        <button
          onClick={() => setOpen(o => !o)}
          style={{
            display: 'inline-flex', alignItems: 'center', gap: 10,
            border: '1px solid var(--border-strong)', borderRadius: 6,
            padding: '4px 10px 4px 4px', background: 'var(--bg-raised)',
            cursor: 'pointer', fontFamily: 'var(--font-sans)',
          }}
        >
          <Avatar member={active} size={28} />
          <div style={{ textAlign: 'left', display: 'flex', flexDirection: 'column' }}>
            <span style={{ fontSize: 13, fontWeight: 500, color: 'var(--fg)' }}>{active.name}</span>
            <span style={{ fontSize: 10, fontFamily: 'var(--font-mono)', color: 'var(--fg-subtle)', letterSpacing: '0.06em', textTransform: 'uppercase' }}>{active.role}</span>
          </div>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--fg-muted)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ marginLeft: 4 }}>
            <polyline points="6 9 12 15 18 9" />
          </svg>
        </button>
        {open && (
          <div style={{
            position: 'absolute', top: '100%', right: 0, marginTop: 8,
            background: 'var(--bg-raised)',
            border: '1px solid var(--border)', borderRadius: 6,
            boxShadow: 'var(--shadow-3)', padding: 4,
            minWidth: 220, zIndex: 50,
          }}>
            <div style={{ padding: '6px 10px 4px' }}>
              <Eyebrow>Familjen</Eyebrow>
            </div>
            {MEMBERS.map(m => {
              const sel = m.id === activeId;
              return (
                <button
                  key={m.id}
                  onClick={() => { setActiveId(m.id); setOpen(false); }}
                  style={{
                    display: 'flex', alignItems: 'center', gap: 10,
                    width: '100%', padding: '8px 8px',
                    background: sel ? 'var(--signal-tint)' : 'transparent',
                    border: 'none', borderRadius: 4, cursor: 'pointer',
                    textAlign: 'left', fontFamily: 'var(--font-sans)',
                  }}
                >
                  <Avatar member={m} size={26} />
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 13, fontWeight: 500, color: 'var(--fg)' }}>{m.name}</div>
                    <div style={{ fontSize: 10, fontFamily: 'var(--font-mono)', color: 'var(--fg-subtle)', letterSpacing: '0.06em', textTransform: 'uppercase' }}>{m.role} · {m.age} år</div>
                  </div>
                  {sel && (
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--signal)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                      <polyline points="20 6 9 17 4 12" />
                    </svg>
                  )}
                </button>
              );
            })}
          </div>
        )}
      </div>
    </div>
  );
}

window.TopBar = TopBar;