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

/* ============ TENANTS ============ */
const TN_ROWS=[
  {id:1,name:"Xcope AI",short:"XC",pais:"Portugal",pessoas:62,plano:"Empresa",state:"Ativo",cor:"#f27101",modulos:["Pessoas","Tempo","Despesas","Recrutamento"]},
  {id:2,name:"Xcope Produto",short:"XP",pais:"Portugal",pessoas:38,plano:"Empresa",state:"Ativo",cor:"#2563eb",modulos:["Pessoas","Tempo"]},
  {id:3,name:"Norte Emirates FZ",short:"NE",pais:"Emirados Árabes Unidos",pessoas:14,plano:"Equipa",state:"Ativo",cor:"#0f766e",modulos:["Pessoas"]},
  {id:4,name:"Norte Brasil Ltda.",short:"NB",pais:"Brasil",pessoas:9,plano:"Equipa",state:"Em implementação",cor:"#7c3aed",modulos:["Pessoas"]},
];
const MODULOS=["Pessoas","Tempo","Despesas","Recrutamento","Formação","Avaliações","Tickets"];

S["admin-tenants"]=()=>{
  const [rows,setRows]=React.useState(TN_ROWS);
  const [sel,setSel]=React.useState(null);
  const [nova,setNova]=React.useState(false);
  const [f,setF]=React.useState({name:"",pais:"Portugal",plano:"Equipa"});
  const cur=sel?rows.find(r=>r.id===sel):null;
  const criar=()=>{if(!f.name.trim())return;
    setRows(rs=>[...rs,{id:Date.now(),name:f.name.trim(),short:f.name.trim().slice(0,2).toUpperCase(),pais:f.pais,pessoas:0,plano:f.plano,state:"Em implementação",cor:"#66727a",modulos:["Pessoas"]}]);
    setF({name:"",pais:"Portugal",plano:"Equipa"});setNova(false);};
  const toggleMod=(r,m)=>setRows(rs=>rs.map(x=>x.id===r.id?{...x,modulos:x.modulos.includes(m)?x.modulos.filter(y=>y!==m):[...x.modulos,m]}:x));

  return <React.Fragment>
  <Head title="Empresas do grupo" desc={rows.length+" empresas · "+rows.reduce((n,r)=>n+r.pessoas,0)+" pessoas no total"}
    actions={<UIButton icon={<I d={P.plus} size={16}/>} onClick={()=>setNova(true)}>Nova empresa</UIButton>}/>

  <div className="grid g4" style={{marginBottom:16}}>
    <UICard><UIStat label="Empresas ativas" value={String(rows.filter(r=>r.state==="Ativo").length)} sublabel={rows.filter(r=>r.state!=="Ativo").length+" em implementação"}/></UICard>
    <UICard><UIStat label="Pessoas no grupo" value={String(rows.reduce((n,r)=>n+r.pessoas,0))} sublabel="todas as empresas"/></UICard>
    <UICard><UIStat label="Países" value={String(new Set(rows.map(r=>r.pais)).size)} sublabel="jurisdições distintas"/></UICard>
    <UICard><UIStat size="h1" label="Custo de licenças" value="2 840,00 €" sublabel="por mês"/></UICard>
  </div>

  <UICard style={{padding:0,overflow:"hidden",flex:1,minHeight:0,display:"flex",flexDirection:"column"}}>
    <div style={{flex:1,minHeight:0,overflow:"auto",padding:"12px 16px 16px"}}>
      <UIDataTable rows={rows} rowKey="id" searchable pageSize={10} onRowClick={r=>setSel(r.id)}
        searchPlaceholder="Pesquisar empresas…"
        columns={[
          {key:"name",label:"Empresa",sortable:true,render:(v,r)=><span className="row" style={{gap:12,minWidth:0}}>
            <span style={{width:30,height:30,borderRadius:8,background:r.cor,color:"#fff",display:"grid",placeItems:"center",fontWeight:600,fontSize:12,flexShrink:0}}>{r.short}</span>
            <span style={{fontWeight:600,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>{v}</span></span>},
          {key:"pais",label:"País",sortable:true},
          {key:"pessoas",label:"Pessoas",sortable:true,align:"right",render:v=><span style={{fontVariantNumeric:"tabular-nums"}}>{v}</span>},
          {key:"modulos",label:"Módulos",render:v=><span className="row" style={{gap:6,flexWrap:"wrap"}}>{v.slice(0,2).map(m=><UIPill key={m}>{m}</UIPill>)}{v.length>2&&<UIPill>+{v.length-2}</UIPill>}</span>},
          {key:"plano",label:"Plano",sortable:true,render:v=><UIPill>{v}</UIPill>},
          {key:"state",label:"Estado",align:"right",render:v=><UIPill tone={v==="Ativo"?"success":"warning"} dot>{v}</UIPill>},
        ]}/>
    </div>
  </UICard>

  <UIDrawer open={!!cur} width={460} onClose={()=>setSel(null)}
    header={cur&&<span className="row" style={{gap:12}}>
      <span style={{width:30,height:30,borderRadius:8,background:cur.cor,color:"#fff",display:"grid",placeItems:"center",fontWeight:600,fontSize:12}}>{cur.short}</span>
      <span style={{fontWeight:600}}>{cur.name}</span></span>}
    footer={cur&&<React.Fragment><div className="spring"/><UIButton variant="ghost" onClick={()=>setSel(null)}>Fechar</UIButton><UIButton>Entrar nesta empresa</UIButton></React.Fragment>}>
    {cur&&<div style={{display:"flex",flexDirection:"column",gap:24}}>
      <div style={{display:"grid",gridTemplateColumns:"116px minmax(0,1fr)",gap:"12px 16px",alignItems:"center",fontSize:"var(--ui-fs-sm)"}}>
        <span className="muted">País</span><span>{cur.pais}</span>
        <span className="muted">Pessoas</span><span style={{fontVariantNumeric:"tabular-nums"}}>{cur.pessoas}</span>
        <span className="muted">Plano</span><span><UIPill>{cur.plano}</UIPill></span>
        <span className="muted">Estado</span><span><UIPill tone={cur.state==="Ativo"?"success":"warning"} dot>{cur.state}</UIPill></span>
        <span className="muted">Cor de marca</span><span className="row" style={{gap:8}}><span style={{width:22,height:22,borderRadius:6,background:cur.cor}}/><span style={{fontVariantNumeric:"tabular-nums"}}>{cur.cor}</span></span>
      </div>
      <div>
        <div style={{fontWeight:600,fontSize:"var(--ui-fs-sm)",marginBottom:4}}>Módulos ativos</div>
        <div className="muted" style={{fontSize:"var(--ui-fs-sm)",marginBottom:10}}>Cada empresa liga só o que usa. A faturação segue os módulos ativos.</div>
        {MODULOS.map(m=><div key={m} className="row" style={{padding:"10px 0",borderBottom:"1px solid var(--ui-divider)",gap:12}}>
          <span style={{flex:1,fontSize:"var(--ui-fs-sm)"}}>{m}</span>
          <UIToggle checked={cur.modulos.includes(m)} onChange={()=>toggleMod(cur,m)}/>
        </div>)}
      </div>
    </div>}
  </UIDrawer>

  <UIModal open={nova} onClose={()=>setNova(false)} title="Nova empresa do grupo" width={520}
    footer={<div className="row" style={{gap:8}}><div className="spring"/><UIButton variant="ghost" onClick={()=>setNova(false)}>Cancelar</UIButton><UIButton onClick={criar}>Criar empresa</UIButton></div>}>
    <div style={{display:"flex",flexDirection:"column",gap:16}}>
      <UIInput label="Nome legal" placeholder="Ex.: Norte Colômbia S.A.S." value={f.name} onChange={e=>setF({...f,name:e.target.value})}/>
      <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:16}}>
        <UISelect label="País" value={f.pais} onChange={e=>setF({...f,pais:e.target.value})} options={["Portugal","Emirados Árabes Unidos","Brasil","Colômbia","México"]}/>
        <UISelect label="Plano" value={f.plano} onChange={e=>setF({...f,plano:e.target.value})} options={["Equipa","Empresa"]}/>
      </div>
      <UIToggle label="Copiar políticas da empresa atual" defaultChecked/>
    </div>
  </UIModal>
  </React.Fragment>;
};

