const {store,calc,fmt,MockSnelStartService}=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;

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

/* ============ DASHBOARD ============ */
function Dashboard(){
  useStore();const t=calc.totals();const me=store.me;
  const [scope,setScope]=React.useState('Heel team');
  const hour=new Date().getHours();
  const greet=hour<12?'Goedemorgen':hour<18?'Goedemiddag':'Goedenavond';
  const weekStart=window.EG.monday(new Date());
  const recent=store.projects.filter(p=>['actief','nieuw'].includes(p.status)).slice(0,6);
  const team=scope==='Heel team';
  return <div>
    <PageHead title={greet+(me?', '+me.name.split(' ').slice(-1)[0]:'')}
      sub="Hier zie je waar het team deze week aan werkt en wat er nog te factureren staat."
      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></>}/>
    <KpiRow cols={5} style={{marginBottom:28}}>
      <Kpi label="Mijn uren vandaag" value={fmt.h(t.myHoursToday)+' uur'} onClick={()=>window.EG_NAV('uren')} accent/>
      <Kpi label="Mijn uren deze week" value={fmt.h(t.myHoursWeek)+' uur'} onClick={()=>window.EG_NAV('uren')}/>
      <Kpi label="Team deze week" value={fmt.h(t.hoursWeek)+' uur'} note={t.employees+' medewerkers'} onClick={()=>window.EG_NAV('uren',{scope:'Heel team'})}/>
      <Kpi label="Actieve projecten" value={t.activeProjects} onClick={()=>window.EG_NAV('projecten')}/>
      <Kpi label="Nog te factureren" value={fmt.eur0(t.unbilled)} note="Uit Bouwkonsult" onClick={()=>window.EG_NAV('facturatie')}/>
    </KpiRow>
    <Card padding="0" style={{marginBottom:28}}>
      <div style={{padding:'20px 20px 14px',display:'flex',justifyContent:'space-between',alignItems:'center',gap:20,flexWrap:'wrap'}}>
        <div><h3 style={{fontSize:15.5,margin:0}}>{team?'Team deze week':'Mijn week'}</h3>
          <div style={{fontSize:12.5,color:'var(--text-faint)',marginTop:4}}>Week {window.EG.weekNo(weekStart)} · {team?'uren per medewerker per dag':'uren per project per dag'}</div></div>
        <div style={{display:'flex',alignItems:'center',gap:12}}>
          <FilterRow items={['Heel team','Mijn uren']} value={scope} onChange={setScope}/>
          <Button variant="tertiary" onClick={()=>window.EG_NAV('uren')}>Naar urenregistratie</Button></div></div>
      <div style={{padding:'0 6px 6px'}}>
        <WeekGrid weekStart={weekStart} mode={team?'employee':'project'} employeeId={team?null:store.currentUser}
          onProject={(p)=>window.EG_NAV('project',{id:p.id})} onEmployee={(e)=>window.EG_NAV('uren',{scope:'Heel team'})}/></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>}>Lopende projecten</SectionTitle></div>
      <Table cols={[{label:'Werknr.'},{label:'Project'},{label:'Soort'},{label:'Projectleider'},{label:'Uren',right:true},{label:'Begroot',right:true},{label:'Te factureren',right:true},{label:'Status'}]}>
        {recent.map(p=>{const c=calc.customer(p.customerId);const u=calc.unbilled(p.id);const h=calc.hours(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 muted>{p.kind||'Calculatie'}</Td>
            <Td><EmployeeCell id={p.leadId}/></Td>
            <Td right><Amount value={h} unit="uur" size={13.5} tone={p.budgetHours>0&&h>p.budgetHours?'danger':'strong'}/></Td>
            <Td right muted mono>{fmt.h(p.budgetHours)}</Td>
            <Td right><Amount value={u.total} size={13.5}/></Td>
            <Td><Pill kind="project" value={p.status}/></Td></Tr>})}
      </Table></Card></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:'Gefactureerd',right:true},{label:'Nog te factureren',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.invoiced} size={13.5} tone="muted"/></Td>
            <Td right><Amount value={s.unbilled} size={13.5}/></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={4} 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 Bouwkonsult" accent/>
    </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/>}>Facturatie</SectionTitle>
        <DataRow label="Totaal gefactureerd" value={fmt.eur(s.invoiced)}/>
        <DataRow label="Aantal facturen" value={invs.length}/>
        <DataRow label="Nog te factureren" value={fmt.eur(s.unbilled)} note="Uit Bouwkonsult"/></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'}]}>
      {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></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:'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><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});