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

/* ============ PROJECTFORMULIER ============ */
function ProjectForm({project,customerId,onClose}){
  const [f,setF]=React.useState(project||{ref:window.EG.nextProjectRef(),name:'',customerId:customerId||store.customers[0].id,contact:'',status:'nieuw',
    kind:'Calculatie',leadId:store.currentUser,team:[store.currentUser],description:'',rateOverride:'',budgetHours:'',km:'',notes:''});
  const set=(k)=>e=>setF({...f,[k]:e.target?e.target.value:e});
  React.useEffect(()=>{if(!f.contact){const c=calc.customer(f.customerId);if(c)setF(s=>({...s,contact:c.contact}))}},[f.customerId]);
  const save=()=>{
    if(!f.name.trim()){window.EG_TOAST({tone:'danger',title:'Projectnaam is verplicht'});return}
    const team=(f.team&&f.team.length?f.team:[f.leadId]).filter(Boolean);
    const item={...f,id:f.id||('p-'+f.ref.slice(5)+'-'+Math.floor(Math.random()*99)),
      rateOverride:Number(String(f.rateOverride).replace(',','.'))||0,team:team.indexOf(f.leadId)<0?[f.leadId,...team]:team,
      budgetHours:Number(f.budgetHours)||0,km:Number(f.km)||0};
    store.upsert('projects',item);
    window.EG_TOAST({title:project?'Project bijgewerkt':'Project aangemaakt',detail:item.ref+' · '+item.name});
    onClose();if(!project)window.EG_NAV('project',{id:item.id});
  };
  return <SidePanel title={project?'Project bewerken':'Nieuw project'} sub={project?project.ref:'Werknummer is automatisch voorgesteld en aanpasbaar.'} onClose={onClose}
    footer={<><Button variant="secondary" onClick={onClose}>Annuleren</Button><Button onClick={save}>{project?'Wijzigingen opslaan':'Project aanmaken'}</Button></>}>
    <FormGroup title="Projectgegevens">
      <FormField label="Werknummer"><Input value={f.ref} onChange={set('ref')} style={{fontFamily:'var(--font-mono)'}}/></FormField>
      <FormField label="Status"><Select value={f.status} onChange={set('status')} options={window.EG.PROJECT_STATUS.map(s=>({value:s.v,label:s.label}))}/></FormField>
      <FormField label="Projectnaam" required style={{gridColumn:'span 2'}}><Input value={f.name} onChange={set('name')} placeholder="Nieuwbouw bedrijfspand Almelo"/></FormField>
      <FormField label="Soort werk"><Select value={f.kind} onChange={set('kind')} options={window.EG.PROJECT_KINDS}/></FormField>
      <FormField label="Klant"><Select value={f.customerId} onChange={set('customerId')} options={store.customers.map(c=>({value:c.id,label:c.name}))}/></FormField>
      <FormField label="Contactpersoon"><Input value={f.contact} onChange={set('contact')}/></FormField>
      <FormField label="Omschrijving" style={{gridColumn:'span 2'}}><Textarea rows={3} value={f.description} onChange={set('description')}/></FormField>
    </FormGroup>
    <FormGroup title="Bezetting" cols={1}>
      <FormField label="Projectleider"><Select value={f.leadId} onChange={set('leadId')}
        options={store.employees.filter(e=>e.active).map(e=>({value:e.id,label:e.name+' · '+e.role}))}/></FormField>
      <FormField label="Wie werkt er op dit project?" hint="Bepaalt wie het project ziet bij het schrijven van uren">
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:8,marginTop:2}}>
          {store.employees.filter(e=>e.active).map(e=>{const on=(f.team||[]).indexOf(e.id)>=0||e.id===f.leadId;
            return <label key={e.id} style={{display:'flex',alignItems:'center',gap:9,padding:'7px 9px',border:'1px solid '+(on?'var(--ink-900)':'var(--border-hairline)'),
              borderRadius:'var(--radius-sm)',cursor:e.id===f.leadId?'default':'pointer',background:on?'var(--ink-50)':'var(--white)'}}>
              <Checkbox checked={on} onChange={v=>{if(e.id===f.leadId)return;const t=new Set(f.team||[]);v?t.add(e.id):t.delete(e.id);setF({...f,team:[...t]})}}/>
              <Avatar employee={e} size={22}/>
              <span style={{fontSize:13,color:'var(--ink-900)'}}>{e.name}</span></label>})}</div></FormField>
    </FormGroup>
    <FormGroup title="Financieel">
      <FormField label="Afwijkend uurtarief" hint="Leeg = het tarief van de medewerker"><Input value={f.rateOverride} onChange={set('rateOverride')} placeholder="—"/></FormField>
      <FormField label="Begrote uren"><Input value={f.budgetHours} onChange={set('budgetHours')} type="number"/></FormField>
      <FormField label="Kilometers naar bouwplaats"><Input value={f.km} onChange={set('km')} type="number"/></FormField>
    </FormGroup>
    <FormGroup title="Aanvullend" cols={1}>
      <FormField label="Bijzonderheden"><Textarea rows={3} value={f.notes} onChange={set('notes')}/></FormField>
    </FormGroup></SidePanel>;
}

