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

const RC_STAGES=[
  {id:"novo",label:"Novos",tone:"neutral"},
  {id:"triagem",label:"Em triagem",tone:"info"},
  {id:"entrevista",label:"Entrevista",tone:"accent"},
  {id:"proposta",label:"Proposta",tone:"warning"},
  {id:"contratado",label:"Contratado",tone:"success"},
];
const RC_JOBS=[
  {id:"j1",t:"Engenheiro de QA",dept:"Engenharia",loc:"Porto · Híbrido",type:"Sem termo",open:"14 jul",owner:"Rui Pinto",state:"Aberta",cands:14},
  {id:"j2",t:"Designer de produto",dept:"Produto",loc:"Remoto",type:"Sem termo",open:"02 jul",owner:"Zain Franci",state:"Aberta",cands:9},
  {id:"j3",t:"Analista de dados",dept:"Dados",loc:"Porto · Presencial",type:"Termo certo",open:"21 jul",owner:"Sofia Melo",state:"Aberta",cands:6},
  {id:"j4",t:"Técnico de recrutamento",dept:"Pessoas",loc:"Porto · Híbrido",type:"Sem termo",open:"28 jun",owner:"Hugo Montenegro",state:"Em pausa",cands:3},
];
const RC_CANDS=[
  {id:1,n:"Marta Nogueira",job:"j1",st:"entrevista",exp:"6 anos · Critical Techworks",src:"LinkedIn",when:"há 2 dias",rate:4,tags:["Automação","Cypress"],next:"Entrevista técnica · 28 jul 10:00",notes:[["Hugo Montenegro","Boa base de automação, encaixa na equipa do Rui.","23 jul"]]},
  {id:2,n:"André Salgado",job:"j1",st:"triagem",exp:"3 anos · Farfetch",src:"Candidatura espontânea",when:"há 1 dia",rate:3,tags:["Manual","API"],next:null,notes:[]},
  {id:3,n:"Inês Peixoto",job:"j1",st:"novo",exp:"8 anos · Bosch",src:"Referência interna",when:"há 4 h",rate:0,tags:["Automação","Liderança"],next:null,notes:[["Rui Pinto","Referenciada pelo João. Ver com prioridade.","25 jul"]]},
  {id:4,n:"Bruno Vaz",job:"j2",st:"proposta",exp:"7 anos · Talkdesk",src:"LinkedIn",when:"há 5 dias",rate:5,tags:["Design system","B2B"],next:"Resposta à proposta · 29 jul",notes:[["Zain Franci","Portefólio muito forte. Proposta enviada a 24.","24 jul"]]},
  {id:5,n:"Cláudia Sousa",job:"j2",st:"entrevista",exp:"4 anos · Freelance",src:"Behance",when:"há 3 dias",rate:4,tags:["Mobile","Branding"],next:"Entrevista cultural · 30 jul 15:00",notes:[]},
  {id:6,n:"Hélder Mota",job:"j3",st:"triagem",exp:"2 anos · NOS",src:"LinkedIn",when:"há 2 dias",rate:3,tags:["SQL","Python"],next:null,notes:[]},
  {id:7,n:"Rita Amorim",job:"j3",st:"novo",exp:"5 anos · Sonae",src:"Portal de emprego",when:"há 6 h",rate:0,tags:["BI","Power BI"],next:null,notes:[]},
  {id:8,n:"Tiago Ferraz",job:"j1",st:"contratado",exp:"5 anos · Feedzai",src:"LinkedIn",when:"há 2 semanas",rate:5,tags:["Automação"],next:"Admissão a 01 set",notes:[["Hugo Montenegro","Aceitou a proposta. Onboarding agendado.","22 jul"]]},
];
const RC_INTERVIEWS=[
  {d:"28 jul",h:"10:00",who:"Marta Nogueira",job:"Engenheiro de QA",kind:"Técnica",panel:["Rui Pinto","Hugo Montenegro"]},
  {d:"29 jul",h:"14:30",who:"Hélder Mota",job:"Analista de dados",kind:"Triagem",panel:["Sofia Melo"]},
  {d:"30 jul",h:"15:00",who:"Cláudia Sousa",job:"Designer de produto",kind:"Cultural",panel:["Zain Franci","Hugo Montenegro"]},
];

