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,UIDrawer,UIDataTable,UIEmptyState,UIProgress,UICheckbox}=NS;

const CP_SS=[
  {id:1,who:"Inês Peixoto",tipo:"Admissão",quando:"01 set 2026",prazo:"até 31 ago",estado:"Pendente",nota:"Contratação em curso (QA). Comunicar antes do início de funções."},
  {id:2,who:"Tiago Ferraz",tipo:"Admissão",quando:"01 set 2026",prazo:"até 31 ago",estado:"Pendente",nota:"Proposta aceite. Comunicar antes do início de funções."},
  {id:3,who:"João Alves",tipo:"Admissão",quando:"02 mai 2026",prazo:"comunicada a 29 abr",estado:"Comunicada",nota:"Dentro do prazo legal."},
  {id:4,who:"Ana Reis",tipo:"Admissão",quando:"05 jan 2026",prazo:"comunicada a 02 jan",estado:"Comunicada",nota:"Dentro do prazo legal."},
  {id:5,who:"Bruno Costa",tipo:"Cessação",quando:"30 jun 2026",prazo:"comunicada a 30 jun",estado:"Comunicada",nota:"Fim de contrato a termo."},
];
const CP_MED=[
  {id:1,who:"Hugo Montenegro",tipo:"Exame periódico",validade:"30 set 2026",estado:"Válido"},
  {id:2,who:"Rui Pinto",tipo:"Exame periódico",validade:"12 ago 2026",estado:"A expirar"},
  {id:3,who:"Carla Dias",tipo:"Exame periódico",validade:"04 jul 2026",estado:"Expirado"},
  {id:4,who:"Sofia Melo",tipo:"Exame de admissão",validade:"18 fev 2028",estado:"Válido"},
  {id:5,who:"Zain Franci",tipo:"Exame periódico",validade:"22 nov 2026",estado:"Válido"},
  {id:6,who:"Tomás Jervell",tipo:"Exame periódico",validade:"09 ago 2026",estado:"A expirar"},
];
const CP_RU=[
  ["Anexo 0 · Entidade e estabelecimentos",true],
  ["Anexo A · Quadro de pessoal",true],
  ["Anexo B · Fluxo de entradas e saídas",true],
  ["Anexo C · Formação profissional",false],
  ["Anexo D · Segurança e saúde no trabalho",false],
  ["Anexo E · Greves",false],
];