/* ============ PROJECTENOVERZICHT ============ */
const FILTERS=['Alle','Nieuw','Actief','Gefactureerd','Afgesloten'];
function Projecten({params}){
  useStore();const [q,setQ]=React.useState('');const [fil,setFil]=React.useState('Alle');
  const [nieuw,setNieuw]=React.useState(!!(params&&params.nieuw));
  const rows=store.projects.filter(p=>{
    const c=calc.customer(p.customerId);
    const okQ=[p.ref,p.name,c?c.name:'',calc.employeeName(p.leadId),p.kind||''].join(' ').toLowerCase().includes(q.toLowerCase());
    const okF=fil==='Alle'||window.EG.projectStatus(p.status).label===fil;
    return okQ&&okF;});
  return <div>
    <PageHead title="Projecten" sub="Alle werknummers met geschreven uren, begroting en te factureren waarde."
      actions={<Button icon="plus" onClick={()=>setNieuw(true)} style={{whiteSpace:'nowrap'}}>Nieuw project</Button>}/>
    <div style={{display:'flex',justifyContent:'space-between',gap:20,marginBottom:18,flexWrap:'wrap'}}>
      <FilterRow items={FILTERS} value={fil} onChange={setFil}/>
      <Search value={q} onChange={setQ} placeholder="Zoek op werknummer, project, klant of medewerker..." width={380}/></div>
    <Card padding="0">
      {rows.length?<Table cols={[{label:'Werknr.'},{label:'Project'},{label:'Soort'},{label:'Projectleider'},{label:'Uren / begroot',right:true},
        {label:'Nog te factureren',right:true},{label:'Status'}]}>
        {rows.map(p=>{const c=calc.customer(p.customerId);const h=calc.hours(p.id);const over=p.budgetHours>0&&h>p.budgetHours;
          return <Tr key={p.id} onClick={()=>window.EG_NAV('project',{id:p.id})}>
            <Td mono muted>{p.ref}</Td>
            <Td><div style={{fontWeight:500,color:'var(--ink-900)'}}>{p.name}</div>
              <div style={{fontSize:12.5,color:'var(--text-faint)'}}>{c?c.name:''}</div></Td>
            <Td muted>{p.kind||'Calculatie'}</Td>
            <Td><EmployeeCell id={p.leadId}/></Td>
            <Td right><Amount value={h} unit="uur" size={13.5} tone={over?'danger':'strong'}/>
              <div style={{fontSize:12,color:'var(--text-faint)',fontVariantNumeric:'tabular-nums'}}>van {fmt.h(p.budgetHours)}</div></Td>
            <Td right><Amount value={calc.unbilled(p.id).total} size={13.5}/></Td>
            <Td><Pill kind="project" value={p.status}/></Td></Tr>})}
      </Table>:<EmptyState icon="folder" title="Geen projecten gevonden" action={<Button variant="secondary" onClick={()=>{setQ('');setFil('Alle')}}>Filters wissen</Button>}/>}
    </Card>
    {nieuw?<ProjectForm onClose={()=>setNieuw(false)}/>:null}</div>;
}

