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

const eur=v=>v.toLocaleString("pt-PT",{minimumFractionDigits:2,maximumFractionDigits:2})+" €";
const eurK=v=>(v/1000).toLocaleString("pt-PT",{minimumFractionDigits:1,maximumFractionDigits:1})+" k€";

// bruto mensal por pessoa; IRS efetivo aproximado por escalão
const PR_ROWS=[
  {id:1,who:"Hugo Montenegro",dept:"Direção",bruto:4800,irs:0.28,extra:0},
  {id:2,who:"Tomás Machado",dept:"Operações",bruto:4200,irs:0.26,extra:0},
  {id:3,who:"Tomás Jervell",dept:"Comercial",bruto:3600,irs:0.24,extra:190},
  {id:4,who:"Rui Pinto",dept:"Engenharia",bruto:3400,irs:0.24,extra:145},
  {id:5,who:"Sofia Melo",dept:"Dados",bruto:2900,irs:0.21,extra:0},
  {id:6,who:"Ana Reis",dept:"Produto",bruto:2800,irs:0.21,extra:0},
  {id:7,who:"Zain Franci",dept:"Produto",bruto:2750,irs:0.21,extra:0},
  {id:8,who:"Carla Dias",dept:"Pessoas",bruto:2300,irs:0.18,extra:0},
  {id:9,who:"Mira Mango",dept:"Comercial",bruto:2250,irs:0.18,extra:0},
  {id:10,who:"João Alves",dept:"Dados",bruto:2400,irs:0.18,extra:60},
];
const SS_TRAB=0.11, SS_ENT=0.2375, SUB_ALIM=167.20;
const calc=r=>{
  const base=r.bruto, extra=r.extra||0;
  const irs=Math.round((base+extra)*r.irs);
  const ss=Math.round((base+extra)*SS_TRAB);
  const liquido=base+extra+SUB_ALIM-irs-ss;
  const entidade=Math.round((base+extra)*SS_ENT);
  return {base,extra,alim:SUB_ALIM,irs,ss,liquido,entidade};
};
const PR_HIST=[
  {id:"jun",m:"Junho 2026",fecho:"28 jun",bruto:33180,liquido:23410,pessoas:10},
  {id:"mai",m:"Maio 2026",fecho:"28 mai",bruto:32960,liquido:23255,pessoas:10},
  {id:"abr",m:"Abril 2026",fecho:"28 abr",bruto:32960,liquido:23255,pessoas:10},
  {id:"mar",m:"Março 2026",fecho:"27 mar",bruto:32780,liquido:23120,pessoas:10},
  {id:"fev",m:"Fevereiro 2026",fecho:"26 fev",bruto:32780,liquido:23120,pessoas:10},
];

