const {Logo,Icon,Button,IconButton,Card,Stat,StatusPill,Amount,ProgressBar,Tabs,Badge,Alert,Rule}=window.EgberinkCalculatieDesignSystem_e64dde;
const {FormField,Input,Select,Textarea,Checkbox}=window.EgberinkCalculatieDesignSystem_e64dde;
const {store,calc,fmt,timer,MockSnelStartService}=window.EG;

function useNow(ms=1000){const [n,setN]=React.useState(Date.now());React.useEffect(()=>{const i=setInterval(()=>setN(Date.now()),ms);return()=>clearInterval(i)},[ms]);return n}
function useStore(){const [,f]=React.useState(0);React.useEffect(()=>store.subscribe(()=>f(x=>x+1)),[]);return store}

/* ---------- statuspil ---------- */
const PILL_STYLE={fout:{background:'var(--danger-100)',color:'var(--danger-600)'}};
function Pill({kind='project',value,style}){
  let label,pill;
  if(kind==='project'){const s=window.EG.projectStatus(value);label=s.label;pill=s.pill}
  else if(kind==='eg'){const s=window.EG.EG_STATUS[value]||window.EG.EG_STATUS.concept;label=s.label;pill=s.pill}
  else {const s=window.EG.SS_STATUS[value]||window.EG.SS_STATUS.niet_verzonden;label=s.label;pill=s.pill}
  const ov=PILL_STYLE[pill];
  return <StatusPill status={pill==='fout'?'herziening':pill} label={label} style={{...(ov||{}),...style}}/>;
}

/* ---------- layoutprimitieven ---------- */
const label12={fontFamily:'var(--font-display)',fontSize:10.5,fontWeight:600,letterSpacing:'.12em',textTransform:'uppercase',color:'var(--ink-600)'};
function PageHead({eyebrow,title,sub,actions,back}){
  return <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start',gap:24,marginBottom:28}}>
    <div style={{minWidth:0}}>
      {back?<button onClick={back.onClick} style={{appearance:'none',background:'none',border:0,padding:0,cursor:'pointer',display:'flex',alignItems:'center',gap:6,color:'var(--text-muted)',fontSize:13,marginBottom:10,fontFamily:'var(--font-display)'}}><Icon name="arrow-left" size={14}/>{back.label}</button>:null}
      {eyebrow?<div className="eg-eyebrow" style={{marginBottom:8,fontFamily:'var(--font-mono)',letterSpacing:'.16em'}}>{eyebrow}</div>:null}
      <h1 style={{fontSize:28,lineHeight:1.15,letterSpacing:'-.015em',margin:0}}>{title}</h1>
      {sub?<p style={{marginTop:8,color:'var(--text-muted)',fontSize:14.5,maxWidth:720}}>{sub}</p>:null}
    </div>
    {actions?<div style={{display:'flex',gap:10,alignItems:'center',flex:'none'}}>{actions}</div>:null}
  </div>;
}
function SectionTitle({children,right,style}){
  return <div style={{display:'flex',justifyContent:'space-between',alignItems:'baseline',marginBottom:14,...style}}>
    <h3 style={{fontSize:15.5,margin:0,letterSpacing:'-.005em'}}>{children}</h3>{right}</div>;
}
/* compacte KPI — geen grote dashboardkaart */
function Kpi({label,value,note,onClick,tone,accent}){
  const [h,setH]=React.useState(false);
  return <div onClick={onClick} onMouseEnter={()=>setH(true)} onMouseLeave={()=>setH(false)}
    style={{padding:'14px 18px 16px',background:'var(--white)',border:'1px solid '+(h&&onClick?'var(--teal-600)':'var(--border-hairline)'),
      borderRadius:'var(--radius-md)',borderTop:accent?'2px solid var(--teal-600)':undefined,cursor:onClick?'pointer':'default',
      transition:'border-color 120ms cubic-bezier(.2,0,0,1)',minWidth:0}}>
    <div style={{...label12,fontSize:10,color:'var(--ink-600)'}}>{label}</div>
    <div style={{marginTop:9,fontFamily:'var(--font-display)',fontSize:23,fontWeight:600,letterSpacing:'-.02em',lineHeight:1,
      fontVariantNumeric:'tabular-nums lining-nums',color:tone==='danger'?'var(--danger-600)':'var(--text-strong)'}}>{value}</div>
    {note?<div style={{marginTop:7,fontSize:11.5,color:'var(--text-faint)'}}>{note}</div>:null}
  </div>;
}
function KpiRow({cols=6,children,style}){return <div style={{display:'grid',gridTemplateColumns:'repeat('+cols+',minmax(0,1fr))',gap:16,...style}}>{children}</div>}