/* ============ UREN-FORMULIER (handmatig / bewerken) ============ */
function EntryForm({entry,projectId,onClose}){
  const first=projectId?calc.project(projectId):null;
  const [cid,setCid]=React.useState(entry?calc.project(entry.projectId).customerId:(first?first.customerId:store.customers[0].id));
  const [f,setF]=React.useState(entry||{date:window.EG.iso(new Date()),projectId:projectId||'',employeeId:store.currentUser,description:'',hours:'',billable:store.settings.defaultBillable,note:''});
  const projects=store.projects.filter(p=>p.customerId===cid);
  React.useEffect(()=>{if(!projects.find(p=>p.id===f.projectId))setF(s=>({...s,projectId:projects[0]?projects[0].id:''}))},[cid]);
  const set=(k)=>e=>setF({...f,[k]:e.target?e.target.value:e});
  const save=()=>{
    const h=parseFloat(String(f.hours).replace(',','.'));
    if(!f.projectId||!h){window.EG_TOAST({tone:'danger',title:'Project en aantal uren zijn verplicht'});return}
    const item={...f,id:f.id||window.EG.uid('t'),employeeId:f.employeeId||store.currentUser,hours:Math.round(h*100)/100,invoiceId:f.invoiceId||null};
    store.upsert('timeEntries',item);
    window.EG_TOAST({title:entry?'Urenregel bijgewerkt':'Uren opgeslagen',detail:fmt.h(item.hours)+' op '+calc.project(item.projectId).ref+' · '+calc.employeeName(item.employeeId)});
    onClose();
  };
  return <Modal title={entry?'Urenregel bewerken':'Uren toevoegen'} onClose={onClose} width={560}
    footer={<><Button variant="secondary" onClick={onClose}>Annuleren</Button><Button onClick={save}>Uren opslaan</Button></>}>
    <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:16}}>
      <FormField label="Medewerker"><Select value={f.employeeId} onChange={set('employeeId')}
        options={store.employees.filter(e=>e.active).map(e=>({value:e.id,label:e.name}))}/></FormField>
      <FormField label="Datum"><Input type="date" value={f.date} onChange={set('date')}/></FormField>
      <FormField label="Aantal uren" hint="Decimaal, bijvoorbeeld 2,5" style={{gridColumn:'span 2'}}><Input value={f.hours} onChange={set('hours')} placeholder="2,5"/></FormField>
      <FormField label="Klant"><Select value={cid} onChange={e=>setCid(e.target.value)} options={store.customers.map(c=>({value:c.id,label:c.name}))}/></FormField>
      <FormField label="Project"><Select value={f.projectId} onChange={set('projectId')} options={projects.map(p=>({value:p.id,label:p.ref+' · '+p.name}))}/></FormField>
      <FormField label="Omschrijving werkzaamheden" style={{gridColumn:'span 2'}}><Input value={f.description} onChange={set('description')} placeholder="Calculatie bouwkundig"/></FormField>
      <FormField label="Facturabel"><Toggle checked={!!f.billable} onChange={v=>setF({...f,billable:v})}/></FormField>
      <FormField label="Notitie" style={{gridColumn:'span 2'}}><Textarea rows={2} value={f.note} onChange={set('note')}/></FormField>
    </div></Modal>;
}

/* ============ PROJECTKOSTEN ============ */
function CostForm({cost,projectId,onClose}){
  const [f,setF]=React.useState(cost||{date:window.EG.iso(new Date()),type:'Kilometers',employeeId:store.currentUser,description:'',qty:'',unitPrice:'',rechargeable:true});
  const set=(k)=>e=>setF({...f,[k]:e.target?e.target.value:e});
  const qty=parseFloat(String(f.qty).replace(',','.'))||0,price=parseFloat(String(f.unitPrice).replace(',','.'))||0;
  const save=()=>{
    if(!qty||!price){window.EG_TOAST({tone:'danger',title:'Aantal en prijs per eenheid zijn verplicht'});return}
    store.upsert('projectCosts',{...f,id:f.id||window.EG.uid('k'),projectId:f.projectId||projectId,employeeId:f.employeeId||store.currentUser,qty,unitPrice:price,invoiceId:f.invoiceId||null});
    window.EG_TOAST({title:'Kostenregel opgeslagen',detail:f.type+' · '+fmt.eur(qty*price)});onClose();
  };
  return <Modal title={cost?'Kostenregel bewerken':'Kosten toevoegen'} onClose={onClose} width={540}
    footer={<><Button variant="secondary" onClick={onClose}>Annuleren</Button><Button onClick={save}>Kosten opslaan</Button></>}>
    <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:16}}>
      <FormField label="Datum"><Input type="date" value={f.date} onChange={set('date')}/></FormField>
      <FormField label="Kostensoort"><Select value={f.type} onChange={set('type')} options={window.EG.COST_TYPES}/></FormField>
      <FormField label="Gemaakt door" style={{gridColumn:'span 2'}}><Select value={f.employeeId} onChange={set('employeeId')}
        options={store.employees.filter(e=>e.active).map(e=>({value:e.id,label:e.name}))}/></FormField>
      <FormField label="Omschrijving" style={{gridColumn:'span 2'}}><Input value={f.description} onChange={set('description')}/></FormField>
      <FormField label="Aantal"><Input value={f.qty} onChange={set('qty')} placeholder="36"/></FormField>
      <FormField label="Prijs per eenheid"><Input value={f.unitPrice} onChange={set('unitPrice')} placeholder="0,29"/></FormField>
      <FormField label="Doorbelasten"><Toggle checked={!!f.rechargeable} onChange={v=>setF({...f,rechargeable:v})}/></FormField>
      <div style={{alignSelf:'end',textAlign:'right',paddingBottom:12}}>
        <div style={{...label12,fontSize:10}}>Totaal</div><div style={{marginTop:6}}><Amount value={qty*price} size={19} weight={600}/></div></div>
    </div></Modal>;
}