S["admin-payroll"]=()=>{
  const [tab,setTab]=React.useState("proc");
  const [sel,setSel]=React.useState(null);
  const [selH,setSelH]=React.useState(null);
  const [run,setRun]=React.useState(false);
  const [passo,setPasso]=React.useState(0);
  const [fechado,setFechado]=React.useState(false);
  const [duo,setDuo]=React.useState({});
  const [rubGuardou,setRubGuardou]=React.useState(false);

  const tot=PR_ROWS.reduce((a,r)=>{const c=calc(r);a.bruto+=c.base+c.extra;a.liquido+=c.liquido;a.entidade+=c.entidade;return a;},{bruto:0,liquido:0,entidade:0});
  const cur=sel?PR_ROWS.find(r=>r.id===sel):null;
  const cc=cur?calc(cur):null;
  const fecharRun=()=>{setRun(false);setPasso(0);};
  const PASSOS=["Validar dados","Calcular","Aprovar"];

  return <React.Fragment>
  <Head scoped title="Processamento salarial" desc={"Julho 2026 · "+(fechado?"fechado a 28 jul":"por processar · paga a 28 jul")}
    actions={fechado
      ?<UIButton variant="outline" icon={<I d={P.exp} size={16}/>}>Exportar ficheiro de pagamentos</UIButton>
      :<UIButton icon={<I d={P.task} size={16}/>} onClick={()=>setRun(true)}>Iniciar processamento</UIButton>}/>

  {fechado&&<UIBanner tone="success" title="Julho processado" style={{marginBottom:16}}>Recibos gerados e enviados aos colaboradores. O ficheiro de pagamentos está pronto para o banco.</UIBanner>}

  <div className="grid g4" style={{marginBottom:16}}>
    <UICard><UIStat label="Total bruto" value={eurK(tot.bruto)} sublabel={PR_ROWS.length+" pessoas"}/></UICard>
    <UICard><UIStat label="Encargos da entidade" value={eurK(tot.entidade)} sublabel="Segurança Social 23,75%"/></UICard>
    <UICard><UIStat label="Líquido a pagar" value={eurK(tot.liquido)} sublabel="inclui subsídio de alimentação"/></UICard>
    <UICard><UIStat label="Estado do mês" value={fechado?"Fechado":"Aberto"} sublabel={fechado?"processado hoje":"prazo: 28 jul"}/></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:"proc",label:"Processamento"},{value:"subs",label:"Subsídios"},{value:"rub",label:"Rubricas"},{value:"hist",label:"Histórico"}]}/>
    </div>

    {tab==="proc"&&<div style={{flex:1,minHeight:0,overflow:"auto",padding:"12px 16px 16px"}}>
      <UIDataTable rows={PR_ROWS} rowKey="id" searchable pageSize={12} searchPlaceholder="Pesquisar pessoas…" onRowClick={r=>setSel(r.id)}
        columns={[
          {key:"who",label:"Pessoa",sortable:true,render:(v,r)=><span className="row" style={{gap:10,minWidth:0}}>{AV(v,"xs")}<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.dept}</span></span></span>},
          {key:"bruto",label:"Bruto",sortable:true,align:"right",render:(v,r)=><span style={{fontVariantNumeric:"tabular-nums"}}>{eur(v+(r.extra||0))}</span>},
          {key:"irs",label:"IRS",align:"right",render:(v,r)=><span style={{fontVariantNumeric:"tabular-nums"}}>{eur(calc(r).irs)}</span>},
          {key:"ss",label:"Seg. Social",align:"right",render:(v,r)=><span style={{fontVariantNumeric:"tabular-nums"}}>{eur(calc(r).ss)}</span>},
          {key:"liq",label:"Líquido",sortable:true,align:"right",render:(v,r)=><span style={{fontVariantNumeric:"tabular-nums",fontWeight:600}}>{eur(calc(r).liquido)}</span>},
          {key:"st",label:"Estado",align:"right",render:()=><UIPill tone={fechado?"success":"neutral"} dot={fechado}>{fechado?"Processado":"Por processar"}</UIPill>},
        ]}/>
    </div>}

    {tab==="subs"&&<div style={{flex:1,minHeight:0,overflow:"auto",padding:"12px 16px 16px"}}>
      <UIBanner tone="info" title="Subsídios de férias e de Natal" style={{marginBottom:12}}>Por omissão pagos por inteiro (junho e novembro). Ativa duodécimos por pessoa para diluir nos 12 meses.</UIBanner>
      {PR_ROWS.map(r=><div key={r.id} className="listrow" style={{gap:14}}>
        {AV(r.who,"sm")}
        <div style={{flex:1,minWidth:0}}><div style={{fontWeight:600}}>{r.who}</div>
          <div className="muted" style={{fontSize:"var(--ui-fs-sm)"}}>Férias {eur(r.bruto)} · Natal {eur(r.bruto)}{duo[r.id]?" · em duodécimos ("+eur(Math.round(r.bruto*2/12))+"/mês)":""}</div></div>
        <UIToggle label="Duodécimos" checked={!!duo[r.id]} onChange={()=>setDuo(d=>({...d,[r.id]:!d[r.id]}))}/>
      </div>)}
    </div>}

    {tab==="rub"&&<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:12}}>Abonos</div>
          <div style={{display:"flex",flexDirection:"column",gap:12}}>
            <UIInput label="Subsídio de alimentação (€/dia útil)" defaultValue="7,60"/>
            <UIInput label="Ajudas de custo nacionais (€/dia)" defaultValue="62,75"/>
            <UIInput label="Acréscimo de hora extra (primeira hora)" defaultValue="25%"/>
          </div>
        </UICard>
        <UICard elevation={0}><div style={{fontWeight:600,marginBottom:12}}>Descontos e encargos</div>
          <div style={{display:"flex",flexDirection:"column",gap:12}}>
            <UIInput label="Segurança Social · trabalhador" defaultValue="11%"/>
            <UIInput label="Segurança Social · entidade" defaultValue="23,75%"/>
            <UIInput label="Tabela de retenção de IRS" defaultValue="Continente · 2026 · 1.º semestre"/>
          </div>
        </UICard>
      </div>
      <div className="row">{rubGuardou&&<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}/>Rubricas guardadas</span>}<div className="spring"/><UIButton onClick={()=>{setRubGuardou(true);setTimeout(()=>setRubGuardou(false),2600);}}>Guardar rubricas</UIButton></div>
    </div>}

    {tab==="hist"&&<div style={{flex:1,minHeight:0,overflow:"auto",padding:"12px 16px 16px"}}>
      <UIDataTable rows={PR_HIST} rowKey="id" pageSize={12} onRowClick={r=>setSelH(r)}
        columns={[
          {key:"m",label:"Mês",render:v=><span style={{fontWeight:600}}>{v}</span>},
          {key:"fecho",label:"Fechado a"},
          {key:"pessoas",label:"Pessoas",align:"right"},
          {key:"bruto",label:"Bruto",align:"right",render:v=><span style={{fontVariantNumeric:"tabular-nums"}}>{eurK(v)}</span>},
          {key:"liquido",label:"Líquido pago",align:"right",render:v=><span style={{fontVariantNumeric:"tabular-nums",fontWeight:600}}>{eurK(v)}</span>},
          {key:"st",label:"Estado",align:"right",render:()=><UIPill tone="success" dot>Fechado</UIPill>},
        ]}/>
    </div>}
  </UICard>

  <UIModal open={run} onClose={fecharRun} title="Processar julho 2026" width={560}
    footer={<div className="row" style={{gap:8}}>
      <span className="muted" style={{fontSize:"var(--ui-fs-sm)"}}>Passo {passo+1} de {PASSOS.length}</span><div className="spring"/>
      <UIButton variant="ghost" onClick={fecharRun}>Cancelar</UIButton>
      {passo<PASSOS.length-1
        ?<UIButton onClick={()=>setPasso(p=>p+1)}>{passo===0?"Validar e continuar":"Calcular e continuar"}</UIButton>
        :<UIButton onClick={()=>{setFechado(true);fecharRun();}}>Aprovar e fechar o mês</UIButton>}
    </div>}>
    <div style={{display:"flex",flexDirection:"column",gap:16}}>
      <div className="row" style={{gap:6}}>
        {PASSOS.map((p,i)=><React.Fragment key={p}>
          <span className="row" style={{gap:8,fontSize:"var(--ui-fs-sm)",fontWeight:i===passo?600:500,color:i<=passo?"var(--ui-text)":"var(--ui-text-3)"}}>
            <span style={{width:20,height:20,borderRadius:999,display:"flex",alignItems:"center",justifyContent:"center",fontSize:"var(--ui-fs-xs)",fontWeight:600,background:i<passo?"var(--ui-success)":i===passo?"var(--ui-accent)":"var(--ui-surface-3)",color:i<=passo?"var(--ui-on-accent)":"var(--ui-text-3)"}}>{i<passo?"✓":i+1}</span>{p}</span>
          {i<PASSOS.length-1&&<span style={{flex:1,height:1,background:"var(--ui-divider)"}}/>}
        </React.Fragment>)}
      </div>
      {passo===0&&<div style={{display:"flex",flexDirection:"column",gap:10}}>
        {[["Contratos ativos","10 pessoas com contrato válido em julho","success"],
          ["Tempos e ausências","Folhas de ponto aprovadas · 3 dias de ausência descontados","success"],
          ["Horas extra","4 pessoas com horas extra a pagar (395,00 €)","success"],
          ["Dados bancários","1 pessoa sem número de conta confirmado (Mira Mango)","warning"]].map(([t,d,tone])=>
          <div key={t} className="row" style={{gap:10,padding:"10px 12px",borderRadius:"var(--ui-r-md)",background:tone==="warning"?"var(--ui-warning-bg)":"var(--ui-surface-2)",fontSize:"var(--ui-fs-sm)"}}>
            <I d={tone==="warning"?P.bell:["m5 12 4.5 4.5L19 7"]} size={15} c={tone==="warning"?"var(--ui-warning)":"var(--ui-success)"}/>
            <span style={{fontWeight:600}}>{t}</span><span className="muted" style={{flex:1}}>{d}</span></div>)}
      </div>}
      {passo===1&&<div style={{display:"flex",flexDirection:"column",gap:10}}>
        {[["Total bruto",eur(tot.bruto)],["Retenção de IRS",eur(PR_ROWS.reduce((n,r)=>n+calc(r).irs,0))],["Segurança Social · trabalhador",eur(PR_ROWS.reduce((n,r)=>n+calc(r).ss,0))],["Segurança Social · entidade",eur(tot.entidade)],["Líquido a transferir",eur(tot.liquido)]].map(([l,v],i,arr)=>
          <div key={l} className="row" style={{padding:"8px 0",borderBottom:i<arr.length-1?"1px solid var(--ui-divider)":"none",fontSize:"var(--ui-fs-sm)"}}>
            <span style={{flex:1,fontWeight:i===arr.length-1?600:400}}>{l}</span>
            <span style={{fontVariantNumeric:"tabular-nums",fontWeight:600}}>{v}</span></div>)}
      </div>}
      {passo===2&&<div style={{display:"flex",flexDirection:"column",gap:12}}>
        <UIBanner tone="info" title="Ao aprovar">Os recibos são gerados e enviados a cada colaborador, o ficheiro de pagamentos fica pronto para o banco e as guias de IRS e Segurança Social ficam disponíveis na Conformidade.</UIBanner>
        <div className="muted" style={{fontSize:"var(--ui-fs-sm)"}}>Esta ação fecha o mês de julho. Correções posteriores entram como acerto em agosto.</div>
      </div>}
    </div>
  </UIModal>

  <UIDrawer open={!!cur} width={440} onClose={()=>setSel(null)}
    header={cur&&<span className="row" style={{gap:12}}>{AV(cur.who)}<span><span style={{fontWeight:600,display:"block"}}>{cur.who}</span><span className="muted" style={{fontSize:"var(--ui-fs-sm)"}}>{cur.dept}</span></span></span>}
    footer={cur&&<React.Fragment><div className="spring"/><UIButton variant="ghost" onClick={()=>setSel(null)}>Fechar</UIButton></React.Fragment>}>
    {cc&&<div style={{display:"flex",flexDirection:"column",gap:22}}>
      <div className="row" style={{gap:8}}><UIPill tone={fechado?"success":"neutral"} dot={fechado}>{fechado?"Processado":"Por processar"}</UIPill><UIPill>Julho 2026</UIPill></div>
      <div>
        <div className="muted" style={{fontSize:"var(--ui-fs-xs)",fontWeight:600,letterSpacing:"0.06em",textTransform:"uppercase",marginBottom:10}}>Abonos</div>
        {[["Vencimento base",cc.base],["Horas extra",cc.extra],["Subsídio de alimentação",cc.alim]].filter(([,v])=>v>0).map(([l,v])=>
          <div key={l} className="row" style={{padding:"8px 0",borderBottom:"1px solid var(--ui-divider)",fontSize:"var(--ui-fs-sm)"}}>
            <span style={{flex:1}}>{l}</span><span style={{fontVariantNumeric:"tabular-nums",fontWeight:600}}>{eur(v)}</span></div>)}
        <div className="muted" style={{fontSize:"var(--ui-fs-xs)",fontWeight:600,letterSpacing:"0.06em",textTransform:"uppercase",margin:"16px 0 10px"}}>Descontos</div>
        {[["Retenção de IRS ("+Math.round(cur.irs*100)+"%)",cc.irs],["Segurança Social (11%)",cc.ss]].map(([l,v])=>
          <div key={l} className="row" style={{padding:"8px 0",borderBottom:"1px solid var(--ui-divider)",fontSize:"var(--ui-fs-sm)"}}>
            <span style={{flex:1}}>{l}</span><span style={{fontVariantNumeric:"tabular-nums",fontWeight:600,color:"var(--ui-danger)"}}>-{eur(v)}</span></div>)}
        <div className="row" style={{padding:"12px 0 0",fontSize:"var(--ui-fs-body)"}}>
          <span style={{flex:1,fontWeight:600}}>Líquido a receber</span><span style={{fontVariantNumeric:"tabular-nums",fontWeight:700}}>{eur(cc.liquido)}</span></div>
      </div>
      <div className="row" style={{gap:10,padding:"12px 14px",borderRadius:"var(--ui-r-md)",background:"var(--ui-surface-2)",fontSize:"var(--ui-fs-sm)"}}>
        <I d={P.building} size={16} c="var(--ui-text-3)"/>
        <span>Custo total para a empresa: <strong>{eur(cc.base+cc.extra+cc.alim+cc.entidade)}</strong> (inclui SS da entidade, {eur(cc.entidade)}).</span>
      </div>
    </div>}
  </UIDrawer>

  <UIDrawer open={!!selH} width={400} onClose={()=>setSelH(null)}
    header={selH&&<span style={{fontWeight:600,fontSize:"var(--ui-fs-h3)"}}>{selH.m}</span>}
    footer={selH&&<React.Fragment><div className="spring"/><UIButton variant="ghost" onClick={()=>setSelH(null)}>Fechar</UIButton></React.Fragment>}>
    {selH&&<div style={{display:"flex",flexDirection:"column",gap:22}}>
      <div className="row" style={{gap:8}}><UIPill tone="success" dot>Fechado</UIPill><UIPill>{selH.pessoas} pessoas</UIPill></div>
      <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:16}}>
        {[["Fechado a",selH.fecho],["Pessoas",selH.pessoas],["Total bruto",eurK(selH.bruto)],["Líquido pago",eurK(selH.liquido)]].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 className="muted" style={{fontSize:"var(--ui-fs-sm)"}}>Recibos e guias deste mês estão arquivados nos Docs da empresa.</div>
    </div>}
  </UIDrawer>
  </React.Fragment>;
};
