const {S,Head,I,P,PEOPLE,AV}=window.WFA;
const NS=window.XCOPEDesignSystem_bf80f1;
const {UIButton,UIInput,UISelect,UICard,UIAvatar,UIPill,UITabs,UIModal,UITable,UIStat,UIBanner,UIToggle,UIDrawer,UIEmptyState}=NS;
const UIChart=NS.UIChart;

const EX_CATS=["Deslocação","Refeição","Alojamento","Material","Formação","Outro"];
const EX_MINE=[
  {id:1,d:"22 jul",cat:"Deslocação",desc:"Táxi para o cliente",val:84.5,st:"Pendente",rec:"Recibo_taxi.jpg",proj:"Xcope Produto"},
  {id:2,d:"18 jul",cat:"Refeição",desc:"Almoço com candidato",val:37.2,st:"Aprovada",rec:"Fatura_almoco.pdf",proj:"Recrutamento"},
  {id:3,d:"11 jul",cat:"Alojamento",desc:"Hotel Lisboa, 1 noite",val:112.0,st:"Paga",rec:"Fatura_hotel.pdf",proj:"Xcope Produto"},
  {id:4,d:"04 jul",cat:"Material",desc:"Teclado ergonómico",val:64.9,st:"Recusada",rec:"Fatura_teclado.pdf",proj:"Equipamento"},
];
const EX_QUEUE=[
  {id:11,who:"Rui Pinto",d:"24 jul",cat:"Deslocação",desc:"Combustível, visita a fornecedor",val:62.4,proj:"Operações",pol:null},
  {id:12,who:"Ana Reis",d:"23 jul",cat:"Refeição",desc:"Jantar de equipa (6 pessoas)",val:214.0,proj:"Pessoas",pol:"Acima do limite de 25 €/pessoa"},
  {id:13,who:"Sofia Melo",d:"23 jul",cat:"Formação",desc:"Inscrição em conferência de dados",val:390.0,proj:"Formação",pol:null},
  {id:14,who:"Zain Franci",d:"21 jul",cat:"Material",desc:"Licença de software de design",val:145.0,proj:"Produto",pol:"Sem recibo anexado"},
];
const eur=v=>v.toLocaleString("pt-PT",{minimumFractionDigits:2,maximumFractionDigits:2})+" €";