/* ============ PROJECTDETAIL ============ */
function Projectdetail({params}){
  useStore();const p=calc.project(params.id);
  const [tab,setTab]=React.useState((params&&params.tab)||'Overzicht');
  const [edit,setEdit]=React.useState(false);const [addUren,setAddUren]=React.useState(false);const [addKosten,setAddKosten]=React.useState(false);
  const [editEntry,setEditEntry]=React.useState(null);const [editCost,setEditCost]=React.useState(null);const [more,setMore]=React.useState(false);
  if(!p)return <EmptyState title="Project niet gevonden"/>;
  const c=calc.customer(p.customerId);
  const entries=calc.entriesOf(p.id);const costs=calc.costsOf(p.id);const invs=calc.invoicesOf(p.id);
  const h=calc.hours(p.id);const u=calc.unbilled(p.id);const byEmp=calc.hoursByEmployee(p.id);
  const pct=p.budgetHours?Math.round(h/p.budgetHours*100):0;
  return <div>
    <PageHead back={{label:'Projecten',onClick:()=>window.EG_NAV('projecten')}} eyebrow={p.ref} title={p.name}
      sub={<span style={{display:'inline-flex',alignItems:'center',gap:12,flexWrap:'wrap'}}><a onClick={()=>window.EG_NAV('klant',{id:c.id})} style={{cursor:'pointer'}}>{c?c.name:''}</a>
        <Pill kind="project" value={p.status}/><Badge>{p.kind||'Calculatie'}</Badge>
        <span style={{fontSize:13,color:'var(--text-muted)'}}>Projectleider {calc.employeeName(p.leadId)}</span></span>}
      actions={<>
        <Button icon="plus" onClick={()=>setAddUren(true)}>Uren toevoegen</Button>
        <Button variant="secondary" onClick={()=>setAddKosten(true)}>Kosten toevoegen</Button>
        <Button variant="secondary" onClick={()=>window.EG_NAV('factuur-nieuw',{projectId:p.id})}>Factuur voorbereiden</Button>
        <div style={{position:'relative'}}>
          <IconButton icon="more-horizontal" label="Meer" onClick={()=>setMore(!more)}/>
          {more?<div style={{position:'absolute',right:0,top:46,background:'#fff',border:'1px solid var(--border-hairline)',borderRadius:'var(--radius-md)',
            boxShadow:'var(--shadow-overlay)',padding:6,zIndex:20,minWidth:190}}>
            {[['Bewerken',()=>setEdit(true)],['Klant openen',()=>window.EG_NAV('klant',{id:c.id})],['Facturen bekijken',()=>setTab('Facturatie')]].map(([l,fn])=>
              <button key={l} onClick={()=>{setMore(false);fn()}} style={{display:'block',width:'100%',textAlign:'left',appearance:'none',border:0,background:'none',
                padding:'9px 12px',fontSize:13.5,cursor:'pointer',borderRadius:'var(--radius-sm)',fontFamily:'var(--font-body)',color:'var(--text-body)'}}>{l}</button>)}</div>:null}</div></>}/>
    <KpiRow cols={6} style={{marginBottom:28}}>
      <Kpi label="Begroot" value={fmt.h(p.budgetHours)+' uur'}/>
      <Kpi label="Geschreven" value={fmt.h(h)+' uur'}/>
      <Kpi label="Beschikbaar" value={fmt.h(Math.max(0,p.budgetHours-h))+' uur'} tone={h>p.budgetHours?'danger':undefined}/>
      <Kpi label="Medewerkers" value={byEmp.length} note={'Projectleider '+calc.employeeName(p.leadId)}/>
      <Kpi label="Nog te factureren" value={fmt.eur0(u.total)} note="Uit Bouwkonsult" accent/>
      <Kpi label="Gefactureerd" value={fmt.eur0(calc.invoicedOf(p.id))} note="Volgens SnelStart"/>
    </KpiRow>
    <Tabs items={['Overzicht','Uren','Kosten','Facturatie','Notities']} value={tab} onChange={setTab} style={{marginBottom:24}}/>
    {tab==='Overzicht'?<><div style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr',gap:24,alignItems:'start'}}>
      <Card><SectionTitle>Project</SectionTitle>
        <DataRow label="Klant" value={c?c.name:''}/><DataRow label="Contactpersoon" value={p.contact||'—'}/>
        <DataRow label="Soort werk" value={p.kind||'Calculatie'}/>
        <DataRow label="Projectleider" value={calc.employeeName(p.leadId)}/>
        <DataRow label="Facturatietarief" value={p.rateOverride>0?fmt.eur(p.rateOverride)+' per uur':'Tarief van de medewerker'}/>
        <DataRow label="Begrote uren" value={fmt.h(p.budgetHours)+' uur'}/>
        <DataRow label="Kilometers" value={p.km+' km'}/></Card>
      <Card><SectionTitle>Uren</SectionTitle>
        <div style={{display:'flex',alignItems:'baseline',gap:8,marginBottom:14}}>
          <span style={{fontFamily:'var(--font-display)',fontSize:30,fontWeight:600,letterSpacing:'-.02em',fontVariantNumeric:'tabular-nums'}}>{fmt.h(h)}</span>
          <span style={{fontSize:14,color:'var(--text-muted)'}}>van {fmt.h(p.budgetHours)} uur</span></div>
        <ProgressBar value={pct} label="Gebruikt"/>
        <div style={{marginTop:18}}>
          <DataRow label="Facturabel" value={fmt.h(entries.filter(e=>e.billable).reduce((a,e)=>a+e.hours,0))+' uur'}/>
          <DataRow label="Niet facturabel" value={fmt.h(entries.filter(e=>!e.billable).reduce((a,e)=>a+e.hours,0))+' uur'}/>
          <DataRow label="Nog beschikbaar" value={fmt.h(Math.max(0,p.budgetHours-h))+' uur'}/></div></Card>
      <Card><SectionTitle right={<Source from="Bouwkonsult"/>}>Facturatie</SectionTitle>
        <DataRow label="Waarde facturabele uren" value={fmt.eur(calc.writtenValue(p.id))}/>
        <DataRow label="Niet-gefactureerde uren" value={fmt.h(u.hours)+' uur'}/>
        <DataRow label="Doorbelastbare kosten" value={fmt.eur(u.costs)}/>
        <DataRow label="Nog te factureren" value={fmt.eur(u.total)}/>
        <DataRow label="Gefactureerd" value={fmt.eur(calc.invoicedOf(p.id))} note="Volgens SnelStart"/></Card></div>
      <Card padding="0" style={{marginTop:24}}>
        <div style={{padding:'20px 20px 14px'}}><SectionTitle style={{marginBottom:0}}>Wie werkt aan dit project</SectionTitle></div>
        {byEmp.length?<Table cols={[{label:'Medewerker'},{label:'Rol'},{label:'Tarief',right:true},{label:'Uren',right:true},{label:'Waarde',right:true},{label:'Aandeel',right:true}]}>
          {byEmp.map(x=>{const e=calc.employee(x.employeeId);const rate=calc.rateFor(p,x.employeeId);
            return <Tr key={x.employeeId}>
              <Td><EmployeeCell id={x.employeeId}/></Td>
              <Td muted>{e?e.role:'—'}{x.employeeId===p.leadId?<Badge tone="brand" style={{marginLeft:8,height:19,fontSize:10}}>Projectleider</Badge>:null}</Td>
              <Td right><Amount value={rate} size={13} tone="muted"/></Td>
              <Td right><Amount value={x.hours} unit="uur" size={13.5}/></Td>
              <Td right><Amount value={x.hours*rate} size={13.5}/></Td>
              <Td right mono muted>{h?fmt.pct(x.hours/h*100):'—'}</Td></Tr>})}
        </Table>:<EmptyState icon="users" title="Nog niemand heeft uren geschreven"/>}</Card></>:null}
    {tab==='Uren'?<Card padding="0">
      <div style={{padding:'18px 20px',display:'flex',justifyContent:'space-between',alignItems:'center',borderBottom:'1px solid var(--border-hairline)'}}>
        <div style={{fontSize:13.5,color:'var(--text-muted)'}}>{entries.length} registraties · {fmt.h(h)} uur</div>
        <Button variant="secondary" icon="plus" size="sm" onClick={()=>setAddUren(true)} style={{whiteSpace:'nowrap'}}>Uren toevoegen</Button></div>
      {entries.length?<Table cols={[{label:'Datum'},{label:'Medewerker'},{label:'Omschrijving'},{label:'Uren',right:true},
        {label:'Tarief',right:true},{label:'Facturabel'},{label:'Factuur'},{label:'',w:80}]}>
        {entries.map(e=><Tr key={e.id}>
          <Td mono>{fmt.date(e.date)}</Td><Td><EmployeeCell id={e.employeeId}/></Td>
          <Td style={{color:'var(--ink-900)'}}>{e.description}</Td>
          <Td right><Amount value={e.hours} unit="uur" size={13.5}/></Td>
          <Td right muted><Amount value={calc.rateFor(p,e.employeeId)} size={13} tone="muted"/></Td>
          <Td>{e.billable?'Ja':<span style={{color:'var(--text-faint)'}}>Nee</span>}</Td>
          <Td>{e.invoiceId?<a onClick={()=>window.EG_NAV('factuur',{id:e.invoiceId})} style={{cursor:'pointer',fontFamily:'var(--font-mono)',fontSize:12.5}}>{(calc.invoice(e.invoiceId)||{}).number}</a>
            :<span style={{fontSize:12.5,color:'var(--text-faint)'}}>Niet gefactureerd</span>}</Td>
          <Td><div style={{display:'flex',gap:4}}>
            <button onClick={()=>setEditEntry(e)} disabled={!!e.invoiceId} title="Bewerken" style={{appearance:'none',border:0,background:'none',cursor:e.invoiceId?'not-allowed':'pointer',opacity:e.invoiceId?.3:1,padding:4}}><Icon name="pencil" size={14} color="var(--ink-600)"/></button>
            <button onClick={()=>{if(confirm('Urenregel verwijderen?'))store.remove('timeEntries',e.id)}} disabled={!!e.invoiceId} title="Verwijderen" style={{appearance:'none',border:0,background:'none',cursor:e.invoiceId?'not-allowed':'pointer',opacity:e.invoiceId?.3:1,padding:4}}><Icon name="trash-2" size={14} color="var(--ink-600)"/></button></div></Td></Tr>)}
      </Table>:<EmptyState icon="calendar-days" title="Er zijn nog geen uren geregistreerd" action={<Button icon="plus" onClick={()=>setAddUren(true)}>Uren toevoegen</Button>}>
        Schrijf je gewerkte uren weg op dit project.</EmptyState>}</Card>:null}
    {tab==='Kosten'?<Card padding="0">
      <div style={{padding:'18px 20px',display:'flex',justifyContent:'space-between',alignItems:'center',borderBottom:'1px solid var(--border-hairline)'}}>
        <div style={{fontSize:13.5,color:'var(--text-muted)'}}>Projectkosten · {fmt.eur(costs.reduce((a,k)=>a+k.qty*k.unitPrice,0))}</div>
        <Button variant="secondary" icon="plus" size="sm" onClick={()=>setAddKosten(true)}>Kosten toevoegen</Button></div>
      {costs.length?<Table cols={[{label:'Datum'},{label:'Kostensoort'},{label:'Omschrijving'},{label:'Door'},{label:'Aantal',right:true},{label:'Tarief',right:true},
        {label:'Totaal',right:true},{label:'Doorbelasten'},{label:'Factuur'},{label:'',w:60}]}>
        {costs.map(k=><Tr key={k.id}>
          <Td mono>{fmt.date(k.date)}</Td><Td><Badge>{k.type}</Badge></Td><Td style={{color:'var(--ink-900)'}}>{k.description}</Td>
          <Td>{k.employeeId?<Avatar employee={calc.employee(k.employeeId)} size={24}/>:<span style={{color:'var(--text-faint)'}}>—</span>}</Td>
          <Td right mono>{fmt.num(k.qty,k.qty%1?2:0)}</Td><Td right><Amount value={k.unitPrice} size={13} tone="muted"/></Td>
          <Td right><Amount value={k.qty*k.unitPrice} size={13.5}/></Td>
          <Td>{k.rechargeable?'Ja':<span style={{color:'var(--text-faint)'}}>Nee</span>}</Td>
          <Td>{k.invoiceId?<span style={{fontFamily:'var(--font-mono)',fontSize:12.5}}>{(calc.invoice(k.invoiceId)||{}).number}</span>:<span style={{fontSize:12.5,color:'var(--text-faint)'}}>—</span>}</Td>
          <Td><button onClick={()=>setEditCost(k)} disabled={!!k.invoiceId} style={{appearance:'none',border:0,background:'none',cursor:k.invoiceId?'not-allowed':'pointer',opacity:k.invoiceId?.3:1,padding:4}}><Icon name="pencil" size={14} color="var(--ink-600)"/></button></Td></Tr>)}
      </Table>:<EmptyState icon="receipt" title="Nog geen projectkosten" action={<Button variant="secondary" icon="plus" onClick={()=>setAddKosten(true)}>Kosten toevoegen</Button>}/>}</Card>:null}
    {tab==='Facturatie'?<div style={{display:'grid',gridTemplateColumns:'1.4fr 1fr',gap:28,alignItems:'start'}}>
      <Card padding="0">
        <div style={{padding:'18px 20px',borderBottom:'1px solid var(--border-hairline)'}}><SectionTitle style={{marginBottom:0}}>Facturen</SectionTitle></div>
        {invs.length?<Table cols={[{label:'Factuur'},{label:'Datum'},{label:'Bedrag',right:true},{label:'Bouwkonsult'},{label:'SnelStart'}]}>
          {invs.map(i=><Tr key={i.id} onClick={()=>window.EG_NAV('factuur',{id:i.id})}>
            <Td mono>{i.number}</Td><Td>{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></Tr>)}
        </Table>:<EmptyState icon="file-text" title="Er zijn nog geen facturen voor dit project"/>}</Card>
      <Card accent><SectionTitle>Nog te factureren</SectionTitle>
        <DataRow label="Niet-gefactureerde uren" value={fmt.h(u.hours)+' uur'}/>
        <DataRow label="Urenbedrag" value={fmt.eur(u.hourValue)}/>
        <DataRow label="Doorbelastbare kosten" value={fmt.eur(u.costs)}/>
        <div style={{display:'flex',justifyContent:'space-between',paddingTop:14,marginTop:4,borderTop:'2px solid var(--ink-900)'}}>
          <span style={{fontFamily:'var(--font-display)',fontSize:14,fontWeight:600}}>Totaal</span><Amount value={u.total} size={16} weight={600}/></div>
        <div style={{marginTop:20}}><Button fullWidth onClick={()=>window.EG_NAV('factuur-nieuw',{projectId:p.id})} disabled={u.total<=0}>Factuur voorbereiden</Button></div></Card></div>:null}
    {tab==='Notities'?<Card>{p.notes||p.description?<div style={{maxWidth:720}}>
      <p style={{fontSize:14.5,lineHeight:1.62,margin:'0 0 16px'}}>{p.description}</p>
      {p.notes?<p style={{fontSize:14.5,lineHeight:1.62,margin:0,color:'var(--text-body)'}}>{p.notes}</p>:null}</div>
      :<EmptyState icon="notebook-pen" title="Geen notities" action={<Button variant="secondary" onClick={()=>setEdit(true)}>Notitie toevoegen</Button>}/>}</Card>:null}
    {edit?<ProjectForm project={p} onClose={()=>setEdit(false)}/>:null}
    {addUren?<EntryForm projectId={p.id} onClose={()=>setAddUren(false)}/>:null}
    {editEntry?<EntryForm entry={editEntry} onClose={()=>setEditEntry(null)}/>:null}
    {addKosten?<CostForm projectId={p.id} onClose={()=>setAddKosten(false)}/>:null}
    {editCost?<CostForm cost={editCost} onClose={()=>setEditCost(null)}/>:null}
  </div>;
}

/* ============ URENPAGINA ============ */
function Uren({params}){
  useStore();
  const [weekStart,setWeekStart]=React.useState(window.EG.monday(new Date()));
  const [scope,setScope]=React.useState((params&&params.scope)||'Mijn uren');
  const [view,setView]=React.useState('Per medewerker');
  const [add,setAdd]=React.useState(!!(params&&params.add));const [editEntry,setEditEntry]=React.useState(null);
  const me=store.me;const team=scope==='Heel team';
  const end=window.EG.addDays(weekStart,6);
  const rows=store.timeEntries.filter(e=>{const d=new Date(e.date);
    return d>=weekStart&&d<=end&&(team||e.employeeId===store.currentUser)}).sort((a,b)=>a.date<b.date?1:a.date>b.date?-1:0);
  const t=calc.totals();
  const wTot=rows.reduce((a,e)=>a+e.hours,0),wBill=rows.filter(e=>e.billable).reduce((a,e)=>a+e.hours,0);
  const myRows=rows.filter(e=>e.employeeId===store.currentUser);
  const days=new Set((team?myRows:rows).map(e=>e.date)).size;
  const shift=(n)=>setWeekStart(window.EG.addDays(weekStart,n*7));
  const thisWeek=window.EG.iso(weekStart)===window.EG.iso(window.EG.monday(new Date()));
  const mode=team&&view==='Per medewerker'?'employee':'project';
  return <div>
    <PageHead title="Urenregistratie" sub="Schrijf uren weg per project en controleer aan het einde van de week of het hele team compleet is."
      actions={<>{!thisWeek?<Button variant="secondary" onClick={()=>setWeekStart(window.EG.monday(new Date()))}>Deze week</Button>:null}
        <Button icon="plus" onClick={()=>setAdd(true)} style={{whiteSpace:'nowrap'}}>Uren toevoegen</Button></>}/>
    <KpiRow cols={4} style={{marginBottom:28}}>
      <Kpi label="Mijn uren vandaag" value={fmt.h(t.myHoursToday)+' uur'} accent/>
      <Kpi label={(team?'Team week ':'Mijn week ')+window.EG.weekNo(weekStart)} value={fmt.h(wTot)+' uur'}/>
      <Kpi label="Facturabel" value={fmt.h(wBill)+' uur'} note={fmt.h(wTot-wBill)+' uur niet facturabel'}/>
      <Kpi label="Mijn dagen geschreven" value={days+' van 7'}/>
    </KpiRow>
    <Card padding="0" style={{marginBottom:28}}>
      <WeekNav weekStart={weekStart} onShift={shift} right={<div style={{display:'flex',gap:28,alignItems:'baseline'}}>
        <div><span style={{...label12,fontSize:10}}>Totaal week</span><div style={{marginTop:4}}><Amount value={wTot} unit="uur" size={16} weight={600}/></div></div>
        <div><span style={{...label12,fontSize:10}}>Facturabel</span><div style={{marginTop:4}}><Amount value={wBill} unit="uur" size={14} tone="muted"/></div></div>
        <div><span style={{...label12,fontSize:10}}>Niet facturabel</span><div style={{marginTop:4}}><Amount value={wTot-wBill} unit="uur" size={14} tone="muted"/></div></div></div>}/>
      <div style={{padding:'14px 20px',display:'flex',gap:12,alignItems:'center',flexWrap:'wrap',borderBottom:'1px solid var(--border-hairline)'}}>
        <FilterRow items={['Mijn uren','Heel team']} value={scope} onChange={setScope}/>
        {team?<FilterRow items={['Per medewerker','Per project']} value={view} onChange={setView}/>:null}
        <span style={{marginLeft:'auto',fontSize:12.5,color:'var(--text-faint)'}}>
          {team?'Alle medewerkers, ook wie nog niets schreef':'Alleen de uren van '+(me?me.name:'jou')}</span></div>
      <div style={{padding:'0 6px 6px'}}>
        <WeekGrid weekStart={weekStart} mode={mode} employeeId={team?null:store.currentUser}
          onProject={(p)=>window.EG_NAV('project',{id:p.id})}/></div></Card>
    <Card padding="0">
      <div style={{padding:'18px 20px',display:'flex',justifyContent:'space-between',alignItems:'center',borderBottom:'1px solid var(--border-hairline)'}}>
        <div><h3 style={{fontSize:15.5,margin:0}}>Urenregels week {window.EG.weekNo(weekStart)}</h3>
          <div style={{fontSize:12.5,color:'var(--text-faint)',marginTop:3}}>{rows.length} registraties · {team?'hele team':(me?me.name:'')}</div></div>
        <Button variant="secondary" icon="plus" size="sm" onClick={()=>setAdd(true)} style={{whiteSpace:'nowrap'}}>Uren toevoegen</Button></div>
      {rows.length?<Table cols={[{label:'Datum'}].concat(team?[{label:'Medewerker'}]:[],
        [{label:'Werknr.'},{label:'Project'},{label:'Klant'},{label:'Omschrijving'},
        {label:'Uren',right:true},{label:'Facturabel'},{label:'Factuur'},{label:'',w:80}])}>
        {rows.map(e=>{const p=calc.project(e.projectId);const c=p?calc.customer(p.customerId):null;
          return <Tr key={e.id}>
            <Td mono>{fmt.date(e.date)}</Td>
            {team?<Td><EmployeeCell id={e.employeeId}/></Td>:null}
            <Td mono muted>{p?p.ref:'—'}</Td>
            <Td onClick={()=>p&&window.EG_NAV('project',{id:p.id})} style={{color:'var(--ink-900)',fontWeight:500,cursor:'pointer'}}>{p?p.name:'—'}</Td>
            <Td muted>{c?c.name:'—'}</Td>
            <Td>{e.description}</Td>
            <Td right><Amount value={e.hours} unit="uur" size={13.5}/></Td>
            <Td>{e.billable?'Ja':<span style={{color:'var(--text-faint)'}}>Nee</span>}</Td>
            <Td>{e.invoiceId?<a onClick={()=>window.EG_NAV('factuur',{id:e.invoiceId})} style={{cursor:'pointer',fontFamily:'var(--font-mono)',fontSize:12.5}}>{(calc.invoice(e.invoiceId)||{}).number}</a>
              :<span style={{fontSize:12.5,color:'var(--text-faint)'}}>—</span>}</Td>
            <Td><div style={{display:'flex',gap:4}}>
              <button onClick={()=>setEditEntry(e)} disabled={!!e.invoiceId} title={e.invoiceId?'Gefactureerd — niet meer te wijzigen':'Bewerken'} style={{appearance:'none',border:0,background:'none',cursor:e.invoiceId?'not-allowed':'pointer',opacity:e.invoiceId?.3:1,padding:4}}><Icon name="pencil" size={14} color="var(--ink-600)"/></button>
              <button onClick={()=>{if(confirm('Urenregel verwijderen?'))store.remove('timeEntries',e.id)}} disabled={!!e.invoiceId} title="Verwijderen" style={{appearance:'none',border:0,background:'none',cursor:e.invoiceId?'not-allowed':'pointer',opacity:e.invoiceId?.3:1,padding:4}}><Icon name="trash-2" size={14} color="var(--ink-600)"/></button></div></Td></Tr>})}
      </Table>:<EmptyState icon="calendar-days" title="Geen uren in deze week" action={<Button variant="secondary" icon="plus" onClick={()=>setAdd(true)}>Uren toevoegen</Button>}>
        Navigeer naar een andere week of voeg een registratie toe.</EmptyState>}</Card>
    {add?<EntryForm onClose={()=>setAdd(false)}/>:null}
    {editEntry?<EntryForm entry={editEntry} onClose={()=>setEditEntry(null)}/>:null}</div>;
}
Object.assign(window,{ProjectForm,Projecten,Projectdetail,Uren,EntryForm,CostForm});