const {store,calc,fmt}=window.EG;
const {useNow,useStore,Logo,Icon,Button,Toast,Avatar,label12}=window;

const NAV=[['dashboard','Dashboard','layout-dashboard'],['klanten','Klanten','users'],['projecten','Projecten','building-2'],
  ['uren','Uren','calendar-days'],['facturatie','Facturatie','file-text'],['instellingen','Instellingen','settings']];
const TITLES={dashboard:'Dashboard',klanten:'Klanten',klant:'Klanten',projecten:'Projecten',project:'Projecten',uren:'Uren',
  facturatie:'Facturatie','factuur-nieuw':'Facturatie',factuur:'Facturatie',instellingen:'Instellingen'};

function Sidebar({page}){
  const active=TITLES[page];
  return <aside style={{width:224,background:'var(--ink-900)',display:'flex',flexDirection:'column',padding:'22px 14px 18px',position:'fixed',top:0,bottom:0,left:0,zIndex:40}}>
    <div style={{padding:'6px 10px 26px'}}><Logo tone="light" height={30}/></div>
    <nav style={{display:'flex',flexDirection:'column',gap:2}}>
      {NAV.map(([id,label,icon])=>{const on=active===label;
        return <button key={id} onClick={()=>window.EG_NAV(id)} style={{appearance:'none',border:0,textAlign:'left',cursor:'pointer',
          display:'flex',alignItems:'center',gap:11,padding:'10px 12px',borderRadius:'var(--radius-sm)',
          background:on?'var(--ink-800)':'transparent',color:on?'#fff':'var(--ink-400)',fontFamily:'var(--font-display)',fontSize:13.5,fontWeight:on?600:500,
          transition:'background 120ms cubic-bezier(.2,0,0,1), color 120ms cubic-bezier(.2,0,0,1)'}}
          onMouseEnter={e=>{if(!on)e.currentTarget.style.color='#fff'}} onMouseLeave={e=>{if(!on)e.currentTarget.style.color='var(--ink-400)'}}>
          <span style={{width:2,height:16,marginLeft:-12,marginRight:-2,background:on?'var(--teal-400)':'transparent',borderRadius:1}}/>
          <Icon name={icon} size={16} color={on?'var(--teal-300)':'var(--ink-500)'}/>{label}</button>})}</nav>
    <div style={{marginTop:'auto',padding:'14px 12px 0',borderTop:'1px solid var(--ink-800)'}}>
      <div style={{fontFamily:'var(--font-mono)',fontSize:9.5,letterSpacing:'.14em',color:'var(--ink-600)',textTransform:'uppercase'}}>Demo-omgeving</div>
      <div style={{fontSize:11.5,color:'var(--ink-500)',marginTop:5,lineHeight:1.5}}>Gegevens staan lokaal in deze browser.</div></div></aside>;
}
function WeekTotal(){
  const t=calc.totals();
  return <div style={{display:'flex',alignItems:'center',gap:16,fontSize:12.5,color:'var(--text-muted)'}}>
    {[['Mijn uren vandaag',t.myHoursToday],['Deze week',t.myHoursWeek],['Team deze week',t.hoursWeek]].map(([l,v])=>
      <span key={l} style={{display:'inline-flex',alignItems:'baseline',gap:6}}>{l}
        <span style={{fontFamily:'var(--font-display)',fontSize:13.5,fontWeight:700,color:'var(--ink-900)',fontVariantNumeric:'tabular-nums'}}>{fmt.h(v)} uur</span></span>)}</div>;
}
/* wisselen van medewerker — in het prototype vervangt dit het inloggen */
function UserSwitch(){
  const me=store.me;const [open,setOpen]=React.useState(false);
  const list=store.employees.filter(e=>e.active);
  if(!me)return null;
  return <div style={{position:'relative'}}>
    <button onClick={()=>setOpen(!open)} aria-label={'Ingelogd als '+me.name+' — van medewerker wisselen'} aria-expanded={open}
      style={{appearance:'none',border:'1px solid '+(open?'var(--ink-300)':'transparent'),background:open?'var(--ink-50)':'transparent',
      cursor:'pointer',display:'flex',alignItems:'center',gap:10,padding:'5px 8px 5px 6px',borderRadius:'var(--radius-sm)',fontFamily:'var(--font-body)'}}>
      <Avatar employee={me} size={30}/>
      <span style={{textAlign:'left',lineHeight:1.25}}>
        <span style={{display:'block',fontSize:13,color:'var(--ink-900)',fontWeight:600}}>{me.name}</span>
        <span style={{display:'block',fontSize:11,color:'var(--text-faint)'}}>{me.role}</span></span>
      <Icon name="chevron-down" size={14} color="var(--ink-500)"/></button>
    {open?<>
      <div onClick={()=>setOpen(false)} style={{position:'fixed',inset:0,zIndex:40}}/>
      <div style={{position:'absolute',right:0,top:48,zIndex:50,background:'var(--white)',border:'1px solid var(--border-hairline)',
        borderRadius:'var(--radius-md)',boxShadow:'var(--shadow-overlay)',padding:6,minWidth:250}}>
        <div style={{...label12,fontSize:10,padding:'8px 10px 6px'}}>Ingelogd als</div>
        {list.map(e=><button key={e.id} onClick={()=>{store.set('currentUser',e.id);setOpen(false);
          window.EG_TOAST({title:'Je werkt nu als '+e.name,detail:e.role})}}
          style={{display:'flex',alignItems:'center',gap:10,width:'100%',textAlign:'left',appearance:'none',border:0,cursor:'pointer',
            background:e.id===me.id?'var(--teal-50)':'none',padding:'8px 10px',borderRadius:'var(--radius-sm)',fontFamily:'var(--font-body)'}}>
          <Avatar employee={e} size={26}/>
          <span style={{minWidth:0}}><span style={{display:'block',fontSize:13.5,color:'var(--ink-900)',fontWeight:e.id===me.id?600:400}}>{e.name}</span>
            <span style={{display:'block',fontSize:11.5,color:'var(--text-faint)'}}>{e.role}</span></span>
          {e.id===me.id?<Icon name="check" size={15} color="var(--ink-900)" style={{marginLeft:'auto'}}/>:null}</button>)}
        <div style={{borderTop:'1px solid var(--border-hairline)',margin:'6px 0 0',padding:'8px 10px 4px',fontSize:11.5,color:'var(--text-faint)',lineHeight:1.5}}>
          In de demo wissel je hier van medewerker. In de echte omgeving komt dit uit de login.</div></div></>:null}</div>;
}
function Topbar({page}){
  return <header style={{position:'sticky',top:0,zIndex:30,height:64,background:'rgba(255,255,255,.94)',backdropFilter:'blur(8px)',
    borderBottom:'1px solid var(--border-hairline)',display:'flex',alignItems:'center',justifyContent:'space-between',padding:'0 32px'}}>
    <div style={{display:'flex',alignItems:'center',gap:10,fontFamily:'var(--font-mono)',fontSize:10.5,letterSpacing:'.14em',textTransform:'uppercase',color:'var(--text-faint)'}}>
      Bouwkonsult<span style={{color:'var(--ink-300)'}}>/</span><span style={{color:'var(--ink-700)'}}>{TITLES[page]}</span></div>
    <div style={{display:'flex',alignItems:'center',gap:18}}>
      <WeekTotal/>
      <div style={{width:1,height:26,background:'var(--border-hairline)'}}/>
      <UserSwitch/></div></header>;
}
function App(){
  useStore();
  const [route,setRoute]=React.useState(()=>{try{return JSON.parse(localStorage.getItem('eg.v1.route'))||{page:'dashboard',params:{}}}catch(e){return {page:'dashboard',params:{}}}});
  const [toast,setToast]=React.useState(null);
  React.useEffect(()=>{localStorage.setItem('eg.v1.route',JSON.stringify(route));window.scrollTo(0,0)},[route]);
  React.useEffect(()=>{
    window.EG_NAV=(page,params)=>setRoute({page,params:params||{}});
    window.EG_TOAST=(t)=>{setToast(t);setTimeout(()=>setToast(null),3600)};
  },[]);
  const P={dashboard:window.Dashboard,klanten:window.Klanten,klant:window.Klantdetail,projecten:window.Projecten,project:window.Projectdetail,
    uren:window.Uren,facturatie:window.Facturatie,'factuur-nieuw':window.FactuurNieuw,factuur:window.Factuurdetail,
    instellingen:window.Instellingen}[route.page]||window.Dashboard;
  return <div style={{minHeight:'100vh',background:'var(--surface-page)'}}>
    <Sidebar page={route.page}/>
    <div style={{marginLeft:224}}>
      <Topbar page={route.page}/>
      <main style={{padding:'32px 40px 72px',maxWidth:1600}}><P params={route.params||{}} key={route.page+JSON.stringify(route.params)}/></main></div>
    <Toast toast={toast}/></div>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<App/>);