function RcStars({n,onRate}){
  return <span className="row" style={{gap:2}}>{[1,2,3,4,5].map(i=>
    <span key={i} onClick={onRate?e=>{e.stopPropagation();onRate(i);}:undefined} style={{cursor:onRate?"pointer":"default",color:i<=n?"var(--ui-warning)":"var(--ui-border-2)",lineHeight:1}}>
      <svg width="14" height="14" viewBox="0 0 24 24" fill={i<=n?"currentColor":"none"} stroke="currentColor" strokeWidth="1.6"><path d="m12 3 2.9 5.9 6.5.9-4.7 4.6 1.1 6.5L12 17.8 6.2 20.9l1.1-6.5-4.7-4.6 6.5-.9z"/></svg>
    </span>)}</span>;
}

S.recruiting=()=>{
  const [tab,setTab]=React.useState("pipeline");
  const [job,setJob]=React.useState("all");
  const [cands,setCands]=React.useState(RC_CANDS);
  const [jobs,setJobs]=React.useState(RC_JOBS);
  const [sel,setSel]=React.useState(null);
  const [novaVaga,setNovaVaga]=React.useState(false);
  const [nv,setNv]=React.useState({t:"",dept:"Engenharia",loc:"",type:"Sem termo"});
  const [drag,setDrag]=React.useState(null);const [over,setOver]=React.useState(null);

  const jobName=id=>{const j=jobs.find(x=>x.id===id);return j?j.t:"—";};
  const list=cands.filter(c=>job==="all"||c.job===job);
  const byStage=id=>list.filter(c=>c.st===id);
  const cur=sel?cands.find(c=>c.id===sel):null;
  const move=(c,st)=>setCands(cs=>cs.map(x=>x.id===c.id?{...x,st}:x));
  const rate=(c,n)=>setCands(cs=>cs.map(x=>x.id===c.id?{...x,rate:n}:x));
  const criarVaga=()=>{if(!nv.t.trim())return;setJobs(j=>[{id:"j"+Date.now(),t:nv.t.trim(),dept:nv.dept,loc:nv.loc||"Porto · Híbrido",type:nv.type,open:"25 jul",owner:"Hugo Montenegro",state:"Aberta",cands:0},...j]);setNv({t:"",dept:"Engenharia",loc:"",type:"Sem termo"});setNovaVaga(false);};

  const abertas=jobs.filter(j=>j.state==="Aberta").length;
  const emEntrevista=cands.filter(c=>c.st==="entrevista").length;

  return <React.Fragment>
  <Head scoped title="Recrutamento" desc={abertas+" vagas abertas · "+cands.length+" candidatos no processo"}
    actions={<UIButton icon={<I d={P.plus} size={16}/>} onClick={()=>setNovaVaga(true)}>Nova vaga</UIButton>}/>

  <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)",gap:16,flexWrap:"wrap"}}>
      <UITabs value={tab} onChange={setTab} items={[{value:"pipeline",label:"Pipeline"},{value:"vagas",label:"Vagas"},{value:"entrevistas",label:"Entrevistas"}]}/>
      <div className="spring"/>
      <span className="row" style={{gap:16,fontSize:"var(--ui-fs-sm)",color:"var(--ui-text-2)"}}>
        <span><strong style={{color:"var(--ui-text)"}}>{emEntrevista}</strong> em entrevista</span>
        <span style={{width:1,height:14,background:"var(--ui-border)"}}/>
        <span>tempo médio <strong style={{color:"var(--ui-text)"}}>34 d</strong></span>
      </span>
      {tab==="pipeline"&&<div style={{width:230}}>
        <UISelect value={job} onChange={e=>setJob(e.target.value)} options={[{value:"all",label:"Todas as vagas"},...jobs.map(j=>({value:j.id,label:j.t}))]}/>
      </div>}
    </div>

    {tab==="pipeline"&&<div style={{flex:1,minHeight:0,display:"flex"}}>
      <UIKanban
        columns={RC_STAGES.map(st=>({id:st.id,name:st.label,color:st.tone==="success"?"var(--ui-success)":st.tone==="warning"?"var(--ui-warning)":st.tone==="info"?"var(--ui-info)":st.tone==="accent"?"var(--ui-accent)":undefined}))}
        items={list.map(c=>({...c,column:c.st}))}
        onItemsChange={next=>setCands(cs=>cs.map(x=>{const n=next.find(y=>y.id===x.id);return n?{...x,st:n.column}:x;}))}
        onItemClick={c=>setSel(c.id)}
        style={{flex:1,minWidth:0}}
        renderCard={c=><React.Fragment>
          <div className="row" style={{gap:12,marginBottom:8}}>
            <UIAvatar name={c.n} size="sm"/>
            <div style={{flex:1,minWidth:0}}>
              <div style={{fontWeight:600,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>{c.n}</div>
              <div className="muted" style={{fontSize:"var(--ui-fs-xs)",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>{jobName(c.job)}</div>
            </div>
          </div>
          <div className="muted" style={{fontSize:"var(--ui-fs-sm)",marginBottom:8,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>{c.exp}</div>
          <div className="row" style={{justifyContent:"space-between",gap:8,flexWrap:"wrap"}}>
            <RcStars n={c.rate}/>
            <span className="muted" style={{fontSize:"var(--ui-fs-xs)"}}>{c.when}</span>
          </div>
        </React.Fragment>}/>
    </div>}

    {tab==="vagas"&&<div style={{flex:1,minHeight:0,overflow:"auto",padding:"12px 16px 16px"}}>
      <UIDataTable columns={[
        {key:"t",label:"Vaga",render:v=><span style={{fontWeight:600}}>{v}</span>},
        {key:"dept",label:"Departamento"},
        {key:"loc",label:"Local"},
        {key:"type",label:"Contrato"},
        {key:"owner",label:"Responsável",render:v=><span className="row" style={{gap:8}}>{AV(v,"xs")}<span style={{fontSize:"var(--ui-fs-sm)"}}>{v}</span></span>},
        {key:"cands",label:"Candidatos",render:(v,r)=><span style={{fontVariantNumeric:"tabular-nums"}}>{cands.filter(c=>c.job===r.id).length||v}</span>},
        {key:"state",label:"Estado",align:"right",render:v=><UIPill tone={v==="Aberta"?"success":"neutral"} dot>{v}</UIPill>}]}
        rows={jobs} onRowClick={r=>{setJob(r.id);setTab("pipeline");}}/>
    </div>}

    {tab==="entrevistas"&&<div style={{flex:1,minHeight:0,overflow:"auto",padding:"12px 16px 16px"}}>
      {UIDataTable
        ? <UIDataTable rows={RC_INTERVIEWS.map((it,i)=>({...it,id:i}))} rowKey="id" searchable pageSize={10}
            onRowClick={r=>{const c=cands.find(x=>x.n===r.who);if(c)setSel(c.id);}}
            searchPlaceholder="Pesquisar entrevistas…"
            emptyState={<UIEmptyState title="Sem entrevistas marcadas" description="As entrevistas agendadas aparecem aqui e no calendário."/>}
            columns={[
              {key:"d",label:"Quando",sortable:true,render:(v,r)=><span style={{fontVariantNumeric:"tabular-nums"}}>{v} · {r.h}</span>},
              {key:"who",label:"Candidato",sortable:true,render:v=><span className="row" style={{gap:12,minWidth:0}}>{AV(v,"xs")}<span style={{fontWeight:600,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>{v}</span></span>},
              {key:"job",label:"Vaga",sortable:true},
              {key:"kind",label:"Tipo",render:v=><UIPill>{v}</UIPill>},
              {key:"panel",label:"Painel",align:"right",render:v=><span className="row" style={{justifyContent:"flex-end"}}><UIAvatarGroup size="xs" max={3} avatars={v.map(name=>({name}))}/></span>},
            ]}/>
        : <UIEmptyState title="Sem entrevistas marcadas" description="As entrevistas agendadas aparecem aqui e no calendário."/>}
    </div>}
  </UICard>

  <UIDrawer open={!!cur} width={480} onClose={()=>setSel(null)}
    header={cur&&<span className="row" style={{gap:12}}><UIAvatar name={cur.n} size="sm"/><span><span style={{fontWeight:600,display:"block"}}>{cur.n}</span><span className="muted" style={{fontSize:"var(--ui-fs-sm)"}}>{jobName(cur.job)}</span></span></span>}
    footer={cur&&<React.Fragment><div className="spring"/><UIButton variant="ghost" onClick={()=>setSel(null)}>Fechar</UIButton><UIButton>Agendar entrevista</UIButton></React.Fragment>}>
    {cur&&<div style={{display:"flex",flexDirection:"column",gap:24}}>
      <div className="row" style={{gap:8,flexWrap:"wrap"}}>
        <UIPill tone={RC_STAGES.find(s=>s.id===cur.st).tone} dot>{RC_STAGES.find(s=>s.id===cur.st).label}</UIPill>
        {cur.tags.map(t=><UIPill key={t}>{t}</UIPill>)}
      </div>

      {cur.next&&<div className="row" style={{gap:12,padding:"12px 16px",borderRadius:"var(--ui-r-md)",background:"var(--ui-surface-2)",fontSize:"var(--ui-fs-sm)"}}>
        <I d={P.cal} size={16} c="var(--ui-text-3)"/><span style={{fontWeight:500}}>{cur.next}</span></div>}

      <div style={{display:"grid",gridTemplateColumns:"116px minmax(0,1fr)",gap:"12px 16px",alignItems:"center",fontSize:"var(--ui-fs-sm)"}}>
        <span className="muted">Experiência</span><span>{cur.exp}</span>
        <span className="muted">Origem</span><span>{cur.src}</span>
        <span className="muted">Candidatura</span><span>{cur.when}</span>
        <span className="muted">Avaliação</span><RcStars n={cur.rate} onRate={n=>rate(cur,n)}/>
      </div>

      <div>
        <div style={{fontWeight:600,fontSize:"var(--ui-fs-sm)",marginBottom:8}}>Documentos</div>
        {["CV_"+cur.n.split(" ")[0]+".pdf","Carta de motivação.pdf"].map(f=>
          <div key={f} className="row" style={{gap:12,padding:"8px 0",borderBottom:"1px solid var(--ui-divider)"}}>
            <I d={P.doc} size={16} c="var(--ui-text-3)"/><span style={{flex:1,fontSize:"var(--ui-fs-sm)"}}>{f}</span>
            <UIButton size="sm" variant="ghost">Abrir</UIButton>
          </div>)}
      </div>

      <div>
        <div style={{fontWeight:600,fontSize:"var(--ui-fs-sm)",marginBottom:8}}>Notas do painel</div>
        {cur.notes.length?cur.notes.map(([who,txt,when],i)=>
          <div key={i} className="row" style={{gap:12,alignItems:"flex-start",padding:"8px 0"}}>
            <UIAvatar name={who} size="xs"/>
            <div style={{flex:1,minWidth:0,fontSize:"var(--ui-fs-sm)"}}><span style={{fontWeight:600}}>{who}</span> <span className="muted">· {when}</span><div style={{marginTop:2}}>{txt}</div></div>
          </div>):<div className="muted" style={{fontSize:"var(--ui-fs-sm)"}}>Sem notas ainda.</div>}
        <div style={{marginTop:12}}><UIInput placeholder="Adicionar uma nota…"/></div>
      </div>

      <div>
        <div className="muted" style={{fontSize:"var(--ui-fs-sm)",marginBottom:8}}>Mover para</div>
        <div className="row" style={{gap:8,flexWrap:"wrap"}}>{RC_STAGES.filter(s=>s.id!==cur.st).map(s=>
          <UIButton key={s.id} size="sm" variant="outline" onClick={()=>move(cur,s.id)}>{s.label}</UIButton>)}</div>
      </div>
    </div>}
  </UIDrawer>

  <UIModal open={novaVaga} onClose={()=>setNovaVaga(false)} title="Nova vaga" width={560}
    footer={<div className="row" style={{gap:8}}><span className="muted" style={{fontSize:"var(--ui-fs-sm)"}}>Publica no portal interno e externo</span><div className="spring"/><UIButton variant="ghost" onClick={()=>setNovaVaga(false)}>Cancelar</UIButton><UIButton onClick={criarVaga}>Abrir vaga</UIButton></div>}>
    <div style={{display:"flex",flexDirection:"column",gap:16}}>
      <UIInput label="Título da vaga" placeholder="Ex.: Engenheiro de dados" value={nv.t} onChange={e=>setNv({...nv,t:e.target.value})}/>
      <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:16}}>
        <UISelect label="Departamento" value={nv.dept} onChange={e=>setNv({...nv,dept:e.target.value})} options={["Engenharia","Produto","Pessoas","Comercial","Dados"]}/>
        <UISelect label="Tipo de contrato" value={nv.type} onChange={e=>setNv({...nv,type:e.target.value})} options={["Sem termo","Termo certo","Estágio","Prestação de serviços"]}/>
        <UIInput label="Local" placeholder="Porto · Híbrido" value={nv.loc} onChange={e=>setNv({...nv,loc:e.target.value})}/>
        <UISelect label="Responsável" options={PEOPLE}/>
      </div>
      <UIInput label="Descrição" placeholder="Missão, responsabilidades e requisitos"/>
      <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:16}}>
        <UIInput label="Banda salarial" placeholder="Ex.: 32 000 - 40 000 €"/>
        <UIInput label="Vagas" placeholder="1"/>
      </div>
      <UIToggle label="Publicar no portal de carreiras" defaultChecked/>
    </div>
  </UIModal>
  </React.Fragment>;
};