const {store,calc,fmt,MockSnelStartService}=window.EG;
const {useStore,Pill,PageHead,SectionTitle,Kpi,KpiRow,Table,Tr,Td,EmptyState,Search,Toggle,Modal,Source,DataRow,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 Instellingen(){
  useStore();const s=store.settings;const ss=store.snelstart;
  const [tab,setTab]=React.useState('Urenregistratie');
  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="Demo-instellingen voor urenregistratie, de SnelStart-koppeling en het ontwerp."/>
    <Tabs items={['Urenregistratie','Integraties','Componenten','Demo-data']} value={tab} onChange={setTab} style={{marginBottom:26}}/>
    {tab==='Urenregistratie'?<Card style={{maxWidth:920}}>
      <SectionTitle>Urenregistratie</SectionTitle>
      <SettingRow title="Uren afronden" note="Bij afronding wordt de werkelijke tijd bewaard en de geregistreerde duur naar boven afgerond.">
        <Select value={String(s.rounding)} onChange={e=>set('rounding',e.target.value)}
          options={[{value:'none',label:'Niet afronden'},{value:'5',label:'Op 5 minuten'},{value:'10',label:'Op 10 minuten'},{value:'15',label:'Op 15 minuten'}]}/></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="Wordt voorgesteld bij een nieuw project.">
        <Input type="number" value={s.defaultRate} onChange={e=>set('defaultRate',Number(e.target.value)||0)}/></SettingRow>
      {s.rounding!=='none'?<Alert tone="info" title="Voorbeeld" style={{marginTop:22}}>Werkelijke tijd 1:27:38 · geregistreerd {fmt.h(calc.round(1+27/60+38/3600))} uur</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 Egberink naar SnelStart verzonden. Financiële en betaalinformatie wordt vanuit SnelStart teruggelezen en kan in Egberink 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}}>Egberink Calculatie</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==='Componenten'?<Stijlgids/>:null}
    {tab==='Demo-data'?<Card style={{maxWidth:920}}>
      <SectionTitle>Demo-data</SectionTitle>
      <SettingRow title="Demo-data herstellen" note="Zet klanten, projecten, uren, kosten, facturen, actieve timer, 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(5,1fr)',gap:20,marginTop:24}}>
        {[['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="Primair — Egberink Teal" cols={8}>
        {['--teal-50','--teal-100','--teal-200','--teal-300','--teal-500','--teal-600','--teal-700','--teal-900'].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:600,letterSpacing:'-.015em'}}>Archivo 600</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}}>IBM Plex 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','4 / 6 / 10 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','Gereed','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="Factuurstatus Egberink">{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="Egberink"/><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});