/* ============ DOCUMENTOS DA EMPRESA ============ */
const CD_DOCS=[
  {id:1,name:"Manual de acolhimento 2026.pdf",cat:"Acolhimento",aud:"Toda a empresa",ver:"v4",up:"12 jan 2026",by:"Hugo Montenegro",req:false,lidos:58,total:62},
  {id:2,name:"Código de conduta.pdf",cat:"Políticas",aud:"Toda a empresa",ver:"v2",up:"03 mar 2026",by:"Tomás Machado",req:true,lidos:62,total:62},
  {id:3,name:"Política de despesas.pdf",cat:"Políticas",aud:"Toda a empresa",ver:"v3",up:"18 mai 2026",by:"Hugo Montenegro",req:true,lidos:47,total:62},
  {id:4,name:"Política de proteção de dados.pdf",cat:"Políticas",aud:"Toda a empresa",ver:"v1",up:"22 fev 2026",by:"Carla Dias",req:true,lidos:61,total:62},
  {id:5,name:"Plano de formação Pessoas.pdf",cat:"Formação",aud:"Departamento Pessoas",ver:"v1",up:"04 mai 2026",by:"Carla Dias",req:false,lidos:8,total:9},
  {id:6,name:"Tabela salarial por categoria.pdf",cat:"Compensação",aud:"Direção",ver:"v2",up:"28 fev 2026",by:"Tomás Machado",req:false,lidos:5,total:5},
  {id:7,name:"Calendário de feriados 2026.pdf",cat:"Tempo",aud:"Toda a empresa",ver:"v1",up:"02 jan 2026",by:"Hugo Montenegro",req:false,lidos:60,total:62},
];

