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

/* ============ FACTURATIE-OVERZICHT ============ */
const INV_TABS=['Te factureren','Concept','Klaar voor SnelStart','Verzonden','Openstaand','Betaald','Alles'];
function Facturatie({params}){
  useStore();const [tab,setTab]=React.useState((params&&params.tab)||'Te factureren');
  const t=calc.totals();const invs=store.invoices;
  const filtered=()=>{
    if(tab==='Concept')return invs.filter(i=>i.egStatus==='concept');
    if(tab==='Klaar voor SnelStart')return invs.filter(i=>i.egStatus==='gereed');
    if(tab==='Verzonden')return invs.filter(i=>i.egStatus==='verzonden');
    if(tab==='Openstaand')return invs.filter(i=>i.snelstart&&['openstaand','deels','vervallen'].includes(i.snelstart.status));
    if(tab==='Betaald')return invs.filter(i=>i.snelstart&&i.snelstart.status==='betaald');
    return invs;
  };
  const teFactureren=store.projects.map(p=>({p,u:calc.unbilled(p.id)})).filter(x=>x.u.total>0.005).sort((a,b)=>b.u.total-a.u.total);
  return <div>
    <PageHead title="Facturatie" sub="Van geschreven uren naar een factuurvoorstel. SnelStart verzorgt de financiële verwerking."/>
    <KpiRow cols={6} style={{marginBottom:28}}>
      <Kpi label="Te factureren" value={fmt.eur0(t.unbilled)} note="Uit Egberink" onClick={()=>setTab('Te factureren')} accent/>
      <Kpi label="Concept" value={t.conceptCount} onClick={()=>setTab('Concept')}/>
      <Kpi label="Klaar voor SnelStart" value={t.readyCount} onClick={()=>setTab('Klaar voor SnelStart')}/>
      <Kpi label="Bij SnelStart" value={fmt.eur0(t.invoicedYear)} note="Volgens SnelStart" onClick={()=>setTab('Verzonden')}/>
      <Kpi label="Openstaand" value={fmt.eur0(t.outstanding)} note="Volgens SnelStart" onClick={()=>setTab('Openstaand')}/>
      <Kpi label="Betaald" value={fmt.eur0(t.invoicedYear-t.outstanding)} note="Volgens SnelStart" onClick={()=>setTab('Betaald')}/>
    </KpiRow>
    <Tabs items={INV_TABS} value={tab} onChange={setTab} style={{marginBottom:24}}/>
    {tab==='Te factureren'?<Card padding="0">
      {teFactureren.length?<Table cols={[{label:'Werknr.'},{label:'Project'},{label:'Klant'},{label:'Uren',right:true},{label:'Urenbedrag',right:true},
        {label:'Kosten',right:true},{label:'Totaal',right:true},{label:'',w:190}]}>
        {teFactureren.map(({p,u})=>{const c=calc.customer(p.customerId);
          return <Tr key={p.id}>
            <Td mono muted>{p.ref}</Td>
            <Td onClick={()=>window.EG_NAV('project',{id:p.id})} style={{fontWeight:500,color:'var(--ink-900)',cursor:'pointer'}}>{p.name}</Td>
            <Td muted>{c?c.name:''}</Td>
            <Td right><Amount value={u.hours} unit="uur" size={13.5}/></Td>
            <Td right><Amount value={u.hourValue} size={13.5}/></Td>
            <Td right><Amount value={u.costs} size={13.5} tone="muted"/></Td>
            <Td right><Amount value={u.total} size={14} weight={600}/></Td>
            <Td right><Button size="sm" variant="secondary" onClick={()=>window.EG_NAV('factuur-nieuw',{projectId:p.id})} style={{whiteSpace:'nowrap'}}>Factuur voorbereiden</Button></Td></Tr>})}
      </Table>:<EmptyState icon="check-circle" title="Alles is gefactureerd" >Er zijn geen facturabele uren of doorbelastbare kosten die nog niet aan een factuur zijn gekoppeld.</EmptyState>}
    </Card>:<Card padding="0">
      {filtered().length?<Table cols={[{label:'Factuur'},{label:'Klant'},{label:'Project'},{label:'Datum'},{label:'Bedrag',right:true},
        {label:'Egberink status'},{label:'SnelStart status'},{label:'',w:44}]}>
        {filtered().map(i=>{const c=calc.customer(i.customerId);const p=calc.project(i.projectId);
          return <Tr key={i.id} onClick={()=>window.EG_NAV('factuur',{id:i.id})}>
            <Td mono>{i.number}</Td><Td style={{color:'var(--ink-900)',fontWeight:500}}>{c?c.name:''}</Td>
            <Td muted>{p?p.ref+' · '+p.name:''}</Td><Td mono>{fmt.date(i.date)}</Td>
            <Td right><Amount value={i.snelstart?i.snelstart.total:calc.invoiceTotals(i.lines).total} size={13.5}/></Td>
            <Td><Pill kind="eg" value={i.egStatus}/></Td>
            <Td><Pill kind="ss" value={i.snelstart?i.snelstart.status:'niet_verzonden'}/></Td>
            <Td><Icon name="chevron-right" size={15} color="var(--ink-400)"/></Td></Tr>})}
      </Table>:<EmptyState icon="file-text" title="Geen facturen in deze status"/>}
    </Card>}</div>;
}