S["admin-compliance"]=()=>{
  const [tab,setTab]=React.useState("ss");
  const [ss,setSs]=React.useState(CP_SS);
  const [med,setMed]=React.useState(CP_MED);
  const [selSS,setSelSS]=React.useState(null);
  const [selMed,setSelMed]=React.useState(null);
  const [agendar,setAgendar]=React.useState(null);
  const [ru,setRu]=React.useState(CP_RU);
  const [aviso,setAviso]=React.useState(null);
  React.useEffect(()=>{if(!aviso)return;const t=setTimeout(()=>setAviso(null),3200);return ()=>clearTimeout(t);},[aviso]);

  const pendSS=ss.filter(r=>r.estado==="Pendente").length;
  const medProb=med.filter(r=>r.estado!=="Válido").length;
  const ruFeitos=ru.filter(([,ok])=>ok).length;
  const comunicar=(r,e)=>{e&&e.stopPropagation();setSs(rs=>rs.map(x=>x.id===r.id?{...x,estado:"Comunicada",prazo:"comunicada hoje",nota:"Comunicação registada na Segurança Social Direta."}:x));setAviso("Admissão de "+r.who+" comunicada à Segurança Social.");};
  const medTone=e=>e==="Válido"?"success":e==="A expirar"?"warning":"danger";

  return <React.Fragment>
  <Head scoped title="Conformidade" desc={"Obrigações legais de trabalho · "+(pendSS+medProb)+" itens a precisar de ação"}
    actions={<UIButton variant="outline" icon={<I d={P.exp} size={16}/>} onClick={()=>setAviso("Resumo de conformidade exportado.")}>Exportar resumo</UIButton>}/>

  {aviso&&<UIBanner tone="success" title="Feito" style={{marginBottom:16}}>{aviso}</UIBanner>}

  <div className="grid g3" style={{marginBottom:16}}>
    <UICard><UIStat label="Segurança Social" value={pendSS?pendSS+" por comunicar":"Em dia"} sublabel="admissões e cessações"/></UICard>
    <UICard><UIStat label="Medicina do trabalho" value={medProb?medProb+" a tratar":"Em dia"} sublabel="exames a expirar ou expirados"/></UICard>
    <UICard><UIStat label="Relatório Único" value={ruFeitos+" de "+ru.length} sublabel="anexos preparados · prazo 15 abr 2027"/></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:"ss",label:"Segurança Social"},{value:"med",label:"Medicina do trabalho"},{value:"tempos",label:"Registo de tempos"},{value:"ru",label:"Relatório Único"}]}/>
    </div>

    {tab==="ss"&&<div style={{flex:1,minHeight:0,overflow:"auto",padding:"12px 16px 16px"}}>
      <UIDataTable rows={ss} rowKey="id" pageSize={10} onRowClick={r=>setSelSS(r)}
        columns={[
          {key:"who",label:"Pessoa",render:v=><span className="row" style={{gap:10,fontWeight:600}}>{AV(v,"xs")} {v}</span>},
          {key:"tipo",label:"Tipo",render:v=><UIPill tone={v==="Admissão"?"info":"neutral"}>{v}</UIPill>},
          {key:"quando",label:"Início/fim"},
          {key:"prazo",label:"Prazo",render:v=><span className="muted" style={{fontSize:"var(--ui-fs-sm)"}}>{v}</span>},
          {key:"estado",label:"Estado",align:"right",render:v=><UIPill tone={v==="Comunicada"?"success":"warning"} dot>{v}</UIPill>},
        ]}
        rowActions={r=>r.estado==="Pendente"&&<span onClick={e=>e.stopPropagation()}><UIButton size="sm" onClick={e=>comunicar(r,e)}>Comunicar</UIButton></span>}/>
      <div className="muted" style={{fontSize:"var(--ui-fs-sm)",marginTop:12}}>A admissão tem de ser comunicada à Segurança Social antes do início de funções; a cessação até ao fim do prazo de entrega da declaração de remunerações.</div>
    </div>}

    {tab==="med"&&<div style={{flex:1,minHeight:0,overflow:"auto",padding:"12px 16px 16px"}}>
      {medProb>0&&<UIBanner tone="warning" title={medProb+(medProb===1?" exame a precisar de marcação":" exames a precisar de marcação")} style={{marginBottom:12}}>Os exames de medicina do trabalho são obrigatórios e a validade está a chegar ao fim para algumas pessoas.</UIBanner>}
      <UIDataTable rows={med} rowKey="id" pageSize={10} onRowClick={r=>setSelMed(r)}
        columns={[
          {key:"who",label:"Pessoa",render:v=><span className="row" style={{gap:10,fontWeight:600}}>{AV(v,"xs")} {v}</span>},
          {key:"tipo",label:"Exame"},
          {key:"validade",label:"Válido até"},
          {key:"estado",label:"Estado",align:"right",render:v=><UIPill tone={medTone(v)} dot>{v}</UIPill>},
        ]}
        rowActions={r=>r.estado!=="Válido"&&<span onClick={e=>e.stopPropagation()}><UIButton size="sm" variant="outline" onClick={e=>{e.stopPropagation();setAgendar(r);}}>Agendar</UIButton></span>}/>
    </div>}

    {tab==="tempos"&&<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:6}}>Registo de tempos de trabalho</div>
          <div className="muted" style={{fontSize:"var(--ui-fs-sm)",lineHeight:1.6,marginBottom:14}}>O registo de ponto de todos os colaboradores é conservado durante 5 anos e tem de ficar acessível para consulta imediata pela Autoridade para as Condições do Trabalho (ACT).</div>
          <div style={{display:"flex",flexDirection:"column",gap:8,fontSize:"var(--ui-fs-sm)"}}>
            {[["Registos de julho","10 pessoas · completos"],["Trabalho suplementar","registado e comunicado ao trabalhador"],["Descanso compensatório","sem pendentes"]].map(([l,v])=>
              <div key={l} className="row" style={{gap:10}}><I d={["m5 12 4.5 4.5L19 7"]} size={15} c="var(--ui-success)"/><span style={{fontWeight:500}}>{l}</span><span className="muted">{v}</span></div>)}
          </div>
        </UICard>
        <UICard elevation={0}>
          <div style={{fontWeight:600,marginBottom:6}}>Exportar para inspeção</div>
          <div className="muted" style={{fontSize:"var(--ui-fs-sm)",lineHeight:1.6,marginBottom:14}}>Gera o mapa do registo de tempos no formato pedido pela ACT, com jornada, intervalos e trabalho suplementar por pessoa.</div>
          <div style={{display:"flex",flexDirection:"column",gap:12}}>
            <UISelect label="Período" options={["Julho 2026","Junho 2026","Último trimestre","Ano 2026"]}/>
            <UIButton icon={<I d={P.exp} size={16}/>} onClick={()=>setAviso("Registo de tempos exportado. O ficheiro foi enviado para o teu email.")}>Exportar registo (ACT)</UIButton>
          </div>
        </UICard>
      </div>
    </div>}

    {tab==="ru"&&<div style={{flex:1,minHeight:0,overflow:"auto",padding:16,display:"flex",flexDirection:"column",gap:16}}>
      <UICard elevation={0}>
        <div className="row" style={{gap:12,flexWrap:"wrap",marginBottom:8}}>
          <div style={{flex:1,minWidth:220}}>
            <div style={{fontWeight:600}}>Relatório Único · ano de referência 2026</div>
            <div className="muted" style={{fontSize:"var(--ui-fs-sm)",marginTop:3}}>Entrega anual obrigatória. Prazo: 15 de abril de 2027.</div>
          </div>
          <UIPill tone={ruFeitos===ru.length?"success":"warning"} dot>{ruFeitos===ru.length?"Pronto a entregar":ruFeitos+" de "+ru.length+" anexos"}</UIPill>
        </div>
        <UIProgress value={ruFeitos} max={ru.length} size="sm" tone={ruFeitos===ru.length?"success":"accent"}/>
        <div style={{marginTop:16,display:"flex",flexDirection:"column"}}>
          {ru.map(([n,ok],i)=><div key={n} className="row" style={{gap:12,padding:"10px 0",borderBottom:i<ru.length-1?"1px solid var(--ui-divider)":"none"}}>
            <UICheckbox checked={ok} onChange={()=>setRu(rs=>rs.map((r,j)=>j===i?[r[0],!r[1]]:r))} label={n}/>
            <div className="spring"/>
            <span className="muted" style={{fontSize:"var(--ui-fs-sm)"}}>{ok?"preparado":"por preparar"}</span>
          </div>)}
        </div>
        <div className="row" style={{marginTop:16}}>
          <div className="spring"/>
          <UIButton disabled={ruFeitos<ru.length} onClick={()=>setAviso("Relatório Único marcado como pronto. Entrega registada no portal.")}>Preparar entrega</UIButton>
        </div>
      </UICard>
    </div>}
  </UICard>

  <UIDrawer open={!!selSS} width={420} onClose={()=>setSelSS(null)}
    header={selSS&&<span className="row" style={{gap:12}}>{AV(selSS.who)}<span><span style={{fontWeight:600,display:"block"}}>{selSS.who}</span><span className="muted" style={{fontSize:"var(--ui-fs-sm)"}}>{selSS.tipo}</span></span></span>}
    footer={selSS&&<React.Fragment>
      {selSS.estado==="Pendente"&&<UIButton onClick={()=>{comunicar(selSS);setSelSS(null);}}>Comunicar agora</UIButton>}
      <div className="spring"/><UIButton variant="ghost" onClick={()=>setSelSS(null)}>Fechar</UIButton></React.Fragment>}>
    {selSS&&<div style={{display:"flex",flexDirection:"column",gap:22}}>
      <div className="row" style={{gap:8}}><UIPill tone={selSS.estado==="Comunicada"?"success":"warning"} dot>{selSS.estado}</UIPill><UIPill tone={selSS.tipo==="Admissão"?"info":"neutral"}>{selSS.tipo}</UIPill></div>
      <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:16}}>
        {[["Início/fim",selSS.quando],["Prazo",selSS.prazo],["Entidade","Segurança Social"],["Empresa","Xcope AI"]].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}}>{v}</div></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.info} size={16} c="var(--ui-text-3)"/><span>{selSS.nota}</span>
      </div>
    </div>}
  </UIDrawer>

  <UIDrawer open={!!selMed} width={400} onClose={()=>setSelMed(null)}
    header={selMed&&<span className="row" style={{gap:12}}>{AV(selMed.who)}<span><span style={{fontWeight:600,display:"block"}}>{selMed.who}</span><span className="muted" style={{fontSize:"var(--ui-fs-sm)"}}>{selMed.tipo}</span></span></span>}
    footer={selMed&&<React.Fragment>
      {selMed.estado!=="Válido"&&<UIButton onClick={()=>{setAgendar(selMed);setSelMed(null);}}>Agendar exame</UIButton>}
      <div className="spring"/><UIButton variant="ghost" onClick={()=>setSelMed(null)}>Fechar</UIButton></React.Fragment>}>
    {selMed&&<div style={{display:"flex",flexDirection:"column",gap:22}}>
      <div className="row" style={{gap:8}}><UIPill tone={medTone(selMed.estado)} dot>{selMed.estado}</UIPill><UIPill>{selMed.tipo}</UIPill></div>
      <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:16}}>
        {[["Válido até",selMed.validade],["Periodicidade","2 anos (menos de 50 anos)"],["Prestador","Serviço externo de SST"],["Último exame","registado na ficha clínica"]].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}}>{v}</div></div>)}
      </div>
      <div className="muted" style={{fontSize:"var(--ui-fs-sm)"}}>A ficha de aptidão fica disponível no perfil da pessoa depois do exame.</div>
    </div>}
  </UIDrawer>

  {agendar&&<UIModal open onClose={()=>setAgendar(null)} title={"Agendar exame · "+agendar.who} width={480}
    footer={<div className="row" style={{gap:8}}><div className="spring"/><UIButton variant="ghost" onClick={()=>setAgendar(null)}>Cancelar</UIButton>
      <UIButton onClick={()=>{setMed(ms=>ms.map(m=>m.id===agendar.id?{...m,estado:"Válido",validade:"agendado · 05 ago 2026"}:m));setAviso("Exame de "+agendar.who+" agendado para 5 de agosto, 09:30.");setAgendar(null);}}>Confirmar marcação</UIButton></div>}>
    <div style={{display:"flex",flexDirection:"column",gap:16}}>
      <UISelect label="Prestador" options={["Serviço externo de SST · Porto","Serviço externo de SST · Lisboa"]}/>
      <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:16}}>
        <UIInput label="Data" defaultValue="05/08/2026"/>
        <UIInput label="Hora" defaultValue="09:30"/>
      </div>
      <div className="muted" style={{fontSize:"var(--ui-fs-sm)"}}>A pessoa recebe o convite no calendário e a notificação por email.</div>
    </div>
  </UIModal>}
  </React.Fragment>;
};
