const {store,calc,fmt,MockSnelStartService}=window.EG;
const {useStore,Pill,PageHead,SectionTitle,Kpi,KpiRow,Table,Tr,Td,EmptyState,Search,Toggle,Modal,Source,DataRow,FormGroup,Avatar,EmployeeCell,label12}=window;
const {Icon,Button,IconButton,Card,Amount,ProgressBar,Tabs,Badge,Alert,FormField,Input,Select,Textarea,Checkbox}=window;

function SettingRow({title,note,children}){
  return <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',gap:32,padding:'18px 0',borderBottom:'1px solid var(--border-hairline)'}}>
    <div style={{maxWidth:460}}><div style={{fontFamily:'var(--font-display)',fontSize:14.5,fontWeight:600,color:'var(--ink-900)'}}>{title}</div>
      {note?<div style={{fontSize:13,color:'var(--text-muted)',marginTop:4,lineHeight:1.6}}>{note}</div>:null}</div>
    <div style={{flex:'none',minWidth:200}}>{children}</div></div>;
}
function EmployeeForm({emp,onClose}){
  const [f,setF]=React.useState(emp||{name:'',initials:'',role:'Calculator',rate:'',costRate:'',billable:true,active:true,email:''});
  const set=(k)=>e=>setF({...f,[k]:e.target?e.target.value:e});
  const initialsFrom=(name)=>name.split(/[ .]+/).filter(Boolean).map(w=>w[0]).join('').slice(0,3).toUpperCase();
  const save=()=>{
    if(!String(f.name).trim()){window.EG_TOAST({tone:'danger',title:'Naam is verplicht'});return}
    const item={...f,id:f.id||window.EG.uid('e'),initials:(f.initials||initialsFrom(f.name)).toUpperCase(),
      rate:parseFloat(String(f.rate).replace(',','.'))||0,costRate:parseFloat(String(f.costRate).replace(',','.'))||0,
      billable:!!f.billable,active:!!f.active};
    store.upsert('employees',item);
    window.EG_TOAST({title:emp?'Medewerker bijgewerkt':'Medewerker toegevoegd',detail:item.name});onClose();
  };
  return <Modal title={emp?'Medewerker bewerken':'Nieuwe medewerker'} onClose={onClose} width={560}
    footer={<><Button variant="secondary" onClick={onClose}>Annuleren</Button><Button onClick={save}>Opslaan</Button></>}>
    <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:16}}>
      <FormField label="Naam" required style={{gridColumn:'span 2'}}>
        <Input value={f.name} onChange={e=>setF({...f,name:e.target.value,initials:f.initials||''})} placeholder="J. Hulshof"/></FormField>
      <FormField label="Initialen" hint="Leeg = automatisch"><Input value={f.initials} onChange={set('initials')} placeholder={f.name?initialsFrom(f.name):'JH'}/></FormField>
      <FormField label="Rol"><Select value={f.role} onChange={set('role')} options={window.EG.ROLES}/></FormField>
      <FormField label="E-mailadres" style={{gridColumn:'span 2'}}><Input value={f.email} onChange={set('email')} type="email" placeholder="naam@bouwkonsult.nl"/></FormField>
      <FormField label="Uurtarief" hint="Wordt op de factuur gebruikt"><Input value={f.rate} onChange={set('rate')} placeholder="89,00"/></FormField>
      <FormField label="Intern kostentarief"><Input value={f.costRate} onChange={set('costRate')} placeholder="54,00"/></FormField>
      <FormField label="Schrijft declarabele uren"><Toggle checked={!!f.billable} onChange={v=>setF({...f,billable:v})}/></FormField>
      <FormField label="In dienst"><Toggle checked={!!f.active} onChange={v=>setF({...f,active:v})} labels={['Ja','Uit dienst']}/></FormField>
    </div></Modal>;
}
function Medewerkers(){
  const rows=store.employees;
  const mon=window.EG.monday(new Date());
  const [nieuw,setNieuw]=React.useState(false);const [edit,setEdit]=React.useState(null);const [del,setDel]=React.useState(null);
  const hoursOf=(id)=>store.timeEntries.filter(t=>t.employeeId===id&&new Date(t.date)>=mon).reduce((a,t)=>a+t.hours,0);
  const totalOf=(id)=>store.timeEntries.filter(t=>t.employeeId===id).length;
  return <Card padding="0" style={{maxWidth:1040}}>
    <div style={{padding:'20px 24px 16px',display:'flex',justifyContent:'space-between',alignItems:'center',borderBottom:'1px solid var(--border-hairline)'}}>
      <div><h3 style={{fontSize:15.5,margin:0}}>Medewerkers</h3>
        <div style={{fontSize:13,color:'var(--text-muted)',marginTop:4,maxWidth:560,lineHeight:1.6}}>Iedereen die uren schrijft. Het uurtarief hier is het tarief dat op de factuur komt, tenzij een project een afwijkend tarief heeft.</div></div>
      <Button icon="plus" onClick={()=>setNieuw(true)} style={{whiteSpace:'nowrap'}}>Nieuwe medewerker</Button></div>
    <Table cols={[{label:'Medewerker'},{label:'Rol'},{label:'E-mail'},{label:'Uurtarief',right:true},{label:'Kostentarief',right:true},
      {label:'Deze week',right:true},{label:'Status'},{label:'',w:80}]}>
      {rows.map(e=><Tr key={e.id}>
        <Td><EmployeeCell id={e.id}/></Td>
        <Td muted>{e.role}</Td>
        <Td muted style={{fontSize:12.5}}>{e.email||'—'}</Td>
        <Td right>{e.rate?<Amount value={e.rate} size={13.5}/>:<span style={{color:'var(--text-faint)',fontSize:12.5}}>Niet declarabel</span>}</Td>
        <Td right><Amount value={e.costRate} size={13} tone="muted"/></Td>
        <Td right><Amount value={hoursOf(e.id)} unit="uur" size={13.5}/></Td>
        <Td>{e.active?<Badge tone="brand" style={{whiteSpace:'nowrap'}}>In dienst</Badge>:<span style={{fontSize:12.5,color:'var(--text-faint)'}}>Uit dienst</span>}</Td>
        <Td><div style={{display:'flex',gap:4}}>
          <button onClick={()=>setEdit(e)} title="Bewerken" style={{appearance:'none',border:0,background:'none',cursor:'pointer',padding:4}}><Icon name="pencil" size={14} color="var(--ink-600)"/></button>
          <button onClick={()=>setDel(e)} title="Verwijderen" style={{appearance:'none',border:0,background:'none',cursor:'pointer',padding:4}}><Icon name="trash-2" size={14} color="var(--ink-600)"/></button></div></Td></Tr>)}
    </Table>
    {nieuw?<EmployeeForm onClose={()=>setNieuw(false)}/>:null}
    {edit?<EmployeeForm emp={edit} onClose={()=>setEdit(null)}/>:null}
    {del?<Modal title={totalOf(del.id)?'Medewerker heeft urenregistraties':'Medewerker verwijderen?'} onClose={()=>setDel(null)} width={480}
      footer={totalOf(del.id)
        ?<><Button variant="secondary" onClick={()=>setDel(null)}>Annuleren</Button>
           <Button onClick={()=>{store.upsert('employees',{...del,active:false});window.EG_TOAST({title:del.name+' staat op uit dienst'});setDel(null)}}>Op uit dienst zetten</Button></>
        :<><Button variant="secondary" onClick={()=>setDel(null)}>Annuleren</Button>
           <Button onClick={()=>{store.remove('employees',del.id);window.EG_TOAST({title:'Medewerker verwijderd',detail:del.name});setDel(null)}}>Verwijderen</Button></>}>
      <p style={{margin:0,fontSize:14,lineHeight:1.62}}>{totalOf(del.id)
        ?'Er staan '+totalOf(del.id)+' urenregistraties op naam van '+del.name+'. Die blijven bij de projecten en facturen horen, dus verwijderen kan niet. Zet de medewerker op uit dienst: hij verdwijnt dan uit de keuzelijsten en het weekrooster.'
        :del.name+' heeft nog geen uren geschreven en kan worden verwijderd.'}</p></Modal>:null}
  </Card>;
}
function TemplateForm({tpl,onClose}){
  const [f,setF]=React.useState(tpl||{description:'',qty:1,unit:'post',rate:'',active:false});
  const set=(k)=>e=>setF({...f,[k]:e.target?e.target.value:e});
  const save=()=>{
    const rate=parseFloat(String(f.rate).replace(',','.'));
    if(!String(f.description).trim()||isNaN(rate)){window.EG_TOAST({tone:'danger',title:'Omschrijving en tarief zijn verplicht'});return}
    store.upsert('invoiceTemplates',{...f,id:f.id||window.EG.uid('tpl'),qty:parseFloat(String(f.qty).replace(',','.'))||1,rate,active:!!f.active});
    window.EG_TOAST({title:tpl?'Standaardregel bijgewerkt':'Standaardregel toegevoegd',detail:f.description});onClose();
  };
  return <Modal title={tpl?'Standaardregel bewerken':'Nieuwe standaardregel'} onClose={onClose} width={520}
    footer={<><Button variant="secondary" onClick={onClose}>Annuleren</Button><Button onClick={save}>Opslaan</Button></>}>
    <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:16}}>
      <FormField label="Omschrijving" required style={{gridColumn:'span 2'}}>
        <Input value={f.description} onChange={set('description')} placeholder="Projectadministratie- en reprokosten"/></FormField>
      <FormField label="Standaard aantal"><Input value={f.qty} onChange={set('qty')}/></FormField>
      <FormField label="Eenheid"><Select value={f.unit} onChange={set('unit')} options={['post','uur','km','stuk']}/></FormField>
      <FormField label="Tarief"><Input value={f.rate} onChange={set('rate')} placeholder="45,00"/></FormField>
      <FormField label="Standaard aanvinken" hint="Staat vooraf aan bij een nieuwe factuur">
        <Toggle checked={!!f.active} onChange={v=>setF({...f,active:v})}/></FormField>
    </div></Modal>;
}
function Factuurregels(){
  const rows=store.invoiceTemplates;
  const [nieuw,setNieuw]=React.useState(false);const [edit,setEdit]=React.useState(null);const [del,setDel]=React.useState(null);
  return <Card padding="0" style={{maxWidth:920}}>
    <div style={{padding:'20px 24px 16px',display:'flex',justifyContent:'space-between',alignItems:'center',borderBottom:'1px solid var(--border-hairline)'}}>
      <div><h3 style={{fontSize:15.5,margin:0}}>Standaard factuurregels</h3>
        <div style={{fontSize:13,color:'var(--text-muted)',marginTop:4,maxWidth:520,lineHeight:1.6}}>Regels die je bij het samenstellen van een factuur kunt aanvinken. Regels met <em>standaard aanvinken</em> staan meteen aan.</div></div>
      <Button icon="plus" onClick={()=>setNieuw(true)} style={{whiteSpace:'nowrap'}}>Nieuwe regel</Button></div>
    {rows.length?<Table cols={[{label:'Omschrijving'},{label:'Aantal',right:true},{label:'Eenheid'},{label:'Tarief',right:true},{label:'Bedrag',right:true},{label:'Standaard aan'},{label:'',w:80}]}>
      {rows.map(t=><Tr key={t.id}>
        <Td style={{fontWeight:500,color:'var(--ink-900)'}}>{t.description}</Td>
        <Td right mono>{fmt.num(t.qty,t.qty%1?2:0)}</Td><Td muted>{t.unit}</Td>
        <Td right><Amount value={t.rate} size={13.5} tone="muted"/></Td>
        <Td right><Amount value={t.qty*t.rate} size={13.5}/></Td>
        <Td>{t.active?<Badge tone="brand">Ja</Badge>:<span style={{fontSize:12.5,color:'var(--text-faint)'}}>Nee</span>}</Td>
        <Td><div style={{display:'flex',gap:4}}>
          <button onClick={()=>setEdit(t)} title="Bewerken" style={{appearance:'none',border:0,background:'none',cursor:'pointer',padding:4}}><Icon name="pencil" size={14} color="var(--ink-600)"/></button>
          <button onClick={()=>setDel(t)} title="Verwijderen" style={{appearance:'none',border:0,background:'none',cursor:'pointer',padding:4}}><Icon name="trash-2" size={14} color="var(--ink-600)"/></button></div></Td></Tr>)}
    </Table>:<EmptyState icon="file-text" title="Nog geen standaardregels" action={<Button icon="plus" onClick={()=>setNieuw(true)}>Nieuwe regel</Button>}>
      Voeg regels toe die vaak op een factuur terugkomen, zoals projectadministratie- en reprokosten.</EmptyState>}
    {nieuw?<TemplateForm onClose={()=>setNieuw(false)}/>:null}
    {edit?<TemplateForm tpl={edit} onClose={()=>setEdit(null)}/>:null}
    {del?<Modal title="Standaardregel verwijderen?" onClose={()=>setDel(null)} width={440}
      footer={<><Button variant="secondary" onClick={()=>setDel(null)}>Annuleren</Button>
        <Button onClick={()=>{store.remove('invoiceTemplates',del.id);window.EG_TOAST({title:'Standaardregel verwijderd',detail:del.description});setDel(null)}}>Verwijderen</Button></>}>
      <p style={{margin:0,fontSize:14,lineHeight:1.62}}>“{del.description}” wordt uit de lijst verwijderd. Facturen waarop deze regel al staat, veranderen niet.</p></Modal>:null}
  </Card>;
}
function Instellingen({params}){
  useStore();const s=store.settings;const ss=store.snelstart;
  const [tab,setTab]=React.useState((params&&params.tab)||'Medewerkers');
  const [syncing,setSyncing]=React.useState(false);const [tested,setTested]=React.useState(null);const [reset,setReset]=React.useState(false);
  const set=(k,v)=>store.set('settings',{...s,[k]:v});
  const sync=()=>{setSyncing(true);setTimeout(()=>{const r=MockSnelStartService.syncInvoices();setSyncing(false);
    window.EG_TOAST({tone:'info',title:'Synchronisatie voltooid',detail:r.checked+' facturen gecontroleerd · '+r.changed+' betaalstatussen bijgewerkt'})},1400)};
  return <div>
    <PageHead title="Instellingen" sub="Medewerkers, urenregistratie, standaard factuurregels en de SnelStart-koppeling."/>
    <Tabs items={['Medewerkers','Urenregistratie','Factuurregels','Integraties','Componenten','Demo-data']} value={tab} onChange={setTab} style={{marginBottom:26}}/>
    {tab==='Medewerkers'?<Medewerkers/>:null}
    {tab==='Urenregistratie'?<Card style={{maxWidth:920}}>
      <SectionTitle>Urenregistratie</SectionTitle>
      <SettingRow title="Uren afronden op de factuur" note="De geschreven uren blijven staan zoals je ze invoert. Bij het samenstellen van een factuur wordt het totaal naar boven afgerond.">
        <Select value={String(s.rounding)} onChange={e=>set('rounding',e.target.value)}
          options={[{value:'60',label:'Op hele uren'},{value:'30',label:'Op halve uren'},{value:'15',label:'Op kwartieren'},{value:'none',label:'Niet afronden'}]}/></SettingRow>
      <SettingRow title="Standaard facturabel" note="Nieuwe urenregels staan standaard op facturabel.">
        <Toggle checked={!!s.defaultBillable} onChange={v=>set('defaultBillable',v)}/></SettingRow>
      <SettingRow title="Standaard uurtarief" note="Gebruikt als een medewerker geen eigen tarief heeft.">
        <Input type="number" value={s.defaultRate} onChange={e=>set('defaultRate',Number(e.target.value)||0)}/></SettingRow>
      <SettingRow title="Verwachte uren per week" note="Onder 60% hiervan kleurt het weektotaal van een medewerker rood in het weekrooster.">
        <Input type="number" value={s.expectedWeekHours!=null?s.expectedWeekHours:40} onChange={e=>set('expectedWeekHours',Number(e.target.value)||0)}/></SettingRow>
      {s.rounding!=='none'?<Alert tone="info" title="Voorbeeld" style={{marginTop:22}}>Geschreven 7,25 uur · op de factuur {fmt.h(calc.round(7.25))} uur (afgerond op {window.EG.roundingLabel(s.rounding)})</Alert>:null}
    </Card>:null}
    {tab==='Integraties'?<div style={{maxWidth:920,display:'grid',gap:24}}>
      <Card accent>
        <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start',gap:24}}>
          <div>
            <div style={{display:'flex',alignItems:'center',gap:10,marginBottom:8}}>
              <h3 style={{fontSize:17,margin:0}}>SnelStart</h3>
              <span style={{display:'inline-flex',alignItems:'center',gap:6,fontSize:12.5,fontFamily:'var(--font-display)',fontWeight:600,color:'var(--success-600)'}}>
                <span style={{width:7,height:7,borderRadius:'50%',background:'var(--success-600)'}}/>Verbonden</span></div>
            <p style={{margin:0,fontSize:13.5,color:'var(--text-muted)',lineHeight:1.62,maxWidth:520}}>Facturen worden vanuit Bouwkonsult naar SnelStart verzonden. Financiële en betaalinformatie wordt vanuit SnelStart teruggelezen en kan in Bouwkonsult niet worden gewijzigd.</p></div>
          <div style={{display:'flex',gap:10,flex:'none'}}>
            <Button variant="secondary" onClick={()=>{setTested('bezig');setTimeout(()=>setTested('ok'),900)}}>Koppeling testen</Button>
            <Button icon="refresh-cw" onClick={sync} disabled={syncing}>{syncing?'Synchroniseren...':'Synchroniseren'}</Button></div></div>
        <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:24,marginTop:24,paddingTop:20,borderTop:'1px solid var(--border-hairline)'}}>
          <div><div style={{...label12,fontSize:10}}>Laatste synchronisatie</div>
            <div style={{marginTop:6,fontFamily:'var(--font-mono)',fontSize:14}}>{ss.lastSync?fmt.date(ss.lastSync)+' · '+fmt.time(ss.lastSync):'—'}</div></div>
          <div><div style={{...label12,fontSize:10}}>Gekoppelde facturen</div>
            <div style={{marginTop:6,fontFamily:'var(--font-mono)',fontSize:14}}>{store.invoices.filter(i=>i.snelstart).length}</div></div>
          <div><div style={{...label12,fontSize:10}}>Administratie</div>
            <div style={{marginTop:6,fontFamily:'var(--font-mono)',fontSize:14}}>HR Bouwkonsult B.V.</div></div></div>
        {tested==='bezig'?<Alert tone="info" title="Koppeling testen..." style={{marginTop:20}}>Er wordt verbinding gemaakt met SnelStart.</Alert>:null}
        {tested==='ok'?<Alert tone="success" title="Koppeling werkt" style={{marginTop:20}}>De administratie is bereikbaar. Facturen kunnen worden verzonden.</Alert>:null}
        <p style={{marginTop:20,marginBottom:0,fontSize:12,color:'var(--text-faint)'}}>Demo-integratie — er wordt geen echte verbinding met SnelStart gemaakt.</p></Card>
      <Card><SectionTitle>Synchronisatiehistorie</SectionTitle>
        {store.syncHistory.slice(0,5).map((h,i)=><div key={i} style={{display:'flex',gap:20,padding:'11px 0',borderBottom:'1px solid var(--border-hairline)',fontSize:13.5}}>
          <span style={{fontFamily:'var(--font-mono)',fontSize:12,color:'var(--text-faint)',width:150,flex:'none'}}>{fmt.date(h.ts)} · {fmt.time(h.ts)}</span>
          <span style={{color:'var(--ink-900)'}}>{h.text}</span><span style={{marginLeft:'auto',color:'var(--text-muted)'}}>{h.detail}</span></div>)}</Card>
    </div>:null}
    {tab==='Factuurregels'?<Factuurregels/>:null}
    {tab==='Componenten'?<Stijlgids/>:null}
    {tab==='Demo-data'?<Card style={{maxWidth:920}}>
      <SectionTitle>Demo-data</SectionTitle>
      <SettingRow title="Demo-data herstellen" note="Zet medewerkers, klanten, projecten, uren, kosten, facturen, SnelStart-gegevens, synchronisatiehistorie en instellingen terug naar de oorspronkelijke demo-set.">
        <Button variant="secondary" onClick={()=>setReset(true)}>Demo-data herstellen</Button></SettingRow>
      <div style={{display:'grid',gridTemplateColumns:'repeat(6,1fr)',gap:20,marginTop:24}}>
        {[['Medewerkers',store.employees.length],['Klanten',store.customers.length],['Projecten',store.projects.length],['Urenregistraties',store.timeEntries.length],
          ['Kostenregels',store.projectCosts.length],['Facturen',store.invoices.length]].map(([l,v])=>
          <div key={l}><div style={{...label12,fontSize:10}}>{l}</div>
            <div style={{marginTop:6,fontFamily:'var(--font-display)',fontSize:22,fontWeight:600,fontVariantNumeric:'tabular-nums'}}>{v}</div></div>)}</div>
      <p style={{marginTop:24,marginBottom:0,fontSize:12.5,color:'var(--text-faint)'}}>Alle gegevens in deze demo staan uitsluitend in de localStorage van deze browser.</p>
      {reset?<Modal title="Demo-data herstellen?" onClose={()=>setReset(false)} width={460}
        footer={<><Button variant="secondary" onClick={()=>setReset(false)}>Annuleren</Button>
          <Button onClick={()=>{store.reset();setReset(false);window.EG_TOAST({title:'Demo-data hersteld'});window.EG_NAV('dashboard')}}>Herstellen</Button></>}>
        <p style={{margin:0,fontSize:14,color:'var(--text-body)',lineHeight:1.62}}>Alle wijzigingen die je in de demo hebt gemaakt worden verwijderd en vervangen door de oorspronkelijke demo-set.</p></Modal>:null}
    </Card>:null}
  </div>;
}