/* ---------- tabel ---------- */
function Table({cols,children,style}){
  return <table style={{width:'100%',borderCollapse:'collapse',...style}}><thead><tr>{cols.map((c,i)=>
    <th key={i} style={{...label12,textAlign:c.right?'right':'left',padding:'0 20px 10px',borderBottom:'1px solid var(--ink-300)',whiteSpace:'nowrap',width:c.w}}>{c.label}</th>)}</tr></thead>
    <tbody>{children}</tbody></table>;
}
function Tr({children,onClick,style}){
  const [h,setH]=React.useState(false);
  return <tr onClick={onClick} onMouseEnter={()=>setH(true)} onMouseLeave={()=>setH(false)}
    style={{cursor:onClick?'pointer':'default',background:h&&onClick?'var(--ink-50)':'transparent',transition:'background 120ms cubic-bezier(.2,0,0,1)',...style}}>{children}</tr>;
}
function Td({children,right,mono,muted,style,onClick,colSpan}){
  return <td colSpan={colSpan} onClick={onClick} style={{padding:'13px 20px',borderBottom:'1px solid var(--border-hairline)',fontSize:13.5,verticalAlign:'middle',
    textAlign:right?'right':'left',fontFamily:mono?'var(--font-mono)':undefined,color:muted?'var(--text-faint)':'var(--text-body)',
    fontVariantNumeric:mono?'tabular-nums':undefined,...style}}>{children}</td>;
}
function EmptyState({icon='inbox',title,children,action}){
  return <div style={{padding:'56px 24px',textAlign:'center'}}>
    <Icon name={icon} size={24} color="var(--ink-400)" style={{margin:'0 auto 14px'}}/>
    <div style={{fontFamily:'var(--font-display)',fontSize:15,fontWeight:600,color:'var(--ink-800)'}}>{title}</div>
    {children?<div style={{marginTop:6,fontSize:13.5,color:'var(--text-faint)',maxWidth:380,margin:'6px auto 0'}}>{children}</div>:null}
    {action?<div style={{marginTop:18,display:'flex',justifyContent:'center'}}>{action}</div>:null}
  </div>;
}
function Search({value,onChange,placeholder,width=340}){
  return <div style={{position:'relative',width}}>
    <Icon name="search" size={16} color="var(--ink-500)" style={{position:'absolute',left:12,top:13}}/>
    <Input value={value} placeholder={placeholder} onChange={e=>onChange(e.target.value)} style={{minHeight:40,padding:'9px 12px 9px 36px',fontSize:14}}/></div>;
}
function FilterRow({items,value,onChange}){
  return <div style={{display:'flex',gap:6}}>{items.map(it=>{
    const on=it===value;
    return <button key={it} onClick={()=>onChange(it)} style={{appearance:'none',cursor:'pointer',padding:'7px 13px',borderRadius:'var(--radius-sm)',
      border:'1px solid '+(on?'var(--teal-600)':'var(--border-hairline)'),background:on?'var(--teal-50)':'var(--white)',
      color:on?'var(--teal-800)':'var(--ink-600)',fontFamily:'var(--font-display)',fontSize:13,fontWeight:on?600:500,transition:'all 120ms cubic-bezier(.2,0,0,1)'}}>{it}</button>})}
  </div>;
}
function Toggle({checked,onChange,labels=['Ja','Nee']}){
  return <div style={{display:'flex',alignItems:'center',gap:10}}>
    <button onClick={()=>onChange(!checked)} style={{appearance:'none',border:0,cursor:'pointer',width:42,height:24,borderRadius:999,padding:2,
      background:checked?'var(--teal-600)':'var(--ink-300)',transition:'background 120ms cubic-bezier(.2,0,0,1)'}}>
      <span style={{display:'block',width:20,height:20,borderRadius:'50%',background:'#fff',transform:'translateX('+(checked?18:0)+'px)',transition:'transform 180ms cubic-bezier(.2,0,0,1)'}}/></button>
    <span style={{fontSize:14,color:'var(--text-body)'}}>{checked?labels[0]:labels[1]}</span></div>;
}

