/* Site header for React pages. Menu and button come from components/header-data.js (window.SBHeader),
   editable in Admin → Front page & notices → Header; its styles (sbh-*) are shared with
   components/site-header.js, the same header for plain pages. Dropdowns open on hover and on click /
   keyboard; below 900px the nav, account and button move into a drawer (components/sb-mobile.css). */
function Header({active}){
const e=React.createElement;
const H=window.SBHeader;
const [data,setData]=React.useState(()=>H?H.get():{links:[],button:null});
React.useEffect(()=>H?H.onChange(setData):undefined,[]);
const links=data.links||[];
const isOn=o=>H?H.isActive(o,active):false;
const ext=u=>H?H.external(u):/^https?:/i.test(u||'');
/* menu links open in this tab (as before); the button opens outside links in a new tab */
const btnProps=u=>ext(u)?{href:u,target:'_blank',rel:'noopener'}:{href:u};
const [open,setOpen]=React.useState(null);
/* a click right after the hover opened it (or a tap that fired both) keeps it open */
const hovered=React.useRef(0);
React.useEffect(()=>{if(open===null)return;const c=()=>setOpen(null);const k=ev=>{if(ev.key==='Escape')setOpen(null);};
document.addEventListener('click',c);document.addEventListener('keydown',k);return()=>{document.removeEventListener('click',c);document.removeEventListener('keydown',k);};},[open]);
const [mob,setMob]=React.useState(false);
React.useEffect(()=>{document.documentElement.classList.toggle('sbm-lock',mob);
const k=ev=>{if(ev.key==='Escape')setMob(false);};const r=()=>{if(window.innerWidth>900)setMob(false);};
window.addEventListener('keydown',k);window.addEventListener('resize',r);return()=>{window.removeEventListener('keydown',k);window.removeEventListener('resize',r);};},[mob]);
const [,setAuthTick]=React.useState(0);
const [theme,setTheme]=React.useState(()=>window.SBTheme?window.SBTheme.get():'light');
React.useEffect(()=>{const f=ev=>setTheme(ev.detail);window.addEventListener('sbtheme:change',f);return()=>window.removeEventListener('sbtheme:change',f);},[]);
React.useEffect(()=>{const f=()=>setAuthTick(t=>t+1);window.addEventListener('sbauth:change',f);return()=>window.removeEventListener('sbauth:change',f);},[]);
const loginHref='login.html?next='+encodeURIComponent((location.pathname.split('/').pop()||'index.html')+location.search+location.hash);
const me=window.SBAuth&&window.SBAuth.currentUser();
const logout=()=>{window.SBAuth.logout();location.href='login.html';};
const btn=data.button&&data.button.label&&data.button.url?data.button:null;
const caret=e('svg',{className:'sbh-car',viewBox:'0 0 10 10','aria-hidden':true},e('path',{d:'M1.5 3.5L5 7l3.5-3.5',fill:'none',stroke:'currentColor',strokeWidth:1.6,strokeLinecap:'round',strokeLinejoin:'round'}));
const drawer=e('div',{className:'sbm-drawer',id:'sbh-drawer'},
links.map((o,i)=>o.menu?e('div',{key:i,className:'sbm-group'},e('span',{className:'sbm-glabel'},o.label),
o.menu.map((m,j)=>e('a',{key:j,href:m.url,className:'sbm-sub'+(isOn(m)?' sbm-on':'')},e('b',null,(m.icon?m.icon+' ':'')+m.label),m.desc?e('small',null,m.desc):null))):
e('a',{key:i,href:o.url,className:'sbm-link'+(isOn(o)?' sbm-on':'')},o.label)),
e('div',{className:'sbm-acct'},
me?e(React.Fragment,null,e('a',{className:'sbm-me',href:me.isAdmin?'admin.html':'dashboard.html'},e('b',null,me.isAdmin?'Admin Dashboard':'My Dashboard'),me.uid?e('span',null,me.uid):null),
e('button',{type:'button',className:'sbm-btn',onClick:logout},'Log Out')):
e('a',{className:'sbm-btn sbm-red',href:loginHref},'Log In'),
btn?e('a',{...btnProps(btn.url),className:'sbm-btn sbm-primary'},btn.label):null));
return e('header',{className:'sbh sbm-hdr'+(mob?' sbm-open':'')},
e('a',{href:'index.html',className:'sbh-logo','aria-label':'Scorebuddy home'},e('img',{src:'assets/logo.png',alt:'Scorebuddy'})),
e('nav',{className:'sbh-nav sbm-nav','aria-label':'Main'},
links.map((o,i)=>o.menu?
e('div',{key:i,className:'sbh-item'+(open===i?' sbh-open':''),onMouseEnter:()=>{hovered.current=Date.now();setOpen(i);},onMouseLeave:()=>setOpen(null),onClick:ev=>ev.stopPropagation()},
e('button',{type:'button',className:'sbh-top'+(isOn(o)?' sbh-on':''),'aria-expanded':open===i,'aria-haspopup':'true',onClick:()=>setOpen(v=>v===i&&Date.now()-hovered.current>400?null:i)},o.label,caret),
open===i?e('div',{className:'sbh-pop'},e('div',{className:'sbh-menu',role:'menu'},
o.intro?e('div',{className:'sbh-intro'},o.intro):null,
o.menu.map((m,j)=>e('a',{key:j,href:m.url,role:'menuitem',className:'sbh-link'+(isOn(m)?' sbh-on':''),...(ext(m.url)?{target:'_blank',rel:'noopener'}:{})},
m.icon?e('span',{className:'sbh-ic','aria-hidden':true},m.icon):null,
e('span',null,e('b',null,m.label),m.desc?e('small',null,m.desc):null))))):null):
e('a',{key:i,href:o.url,className:'sbh-top'+(isOn(o)?' sbh-on':'')},o.label))),
e('div',{className:'sbh-right'},
window.SBTheme?e('button',{type:'button',className:'sb-theme-btn',onClick:()=>window.SBTheme.toggle(),
'aria-label':theme==='dark'?'Switch to light mode':'Switch to dark mode','aria-pressed':theme==='dark',title:theme==='dark'?'Light mode':'Dark mode'},
e('svg',{width:17,height:17,viewBox:'0 0 24 24',fill:'none',stroke:'currentColor',strokeWidth:2,strokeLinecap:'round',strokeLinejoin:'round','aria-hidden':true},
theme==='dark'?[e('circle',{key:'c',cx:12,cy:12,r:4.5}),e('path',{key:'p',d:'M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'})]
:e('path',{d:'M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z'}))):null,
e('span',{className:'sbm-desk',style:{display:'contents'}},
me?e(React.Fragment,null,
/* "My Dashboard" (staff: "Admin Dashboard"), with the Student ID / Admin ID underneath; the name shows on hover */
e('a',{href:me.isAdmin?'admin.html':'dashboard.html',className:'sbh-me',title:me.name||me.email||me.mobile||''},e('b',null,me.isAdmin?'Admin Dashboard':'My Dashboard'),me.uid?e('span',{title:me.isAdmin?'Admin ID':'Student ID'},me.uid):null),
e('button',{type:'button',className:'sbh-login',onClick:logout},'Log Out')):
e('a',{href:loginHref,className:'sbh-login'},'Log In'),
btn?e('a',{...btnProps(btn.url),className:'sbh-cta'},btn.label):null),
e('button',{type:'button',className:'sbm-burger',onClick:()=>setMob(v=>!v),'aria-label':mob?'Close menu':'Open menu','aria-expanded':mob,'aria-controls':'sbh-drawer'},
e('svg',{width:20,height:20,viewBox:'0 0 24 24',fill:'none',stroke:'currentColor',strokeWidth:2.2,strokeLinecap:'round','aria-hidden':true},e('path',{d:mob?'M6 6l12 12M18 6L6 18':'M4 7h16M4 12h16M4 17h16'})))),
drawer);
}
window.Header=Header;