S.expenses=()=>{
  const [tab,setTab]=React.useState("minhas");
  const [mine,setMine]=React.useState(EX_MINE);
  const [queue,setQueue]=React.useState(EX_QUEUE);
  const [nova,setNova]=React.useState(false);
  const [sel,setSel]=React.useState(null);
  const [f,setF]=React.useState({cat:"Deslocação",desc:"",val:"",d:"",proj:""});
  const [erro,setErro]=React.useState("");
  const [guardou,setGuardou]=React.useState(false);
  const [recibo,setRecibo]=React.useState(null);
  const cur=sel?queue.find(q=>q.id===sel)||mine.find(m=>m.id===sel):null;

  const submit=()=>{
    if(!f.desc.trim()){setErro("Descreve a despesa.");return;}
    const v=parseFloat(String(f.val).replace(",","."))||0;
    setMine(m=>[{id:Date.now(),d:f.d||"25 jul",cat:f.cat,desc:f.desc.trim(),val:v,st:"Pendente",rec:"Recibo.jpg",proj:f.proj||"—"},...m]);
    setF({cat:"Deslocação",desc:"",val:"",d:"",proj:""});setErro("");setNova(false);
  };
  const decide=(item,ok)=>setQueue(q=>q.filter(x=>x.id!==item.id));

  const pend=mine.filter(m=>m.st==="Pendente").reduce((n,m)=>n+m.val,0);
  const aprov=mine.filter(m=>m.st==="Aprovada").reduce((n,m)=>n+m.val,0);
  const total=queue.reduce((n,q)=>n+q.val,0);

  return <React.Fragment>
  <Head scoped title="Despesas" desc={tab==="minhas"?mine.filter(m=>m.st==="Pendente").length+" a aguardar aprovação":queue.length+" a aprovar · "+eur(total)}
    actions={<UIButton icon={<I d={P.plus} size={16}/>} onClick={()=>setNova(true)}>Nova despesa</UIButton>}/>

  <UICard style={{marginBottom:16,padding:"14px 24px"}}>
    <div style={{display:"flex",alignItems:"center",justifyContent:"space-between",gap:24,flexWrap:"wrap",fontSize:"var(--ui-fs-sm)"}}>
      <div style={{display:"flex",alignItems:"center",gap:32,flexWrap:"wrap"}}>
        <span className="row" style={{gap:8}}><span className="muted">Pendente</span><strong style={{fontVariantNumeric:"tabular-nums"}}>{eur(pend)}</strong></span>
        <span className="row" style={{gap:8}}><span className="muted">A reembolsar</span><strong style={{fontVariantNumeric:"tabular-nums"}}>{eur(aprov)}</strong></span>
        <span className="row" style={{gap:8}}><span className="muted">Reembolsado este ano</span><strong style={{fontVariantNumeric:"tabular-nums"}}>1 284,60 €</strong></span>
      </div>
      <span className="row" style={{gap:8}}><span className="muted">Na tua fila</span><UIPill tone={queue.length?"warning":"neutral"} dot={!!queue.length}>{queue.length} · {eur(total)}</UIPill></span>
    </div>
  </UICard>

  <UICard style={{padding:0,overflow:"hidden",flex:1,minHeight:0,display:"flex",flexDirection:"column"}}>
    <div className="row" style={{padding:"12px 16px",borderBottom:"1px solid var(--ui-divider)"}}>
      <UITabs value={tab} onChange={setTab} items={[{value:"minhas",label:"As minhas despesas"},{value:"aprovar",label:"A aprovar"},{value:"politica",label:"Política"}]}/>
    </div>

    {tab==="minhas"&&<div style={{flex:1,minHeight:0,overflow:"auto",padding:"12px 16px 16px"}}>
      <UIDataTable columns={[
        {key:"d",label:"Data"},
        {key:"desc",label:"Despesa",render:(v,r)=><span><span style={{fontWeight:600,display:"block"}}>{v}</span><span className="muted" style={{fontSize:"var(--ui-fs-sm)"}}>{r.proj}</span></span>},
        {key:"cat",label:"Categoria",render:v=><UIPill>{v}</UIPill>},
        {key:"rec",label:"Recibo",render:v=><span className="row" style={{gap:8,fontSize:"var(--ui-fs-sm)"}}><I d={P.doc} size={15} c="var(--ui-text-3)"/>{v}</span>},
        {key:"val",label:"Valor",align:"right",render:v=><span style={{fontWeight:600,fontVariantNumeric:"tabular-nums"}}>{eur(v)}</span>},
        {key:"st",label:"Estado",align:"right",render:v=><UIPill tone={v==="Paga"?"success":v==="Aprovada"?"info":v==="Recusada"?"danger":"warning"} dot>{v}</UIPill>}]}
        rows={mine} onRowClick={r=>setSel(r.id)}/>
    </div>}

    {tab==="aprovar"&&<div style={{flex:1,minHeight:0,overflow:"auto",padding:"12px 16px 16px"}}>
      {UIDataTable
        ? <UIDataTable rows={queue} rowKey="id" searchable selectable pageSize={10} onRowClick={r=>setSel(r.id)}
            searchPlaceholder="Pesquisar despesas…"
            emptyState={<UIEmptyState title="Fila vazia" description="Não há despesas a aguardar a tua decisão."/>}
            bulkActions={<React.Fragment><UIButton size="sm">Aprovar selecionadas</UIButton><UIButton size="sm" variant="outline">Recusar</UIButton></React.Fragment>}
            columns={[
              {key:"who",label:"Quem",sortable:true,render:(v,r)=><span className="row" style={{gap:12,minWidth:0}}>{AV(v)}<span style={{minWidth:0}}>
                <span style={{fontWeight:600,display:"block",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>{v}</span>
                <span className="muted" style={{fontSize:"var(--ui-fs-sm)"}}>{r.d} · {r.proj}</span></span></span>},
              {key:"cat",label:"Categoria",sortable:true,render:v=><UIPill>{v}</UIPill>},
              {key:"desc",label:"Despesa",render:(v,r)=><span style={{minWidth:0}}>
                <span style={{fontSize:"var(--ui-fs-sm)",display:"block",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>{v}</span>
                {r.pol&&<span className="row" style={{gap:6,marginTop:4,fontSize:"var(--ui-fs-xs)",color:"var(--ui-warning)"}}><I d={["M12 9v4","M12 17h.01","M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z"]} size={12}/>{r.pol}</span>}
              </span>},
              {key:"val",label:"Valor",sortable:true,align:"right",render:v=><span style={{fontWeight:600,fontVariantNumeric:"tabular-nums"}}>{eur(v)}</span>},
            ]}
            rowActions={r=><span className="row" style={{gap:8,justifyContent:"flex-end"}} onClick={e=>e.stopPropagation()}>
              <UIButton size="sm" onClick={()=>decide(r,true)}>Aprovar</UIButton>
              <UIButton size="sm" variant="outline" onClick={()=>decide(r,false)}>Recusar</UIButton>
            </span>}/>
        : <UIEmptyState title="Fila vazia" description="Não há despesas a aguardar a tua decisão."/>}
    </div>}

    {tab==="politica"&&<div style={{flex:1,minHeight:0,overflow:"auto",padding:16,display:"flex",flexDirection:"column",gap:16}}>
      <UIBanner tone="info" title="Limites por categoria">Despesas acima do limite continuam a poder ser submetidas, mas ficam sinalizadas para aprovação em cadeia.</UIBanner>
      <div className="grid g2">
        <UICard><div style={{fontWeight:600,marginBottom:12}}>Limites</div>
          <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:16}}>
            <UIInput label="Refeição por pessoa" defaultValue="25,00 €"/>
            <UIInput label="Alojamento por noite" defaultValue="120,00 €"/>
            <UIInput label="Km em viatura própria" defaultValue="0,40 €"/>
            <UIInput label="Aprovação em cadeia acima de" defaultValue="300,00 €"/>
          </div>
        </UICard>
        <UICard><div style={{fontWeight:600,marginBottom:12}}>Regras</div>
          <div style={{display:"flex",flexDirection:"column",gap:12}}>
            <UIToggle label="Exigir recibo em todas as despesas" defaultChecked/>
            <UIToggle label="Permitir submissão até 60 dias depois" defaultChecked/>
            <UIToggle label="Reembolsar com o salário do mês seguinte" defaultChecked/>
            <UIToggle label="Enviar despesas aprovadas para a contabilidade"/>
          </div>
        </UICard>
      </div>
      <div className="row">{guardou&&<span className="row" style={{gap:8,fontSize:"var(--ui-fs-sm)",color:"var(--ui-success)"}}><I d={["m5 12 4.5 4.5L19 7"]} size={15}/>Política guardada</span>}<div className="spring"/><UIButton onClick={()=>{setGuardou(true);setTimeout(()=>setGuardou(false),2600);}}>Guardar política</UIButton></div>
    </div>}
  </UICard>

  <UIDrawer open={!!cur} width={440} onClose={()=>setSel(null)}
    header={cur&&<span className="row" style={{gap:10}}><UIPill>{cur.cat}</UIPill><span className="muted" style={{fontSize:"var(--ui-fs-sm)"}}>{cur.d}</span></span>}
    footer={cur&&<React.Fragment><div className="spring"/><UIButton variant="ghost" onClick={()=>setSel(null)}>Fechar</UIButton>
      {cur.who?<UIButton onClick={()=>{decide(cur,true);setSel(null);}}>Aprovar</UIButton>:<UIButton variant="outline" onClick={()=>setRecibo(cur)}>Descarregar recibo</UIButton>}</React.Fragment>}>
    {cur&&<div style={{display:"flex",flexDirection:"column",gap:24}}>
      <div>
        <div style={{fontSize:"var(--ui-fs-h2)",fontWeight:600,letterSpacing:"var(--ui-ls-h2)"}}>{eur(cur.val)}</div>
        <div className="muted" style={{marginTop:4}}>{cur.desc}</div>
      </div>
      {cur.pol&&<div className="row" style={{gap:12,padding:"12px 16px",borderRadius:"var(--ui-r-md)",background:"var(--ui-warning-bg)",fontSize:"var(--ui-fs-sm)"}}>
        <I d={["M12 9v4","M12 17h.01","M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z"]} size={16}/><span>{cur.pol}</span></div>}
      <div style={{display:"grid",gridTemplateColumns:"116px minmax(0,1fr)",gap:"12px 16px",alignItems:"center",fontSize:"var(--ui-fs-sm)"}}>
        {cur.who&&<React.Fragment><span className="muted">Submetida por</span><span className="row" style={{gap:8}}>{AV(cur.who,"xs")}{cur.who}</span></React.Fragment>}
        <span className="muted">Projeto</span><span>{cur.proj}</span>
        <span className="muted">Data</span><span>{cur.d}</span>
        {cur.st&&<React.Fragment><span className="muted">Estado</span><span><UIPill tone={cur.st==="Paga"?"success":cur.st==="Aprovada"?"info":cur.st==="Recusada"?"danger":"warning"} dot>{cur.st}</UIPill></span></React.Fragment>}
      </div>
      <div>
        <div style={{fontWeight:600,fontSize:"var(--ui-fs-sm)",marginBottom:8}}>Recibo</div>
        <div style={{border:"1px solid var(--ui-border)",borderRadius:"var(--ui-r-md)",padding:16,display:"flex",alignItems:"center",gap:12,background:"var(--ui-surface-2)"}}>
          <I d={P.doc} size={20} c="var(--ui-text-3)"/>
          <span style={{flex:1,fontSize:"var(--ui-fs-sm)"}}>{cur.rec||"Sem recibo anexado"}</span>
          {cur.rec&&<UIButton size="sm" variant="ghost" onClick={()=>setRecibo(cur)}>Ver</UIButton>}
        </div>
      </div>
    </div>}
  </UIDrawer>

  <UIModal open={nova} onClose={()=>setNova(false)} title="Nova despesa" width={560}
    footer={<div className="row" style={{gap:8}}><span className="muted" style={{fontSize:"var(--ui-fs-sm)"}}>Vai para aprovação de Tomás Machado</span><div className="spring"/><UIButton variant="ghost" onClick={()=>setNova(false)}>Cancelar</UIButton><UIButton onClick={submit}>Submeter</UIButton></div>}>
    <div style={{display:"flex",flexDirection:"column",gap:16}}>
      <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:16}}>
        <UISelect label="Categoria" value={f.cat} onChange={e=>setF({...f,cat:e.target.value})} options={EX_CATS}/>
        <UIInput label="Valor" placeholder="0,00 €" value={f.val} onChange={e=>setF({...f,val:e.target.value})}/>
        <UIInput label="Data" placeholder="dd/mm" value={f.d} onChange={e=>setF({...f,d:e.target.value})}/>
        <UIInput label="Projeto ou cliente" placeholder="Ex.: Xcope Produto" value={f.proj} onChange={e=>setF({...f,proj:e.target.value})}/>
      </div>
      <UIInput label="Descrição" placeholder="O que foi e para quê" value={f.desc} onChange={e=>{setF({...f,desc:e.target.value});setErro("");}} error={erro||undefined}/>
      <div>
        <div style={{fontSize:"var(--ui-fs-sm)",fontWeight:500,marginBottom:8}}>Recibo</div>
        <div style={{border:"1px dashed var(--ui-border-2)",borderRadius:"var(--ui-r-md)",padding:"24px 16px",textAlign:"center",color:"var(--ui-text-2)",fontSize:"var(--ui-fs-sm)"}}>
          Arrasta o recibo para aqui ou <span style={{fontWeight:600,textDecoration:"underline",cursor:"pointer"}}>escolhe um ficheiro</span>
        </div>
      </div>
      <div className="muted" style={{fontSize:"var(--ui-fs-sm)"}}>Limite da categoria Refeição: 25,00 € por pessoa.</div>
    </div>
  </UIModal>

  <UIModal open={!!recibo} onClose={()=>setRecibo(null)} title={recibo?recibo.rec||"Recibo":""} width={520}
    footer={<div className="row" style={{gap:8}}><div className="spring"/><UIButton variant="ghost" onClick={()=>setRecibo(null)}>Fechar</UIButton><UIButton>Descarregar</UIButton></div>}>
    {recibo&&<div>
      <div style={{border:"1px solid var(--ui-border)",borderRadius:"var(--ui-r-md)",background:"var(--ui-surface-2)",padding:32,display:"flex",flexDirection:"column",alignItems:"center",gap:12,textAlign:"center"}}>
        <I d={P.doc} size={32} c="var(--ui-text-3)"/>
        <div style={{fontWeight:600}}>{recibo.rec||"Sem recibo"}</div>
        <div className="muted" style={{fontSize:"var(--ui-fs-sm)"}}>{recibo.desc} · {eur(recibo.val)} · {recibo.d}</div>
      </div>
      <div className="muted" style={{fontSize:"var(--ui-fs-sm)",marginTop:12,textAlign:"center"}}>Pré-visualização do documento anexado à despesa.</div>
    </div>}
  </UIModal>
  </React.Fragment>;
};

