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

const plural=(n,one,many)=>n+' '+(n===1?one:many);

/* ============ DASHBOARD ============ */
function ActiveTimerBanner({compact}){
  const at=store.activeTimer;useNow(1000);
  if(!at)return null;
  const p=calc.project(at.projectId);if(!p)return null;
  const c=calc.customer(p.customerId);
  return <div style={{background:'var(--ink-900)',borderRadius:'var(--radius-lg)',padding:'22px 28px',display:'flex',alignItems:'center',
    justifyContent:'space-between',gap:32,position:'relative',overflow:'hidden',marginBottom:28}}>
    <div style={{position:'absolute',inset:0,backgroundImage:'repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 1px,transparent 1px 80px)'}}/>
    <div style={{position:'relative'}}>
      <div style={{display:'flex',alignItems:'center',gap:8,marginBottom:12}}>
        <span className="eg-pulse" style={{width:7,height:7,borderRadius:'50%',background:'var(--teal-300)'}}/>
        <span style={{fontFamily:'var(--font-mono)',fontSize:10.5,letterSpacing:'.16em',textTransform:'uppercase',color:'var(--teal-300)'}}>Je werkt momenteel aan</span></div>
      <div style={{display:'flex',alignItems:'baseline',gap:12}}>
        <span style={{fontFamily:'var(--font-mono)',fontSize:13,color:'var(--ink-400)'}}>{p.ref}</span>
        <a onClick={()=>window.EG_NAV('project',{id:p.id})} style={{fontFamily:'var(--font-display)',fontSize:21,fontWeight:600,color:'#fff',cursor:'pointer',letterSpacing:'-.01em'}}>{p.name}</a></div>
      <div style={{marginTop:6,fontSize:13.5,color:'var(--ink-400)'}}>{c?c.name:''} · gestart om {fmt.time(at.startedAt)}</div></div>
    <div style={{position:'relative',display:'flex',alignItems:'center',gap:28}}>
      <div style={{fontFamily:'var(--font-mono)',fontSize:38,fontWeight:500,color:'#fff',fontVariantNumeric:'tabular-nums',letterSpacing:'-.02em'}}>{fmt.clock(timer.elapsed(at))}</div>
      <div style={{display:'flex',gap:10}}>
        <button onClick={()=>window.EG_STOP()} style={{appearance:'none',cursor:'pointer',border:0,background:'var(--teal-600)',color:'#fff',borderRadius:'var(--radius-sm)',
          padding:'11px 18px',fontFamily:'var(--font-display)',fontSize:14,fontWeight:600,display:'inline-flex',alignItems:'center',gap:9}}>
          <span style={{width:9,height:9,background:'#fff'}}/>Stop timer</button>
        <button onClick={()=>window.EG_NAV('project',{id:p.id})} style={{appearance:'none',cursor:'pointer',border:'1px solid var(--ink-700)',background:'transparent',color:'#fff',
          borderRadius:'var(--radius-sm)',padding:'11px 16px',fontFamily:'var(--font-display)',fontSize:14,fontWeight:500}}>Open project</button></div></div></div>;
}
function NoTimerCard(){
  const ps=store.projects.filter(p=>p.status==='actief');
  return <div style={{border:'1px dashed var(--border-default)',borderRadius:'var(--radius-lg)',padding:'20px 24px',display:'flex',alignItems:'center',
    justifyContent:'space-between',gap:24,marginBottom:28,background:'var(--ink-50)'}}>
    <div style={{display:'flex',alignItems:'center',gap:14}}>
      <Icon name="timer" size={20} color="var(--ink-500)"/>
      <div><div style={{fontFamily:'var(--font-display)',fontSize:14.5,fontWeight:600,color:'var(--ink-800)'}}>Geen actieve tijdregistratie</div>
        <div style={{fontSize:13,color:'var(--text-faint)',marginTop:3}}>Start de timer bij het project waaraan je begint.</div></div></div>
    <div style={{display:'flex',alignItems:'center',gap:10}}>
      {ps.slice(0,2).map(p=><div key={p.id} style={{display:'flex',alignItems:'center',gap:10,fontSize:13,color:'var(--text-muted)'}}>
        <span style={{fontFamily:'var(--font-mono)',fontSize:12}}>{p.ref}</span><TimerCell project={p} onStop={()=>window.EG_STOP()}/></div>)}
      <Button variant="tertiary" onClick={()=>window.EG_NAV('projecten')}>Alle projecten</Button></div></div>;
}
function ActionRow({title,note,onClick,tone}){
  const [h,setH]=React.useState(false);
  return <div onClick={onClick} onMouseEnter={()=>setH(true)} onMouseLeave={()=>setH(false)}
    style={{display:'flex',alignItems:'center',justifyContent:'space-between',gap:16,padding:'15px 20px',borderBottom:'1px solid var(--border-hairline)',
      cursor:'pointer',background:h?'var(--ink-50)':'transparent',transition:'background 120ms cubic-bezier(.2,0,0,1)'}}>
    <div style={{display:'flex',alignItems:'center',gap:14,minWidth:0}}>
      <span style={{width:6,height:6,borderRadius:'50%',flex:'none',background:tone==='danger'?'var(--danger-600)':tone==='warning'?'var(--warning-600)':'var(--teal-600)'}}/>
      <div style={{minWidth:0}}><div style={{fontSize:14,fontWeight:500,color:'var(--ink-900)'}}>{title}</div>
        {note?<div style={{fontSize:12.5,color:'var(--text-faint)',marginTop:2}}>{note}</div>:null}</div></div>
    <Icon name="chevron-right" size={16} color={h?'var(--teal-600)':'var(--ink-400)'}/></div>;
}
function Dashboard(){
  useStore();const t=calc.totals();const at=store.activeTimer;
  const hour=new Date().getHours();
  const greet=hour<12?'Goedemorgen':hour<18?'Goedemiddag':'Goedenavond';
  const recent=store.projects.filter(p=>['actief','wachten'].includes(p.status)).slice(0,6);
  return <div>
    <PageHead title={greet} sub="Hier zie je de actuele stand van projecten, uren, facturatie en betalingen."
      actions={<><Button variant="secondary" icon="plus" onClick={()=>window.EG_NAV('uren',{add:true})} style={{whiteSpace:'nowrap'}}>Uren</Button>
        <Button icon="plus" onClick={()=>window.EG_NAV('projecten',{nieuw:true})} style={{whiteSpace:'nowrap'}}>Nieuw project</Button></>}/>
    {at?<ActiveTimerBanner/>:<NoTimerCard/>}
    <KpiRow cols={6} style={{marginBottom:32}}>
      <Kpi label="Actieve projecten" value={t.activeProjects} onClick={()=>window.EG_NAV('projecten')}/>
      <Kpi label="Uren vandaag" value={fmt.h(t.hoursToday)+' uur'} onClick={()=>window.EG_NAV('uren')}/>
      <Kpi label="Uren deze week" value={fmt.h(t.hoursWeek)+' uur'} onClick={()=>window.EG_NAV('uren')}/>
      <Kpi label="Nog te factureren" value={fmt.eur0(t.unbilled)} note="Uit Egberink" onClick={()=>window.EG_NAV('facturatie')}/>
      <Kpi label="Openstaand" value={fmt.eur0(t.outstanding)} note="Volgens SnelStart" onClick={()=>window.EG_NAV('financieel')}/>
      <Kpi label="Omzet dit jaar" value={fmt.eur0(t.invoicedYear)} note="Volgens SnelStart" onClick={()=>window.EG_NAV('financieel')}/>
    </KpiRow>
    <div style={{display:'grid',gridTemplateColumns:'1fr 1.35fr',gap:28,alignItems:'start'}}>
      <Card padding="0">
        <div style={{padding:'20px 20px 14px'}}><SectionTitle style={{marginBottom:0}}>Actie nodig</SectionTitle></div>
        <div>
          {t.unbilled>0.005?<ActionRow title={fmt.eur(t.unbilled)+' kan worden gefactureerd'} note={plural(t.unbilledProjects,'project bevat','projecten bevatten')+' niet-gefactureerde uren'} onClick={()=>window.EG_NAV('facturatie')}/>:null}
          {t.openCount?<ActionRow title={plural(t.openCount,'factuur staat','facturen staan')+' nog open'} note="Volgens laatste synchronisatie met SnelStart" tone="warning" onClick={()=>window.EG_NAV('financieel')}/>:null}
          {t.overdueCount?<ActionRow title={plural(t.overdueCount,'factuur is','facturen zijn')+' vervallen'} note={fmt.eur(t.overdue)} tone="danger" onClick={()=>window.EG_NAV('financieel',{filter:'Vervallen'})}/>:null}
          {t.readyCount?<ActionRow title={plural(t.readyCount,'factuur staat','facturen staan')+' klaar voor SnelStart'} onClick={()=>window.EG_NAV('facturatie',{tab:'Klaar voor SnelStart'})}/>:null}
          {t.conceptCount?<ActionRow title={plural(t.conceptCount,'conceptfactuur wacht','conceptfacturen wachten')+' op afronding'} onClick={()=>window.EG_NAV('facturatie',{tab:'Concept'})}/>:null}
          {t.overBudget?<ActionRow title={plural(t.overBudget,'project heeft','projecten hebben')+' meer uren dan begroot'} onClick={()=>window.EG_NAV('projecten')}/>:null}
          {!t.openCount&&!t.overdueCount&&!t.readyCount&&!t.conceptCount&&!t.overBudget&&t.unbilled<=0.005?
            <EmptyState icon="check-circle" title="Geen openstaande acties">Alles is gefactureerd en er staan geen posten open.</EmptyState>:null}
        </div></Card>
      <Card padding="0">
        <div style={{padding:'20px 20px 14px'}}><SectionTitle style={{marginBottom:0}} right={<Button variant="tertiary" onClick={()=>window.EG_NAV('projecten')}>Alle projecten</Button>}>Recente projecten</SectionTitle></div>
        <Table cols={[{label:'Werknr.'},{label:'Project'},{label:'Uren',right:true},{label:'Te factureren',right:true},{label:'Status'},{label:'Timer'}]}>
          {recent.map(p=>{const c=calc.customer(p.customerId);const u=calc.unbilled(p.id);
            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 right><Amount value={calc.hours(p.id)} unit="uur" size={13.5}/></Td>
              <Td right><Amount value={u.total} size={13.5}/></Td>
              <Td><Pill kind="project" value={p.status}/></Td>
              <Td><TimerCell project={p} onStop={()=>window.EG_STOP()}/></Td></Tr>})}
        </Table></Card></div></div>;
}

