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

const NAV=[['dashboard','Dashboard','layout-dashboard'],['klanten','Klanten','users'],['projecten','Projecten','building-2'],
  ['uren','Uren','timer'],['facturatie','Facturatie','file-text'],['financieel','Financieel','bar-chart-3'],['instellingen','Instellingen','settings']];
const TITLES={dashboard:'Dashboard',klanten:'Klanten',klant:'Klanten',projecten:'Projecten',project:'Projecten',uren:'Uren',
  facturatie:'Facturatie','factuur-nieuw':'Facturatie',factuur:'Facturatie',financieel:'Financieel',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={26}/></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 GlobalTimer(){
  const at=store.activeTimer;useNow(1000);
  if(!at)return <div style={{display:'flex',alignItems:'center',gap:8,fontSize:12.5,color:'var(--text-faint)'}}>
    <Icon name="timer" size={15} color="var(--ink-400)"/>Geen actieve tijdregistratie</div>;
  const p=calc.project(at.projectId);if(!p)return null;
  return <div style={{display:'flex',alignItems:'center',gap:14,padding:'7px 8px 7px 14px',border:'1px solid var(--teal-200)',background:'var(--teal-50)',
    borderRadius:'var(--radius-sm)'}}>
    <span className="eg-pulse" style={{width:6,height:6,borderRadius:'50%',background:'var(--teal-600)'}}/>
    <div style={{lineHeight:1.25}}>
      <div style={{fontFamily:'var(--font-mono)',fontSize:9.5,letterSpacing:'.12em',textTransform:'uppercase',color:'var(--teal-700)'}}>Timer actief</div>
      <a onClick={()=>window.EG_NAV('project',{id:p.id})} style={{cursor:'pointer',fontFamily:'var(--font-display)',fontSize:13,fontWeight:600,color:'var(--teal-900)'}}>{p.name}</a></div>
    <span style={{fontFamily:'var(--font-mono)',fontSize:15,color:'var(--teal-800)',fontVariantNumeric:'tabular-nums'}}>{fmt.clock(timer.elapsed(at))}</span>
    <button onClick={()=>window.EG_STOP()} style={{appearance:'none',cursor:'pointer',border:0,background:'var(--teal-600)',color:'#fff',borderRadius:'var(--radius-sm)',
      padding:'7px 12px',fontFamily:'var(--font-display)',fontSize:12.5,fontWeight:600,display:'inline-flex',alignItems:'center',gap:7}}>
      <span style={{width:8,height:8,background:'#fff'}}/>Stop</button></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)'}}>
      Egberink Calculatie<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}}>
      <GlobalTimer/>
      <div style={{width:1,height:26,background:'var(--border-hairline)'}}/>
      <div style={{display:'flex',alignItems:'center',gap:10}}>
        <span style={{width:30,height:30,borderRadius:'var(--radius-sm)',background:'var(--ink-100)',display:'grid',placeItems:'center',
          fontFamily:'var(--font-display)',fontSize:11.5,fontWeight:600,color:'var(--ink-700)',letterSpacing:'.04em'}}>RE</span>
        <span style={{fontSize:13,color:'var(--ink-700)'}}>R. Egberink</span></div></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);
  const [conflict,setConflict]=React.useState(null);
  const [stopping,setStopping]=React.useState(null);
  const pending=React.useRef(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)};
    window.EG_START=(projectId)=>{
      const at=store.activeTimer;
      if(at&&at.projectId!==projectId){setConflict({at,nextProjectId:projectId});return}
      if(at&&at.projectId===projectId)return;
      timer.start(projectId);
      const p=calc.project(projectId);
      window.EG_TOAST({title:'Timer gestart',detail:p.ref+' · '+p.name});
    };
    window.EG_STOP=()=>{const at=store.activeTimer;if(at)setStopping(at)};
  },[]);
  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,
    financieel:window.Financieel,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>
    {conflict?<window.ConflictModal at={conflict.at} nextProjectId={conflict.nextProjectId} onClose={()=>setConflict(null)}
      onSwitch={()=>{pending.current=conflict.nextProjectId;setStopping(conflict.at);setConflict(null)}}/>:null}
    {stopping?<window.StopTimerModal at={stopping} onClose={()=>{setStopping(null);pending.current=null}}
      onSaved={()=>{const nx=pending.current;pending.current=null;if(nx){timer.start(nx);const p=calc.project(nx);window.EG_TOAST({title:'Timer gestart',detail:p.ref+' · '+p.name})}}}/>:null}
    <Toast toast={toast}/></div>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<App/>);