/* ============ RELATÓRIOS E ANALYTICS ============ */
const AN_HEAD=[[ "Jan",54],["Fev",56],["Mar",57],["Abr",58],["Mai",60],["Jun",61],["Jul",62]];
const AN_TURN=[["Q3 25",3.1],["Q4 25",2.8],["Q1 26",2.2],["Q2 26",1.9]];
const AN_ABS=[["Eng",1.8],["Produto",2.1],["Pessoas",1.2],["Comercial",3.4],["Dados",2.6]];
const AN_COST=[["Engenharia",312000,42],["Comercial",198000,23],["Produto",142000,18],["Dados",78000,7],["Pessoas",64000,9]];

function AnBars({data,unit,max,tone}){
  const {UIChart}=window.XCOPEDesignSystem_bf80f1||{};
  const rows=data.map(([x,v])=>({x,v}));
  if(!UIChart) return <div style={{display:"flex",alignItems:"flex-end",gap:12,height:180}}>
    {rows.map(r=><div key={r.x} style={{flex:1,display:"flex",flexDirection:"column",alignItems:"center",gap:8,height:"100%"}}>
      <div style={{flex:1,width:"100%",display:"flex",alignItems:"flex-end"}}>
        <div style={{width:"100%",height:(r.v/(max||Math.max(...rows.map(z=>z.v))*1.15)*100)+"%",minHeight:4,borderRadius:"6px 6px 0 0",background:tone||"var(--ui-accent)"}}/>
      </div><span className="muted" style={{fontSize:"var(--ui-fs-xs)"}}>{r.x}</span></div>)}
  </div>;
  return <UIChart type="bar" data={rows} xKey="x" valueKey="v" height={180}
    series={[{key:"v",label:"",color:tone}]} max={max} valueSuffix={unit}/>;
}