/* ============ KLANTEN ============ */
function CustomerForm({customer,onClose}){
  const [f,setF]=React.useState(customer||{name:'',number:'K-'+(1041+store.customers.length+1),contact:'',email:'',phone:'',website:'',street:'',houseNo:'',zip:'',city:'',invoiceEmail:'',paymentTerm:30,vat:'',coc:'',notes:''});
  const set=(k)=>e=>setF({...f,[k]:e.target?e.target.value:e});
  const save=()=>{
    if(!f.name.trim()){window.EG_TOAST({tone:'danger',title:'Bedrijfsnaam is verplicht'});return}
    const item={...f,id:f.id||window.EG.uid('c'),paymentTerm:Number(f.paymentTerm)||30};
    store.upsert('customers',item);
    window.EG_TOAST({title:'Klant opgeslagen',detail:item.name});
    onClose();window.EG_NAV('klant',{id:item.id});
  };
  return <SidePanel title={customer?'Klant bewerken':'Nieuwe klant'} sub="Gegevens worden lokaal in de demo-omgeving opgeslagen." onClose={onClose}
    footer={<><Button variant="secondary" onClick={onClose}>Annuleren</Button><Button onClick={save}>Klant opslaan</Button></>}>
    <FormGroup title="Algemeen">
      <FormField label="Bedrijfsnaam" required style={{gridColumn:'span 2'}}><Input value={f.name} onChange={set('name')} placeholder="Bouwbedrijf Jansen B.V."/></FormField>
      <FormField label="Klantnummer"><Input value={f.number} onChange={set('number')}/></FormField>
      <FormField label="Contactpersoon"><Input value={f.contact} onChange={set('contact')} placeholder="J. Jansen"/></FormField>
    </FormGroup>
    <FormGroup title="Contact">
      <FormField label="E-mailadres"><Input value={f.email} onChange={set('email')} type="email"/></FormField>
      <FormField label="Telefoon"><Input value={f.phone} onChange={set('phone')}/></FormField>
      <FormField label="Website" style={{gridColumn:'span 2'}}><Input value={f.website} onChange={set('website')}/></FormField>
    </FormGroup>
    <FormGroup title="Adres">
      <FormField label="Straat"><Input value={f.street} onChange={set('street')}/></FormField>
      <FormField label="Huisnummer"><Input value={f.houseNo} onChange={set('houseNo')}/></FormField>
      <FormField label="Postcode"><Input value={f.zip} onChange={set('zip')}/></FormField>
      <FormField label="Plaats"><Input value={f.city} onChange={set('city')}/></FormField>
    </FormGroup>
    <FormGroup title="Facturatie">
      <FormField label="Facturatie e-mail"><Input value={f.invoiceEmail} onChange={set('invoiceEmail')}/></FormField>
      <FormField label="Betaaltermijn" hint="Dagen"><Input value={f.paymentTerm} onChange={set('paymentTerm')} type="number"/></FormField>
      <FormField label="BTW-nummer"><Input value={f.vat} onChange={set('vat')}/></FormField>
      <FormField label="KvK-nummer"><Input value={f.coc} onChange={set('coc')}/></FormField>
    </FormGroup>
    <FormGroup title="Overig" cols={1}>
      <FormField label="Notities"><Textarea rows={4} value={f.notes} onChange={set('notes')}/></FormField>
    </FormGroup></SidePanel>;
}
function Klanten({params}){
  useStore();const [q,setQ]=React.useState('');const [nieuw,setNieuw]=React.useState(!!(params&&params.nieuw));
  const rows=store.customers.filter(c=>[c.name,c.contact,c.city].join(' ').toLowerCase().includes(q.toLowerCase()));
  return <div>
    <PageHead title="Klanten" sub={store.customers.length+' relaties · projecten en openstaande bedragen per klant'}
      actions={<Button icon="plus" onClick={()=>setNieuw(true)}>Nieuwe klant</Button>}/>
    <div style={{marginBottom:18}}><Search value={q} onChange={setQ} placeholder="Zoek op klant, contactpersoon of plaats..."/></div>
    <Card padding="0">
      {rows.length?<Table cols={[{label:'Klant'},{label:'Contactpersoon'},{label:'Plaats'},{label:'Projecten',right:true},{label:'Actief',right:true},{label:'Nog te factureren',right:true},{label:'Openstaand',right:true},{label:'',w:44}]}>
        {rows.map(c=>{const s=calc.customerStats(c.id);
          return <Tr key={c.id} onClick={()=>window.EG_NAV('klant',{id:c.id})}>
            <Td><div style={{fontWeight:500,color:'var(--ink-900)'}}>{c.name}</div>
              <div style={{fontFamily:'var(--font-mono)',fontSize:11.5,color:'var(--text-faint)',marginTop:2}}>{c.number}</div></Td>
            <Td>{c.contact||'—'}<div style={{fontSize:12,color:'var(--text-faint)'}}>{c.phone}</div></Td>
            <Td>{c.city}</Td><Td right mono>{s.projects}</Td><Td right mono>{s.active}</Td>
            <Td right><Amount value={s.unbilled} size={13.5}/></Td>
            <Td right><Amount value={s.outstanding} size={13.5} tone={s.outstanding>0?'strong':'muted'}/></Td>
            <Td><Icon name="chevron-right" size={15} color="var(--ink-400)"/></Td></Tr>})}
      </Table>:<EmptyState icon="users" title="Geen klanten gevonden" action={<Button variant="secondary" onClick={()=>setQ('')}>Zoekopdracht wissen</Button>}>Pas de zoekopdracht aan of maak een nieuwe klant aan.</EmptyState>}
    </Card>
    {nieuw?<CustomerForm onClose={()=>setNieuw(false)}/>:null}</div>;
}
function Klantdetail({params}){
  useStore();const c=calc.customer(params.id);
  const [tab,setTab]=React.useState('Overzicht');const [edit,setEdit]=React.useState(false);const [nieuwProject,setNieuwProject]=React.useState(false);
  if(!c)return <EmptyState title="Klant niet gevonden"/>;
  const s=calc.customerStats(c.id);
  const ps=store.projects.filter(p=>p.customerId===c.id);
  const invs=store.invoices.filter(i=>i.customerId===c.id);
  return <div>
    <PageHead back={{label:'Klanten',onClick:()=>window.EG_NAV('klanten')}} eyebrow={c.number} title={c.name}
      sub={[c.contact,c.email].filter(Boolean).join(' · ')}
      actions={<><Button variant="secondary" icon="pencil" onClick={()=>setEdit(true)} style={{whiteSpace:'nowrap'}}>Bewerken</Button>
        <Button icon="plus" onClick={()=>setNieuwProject(true)} style={{whiteSpace:'nowrap'}}>Nieuw project</Button></>}/>
    <KpiRow cols={5} style={{marginBottom:28}}>
      <Kpi label="Projecten" value={s.projects}/><Kpi label="Actief" value={s.active}/>
      <Kpi label="Gefactureerd" value={fmt.eur0(s.invoiced)} note="Volgens SnelStart"/>
      <Kpi label="Nog te factureren" value={fmt.eur0(s.unbilled)} note="Uit Egberink"/>
      <Kpi label="Openstaand" value={fmt.eur0(s.outstanding)} note="Volgens SnelStart"/>
    </KpiRow>
    <Tabs items={['Overzicht','Projecten','Facturen','Contactgegevens','Notities']} value={tab} onChange={setTab} style={{marginBottom:24}}/>
    {tab==='Overzicht'?<div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:28,alignItems:'start'}}>
      <Card><SectionTitle>Kerngegevens</SectionTitle>
        <DataRow label="Contactpersoon" value={c.contact||'—'}/><DataRow label="Telefoon" value={c.phone||'—'}/>
        <DataRow label="E-mail" value={c.email||'—'}/><DataRow label="Plaats" value={c.city||'—'}/>
        <DataRow label="Betaaltermijn" value={c.paymentTerm+' dagen'}/></Card>
      <Card><SectionTitle right={<Source/>}>Financieel</SectionTitle>
        <DataRow label="Totaal gefactureerd" value={fmt.eur(s.invoiced)}/>
        <DataRow label="Ontvangen" value={fmt.eur(s.received)}/>
        <DataRow label="Openstaand" value={fmt.eur(s.outstanding)}/>
        <DataRow label="Nog te factureren" value={fmt.eur(s.unbilled)} note="Uit Egberink"/></Card></div>:null}
    {tab==='Projecten'?<Card padding="0">{ps.length?<Table cols={[{label:'Werknr.'},{label:'Project'},{label:'Uren',right:true},{label:'Te factureren',right:true},{label:'Status'},{label:'Timer'}]}>
      {ps.map(p=><Tr key={p.id} onClick={()=>window.EG_NAV('project',{id:p.id})}>
        <Td mono muted>{p.ref}</Td><Td style={{fontWeight:500,color:'var(--ink-900)'}}>{p.name}</Td>
        <Td right><Amount value={calc.hours(p.id)} unit="uur" size={13.5}/></Td>
        <Td right><Amount value={calc.unbilled(p.id).total} size={13.5}/></Td>
        <Td><Pill kind="project" value={p.status}/></Td><Td><TimerCell project={p} onStop={()=>window.EG_STOP()}/></Td></Tr>)}
    </Table>:<EmptyState icon="building-2" title="Nog geen projecten" action={<Button onClick={()=>setNieuwProject(true)} icon="plus">Nieuw project</Button>}/>}</Card>:null}
    {tab==='Facturen'?<Card padding="0">{invs.length?<Table cols={[{label:'Factuur'},{label:'SnelStart'},{label:'Datum'},{label:'Bedrag',right:true},{label:'Openstaand',right:true},{label:'Status'}]}>
      {invs.map(i=><Tr key={i.id} onClick={()=>window.EG_NAV('factuur',{id:i.id})}>
        <Td mono>{i.number}</Td><Td mono muted>{i.snelstart?i.snelstart.reference:'—'}</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 right><Amount value={i.snelstart?i.snelstart.outstanding:0} size={13.5}/></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 deze klant"/>}</Card>:null}
    {tab==='Contactgegevens'?<div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:28,alignItems:'start'}}>
      <Card><SectionTitle>Contact</SectionTitle>
        <DataRow label="Contactpersoon" value={c.contact||'—'}/><DataRow label="E-mail" value={c.email||'—'}/>
        <DataRow label="Telefoon" value={c.phone||'—'}/><DataRow label="Website" value={c.website||'—'}/></Card>
      <Card><SectionTitle>Adres en administratie</SectionTitle>
        <DataRow label="Adres" value={(c.street||'')+' '+(c.houseNo||'')}/><DataRow label="Postcode en plaats" value={(c.zip||'')+' '+(c.city||'')}/>
        <DataRow label="Facturatie e-mail" value={c.invoiceEmail||'—'}/><DataRow label="BTW-nummer" value={c.vat||'—'}/>
        <DataRow label="KvK-nummer" value={c.coc||'—'}/></Card></div>:null}
    {tab==='Notities'?<Card>{c.notes?<p style={{fontSize:14.5,lineHeight:1.62,maxWidth:720,margin:0}}>{c.notes}</p>
      :<EmptyState icon="notebook-pen" title="Geen notities" action={<Button variant="secondary" onClick={()=>setEdit(true)}>Notitie toevoegen</Button>}/>}</Card>:null}
    {edit?<CustomerForm customer={c} onClose={()=>setEdit(false)}/>:null}
    {nieuwProject?<window.ProjectForm customerId={c.id} onClose={()=>setNieuwProject(false)}/>:null}
  </div>;
}
Object.assign(window,{Dashboard,Klanten,Klantdetail,CustomerForm,ActiveTimerBanner,ActionRow});