/* ============ FACTUUR SAMENSTELLEN ============ */
function FactuurNieuw({params}){
  useStore();
  const invoice=params.invoiceId?calc.invoice(params.invoiceId):null;
  const p=calc.project(invoice?invoice.projectId:params.projectId);
  const c=p?calc.customer(p.customerId):null;
  const pool=p?calc.entriesOf(p.id).filter(e=>e.billable&&(!e.invoiceId||(invoice&&e.invoiceId===invoice.id))):[];
  const costPool=p?calc.costsOf(p.id).filter(k=>k.rechargeable&&(!k.invoiceId||(invoice&&k.invoiceId===invoice.id))):[];
  const [sel,setSel]=React.useState(()=>new Set(invoice?invoice.entryIds:pool.map(e=>e.id)));
  const [selK,setSelK]=React.useState(()=>new Set(invoice?invoice.costIds:costPool.map(k=>k.id)));
  const [f,setF]=React.useState({date:invoice?invoice.date:window.EG.iso(new Date()),reference:invoice?invoice.reference:'',
    description:invoice?invoice.description:'Calculatiewerkzaamheden '+(p?p.name:''),paymentTerm:invoice?invoice.paymentTerm:(c?c.paymentTerm:30),
    lineLabel:invoice&&invoice.lines[0]?invoice.lines[0].description:'Calculatiewerkzaamheden '+new Date().toLocaleDateString('nl-NL',{month:'long',year:'numeric'})});
  const [confirm,setConfirm]=React.useState(false);const [sending,setSending]=React.useState(false);const [done,setDone]=React.useState(null);
  if(!p)return <EmptyState title="Project niet gevonden"/>;
  const selHours=pool.filter(e=>sel.has(e.id)).reduce((a,e)=>a+e.hours,0);
  const selCosts=costPool.filter(k=>selK.has(k.id)).reduce((a,k)=>a+k.qty*k.unitPrice,0);
  const lines=[{description:f.lineLabel,qty:Math.round(selHours*100)/100,unit:'uur',rate:p.rate}];
  if(selCosts>0)lines.push({description:'Doorbelaste projectkosten',qty:1,unit:'post',rate:Math.round(selCosts*100)/100});
  const tot=calc.invoiceTotals(lines);
  const build=(egStatus)=>({id:invoice?invoice.id:'inv-'+MockSnelStartService.nextInvoiceNumber(),
    number:invoice?invoice.number:MockSnelStartService.nextInvoiceNumber(),customerId:c.id,projectId:p.id,date:f.date,reference:f.reference,
    description:f.description,paymentTerm:Number(f.paymentTerm)||30,lines,entryIds:[...sel],costIds:[...selK],egStatus,
    createdAt:invoice?invoice.createdAt:new Date().toISOString(),sentAt:null,snelstart:null,
    activity:invoice?invoice.activity:[{ts:new Date().toISOString(),text:'Factuur aangemaakt in Egberink',detail:'Concept'}]});
  const saveDraft=(status)=>{const inv=build(status);store.upsert('invoices',inv);
    window.EG_TOAST({title:status==='gereed'?'Factuur gereed voor SnelStart':'Concept opgeslagen',detail:inv.number+' · '+fmt.eur(tot.total)});
    window.EG_NAV('factuur',{id:inv.id});};
  const send=()=>{setSending(true);
    setTimeout(()=>{const inv=MockSnelStartService.sendInvoice(build('gereed'));setSending(false);setConfirm(false);setDone(inv)},1100)};
  const rowStyle={display:'flex',alignItems:'center',gap:14,padding:'11px 0',borderBottom:'1px solid var(--border-hairline)',fontSize:13.5};
  return <div>
    <PageHead back={{label:p.ref+' · '+p.name,onClick:()=>window.EG_NAV('project',{id:p.id})}} eyebrow={invoice?invoice.number:'Concept'} title={invoice?'Factuur bewerken':'Nieuwe factuur'}
      sub={<span>{c.name} · {p.ref} · {p.name}</span>}
      actions={<><Button variant="secondary" onClick={()=>saveDraft('concept')}>Opslaan als concept</Button>
        <Button variant="secondary" onClick={()=>saveDraft('gereed')}>Gereed voor SnelStart</Button>
        <Button onClick={()=>setConfirm(true)} disabled={tot.total<=0}>Naar SnelStart sturen</Button></>}/>
    <div style={{display:'grid',gridTemplateColumns:'1fr 340px',gap:28,alignItems:'start'}}>
      <div style={{display:'grid',gap:24}}>
        <Card><SectionTitle>Factuurgegevens</SectionTitle>
          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:16}}>
            <FormField label="Factuurdatum"><Input type="date" value={f.date} onChange={e=>setF({...f,date:e.target.value})}/></FormField>
            <FormField label="Betaaltermijn" hint="Dagen"><Input type="number" value={f.paymentTerm} onChange={e=>setF({...f,paymentTerm:e.target.value})}/></FormField>
            <FormField label="Referentie opdrachtgever"><Input value={f.reference} onChange={e=>setF({...f,reference:e.target.value})} placeholder="REF-070/1042"/></FormField>
            <FormField label="Factuuromschrijving"><Input value={f.description} onChange={e=>setF({...f,description:e.target.value})}/></FormField></div></Card>
        <Card padding="0">
          <div style={{padding:'20px 24px 12px',display:'flex',justifyContent:'space-between',alignItems:'center'}}>
            <SectionTitle style={{marginBottom:0}}>Te factureren uren</SectionTitle>
            <button onClick={()=>setSel(sel.size===pool.length?new Set():new Set(pool.map(e=>e.id)))}
              style={{appearance:'none',border:0,background:'none',cursor:'pointer',color:'var(--text-link)',fontSize:13,textDecoration:'underline',fontFamily:'var(--font-body)'}}>
              {sel.size===pool.length?'Selectie wissen':'Alles selecteren'}</button></div>
          <div style={{padding:'0 24px'}}>
            {pool.length?pool.map(e=><div key={e.id} style={rowStyle}>
              <Checkbox checked={sel.has(e.id)} onChange={v=>{const n=new Set(sel);v?n.add(e.id):n.delete(e.id);setSel(n)}}/>
              <span style={{fontFamily:'var(--font-mono)',fontSize:12.5,color:'var(--text-faint)',width:84}}>{fmt.date(e.date)}</span>
              <span style={{flex:1,color:'var(--ink-900)'}}>{e.description}{e.source==='timer'?<Badge tone="brand" style={{marginLeft:8,height:18,fontSize:9.5}}>Timer</Badge>:null}</span>
              <span style={{width:80,textAlign:'right'}}><Amount value={e.hours} unit="uur" size={13}/></span>
              <span style={{width:96,textAlign:'right'}}><Amount value={e.hours*p.rate} size={13}/></span></div>)
            :<div style={{padding:'8px 0 20px'}}><EmptyState icon="timer" title="Geen facturabele uren beschikbaar">Alle facturabele uren van dit project zijn al aan een factuur gekoppeld.</EmptyState></div>}</div>
          <div style={{padding:'14px 24px',background:'var(--ink-50)',borderTop:'1px solid var(--border-hairline)',display:'flex',justifyContent:'space-between',fontSize:13.5}}>
            <span style={{color:'var(--text-muted)'}}>{sel.size} registraties geselecteerd</span>
            <span><Amount value={selHours} unit="uur" size={13.5} weight={600}/></span></div></Card>
        {costPool.length?<Card padding="0">
          <div style={{padding:'20px 24px 12px'}}><SectionTitle style={{marginBottom:0}}>Doorbelastbare kosten</SectionTitle></div>
          <div style={{padding:'0 24px'}}>{costPool.map(k=><div key={k.id} style={rowStyle}>
            <Checkbox checked={selK.has(k.id)} onChange={v=>{const n=new Set(selK);v?n.add(k.id):n.delete(k.id);setSelK(n)}}/>
            <span style={{fontFamily:'var(--font-mono)',fontSize:12.5,color:'var(--text-faint)',width:84}}>{fmt.date(k.date)}</span>
            <span style={{flex:1,color:'var(--ink-900)'}}>{k.type} · {k.description}</span>
            <span style={{width:96,textAlign:'right'}}><Amount value={k.qty*k.unitPrice} size={13}/></span></div>)}</div>
          <div style={{padding:'14px 24px',background:'var(--ink-50)',borderTop:'1px solid var(--border-hairline)',display:'flex',justifyContent:'space-between',fontSize:13.5}}>
            <span style={{color:'var(--text-muted)'}}>{selK.size} kostenregels geselecteerd</span><Amount value={selCosts} size={13.5} weight={600}/></div></Card>:null}
        <Card padding="0">
          <div style={{padding:'20px 24px 4px'}}><SectionTitle style={{marginBottom:0}}>Factuurregels</SectionTitle></div>
          <Table cols={[{label:'Omschrijving'},{label:'Aantal',right:true},{label:'Eenheid'},{label:'Tarief',right:true},{label:'Bedrag',right:true}]} style={{marginTop:8}}>
            {lines.map((l,i)=><Tr key={i}>
              <Td>{i===0?<Input value={f.lineLabel} onChange={e=>setF({...f,lineLabel:e.target.value})} style={{minHeight:36,fontSize:13.5}}/>:l.description}</Td>
              <Td right mono>{fmt.num(l.qty,2)}</Td><Td muted>{l.unit}</Td>
              <Td right><Amount value={l.rate} size={13.5}/></Td>
              <Td right><Amount value={l.qty*l.rate} size={13.5} weight={600}/></Td></Tr>)}
          </Table></Card></div>
      <div style={{display:'grid',gap:20,position:'sticky',top:24}}>
        <Card accent>
          <SectionTitle>Totalen</SectionTitle>
          <DataRow label="Subtotaal" value={fmt.eur(tot.sub)}/><DataRow label="BTW 21%" value={fmt.eur(tot.btw)}/>
          <div style={{display:'flex',justifyContent:'space-between',alignItems:'baseline',paddingTop:16,marginTop:6,borderTop:'2px solid var(--ink-900)'}}>
            <span style={{fontFamily:'var(--font-display)',fontSize:14,fontWeight:600}}>Totaal incl. BTW</span><Amount value={tot.total} size={20} weight={600}/></div>
          <div style={{marginTop:22,display:'grid',gap:10}}>
            <Button fullWidth onClick={()=>setConfirm(true)} disabled={tot.total<=0}>Naar SnelStart sturen</Button>
            <Button fullWidth variant="secondary" onClick={()=>saveDraft('concept')}>Opslaan als concept</Button></div></Card>
        <Card>
          <SectionTitle>Twee systemen</SectionTitle>
          <div style={{display:'grid',gap:14,fontSize:13,color:'var(--text-muted)',lineHeight:1.6}}>
            <div><Source from="Egberink"/><div style={{marginTop:5}}>Egberink stelt de factuur inhoudelijk samen: project, uren, kosten en factuurregels.</div></div>
            <div style={{paddingTop:12,borderTop:'1px solid var(--border-hairline)'}}><Source/><div style={{marginTop:5}}>SnelStart verwerkt de factuur financieel en bepaalt openstaand saldo, betaling en betaaldatum.</div></div></div></Card></div></div>
    {confirm?<Modal title="Factuur naar SnelStart sturen?" onClose={()=>!sending&&setConfirm(false)} width={480}
      footer={<><Button variant="secondary" onClick={()=>setConfirm(false)} disabled={sending}>Annuleren</Button>
        <Button onClick={send} disabled={sending}>{sending?'Versturen...':'Naar SnelStart sturen'}</Button></>}>
      {sending?<div style={{padding:'26px 0',textAlign:'center'}}>
        <div className="eg-spin" style={{width:26,height:26,border:'2px solid var(--ink-200)',borderTopColor:'var(--teal-600)',borderRadius:'50%',margin:'0 auto 16px'}}/>
        <div style={{fontSize:14,color:'var(--text-muted)'}}>Factuur wordt aangeboden aan SnelStart...</div></div>
      :<div>
        <div style={{border:'1px solid var(--border-hairline)',borderRadius:'var(--radius-sm)',padding:'16px 18px',marginBottom:18}}>
          <DataRow label="Factuur" value={invoice?invoice.number:MockSnelStartService.nextInvoiceNumber()}/>
          <DataRow label="Klant" value={c.name}/><DataRow label="Project" value={p.ref}/>
          <div style={{display:'flex',justifyContent:'space-between',paddingTop:12}}><span style={{fontSize:13.5,color:'var(--text-muted)'}}>Totaal</span><Amount value={tot.total} size={16} weight={600}/></div></div>
        <p style={{margin:0,fontSize:13.5,color:'var(--text-muted)',lineHeight:1.62}}>De factuur wordt definitief gemaakt en aangeboden aan SnelStart voor financiële verwerking. Betaalstatus en betaaldatum worden daarna vanuit SnelStart teruggelezen.</p></div>}</Modal>:null}
    {done?<Modal title="Factuur verwerkt door SnelStart" onClose={()=>window.EG_NAV('factuur',{id:done.id})} width={480}
      footer={<><Button variant="secondary" onClick={()=>window.EG_NAV('facturatie',{tab:'Verzonden'})}>Naar facturatie</Button>
        <Button onClick={()=>window.EG_NAV('factuur',{id:done.id})}>Factuur openen</Button></>}>
      <div style={{display:'flex',alignItems:'center',gap:12,marginBottom:18}}>
        <Icon name="check-circle" size={22} color="var(--success-600)"/>
        <span style={{fontFamily:'var(--font-display)',fontSize:15,fontWeight:600,color:'var(--success-600)'}}>Factuur succesvol verwerkt</span></div>
      <DataRow label="Egberink factuurnummer" value={done.number}/>
      <DataRow label="SnelStart-referentie" value={done.snelstart.reference}/>
      <DataRow label="Verzonden op" value={fmt.date(done.sentAt)+' · '+fmt.time(done.sentAt)}/>
      <DataRow label="Totaalbedrag" value={fmt.eur(done.snelstart.total)}/>
      <DataRow label="Vervaldatum" value={fmt.date(done.snelstart.dueDate)}/>
      <p style={{marginTop:18,marginBottom:0,fontSize:13,color:'var(--text-faint)'}}>De financiële status van deze factuur wordt vanaf nu vanuit SnelStart teruggelezen.</p></Modal>:null}
  </div>;
}