S.reports=()=>{
  const [tab,setTab]=React.useState("pessoas");
  const [exp,setExp]=React.useState(false);const [exportado,setExportado]=React.useState(false);
  const [dep,setDep]=React.useState(null);
  const custoTotal=AN_COST.reduce((n,c)=>n+c[1],0);
  return <React.Fragment>
  <Head scoped title="Relatórios" desc="Indicadores de pessoas, tempo e custo · julho 2026"
    actions={<UIButton variant="outline" icon={<I d={P.doc} size={16}/>} onClick={()=>setExp(true)}>Exportar</UIButton>}/>

  {exportado&&<UIBanner tone="success" title="Relatório exportado" style={{marginBottom:16}}>O ficheiro foi gerado e enviado para o teu email.</UIBanner>}
  <div className="grid g4" style={{marginBottom:16}}>
    <UICard><UIStat label="Headcount" value="62" delta="+1" deltaTone="success" sublabel="vs. junho"/></UICard>
    <UICard><UIStat label="Rotatividade" value="1,9%" delta="-0,3 pp" deltaTone="success" sublabel="trimestre"/></UICard>
    <UICard><UIStat label="Absentismo" value="2,4%" delta="-0,3 pp" deltaTone="success" sublabel="vs. junho"/></UICard>
    <UICard><UIStat label="Custo com pessoal" value="794 k€" delta="+2,1%" deltaTone="neutral" sublabel="anualizado"/></UICard>
  </div>

  <UICard style={{padding:0,overflow:"hidden",flex:1,minHeight:0,display:"flex",flexDirection:"column"}}>
    <div className="row" style={{padding:"12px 16px",borderBottom:"1px solid var(--ui-divider)"}}>
      <UITabs value={tab} onChange={setTab} items={[{value:"pessoas",label:"Pessoas"},{value:"tempo",label:"Tempo e ausências"},{value:"custo",label:"Custo"}]}/>
    </div>

    {tab==="pessoas"&&<div style={{flex:1,minHeight:0,overflow:"auto",padding:16,display:"flex",flexDirection:"column",gap:16}}>
      <div className="grid g2">
        <UICard elevation={0}>
          <div style={{fontWeight:600,marginBottom:4}}>Evolução do headcount</div>
          <div className="muted" style={{fontSize:"var(--ui-fs-sm)",marginBottom:16}}>Pessoas ativas no fim de cada mês</div>
          {UIChart?<UIChart type="area" height={180} data={AN_HEAD.map(([m,v])=>({m,pessoas:v}))} xKey="m" config={{pessoas:{label:"Pessoas"}}}/>:<AnBars data={AN_HEAD} unit=" pessoas" max={70}/>}
        </UICard>
        <UICard elevation={0}>
          <div style={{fontWeight:600,marginBottom:4}}>Rotatividade trimestral</div>
          <div className="muted" style={{fontSize:"var(--ui-fs-sm)",marginBottom:16}}>Saídas sobre headcount médio</div>
          {UIChart?<UIChart type="bar" height={180} data={AN_TURN.map(([m,v])=>({m,taxa:v}))} xKey="m" config={{taxa:{label:"Rotatividade",color:"var(--ui-chart-2)"}}} valueFormat={v=>v.toLocaleString("pt-PT")+"%"}/>:<AnBars data={AN_TURN} unit="%" max={4} tone="var(--ui-info)"/>}
        </UICard>
      </div>
      <UICard elevation={0}>
        <div style={{fontWeight:600,marginBottom:12}}>Distribuição por departamento</div>
        {AN_COST.map(([d,,n])=><div key={d} className="row" style={{gap:16,padding:"10px 0",borderBottom:"1px solid var(--ui-divider)"}}>
          <span style={{width:130,fontSize:"var(--ui-fs-sm)",fontWeight:500}}>{d}</span>
          <UIProgress value={n/62*100} style={{flex:1}}/>
          <span className="muted" style={{fontSize:"var(--ui-fs-sm)",width:80,textAlign:"right",fontVariantNumeric:"tabular-nums"}}>{n} pessoas</span>
        </div>)}
      </UICard>
    </div>}

    {tab==="tempo"&&<div style={{flex:1,minHeight:0,overflow:"auto",padding:16,display:"flex",flexDirection:"column",gap:16}}>
      <UICard elevation={0}>
        <div style={{fontWeight:600,marginBottom:4}}>Absentismo por departamento</div>
        <div className="muted" style={{fontSize:"var(--ui-fs-sm)",marginBottom:16}}>Percentagem de dias úteis perdidos, julho</div>
        {UIChart?<UIChart type="bar" height={180} data={AN_ABS.map(([m,v])=>({m,abs:v}))} xKey="m" config={{abs:{label:"Absentismo",color:"var(--ui-warning)"}}} valueFormat={v=>v.toLocaleString("pt-PT")+"%"}/>:<AnBars data={AN_ABS} unit="%" max={4} tone="var(--ui-warning)"/>}
      </UICard>
      <div className="grid g2">
        <UICard elevation={0}><div style={{fontWeight:600,marginBottom:12}}>Horas registadas</div>
          {[["Horas normais","9 984 h"],["Horas extra","212 h"],["Banco de horas","-48 h"],["Média por pessoa","161 h"]].map(([l,v])=>
            <div key={l} className="row" style={{padding:"10px 0",borderBottom:"1px solid var(--ui-divider)"}}>
              <span style={{flex:1,fontSize:"var(--ui-fs-sm)"}}>{l}</span>
              <span style={{fontWeight:600,fontVariantNumeric:"tabular-nums"}}>{v}</span></div>)}
        </UICard>
        <UICard elevation={0}><div style={{fontWeight:600,marginBottom:12}}>Ausências por tipo</div>
          {[["Férias","184 dias"],["Falta justificada","36 dias"],["Trabalho remoto","128 dias"],["Falta injustificada","4 dias"]].map(([l,v])=>
            <div key={l} className="row" style={{padding:"10px 0",borderBottom:"1px solid var(--ui-divider)"}}>
              <span style={{flex:1,fontSize:"var(--ui-fs-sm)"}}>{l}</span>
              <span style={{fontWeight:600,fontVariantNumeric:"tabular-nums"}}>{v}</span></div>)}
        </UICard>
      </div>
    </div>}

    {tab==="custo"&&<div style={{flex:1,minHeight:0,overflow:"auto",padding:"12px 16px 16px"}}>
      <UIDataTable columns={[
        {key:"d",label:"Departamento",render:v=><span style={{fontWeight:600}}>{v}</span>},
        {key:"n",label:"Pessoas",render:v=><span style={{fontVariantNumeric:"tabular-nums"}}>{v}</span>},
        {key:"c",label:"Custo anual",render:v=><span style={{fontVariantNumeric:"tabular-nums"}}>{(v/1000).toFixed(0)} k€</span>},
        {key:"med",label:"Média por pessoa",render:v=><span style={{fontVariantNumeric:"tabular-nums"}}>{(v/1000).toFixed(1)} k€</span>},
        {key:"pc",label:"Peso",align:"right",render:v=><span className="row" style={{gap:12,justifyContent:"flex-end"}}>
          <span style={{width:80,height:6,borderRadius:999,background:"var(--ui-surface-3)",overflow:"hidden"}}><span style={{display:"block",width:v+"%",height:"100%",background:"var(--ui-data)"}}/></span>
          <span style={{fontVariantNumeric:"tabular-nums",width:44,textAlign:"right"}}>{v}%</span></span>}]}
        rows={AN_COST.map(([d,c,n])=>({d,c,n,med:c/n,pc:Math.round(c/custoTotal*100)}))} onRowClick={r=>setDep(r)}/>
    </div>}
  </UICard>

  <UIModal open={exp} onClose={()=>setExp(false)} title="Exportar relatório" width={520}
    footer={<div className="row" style={{gap:8}}><div className="spring"/><UIButton variant="ghost" onClick={()=>setExp(false)}>Cancelar</UIButton><UIButton onClick={()=>{setExp(false);setExportado(true);setTimeout(()=>setExportado(false),3000);}}>Exportar</UIButton></div>}>
    <div style={{display:"flex",flexDirection:"column",gap:16}}>
      <UISelect label="Formato" options={["PDF","Excel (XLSX)","CSV"]}/>
      <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:16}}>
        <UISelect label="Período" options={["Julho 2026","Últimos 3 meses","Ano até à data","Personalizado"]}/>
        <UISelect label="Âmbito" options={["Empresa ativa","Todo o grupo","Por departamento"]}/>
      </div>
      <div>
        <div style={{fontSize:"var(--ui-fs-sm)",fontWeight:500,marginBottom:8}}>Incluir</div>
        <div style={{display:"flex",flexDirection:"column",gap:12}}>
          <UIToggle label="Pessoas e headcount" defaultChecked/>
          <UIToggle label="Tempo e ausências" defaultChecked/>
          <UIToggle label="Custo com pessoal"/>
        </div>
      </div>
    </div>
  </UIModal>

  <UIDrawer open={!!dep} width={420} onClose={()=>setDep(null)}
    header={dep&&<span style={{fontWeight:600,fontSize:"var(--ui-fs-h3)"}}>{dep.d}</span>}
    footer={dep&&<React.Fragment><div className="spring"/><UIButton variant="ghost" onClick={()=>setDep(null)}>Fechar</UIButton></React.Fragment>}>
    {dep&&<div style={{display:"flex",flexDirection:"column",gap:22}}>
      <div className="muted" style={{fontSize:"var(--ui-fs-sm)"}}>Custo com pessoal · anualizado</div>
      <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:16}}>
        {[["Pessoas",dep.n],["Custo anual",(dep.c/1000).toFixed(0)+" k€"],["Média por pessoa",(dep.med/1000).toFixed(1)+" k€"],["Peso no total",dep.pc+"%"]].map(([l,v])=>
          <div key={l}><div className="muted" style={{fontSize:"var(--ui-fs-xs)",fontWeight:600,letterSpacing:"0.06em",textTransform:"uppercase",marginBottom:4}}>{l}</div><div style={{fontWeight:500,fontVariantNumeric:"tabular-nums"}}>{v}</div></div>)}
      </div>
      <div>
        <div className="muted" style={{fontSize:"var(--ui-fs-xs)",fontWeight:600,letterSpacing:"0.06em",textTransform:"uppercase",marginBottom:10}}>Composição do custo</div>
        {[["Salários",0.78],["Encargos sociais",0.15],["Benefícios",0.07]].map(([l,f])=>
          <div key={l} className="row" style={{padding:"8px 0",gap:12,borderBottom:"1px solid var(--ui-divider)"}}>
            <span style={{flex:1,fontSize:"var(--ui-fs-sm)"}}>{l}</span>
            <span style={{fontWeight:600,fontVariantNumeric:"tabular-nums"}}>{(dep.c*f/1000).toFixed(0)} k€</span>
            <span className="muted" style={{fontSize:"var(--ui-fs-sm)",width:38,textAlign:"right"}}>{Math.round(f*100)}%</span>
          </div>)}
      </div>
    </div>}
  </UIDrawer>
  </React.Fragment>;
};
