const {S,Head,I,P}=window.WFA;
const {UIButton,UIInput,UICard,UIAvatar,UIPill,UITabs,UIModal,UISelect,UIDataTable,UIEmptyState}=window.XCOPEDesignSystem_bf80f1;

const svFmt=d=>d.day+" "+["jan","fev","mar","abr","mai","jun","jul","ago","set","out","nov","dez"][d.m-1];
const svKey=d=>d.m*100+d.day;
const svQs=n=>n+(n===1?" pergunta":" perguntas");
const SV_GRID="minmax(200px,1fr) repeat(4,128px) 34px";
const SV_GRID_SM="minmax(180px,1fr) repeat(2,120px) 34px";
const SV_DOTS=["M12 5h.01","M12 12h.01","M12 19h.01"];
const SV_STATE={aberto:{label:"Por responder",tone:"warning"},curso:{label:"Começado",tone:"info"},feito:{label:"Respondido",tone:"success"},fechado:{label:"Encerrado",tone:"neutral"}};

const SV=[
  {id:1,s:"aberto",t:"Inquérito de clima organizacional",tipo:"Clima",prazo:{m:8,day:2},min:8,anon:true,by:"Pessoas",
   desc:"Ajuda-nos a perceber como está a equipa. As respostas são anónimas e agregadas por departamento.",
   qs:[{k:"escala",q:"Sinto-me valorizado pelo trabalho que faço."},{k:"escala",q:"Tenho clareza sobre o que se espera de mim."},{k:"escolha",q:"Como classificas a comunicação da liderança?",op:["Muito boa","Boa","Suficiente","Insuficiente"]},{k:"texto",q:"O que mudarias primeiro na empresa?"}]},
  {id:2,s:"curso",t:"Avaliação de desempenho H1 2026",tipo:"Desempenho",prazo:{m:8,day:5},min:15,anon:false,by:"Pessoas",
   desc:"Autoavaliação do primeiro semestre. O teu gestor vê as respostas antes da conversa de feedback.",
   qs:[{k:"escala",q:"Cumpri os objetivos definidos para o semestre."},{k:"texto",q:"Qual foi o teu maior contributo?"},{k:"texto",q:"Onde precisas de mais apoio?"}]},
  {id:3,s:"aberto",t:"Satisfação com o novo escritório",tipo:"Instalações",prazo:{m:7,day:29},min:3,anon:true,by:"Operações",
   desc:"Três minutos sobre o espaço, equipamento e áreas comuns.",
   qs:[{k:"escala",q:"O espaço de trabalho responde às minhas necessidades."},{k:"escolha",q:"O que falta com mais urgência?",op:["Salas de reunião","Zonas de silêncio","Cacifos","Nada"]}]},
  {id:4,s:"feito",t:"Onboarding: primeiras 4 semanas",tipo:"Onboarding",prazo:{m:7,day:12},min:5,anon:false,by:"Pessoas",
   desc:"Avaliação do processo de acolhimento.",resp:"12 jul",
   qs:[{k:"escala",q:"Recebi tudo o que precisava no primeiro dia."},{k:"texto",q:"O que melhorarias no acolhimento?"}]},
  {id:5,s:"fechado",t:"Formação: necessidades 2026",tipo:"Formação",prazo:{m:6,day:30},min:6,anon:true,by:"Pessoas",
   desc:"Levantamento de necessidades de formação para o plano anual.",resp:"24 jun",
   qs:[{k:"escolha",q:"Que área queres desenvolver?",op:["Liderança","Dados","Idiomas","Técnico"]}]},
];

function SvHead({sm}){
  const c={fontSize:"var(--ui-fs-xs)",fontWeight:600,letterSpacing:"0.06em",textTransform:"uppercase",color:"var(--ui-text-3)"};
  return <div style={{display:"grid",gridTemplateColumns:sm?SV_GRID_SM:SV_GRID,gap:12,alignItems:"center",padding:"8px 18px",borderBottom:"1px solid var(--ui-divider)"}}>
    <span style={c}>Inquérito</span><span style={c}>Estado</span>{!sm&&<span style={c}>Tipo</span>}<span style={c}>Prazo</span>{!sm&&<span style={c}>Duração</span>}<span/>
  </div>;
}