/* ============ STIJLGIDS / COMPONENTBIBLIOTHEEK ============ */
function Swatch({name,v}){
  return <div><div style={{height:52,background:'var('+v+')',border:'1px solid var(--border-hairline)',borderRadius:'var(--radius-sm)'}}/>
    <div style={{marginTop:7,fontFamily:'var(--font-mono)',fontSize:10.5,color:'var(--text-muted)'}}>{name}</div></div>;
}
function Block({title,children,cols}){
  return <div style={{marginBottom:32}}>
    <div style={{...label12,paddingBottom:9,marginBottom:16,borderBottom:'1px solid var(--border-hairline)'}}>{title}</div>
    <div style={cols?{display:'grid',gridTemplateColumns:'repeat('+cols+',minmax(0,1fr))',gap:16}:{display:'flex',flexWrap:'wrap',gap:14,alignItems:'center'}}>{children}</div></div>;
}
function Stijlgids(){
  const [tg,setTg]=React.useState(true);
  return <div style={{maxWidth:1040}}>
    <Card>
      <SectionTitle>Kleur</SectionTitle>
      <Block title="Merk — signaalgeel en antraciet" cols={8}>
        {['--brand-geel','--brand-geel-diep','--teal-50','--teal-100','--teal-200','--ink-900','--ink-800','--white'].map(v=><Swatch key={v} name={v.slice(2)} v={v}/>)}</Block>
      <Block title="Neutralen" cols={8}>
        {['--white','--ink-50','--ink-100','--ink-200','--ink-300','--ink-600','--ink-800','--ink-900'].map(v=><Swatch key={v} name={v.slice(2)} v={v}/>)}</Block>
      <Block title="Status" cols={8}>
        {['--success-600','--warning-600','--danger-600','--staal-500','--zand-500','--klei-500'].map(v=><Swatch key={v} name={v.slice(2)} v={v}/>)}</Block>
      <Block title="Typografie" cols={3}>
        <div><div style={{fontFamily:'var(--font-display)',fontSize:26,fontWeight:800,letterSpacing:'-.015em'}}>Nunito Sans 800</div>
          <div style={{marginTop:6,fontSize:12,color:'var(--text-faint)'}}>Koppen, labels, buttons</div></div>
        <div><div style={{fontFamily:'var(--font-body)',fontSize:20}}>Nunito Sans 400</div>
          <div style={{marginTop:6,fontSize:12,color:'var(--text-faint)'}}>Lopende tekst en bedragen · tabular</div></div>
        <div><div style={{fontFamily:'var(--font-mono)',fontSize:19}}>IBM Plex Mono</div>
          <div style={{marginTop:6,fontSize:12,color:'var(--text-faint)'}}>Werknummers, referenties, tijden</div></div></Block>
      <Block title="Maatvoering" cols={4}>
        {[['Radius','0 / 2 / 3 px'],['Buttonhoogte','44 px (sm 36)'],['Formuliervelden','44 px'],['Tabelrij','46 px'],
          ['Spacing','4 · 8 · 16 · 24 · 32 · 56'],['Hairline','1 px Ink 200'],['Totaalregel','2 px Ink 900'],['Schaduw','vrijwel afwezig']].map(([l,v])=>
          <div key={l}><div style={{...label12,fontSize:10}}>{l}</div><div style={{marginTop:5,fontFamily:'var(--font-mono)',fontSize:13}}>{v}</div></div>)}</Block>
    </Card>
    <Card style={{marginTop:24}}>
      <SectionTitle>Componenten</SectionTitle>
      <Block title="Buttons">
        <Button>Primary</Button><Button variant="secondary">Secondary</Button><Button variant="tertiary">Tertiary</Button>
        <Button icon="plus">Met icoon</Button><Button size="sm" variant="secondary">Small</Button>
        <Button disabled>Disabled</Button><IconButton icon="more-horizontal" label="Meer"/>
        <button style={{appearance:'none',cursor:'pointer',border:'1px solid var(--danger-600)',background:'var(--white)',color:'var(--danger-600)',
          borderRadius:'var(--radius-sm)',padding:'11px 18px',fontFamily:'var(--font-display)',fontSize:14,fontWeight:600}}>Verwijderen</button></Block>
      <Block title="Formuliervelden" cols={4}>
        <FormField label="Tekst"><Input placeholder="Bouwbedrijf Jansen B.V."/></FormField>
        <FormField label="Getal"><Input type="number" defaultValue={95}/></FormField>
        <FormField label="Selectie"><Select options={['Actief','Gefactureerd','Afgesloten']}/></FormField>
        <FormField label="Zoeken"><Search value="" onChange={()=>{}} placeholder="Zoeken..." width="100%"/></FormField>
        <FormField label="Facturabel"><Toggle checked={tg} onChange={setTg}/></FormField>
        <FormField label="Selectievak"><Checkbox label="Doorbelasten" checked/></FormField>
        <FormField label="Meerdere regels" style={{gridColumn:'span 2'}}><Textarea rows={2} placeholder="Bijzonderheden"/></FormField></Block>
      <Block title="Projectstatus">{window.EG.PROJECT_STATUS.map(s=><Pill key={s.v} kind="project" value={s.v}/>)}</Block>
      <Block title="Medewerkers">{store.employees.slice(0,6).map(e=><Avatar key={e.id} employee={e} size={30}/>)}</Block>
      <Block title="Factuurstatus Bouwkonsult">{Object.keys(window.EG.EG_STATUS).map(k=><Pill key={k} kind="eg" value={k}/>)}</Block>
      <Block title="Factuurstatus SnelStart">{Object.keys(window.EG.SS_STATUS).map(k=><Pill key={k} kind="ss" value={k}/>)}</Block>
      <Block title="Herkomst van gegevens"><Source from="Bouwkonsult"/><Source/></Block>
      <Block title="Bedragen en hoeveelheden" cols={4}>
        <div><Amount value={12450} size={18}/></div><div><Amount value={62.5} unit="uur" size={18}/></div>
        <div><Amount value={0} size={18} tone="muted"/></div><div><Amount value={3450} size={18} tone="danger"/></div></Block>
      <Block title="Voortgang" cols={2}><ProgressBar value={78} label="Uren gebruikt"/><ProgressBar value={112} label="Boven begroting"/></Block>
      <Block title="Meldingen" cols={2}>
        <Alert tone="success" title="Synchronisatie voltooid">9 facturen gecontroleerd · 2 betaalstatussen bijgewerkt.</Alert>
        <Alert tone="info" title="SnelStart wordt gesynchroniseerd...">Facturen en betalingen worden opgehaald.</Alert>
        <Alert tone="warning" title="Meer uren dan begroot">Op 2026-069 zijn 128,5 van 120,0 begrote uren geschreven.</Alert>
        <Alert tone="danger" title="Synchronisatie met SnelStart is mislukt">De administratie was niet bereikbaar. Probeer het opnieuw.</Alert></Block>
      <Block title="Lege en laadtoestanden" cols={2}>
        <div style={{border:'1px solid var(--border-hairline)',borderRadius:'var(--radius-md)'}}>
          <EmptyState icon="timer" title="Er zijn nog geen uren geregistreerd" action={<Button size="sm">Start tijdregistratie</Button>}/></div>
        <div style={{border:'1px solid var(--border-hairline)',borderRadius:'var(--radius-md)',padding:'56px 24px',textAlign:'center'}}>
          <div className="eg-spin" style={{width:24,height:24,border:'2px solid var(--ink-200)',borderTopColor:'var(--teal-600)',borderRadius:'50%',margin:'0 auto 14px'}}/>
          <div style={{fontSize:13.5,color:'var(--text-muted)'}}>Synchroniseren met SnelStart...</div></div></Block>
    </Card></div>;
}
Object.assign(window,{Instellingen,Stijlgids,Factuurregels,TemplateForm,Medewerkers,EmployeeForm});