/* ============ FACTUURDETAIL ============ */
function Factuurdetail({params}){
  useStore();const i=calc.invoice(params.id);
  const [confirm,setConfirm]=React.useState(false);const [sending,setSending]=React.useState(false);
  if(!i)return <EmptyState title="Factuur niet gevonden"/>;
  const c=calc.customer(i.customerId);const p=calc.project(i.projectId);const tot=calc.invoiceTotals(i.lines);
  const entries=store.timeEntries.filter(e=>i.entryIds.includes(e.id));
  const costs=store.projectCosts.filter(k=>i.costIds.includes(k.id));
  const send=()=>{setSending(true);setTimeout(()=>{MockSnelStartService.sendInvoice(i);setSending(false);setConfirm(false);
    window.EG_TOAST({title:'Factuur verwerkt door SnelStart',detail:'SS-'+i.number})},1100)};
  return <div>
    <PageHead back={{label:'Facturatie',onClick:()=>window.EG_NAV('facturatie',{tab:'Alles'})}} eyebrow={'Factuur '+i.number} title={c?c.name:''}
      sub={p?p.ref+' · '+p.name:''}
      actions={<>{i.egStatus!=='verzonden'?<Button onClick={()=>setConfirm(true)}>Naar SnelStart sturen</Button>:null}
        {i.egStatus!=='verzonden'?<Button variant="secondary" onClick={()=>window.EG_NAV('factuur-nieuw',{invoiceId:i.id})}>Bewerken</Button>:null}</>}/>
    <div style={{display:'flex',gap:28,marginBottom:26,alignItems:'center'}}>
      <div><div style={{...label12,fontSize:10,marginBottom:7}}>Egberink status</div><Pill kind="eg" value={i.egStatus}/></div>
      <div style={{width:1,height:38,background:'var(--border-hairline)'}}/>
      <div><div style={{...label12,fontSize:10,marginBottom:7}}>SnelStart status</div><Pill kind="ss" value={i.snelstart?i.snelstart.status:'niet_verzonden'}/></div></div>
    <div style={{display:'grid',gridTemplateColumns:'1.5fr 1fr',gap:28,alignItems:'start'}}>
      <div style={{display:'grid',gap:24}}>
        <Card padding="0">
          <div style={{padding:'20px 24px 6px',display:'flex',justifyContent:'space-between',alignItems:'center'}}>
            <SectionTitle style={{marginBottom:0}}>Factuurgegevens Egberink</SectionTitle><Source from="Egberink"/></div>
          <div style={{padding:'8px 24px 20px'}}>
            <DataRow label="Klant" value={c?c.name:''}/><DataRow label="Project" value={p?p.ref+' · '+p.name:''}/>
            <DataRow label="Factuurdatum" value={fmt.date(i.date)}/><DataRow label="Referentie opdrachtgever" value={i.reference||'—'}/>
            <DataRow label="Betaaltermijn" value={i.paymentTerm+' dagen'}/>
            <DataRow label="Aangemaakt op" value={fmt.date(i.createdAt)+' · '+fmt.time(i.createdAt)}/>
            <DataRow label="Naar SnelStart gestuurd op" value={i.sentAt?fmt.date(i.sentAt)+' · '+fmt.time(i.sentAt):'Nog niet verzonden'}/></div>
          <Table cols={[{label:'Omschrijving'},{label:'Aantal',right:true},{label:'Eenheid'},{label:'Tarief',right:true},{label:'Bedrag',right:true}]}>
            {i.lines.map((l,ix)=><Tr key={ix}><Td style={{color:'var(--ink-900)'}}>{l.description}</Td>
              <Td right mono>{fmt.num(l.qty,2)}</Td><Td muted>{l.unit}</Td>
              <Td right><Amount value={l.rate} size={13.5}/></Td><Td right><Amount value={l.qty*l.rate} size={13.5}/></Td></Tr>)}
          </Table>
          <div style={{padding:'16px 24px 22px',display:'grid',gap:2,justifyItems:'end'}}>
            <div style={{width:280}}><DataRow label="Subtotaal" value={fmt.eur(tot.sub)}/><DataRow label="BTW 21%" value={fmt.eur(tot.btw)}/>
              <div style={{display:'flex',justifyContent:'space-between',paddingTop:12,borderTop:'2px solid var(--ink-900)',marginTop:4}}>
                <span style={{fontFamily:'var(--font-display)',fontSize:14,fontWeight:600}}>Totaal</span><Amount value={tot.total} size={16} weight={600}/></div></div></div></Card>
        <Card padding="0">
          <div style={{padding:'20px 24px 8px'}}><SectionTitle style={{marginBottom:0}}>Gekoppelde uren en kosten</SectionTitle></div>
          <Table cols={[{label:'Datum'},{label:'Omschrijving'},{label:'Soort'},{label:'Aantal',right:true},{label:'Bedrag',right:true}]}>
            {entries.map(e=><Tr key={e.id}><Td mono>{fmt.date(e.date)}</Td><Td>{e.description}</Td>
              <Td><Badge tone={e.source==='timer'?'brand':'neutral'}>{e.source==='timer'?'Timer':'Handmatig'}</Badge></Td>
              <Td right><Amount value={e.hours} unit="uur" size={13}/></Td>
              <Td right><Amount value={e.hours*(p?p.rate:0)} size={13}/></Td></Tr>)}
            {costs.map(k=><Tr key={k.id}><Td mono>{fmt.date(k.date)}</Td><Td>{k.description}</Td>
              <Td><Badge>{k.type}</Badge></Td><Td right mono>{fmt.num(k.qty,k.qty%1?2:0)}</Td>
              <Td right><Amount value={k.qty*k.unitPrice} size={13}/></Td></Tr>)}
          </Table></Card></div>
      <div style={{display:'grid',gap:24}}>
        <Card style={{borderTop:'3px solid var(--staal-500)'}}>
          <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:14}}>
            <h3 style={{fontSize:15.5,margin:0}}>SnelStart</h3><Source/></div>
          {i.snelstart?<>
            <DataRow label="Financiële status" value={window.EG.SS_STATUS[i.snelstart.status].label}/>
            <DataRow label="SnelStart-referentie" value={i.snelstart.reference}/>
            <DataRow label="Factuurbedrag" value={fmt.eur(i.snelstart.total)}/>
            <DataRow label="Ontvangen" value={fmt.eur(i.snelstart.paid)}/>
            <DataRow label="Openstaand" value={fmt.eur(i.snelstart.outstanding)}/>
            <DataRow label="Vervaldatum" value={fmt.date(i.snelstart.dueDate)}/>
            <DataRow label="Betaaldatum" value={i.snelstart.paidDate?fmt.date(i.snelstart.paidDate):'—'}/>
            <DataRow label="Laatste synchronisatie" value={fmt.date(i.snelstart.lastSync)+' · '+fmt.time(i.snelstart.lastSync)}/>
            <p style={{marginTop:16,marginBottom:0,fontSize:12.5,color:'var(--text-faint)',lineHeight:1.6}}>Deze financiële informatie is afkomstig uit SnelStart en kan niet in Egberink worden gewijzigd.</p></>
          :<div style={{padding:'8px 0'}}><Alert tone="info" title="Nog niet verzonden">Deze factuur is nog niet aangeboden aan SnelStart. Er is daarom geen financiële status beschikbaar.</Alert></div>}</Card>
        <Card><SectionTitle>Activiteit</SectionTitle>
          <div style={{display:'grid',gap:0}}>{(i.activity||[]).map((a,ix)=>
            <div key={ix} style={{display:'flex',gap:14,paddingBottom:18}}>
              <div style={{display:'flex',flexDirection:'column',alignItems:'center',flex:'none'}}>
                <span style={{width:7,height:7,borderRadius:'50%',background:ix===0?'var(--teal-600)':'var(--ink-300)',marginTop:5}}/>
                {ix<i.activity.length-1?<span style={{flex:1,width:1,background:'var(--border-hairline)',marginTop:4}}/>:null}</div>
              <div><div style={{fontFamily:'var(--font-mono)',fontSize:11,color:'var(--text-faint)',letterSpacing:'.04em'}}>{fmt.date(a.ts)} · {fmt.time(a.ts)}</div>
                <div style={{fontSize:13.5,color:'var(--ink-900)',marginTop:3}}>{a.text}</div>
                {a.detail?<div style={{fontSize:12.5,color:'var(--text-muted)',marginTop:2}}>{a.detail}</div>:null}</div></div>)}</div></Card></div></div>
    {confirm?<Modal title="Factuur naar SnelStart sturen?" onClose={()=>!sending&&setConfirm(false)} width={460}
      footer={<><Button variant="secondary" onClick={()=>setConfirm(false)} disabled={sending}>Annuleren</Button>
        <Button onClick={send} disabled={sending}>{sending?'Versturen...':'Naar SnelStart sturen'}</Button></>}>
      {sending?<div style={{padding:'24px 0',textAlign:'center'}}>
        <div className="eg-spin" style={{width:26,height:26,border:'2px solid var(--ink-200)',borderTopColor:'var(--teal-600)',borderRadius:'50%',margin:'0 auto 16px'}}/>
        <div style={{fontSize:14,color:'var(--text-muted)'}}>Factuur wordt aangeboden aan SnelStart...</div></div>
      :<><DataRow label="Factuur" value={i.number}/><DataRow label="Klant" value={c?c.name:''}/><DataRow label="Totaal" value={fmt.eur(tot.total)}/>
        <p style={{marginTop:16,marginBottom:0,fontSize:13.5,color:'var(--text-muted)',lineHeight:1.62}}>De factuur wordt definitief gemaakt en aangeboden aan SnelStart voor financiële verwerking.</p></>}</Modal>:null}
  </div>;
}