function SvRow({r,sm,onOpen}){
  const st=SV_STATE[r.s];
  return <div className="tk-row" onClick={()=>onOpen(r)} style={{display:"grid",gridTemplateColumns:sm?SV_GRID_SM:SV_GRID,gap:12,alignItems:"center",padding:"12px 16px",borderBottom:"1px solid var(--ui-divider)",cursor:"pointer"}}>
    <div style={{minWidth:0}}>
      <div className="row" style={{gap:8,minWidth:0}}>
        <span style={{fontWeight:500,whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"}}>{r.t}</span>
        {r.anon&&<UIPill>Anónimo</UIPill>}
      </div>
      <div className="muted" style={{fontSize:"var(--ui-fs-xs)",marginTop:2}}>{svQs(r.qs.length)} · {r.by}</div>
    </div>
    <span><UIPill tone={st.tone} dot>{st.label}</UIPill></span>
    {!sm&&<span><UIPill>{r.tipo}</UIPill></span>}
    <span className="muted" style={{fontSize:"var(--ui-fs-sm)",fontVariantNumeric:"tabular-nums"}}>{svFmt(r.prazo)}</span>
    {!sm&&<span className="muted" style={{fontSize:"var(--ui-fs-sm)"}}>{r.min} min</span>}
    <span className="ico-btn" title="Mais" onClick={e=>e.stopPropagation()}><I d={SV_DOTS} size={16}/></span>
  </div>;
}

function SvScale({value,onPick}){
  return <div className="row" style={{gap:8,flexWrap:"wrap"}}>
    {[1,2,3,4,5].map(n=><span key={n} onClick={()=>onPick(n)} style={{cursor:"pointer",width:44,height:40,borderRadius:"var(--ui-r-sm)",border:"1px solid "+(value===n?"var(--ui-text)":"var(--ui-border)"),background:value===n?"var(--ui-text)":"var(--ui-surface)",color:value===n?"var(--ui-surface)":"var(--ui-text-2)",display:"flex",alignItems:"center",justifyContent:"center",fontWeight:600,fontSize:"var(--ui-fs-sm)"}}>{n}</span>)}
    <span className="muted" style={{fontSize:"var(--ui-fs-xs)",marginLeft:4}}>1 discordo · 5 concordo</span>
  </div>;
}

function SvDetail({r,onClose,onSubmit}){
  const [ans,setAns]=React.useState({});
  React.useEffect(()=>{setAns({});},[r&&r.id]);
  if(!r)return null;
  const st=SV_STATE[r.s];const readOnly=r.s==="feito"||r.s==="fechado";
  const filled=Object.keys(ans).length;const pct=Math.round(filled/r.qs.length*100);
  const set=(i,v)=>setAns(a=>({...a,[i]:v}));
  return ReactDOM.createPortal(<React.Fragment>
    <div onClick={onClose} style={{position:"fixed",inset:0,background:"rgba(10,14,16,0.32)",zIndex:60,animation:"tkFade .16s ease"}}/>
    <aside style={{fontFamily:"var(--font-sans)",color:"var(--ui-text)",position:"fixed",top:0,right:0,bottom:0,width:"min(560px,95vw)",background:"var(--ui-surface)",borderLeft:"1px solid var(--ui-border)",zIndex:61,display:"flex",flexDirection:"column",animation:"tkSlide .2s cubic-bezier(.2,.8,.3,1)"}}>
      <div className="row" style={{padding:"16px 16px",borderBottom:"1px solid var(--ui-divider)",gap:10}}>
        <UIPill tone={st.tone} dot>{st.label}</UIPill>
        {r.anon&&<UIPill>Anónimo</UIPill>}
        <div className="spring"/>
        <span className="ico-btn" title="Fechar" onClick={onClose}><I d={["M18 6 6 18","m6 6 12 12"]} size={17}/></span>
      </div>

      <div style={{flex:1,overflow:"auto",padding:16,display:"flex",flexDirection:"column",gap:22}}>
        <div>
          <div style={{fontSize:"var(--ui-fs-h2)",fontWeight:600,letterSpacing:"var(--ui-ls-h2)",lineHeight:1.25}}>{r.t}</div>
          <div className="muted" style={{marginTop:8,fontSize:"var(--ui-fs-body)",lineHeight:1.55}}>{r.desc}</div>
          <div className="row" style={{gap:16,marginTop:12,fontSize:"var(--ui-fs-sm)"}}>
            <span className="muted row" style={{gap:6}}><I d={P.cal} size={14}/>Até {svFmt(r.prazo)}</span>
            <span className="muted row" style={{gap:6}}><I d={P.clock} size={14}/>{r.min} min</span>
            <span className="muted row" style={{gap:6}}><I d={P.survey} size={14}/>{svQs(r.qs.length)}</span>
          </div>
        </div>

        {!readOnly&&<div>
          <div className="row" style={{marginBottom:6}}><span className="muted" style={{fontSize:"var(--ui-fs-sm)"}}>Progresso</span><div className="spring"/><span className="muted" style={{fontSize:"var(--ui-fs-sm)",fontVariantNumeric:"tabular-nums"}}>{filled}/{r.qs.length}</span></div>
          <div style={{height:6,borderRadius:999,background:"var(--ui-surface-2)",overflow:"hidden"}}><div style={{width:pct+"%",height:"100%",background:"var(--ui-text)",transition:"width .2s"}}/></div>
        </div>}

        {readOnly
          ? <div style={{padding:"14px 16px",borderRadius:"var(--ui-r-md)",background:"var(--ui-surface-2)",fontSize:"var(--ui-fs-sm)"}}>
              Respondeste a {r.resp}. {r.anon?"As respostas são anónimas, por isso não são mostradas.":"As tuas respostas foram enviadas ao teu gestor."}
            </div>
          : <div style={{display:"flex",flexDirection:"column",gap:22}}>
              {r.qs.map((q,i)=><div key={i}>
                <div className="row" style={{gap:10,alignItems:"flex-start",marginBottom:10}}>
                  <span className="muted" style={{fontSize:"var(--ui-fs-sm)",fontWeight:600,fontVariantNumeric:"tabular-nums",minWidth:22}}>{String(i+1).padStart(2,"0")}</span>
                  <span style={{fontWeight:500,lineHeight:1.4}}>{q.q}</span>
                </div>
                <div style={{paddingLeft:32}}>
                  {q.k==="escala"&&<SvScale value={ans[i]} onPick={v=>set(i,v)}/>}
                  {q.k==="escolha"&&<div style={{display:"flex",flexDirection:"column",gap:8}}>{q.op.map(o=>
                    <span key={o} onClick={()=>set(i,o)} className="row" style={{gap:10,cursor:"pointer",padding:"10px 12px",borderRadius:"var(--ui-r-sm)",border:"1px solid "+(ans[i]===o?"var(--ui-text)":"var(--ui-border)"),fontSize:"var(--ui-fs-sm)"}}>
                      <span style={{width:15,height:15,borderRadius:999,border:"1.5px solid "+(ans[i]===o?"var(--ui-text)":"var(--ui-border-2)"),display:"flex",alignItems:"center",justifyContent:"center"}}>{ans[i]===o&&<span style={{width:7,height:7,borderRadius:999,background:"var(--ui-text)"}}/>}</span>
                      {o}</span>)}</div>}
                  {q.k==="texto"&&<UIInput placeholder="A tua resposta…" value={ans[i]||""} onChange={e=>set(i,e.target.value)}/>}
                </div>
              </div>)}
            </div>}
      </div>

      <div className="row" style={{padding:"12px 16px",borderTop:"1px solid var(--ui-divider)",gap:8}}>
        {!readOnly&&<span className="muted" style={{fontSize:"var(--ui-fs-xs)"}}>{r.anon?"Não é possível associar-te às respostas.":"Guardado automaticamente."}</span>}
        <div className="spring"/><UIButton variant="ghost" onClick={onClose}>Fechar</UIButton>
        {!readOnly&&<UIButton onClick={()=>onSubmit(r)} disabled={filled<r.qs.length}>Submeter</UIButton>}
      </div>
    </aside>
  </React.Fragment>,document.body);
}

S.surveys=()=>{
  const [rows,setRows]=React.useState(SV);
  const [tab,setTab]=React.useState("pendentes");
  const [q,setQ]=React.useState("");
  const [openId,setOpenId]=React.useState(null);
  const wrap=React.useRef(null);const [sm,setSm]=React.useState(false);
  React.useEffect(()=>{const el=wrap.current;if(!el||!window.ResizeObserver)return;const ro=new ResizeObserver(es=>setSm(es[0].contentRect.width<820));ro.observe(el);return ()=>ro.disconnect();},[]);

  const base=rows.filter(r=>q===""||(r.t+" "+r.tipo).toLowerCase().includes(q.toLowerCase()));
  const list=base.filter(r=>tab==="pendentes"?(r.s==="aberto"||r.s==="curso"):(r.s==="feito"||r.s==="fechado"));
  const open=rows.find(r=>r.id===openId)||null;
  const submit=r=>{setRows(rs=>rs.map(x=>x.id===r.id?{...x,s:"feito",resp:"hoje"}:x));setOpenId(null);};
  const pend=base.filter(r=>r.s==="aberto"||r.s==="curso");

  const stat=(label,value,tone)=><UICard style={{padding:16}}><div className="muted" style={{fontSize:"var(--ui-fs-sm)"}}>{label}</div><div className="row" style={{gap:8,marginTop:4}}><span style={{fontSize:"var(--ui-fs-h2)",fontWeight:600,letterSpacing:"var(--ui-ls-h2)",fontVariantNumeric:"tabular-nums"}}>{value}</span>{tone&&<span style={{width:8,height:8,borderRadius:999,background:"var(--ui-"+tone+")"}}/>}</div></UICard>;

  return <React.Fragment>
  <Head title="Inquéritos" desc={pend.length?pend.length+" à tua espera":"Nada por responder"}/>
  <div className="grid g3" style={{marginBottom:16}}>
    {stat("Por responder",pend.length,pend.length?"warning":null)}
    {stat("Respondidos este ano",base.filter(r=>r.s==="feito").length,"success")}
    {stat("Prazo mais próximo",pend.length?svFmt(pend.slice().sort((a,b)=>svKey(a.prazo)-svKey(b.prazo))[0].prazo):"—")}
  </div>
  <UICard style={{padding:0,overflow:"hidden",flex:1,display:"flex",flexDirection:"column"}}>
    <div ref={wrap} style={{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 items={[{value:"pendentes",label:"Por responder"},{value:"historico",label:"Histórico"}]} value={tab} onChange={setTab}/>
        <div className="spring"/>
        <div style={{width:220}}><UIInput leading={<I d={P.search} size={15}/>} placeholder="Pesquisar inquéritos…" value={q} onChange={e=>setQ(e.target.value)}/></div>
      </div>
      <div style={{flex:1,minHeight:0,overflow:"auto",padding:"12px 16px 16px"}}>
        {UIDataTable
          ? <UIDataTable rows={list} rowKey="id" pageSize={12} onRowClick={r=>setOpenId(r.id)}
              emptyState={<UIEmptyState title={tab==="pendentes"?"Nada por responder":"Sem histórico"} description={tab==="pendentes"?"Quando houver um inquérito para ti, aparece aqui.":"Ainda não respondeste a nenhum inquérito."}/>}
              columns={[
                {key:"t",label:"Inquérito",sortable:true,render:(v,r)=><div style={{minWidth:0}}>
                  <div className="row" style={{gap:8,minWidth:0}}>
                    <span style={{fontWeight:500,whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"}}>{v}</span>
                    {r.anon&&<UIPill>Anónimo</UIPill>}
                  </div>
                  <div className="muted" style={{fontSize:"var(--ui-fs-xs)",marginTop:2}}>{svQs(r.qs.length)} · {r.by}</div>
                </div>},
                {key:"s",label:"Estado",sortable:true,render:v=><UIPill tone={SV_STATE[v].tone} dot>{SV_STATE[v].label}</UIPill>},
                {key:"tipo",label:"Tipo",sortable:true,render:v=><UIPill>{v}</UIPill>},
                {key:"prazo",label:"Prazo",sortable:true,render:v=><span style={{fontVariantNumeric:"tabular-nums"}}>{svFmt(v)}</span>},
                {key:"min",label:"Duração",align:"right",render:v=><span className="muted" style={{fontSize:"var(--ui-fs-sm)"}}>{v} min</span>},
              ]}/>
          : <UIEmptyState title="Sem inquéritos" description="Quando houver um inquérito para ti, aparece aqui."/>}
      </div>
    </div>
  </UICard>
  <SvDetail r={open} onClose={()=>setOpenId(null)} onSubmit={submit}/>
  </React.Fragment>;
};