S["admin-company-documents"]=()=>{
  const [rows,setRows]=React.useState(CD_DOCS);
  const [tab,setTab]=React.useState("todos");
  const [sel,setSel]=React.useState(null);
  const [novo,setNovo]=React.useState(false);
  const [f,setF]=React.useState({name:"",cat:"Políticas",aud:"Toda a empresa",req:true});
  const cur=sel?rows.find(r=>r.id===sel):null;

  const list=rows.filter(r=>tab==="todos"?true:tab==="obrigatorios"?r.req:r.lidos<r.total);
  const porLer=rows.filter(r=>r.req&&r.lidos<r.total);
  const publicar=()=>{if(!f.name.trim())return;
    setRows(rs=>[{id:Date.now(),name:f.name.trim()+".pdf",cat:f.cat,aud:f.aud,ver:"v1",up:"27 jul 2026",by:"Hugo Montenegro",req:f.req,lidos:0,total:62},...rs]);
    setF({name:"",cat:"Políticas",aud:"Toda a empresa",req:true});setNovo(false);};

  return <React.Fragment>
  <Head scoped title="Documentos da empresa" desc={rows.length+" documentos · "+porLer.length+" com leitura por confirmar"}
    actions={<UIButton icon={<I d={P.plus} size={16}/>} onClick={()=>setNovo(true)}>Publicar documento</UIButton>}/>

  {porLer.length>0&&<UIBanner tone="warning" title="Leituras obrigatórias por confirmar" style={{marginBottom:16}}
    action={<UIButton size="sm" variant="outline" onClick={()=>setTab("pendentes")}>Ver quem falta</UIButton>}>
    {porLer.map(d=>d.name.replace(".pdf","")+" ("+(d.total-d.lidos)+" pessoas)").join(" · ")}
  </UIBanner>}

  <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:"todos",label:"Todos",count:rows.length},
        {value:"obrigatorios",label:"Leitura obrigatória",count:rows.filter(r=>r.req).length},
        {value:"pendentes",label:"Por confirmar",count:rows.filter(r=>r.lidos<r.total).length}]}/>
    </div>
    <div style={{flex:1,minHeight:0,overflow:"auto",padding:"12px 16px 16px"}}>
      <UIDataTable rows={list} rowKey="id" searchable pageSize={10} onRowClick={r=>setSel(r.id)}
        searchPlaceholder="Pesquisar documentos…"
        emptyState={<UIEmptyState title="Sem documentos" description="Não há documentos neste separador."/>}
        columns={[
          {key:"name",label:"Documento",sortable:true,render:(v,r)=><span className="row" style={{gap:12,minWidth:0}}>
            <I d={P.doc} size={17} c="var(--ui-text-3)"/>
            <span style={{minWidth:0}}>
              <span className="row" style={{gap:8,minWidth:0}}>
                <span style={{fontWeight:600,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>{v}</span>
                {r.req&&<UIPill tone="warning">Obrigatório</UIPill>}
              </span>
              <span className="muted" style={{fontSize:"var(--ui-fs-sm)"}}>{r.ver} · {r.up} · {r.by}</span>
            </span></span>},
          {key:"cat",label:"Categoria",sortable:true,render:v=><UIPill>{v}</UIPill>},
          {key:"aud",label:"Audiência",sortable:true},
          {key:"lidos",label:"Confirmações",sortable:true,render:(v,r)=><span className="row" style={{gap:12}}>
            <UIProgress value={v} max={r.total} size="sm" tone={v===r.total?"success":"accent"} style={{flex:1,minWidth:70}}/>
            <span style={{fontSize:"var(--ui-fs-sm)",fontVariantNumeric:"tabular-nums",width:52,textAlign:"right"}}>{v}/{r.total}</span></span>},
        ]}/>
    </div>
  </UICard>

  <UIDrawer open={!!cur} width={460} 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.ver}</span></span>}
    footer={cur&&<React.Fragment><div className="spring"/><UIButton variant="ghost" onClick={()=>setSel(null)}>Fechar</UIButton><UIButton>Descarregar</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)",lineHeight:1.25}}>{cur.name}</div>
        <div className="muted" style={{marginTop:6,fontSize:"var(--ui-fs-sm)"}}>Publicado a {cur.up} por {cur.by}</div>
      </div>
      <div style={{display:"grid",gridTemplateColumns:"116px minmax(0,1fr)",gap:"12px 16px",alignItems:"center",fontSize:"var(--ui-fs-sm)"}}>
        <span className="muted">Audiência</span><span>{cur.aud}</span>
        <span className="muted">Versão</span><span>{cur.ver}</span>
        <span className="muted">Leitura</span><span>{cur.req?<UIPill tone="warning">Obrigatória</UIPill>:<span className="muted">Opcional</span>}</span>
      </div>
      <div>
        <div className="row" style={{marginBottom:8}}><span style={{fontWeight:600,fontSize:"var(--ui-fs-sm)"}}>Confirmações de leitura</span><div className="spring"/>
          <span className="muted" style={{fontSize:"var(--ui-fs-sm)",fontVariantNumeric:"tabular-nums"}}>{cur.lidos} de {cur.total}</span></div>
        <UIProgress value={cur.lidos} max={cur.total} tone={cur.lidos===cur.total?"success":"accent"}/>
        {cur.lidos<cur.total&&<div style={{marginTop:12}}>
          <div className="muted" style={{fontSize:"var(--ui-fs-sm)",marginBottom:8}}>Ainda por confirmar</div>
          <div className="row" style={{gap:8,flexWrap:"wrap"}}>
            {PEOPLE.slice(0,Math.min(4,cur.total-cur.lidos)).map(n=><span key={n} className="row" style={{gap:6,background:"var(--ui-surface-2)",borderRadius:999,padding:"3px 10px 3px 3px"}}>{AV(n,"xs")}<span style={{fontSize:"var(--ui-fs-sm)"}}>{n}</span></span>)}
            {cur.total-cur.lidos>4&&<UIPill>+{cur.total-cur.lidos-4}</UIPill>}
          </div>
          <div style={{marginTop:12}}><UIButton size="sm" variant="outline">Enviar lembrete</UIButton></div>
        </div>}
      </div>
      <div>
        <div style={{fontWeight:600,fontSize:"var(--ui-fs-sm)",marginBottom:8}}>Histórico de versões</div>
        {[[cur.ver,cur.up,cur.by],["v"+(parseInt(cur.ver.slice(1))-1||1),"14 nov 2025","Hugo Montenegro"]].filter((x,i)=>i===0||parseInt(cur.ver.slice(1))>1).map(([v,d,w])=>
          <div key={v} className="row" style={{padding:"8px 0",borderBottom:"1px solid var(--ui-divider)",fontSize:"var(--ui-fs-sm)",gap:12}}>
            <UIPill>{v}</UIPill><span style={{flex:1}}>{w}</span><span className="muted">{d}</span></div>)}
      </div>
    </div>}
  </UIDrawer>

  <UIModal open={novo} onClose={()=>setNovo(false)} title="Publicar documento" width={520}
    footer={<div className="row" style={{gap:8}}><span className="muted" style={{fontSize:"var(--ui-fs-sm)"}}>Fica visível para a audiência escolhida</span><div className="spring"/><UIButton variant="ghost" onClick={()=>setNovo(false)}>Cancelar</UIButton><UIButton onClick={publicar}>Publicar</UIButton></div>}>
    <div style={{display:"flex",flexDirection:"column",gap:16}}>
      <UIInput label="Título" placeholder="Ex.: Política de teletrabalho" value={f.name} onChange={e=>setF({...f,name:e.target.value})}/>
      <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:16}}>
        <UISelect label="Categoria" value={f.cat} onChange={e=>setF({...f,cat:e.target.value})} options={["Políticas","Acolhimento","Formação","Compensação","Tempo"]}/>
        <UISelect label="Audiência" value={f.aud} onChange={e=>setF({...f,aud:e.target.value})} options={["Toda a empresa","Direção","Departamento Pessoas","Departamento Engenharia"]}/>
      </div>
      <div>
        <div style={{fontSize:"var(--ui-fs-sm)",fontWeight:500,marginBottom:8}}>Ficheiro</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 PDF para aqui ou <span style={{fontWeight:600,textDecoration:"underline",cursor:"pointer"}}>escolhe um ficheiro</span>
        </div>
      </div>
      <UIToggle label="Exigir confirmação de leitura" checked={f.req} onChange={e=>setF({...f,req:e.target.checked})}/>
    </div>
  </UIModal>
  </React.Fragment>;
};