/* ---------- overlays ---------- */
function Modal({title,sub,children,footer,onClose,width=520,tone}){
  React.useEffect(()=>{const h=e=>{if(e.key==='Escape')onClose&&onClose()};window.addEventListener('keydown',h);return()=>window.removeEventListener('keydown',h)},[onClose]);
  return <div onClick={onClose} style={{position:'fixed',inset:0,background:'rgba(18,19,20,.42)',zIndex:60,display:'grid',placeItems:'center',padding:32,overflow:'auto'}}>
    <div onClick={e=>e.stopPropagation()} style={{width,maxWidth:'100%',background:'var(--white)',borderRadius:'var(--radius-lg)',boxShadow:'var(--shadow-overlay)',
      borderTop:tone?'3px solid var(--teal-600)':undefined,overflow:'hidden'}}>
      <div style={{padding:'22px 26px 18px',borderBottom:'1px solid var(--border-hairline)',display:'flex',justifyContent:'space-between',gap:16,alignItems:'flex-start'}}>
        <div><h2 style={{fontSize:19,margin:0,letterSpacing:'-.01em'}}>{title}</h2>
          {sub?<div style={{marginTop:6,fontSize:13.5,color:'var(--text-muted)'}}>{sub}</div>:null}</div>
        <button onClick={onClose} aria-label="Sluiten" style={{appearance:'none',background:'none',border:0,cursor:'pointer',padding:4,marginTop:-2}}><Icon name="x" size={18} color="var(--ink-600)"/></button></div>
      <div style={{padding:'22px 26px',maxHeight:'62vh',overflow:'auto'}}>{children}</div>
      {footer?<div style={{padding:'16px 26px',borderTop:'1px solid var(--border-hairline)',background:'var(--ink-50)',display:'flex',justifyContent:'flex-end',gap:10}}>{footer}</div>:null}
    </div></div>;
}
function SidePanel({title,sub,children,footer,onClose,width=520}){
  return <div onClick={onClose} style={{position:'fixed',inset:0,background:'rgba(18,19,20,.42)',zIndex:60}}>
    <div onClick={e=>e.stopPropagation()} style={{position:'absolute',top:0,right:0,bottom:0,width,maxWidth:'100%',background:'var(--white)',
      boxShadow:'var(--shadow-overlay)',display:'flex',flexDirection:'column'}}>
      <div style={{padding:'24px 28px 20px',borderBottom:'1px solid var(--border-hairline)',display:'flex',justifyContent:'space-between',alignItems:'flex-start',gap:16}}>
        <div><h2 style={{fontSize:20,margin:0,letterSpacing:'-.01em'}}>{title}</h2>
          {sub?<div style={{marginTop:6,fontSize:13.5,color:'var(--text-muted)'}}>{sub}</div>:null}</div>
        <button onClick={onClose} aria-label="Sluiten" style={{appearance:'none',background:'none',border:0,cursor:'pointer',padding:4}}><Icon name="x" size={18} color="var(--ink-600)"/></button></div>
      <div style={{flex:1,overflow:'auto',padding:'24px 28px'}}>{children}</div>
      <div style={{padding:'16px 28px',borderTop:'1px solid var(--border-hairline)',background:'var(--ink-50)',display:'flex',justifyContent:'flex-end',gap:10}}>{footer}</div>
    </div></div>;
}
function FormGroup({title,children,cols=2}){
  return <div style={{marginBottom:26}}>
    <div style={{...label12,paddingBottom:10,marginBottom:16,borderBottom:'1px solid var(--border-hairline)'}}>{title}</div>
    <div style={{display:'grid',gridTemplateColumns:'repeat('+cols+',minmax(0,1fr))',gap:16}}>{children}</div></div>;
}
function Toast({toast}){
  if(!toast)return null;
  const tone=toast.tone||'success';
  const c={success:['check-circle','var(--success-600)'],info:['refresh-cw','var(--teal-600)'],danger:['alert-circle','var(--danger-600)']}[tone];
  return <div style={{position:'fixed',bottom:28,left:'50%',transform:'translateX(-50%)',zIndex:80,background:'var(--ink-900)',color:'#fff',
    padding:'13px 20px',borderRadius:'var(--radius-md)',boxShadow:'var(--shadow-overlay)',display:'flex',alignItems:'center',gap:12,maxWidth:520}}>
    <Icon name={c[0]} size={17} color={tone==='info'?'var(--teal-300)':tone==='danger'?'#E8A79C':'#8ED3AE'}/>
    <div><div style={{fontFamily:'var(--font-display)',fontSize:14,fontWeight:600}}>{toast.title}</div>
      {toast.detail?<div style={{fontSize:12.5,color:'var(--ink-400)',marginTop:2}}>{toast.detail}</div>:null}</div></div>;
}
/* bron-label: Egberink of SnelStart */
function Source({from='SnelStart',style}){
  return <span style={{display:'inline-flex',alignItems:'center',gap:5,fontFamily:'var(--font-mono)',fontSize:10.5,letterSpacing:'.08em',
    textTransform:'uppercase',color:'var(--text-faint)',...style}}>
    <span style={{width:4,height:4,borderRadius:'50%',background:from==='SnelStart'?'var(--staal-500)':'var(--teal-600)'}}/>{from==='SnelStart'?'Uit SnelStart':'Uit Egberink'}</span>;
}
function DataRow({label,value,note}){
  return <div style={{display:'flex',justifyContent:'space-between',gap:24,padding:'10px 0',borderBottom:'1px solid var(--border-hairline)',fontSize:13.5}}>
    <span style={{color:'var(--text-muted)'}}>{label}</span>
    <span style={{color:'var(--text-strong)',fontWeight:500,textAlign:'right',fontVariantNumeric:'tabular-nums'}}>{value}{note?<div style={{fontWeight:400,fontSize:11.5,color:'var(--text-faint)',marginTop:2}}>{note}</div>:null}</span></div>;
}
/* start/stop-knop per project */
function TimerCell({project,onStop,size='sm'}){
  const at=store.activeTimer;const now=useNow(1000);
  const running=at&&at.projectId===project.id;
  if(running){
    return <div style={{display:'inline-flex',alignItems:'center',gap:10}}>
      <span style={{fontFamily:'var(--font-mono)',fontSize:13,fontWeight:500,color:'var(--teal-700)',fontVariantNumeric:'tabular-nums',display:'inline-flex',alignItems:'center',gap:7}}>
        <span className="eg-pulse" style={{width:6,height:6,borderRadius:'50%',background:'var(--teal-600)'}}/>{fmt.clock(timer.elapsed(at))}</span>
      <button onClick={e=>{e.stopPropagation();onStop()}} style={{appearance:'none',cursor:'pointer',border:'1px solid var(--teal-600)',background:'var(--teal-50)',
        color:'var(--teal-800)',borderRadius:'var(--radius-sm)',padding:'5px 11px',fontFamily:'var(--font-display)',fontSize:12.5,fontWeight:600,display:'inline-flex',alignItems:'center',gap:6}}>
        <span style={{width:8,height:8,background:'var(--teal-700)'}}/>Stop</button></div>;
  }
  return <button onClick={e=>{e.stopPropagation();window.EG_START(project.id)}} style={{appearance:'none',cursor:'pointer',border:'1px solid var(--border-default)',
    background:'var(--white)',color:'var(--ink-700)',borderRadius:'var(--radius-sm)',padding:'5px 11px',fontFamily:'var(--font-display)',fontSize:12.5,fontWeight:600,
    display:'inline-flex',alignItems:'center',gap:6,transition:'all 120ms cubic-bezier(.2,0,0,1)'}}
    onMouseEnter={e=>{e.currentTarget.style.borderColor='var(--teal-600)';e.currentTarget.style.color='var(--teal-800)'}}
    onMouseLeave={e=>{e.currentTarget.style.borderColor='var(--border-default)';e.currentTarget.style.color='var(--ink-700)'}}>
    <span style={{width:0,height:0,borderLeft:'7px solid currentColor',borderTop:'4.5px solid transparent',borderBottom:'4.5px solid transparent'}}/>Start</button>;
}
Object.assign(window,{useNow,useStore,Pill,PageHead,SectionTitle,Kpi,KpiRow,Table,Tr,Td,EmptyState,Search,FilterRow,Toggle,Modal,SidePanel,FormGroup,Toast,Source,DataRow,TimerCell,label12,
  Logo,Icon,Button,IconButton,Card,Stat,StatusPill,Amount,ProgressBar,Tabs,Badge,Alert,Rule,FormField,Input,Select,Textarea,Checkbox});