/* ============ FINANCIEEL ============ */
function MonthChart(){
  const invs=store.invoices.filter(i=>i.snelstart);
  const months=[];const now=new Date();
  for(let k=5;k>=0;k--){const d=new Date(now.getFullYear(),now.getMonth()-k,1);months.push({d,label:['jan','feb','mrt','apr','mei','jun','jul','aug','sep','okt','nov','dec'][d.getMonth()],inv:0,paid:0})}
  invs.forEach(i=>{const d=new Date(i.date);const m=months.find(m=>m.d.getMonth()===d.getMonth()&&m.d.getFullYear()===d.getFullYear());if(m)m.inv+=i.snelstart.total;
    if(i.snelstart.paidDate){const pd=new Date(i.snelstart.paidDate);const m2=months.find(m=>m.d.getMonth()===pd.getMonth()&&m.d.getFullYear()===pd.getFullYear());if(m2)m2.paid+=i.snelstart.paid}});
  const max=Math.max(1,...months.map(m=>Math.max(m.inv,m.paid)));
  return <div>
    <div style={{display:'flex',gap:20,marginBottom:18,fontSize:12,color:'var(--text-muted)'}}>
      {[['Gefactureerd','var(--teal-600)'],['Ontvangen','var(--teal-300)']].map(([l,c])=>
        <span key={l} style={{display:'inline-flex',alignItems:'center',gap:7}}><span style={{width:10,height:10,background:c}}/>{l}</span>)}</div>
    <div style={{display:'grid',gridTemplateColumns:'repeat(6,1fr)',gap:18,alignItems:'end',height:170}}>
      {months.map((m,i)=><div key={i} style={{display:'flex',flexDirection:'column',alignItems:'center',gap:8,height:'100%',justifyContent:'flex-end'}}>
        <div style={{display:'flex',alignItems:'flex-end',gap:4,height:'100%',width:'100%',justifyContent:'center'}}>
          <div title={fmt.eur(m.inv)} style={{width:'34%',height:Math.max(2,m.inv/max*100)+'%',background:'var(--teal-600)',transition:'height 320ms cubic-bezier(.2,0,0,1)'}}/>
          <div title={fmt.eur(m.paid)} style={{width:'34%',height:Math.max(2,m.paid/max*100)+'%',background:'var(--teal-300)',transition:'height 320ms cubic-bezier(.2,0,0,1)'}}/></div>
        <span style={{fontFamily:'var(--font-mono)',fontSize:10.5,color:'var(--text-faint)',textTransform:'uppercase'}}>{m.label}</span></div>)}</div></div>;
}
function Aging(){
  const rows=[['0–30 dagen',0,30],['31–60 dagen',31,60],['61–90 dagen',61,90],['Meer dan 90 dagen',91,9999]];
  const open=store.invoices.filter(i=>i.snelstart&&i.snelstart.outstanding>0);
  const data=rows.map(([l,a,b])=>({label:l,total:open.filter(i=>{const days=Math.floor((Date.now()-new Date(i.date))/86400000);return days>=a&&days<=b}).reduce((s,i)=>s+i.snelstart.outstanding,0)}));
  const max=Math.max(1,...data.map(d=>d.total));
  return <div style={{display:'grid',gap:14}}>{data.map(d=><div key={d.label}>
    <div style={{display:'flex',justifyContent:'space-between',fontSize:13,marginBottom:6}}>
      <span style={{color:'var(--text-muted)'}}>{d.label}</span><Amount value={d.total} size={13}/></div>
    <div style={{height:6,background:'var(--ink-100)',borderRadius:999,overflow:'hidden'}}>
      <div style={{width:(d.total/max*100)+'%',height:'100%',background:'var(--teal-600)'}}/></div></div>)}</div>;
}
function Financieel({params}){
  useStore();const t=calc.totals();const ss=store.snelstart;
  const [syncing,setSyncing]=React.useState(false);const [result,setResult]=React.useState(null);
  const [q,setQ]=React.useState('');const [status,setStatus]=React.useState((params&&params.filter)||'Alle');
  const [cust,setCust]=React.useState('Alle klanten');const [year,setYear]=React.useState('2026');
  const sync=()=>{setSyncing(true);setResult(null);
    setTimeout(()=>{const r=MockSnelStartService.syncInvoices();setSyncing(false);setResult(r);
      window.EG_TOAST({tone:'info',title:'Synchronisatie voltooid',detail:r.checked+' facturen gecontroleerd · '+r.changed+' betaalstatussen bijgewerkt'})},1400)};
  const STATUS=['Alle','Openstaand','Deels betaald','Betaald','Vervallen'];
  const rows=store.invoices.filter(i=>i.snelstart).filter(i=>{
    const c=calc.customer(i.customerId);const p=calc.project(i.projectId);
    const okQ=[i.number,i.snelstart.reference,c?c.name:''].join(' ').toLowerCase().includes(q.toLowerCase());
    const okS=status==='Alle'||window.EG.SS_STATUS[i.snelstart.status].label===status;
    const okC=cust==='Alle klanten'||(c&&c.name===cust);
    const okY=String(new Date(i.date).getFullYear())===year;
    return okQ&&okS&&okC&&okY;});
  return <div>
    <PageHead title="Financieel" sub="Facturen, betalingen en openstaande posten. Alle financiële standen komen uit SnelStart."
      actions={<div style={{display:'flex',alignItems:'center',gap:16,border:'1px solid var(--border-hairline)',borderRadius:'var(--radius-md)',padding:'10px 16px'}}>
        <div><div style={{display:'flex',alignItems:'center',gap:8}}>
          <span style={{width:7,height:7,borderRadius:'50%',background:'var(--success-600)'}}/>
          <span style={{fontFamily:'var(--font-display)',fontSize:13.5,fontWeight:600}}>SnelStart · Verbonden</span></div>
          <div style={{fontSize:11.5,color:'var(--text-faint)',marginTop:3,fontFamily:'var(--font-mono)'}}>
            {ss.lastSync?'Laatst gesynchroniseerd '+fmt.time(ss.lastSync):'Nog niet gesynchroniseerd'}</div></div>
        <Button size="sm" variant="secondary" icon="refresh-cw" onClick={sync} disabled={syncing}>{syncing?'Synchroniseren...':'Synchroniseren'}</Button></div>}/>
    {syncing?<Alert tone="info" title="SnelStart wordt gesynchroniseerd..." style={{marginBottom:24}}>Facturen en betalingen worden opgehaald uit SnelStart.</Alert>:null}
    {result?<Alert tone="success" title="Synchronisatie voltooid" style={{marginBottom:24}}>
      {result.checked} facturen gecontroleerd · {result.changed} betaalstatussen bijgewerkt · laatste synchronisatie {fmt.time(result.at)}</Alert>:null}
    <KpiRow cols={6} style={{marginBottom:32}}>
      <Kpi label="Gefactureerd" value={fmt.eur0(t.invoicedYear)} note="Uit SnelStart"/>
      <Kpi label="Openstaand" value={fmt.eur0(t.outstanding)} note="Uit SnelStart"/>
      <Kpi label="Vervallen" value={fmt.eur0(t.overdue)} note="Uit SnelStart" tone={t.overdue>0?'danger':undefined}/>
      <Kpi label="Ontvangen deze maand" value={fmt.eur0(t.receivedMonth)} note="Uit SnelStart"/>
      <Kpi label="Nog te factureren" value={fmt.eur0(t.unbilled)} note="Uit Egberink"/>
      <Kpi label="Gem. betaaltermijn" value={Math.round(t.avgTerm())+' dagen'} note="Uit SnelStart"/>
    </KpiRow>
    <div style={{display:'grid',gridTemplateColumns:'1.5fr 1fr',gap:28,marginBottom:32,alignItems:'start'}}>
      <Card><SectionTitle right={<Source/>}>Gefactureerd en ontvangen per maand</SectionTitle><MonthChart/></Card>
      <Card><SectionTitle right={<Source/>}>Openstaande facturen naar ouderdom</SectionTitle><Aging/></Card></div>
    <Card padding="0">
      <div style={{padding:'18px 20px',borderBottom:'1px solid var(--border-hairline)',display:'flex',gap:12,alignItems:'center',flexWrap:'wrap'}}>
        <Search value={q} onChange={setQ} placeholder="Zoek op factuurnummer of klant..." width={280}/>
        <Select value={status} onChange={e=>setStatus(e.target.value)} options={STATUS} style={{minHeight:40,fontSize:13.5,width:170}}/>
        <Select value={cust} onChange={e=>setCust(e.target.value)} options={['Alle klanten',...store.customers.map(c=>c.name)]} style={{minHeight:40,fontSize:13.5,width:230}}/>
        <Select value={year} onChange={e=>setYear(e.target.value)} options={['2026','2025']} style={{minHeight:40,fontSize:13.5,width:110}}/>
        <span style={{marginLeft:'auto',fontSize:13,color:'var(--text-faint)'}}>{rows.length} facturen</span></div>
      {rows.length?<Table cols={[{label:'Factuur'},{label:'SnelStart'},{label:'Klant'},{label:'Project'},{label:'Datum'},{label:'Bedrag',right:true},
        {label:'Ontvangen',right:true},{label:'Openstaand',right:true},{label:'Vervaldatum'},{label:'Betaaldatum'},{label:'Status'}]}>
        {rows.map(i=>{const c=calc.customer(i.customerId);const p=calc.project(i.projectId);const s=i.snelstart;
          return <Tr key={i.id} onClick={()=>window.EG_NAV('factuur',{id:i.id})}>
            <Td mono>{i.number}</Td><Td mono muted>{s.reference}</Td>
            <Td style={{color:'var(--ink-900)',fontWeight:500}}>{c?c.name:''}</Td><Td muted>{p?p.ref:''}</Td>
            <Td mono>{fmt.date(i.date)}</Td>
            <Td right><Amount value={s.total} size={13.5}/></Td>
            <Td right><Amount value={s.paid} size={13.5} tone="muted"/></Td>
            <Td right><Amount value={s.outstanding} size={13.5} tone={s.status==='vervallen'?'danger':'strong'}/></Td>
            <Td mono muted>{fmt.date(s.dueDate)}</Td><Td mono muted>{s.paidDate?fmt.date(s.paidDate):'—'}</Td>
            <Td><Pill kind="ss" value={s.status}/></Td></Tr>})}
      </Table>:<EmptyState icon="file-text" title="Geen facturen gevonden" action={<Button variant="secondary" onClick={()=>{setQ('');setStatus('Alle');setCust('Alle klanten')}}>Filters wissen</Button>}/>}
    </Card>
    <Card style={{marginTop:28}}>
      <SectionTitle>Synchronisatiehistorie</SectionTitle>
      <div>{store.syncHistory.slice(0,6).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>)}</div></Card>
  </div>;
}
Object.assign(window,{Facturatie,FactuurNieuw,Factuurdetail,Financieel});