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

const TC_STATES=[
  {id:"aberto",label:"Aberto",tone:"info"},
  {id:"curso",label:"Em curso",tone:"warning"},
  {id:"espera",label:"À espera de ti",tone:"danger"},
  {id:"resolvido",label:"Resolvido",tone:"success"},
];
const TC_PRIO={alta:{label:"Alta",tone:"danger"},media:{label:"Média",tone:"warning"},baixa:{label:"Baixa",tone:"info"}};
const TC_DOTS=["M12 5h.01","M12 12h.01","M12 19h.01"];
const TC=[
  {id:1042,s:"espera",t:"Portátil não liga desde a atualização",cat:"IT",prio:"alta",by:"Hugo Montenegro",own:"Rui Pinto",co:"Xcope AI",open:"22 jul",upd:"há 2 h",sla:{label:"4 h restantes",tone:"warning"},
   msgs:[["Hugo Montenegro","O portátil deixou de arrancar depois da atualização de ontem. Fica no ecrã do logótipo.","22 jul, 09:12"],["Rui Pinto","Recebido. Consegues trazer o equipamento ao 2.º piso hoje?","22 jul, 10:04"],["Rui Pinto","Preciso da tua confirmação para avançar com a reinstalação, perdes os ficheiros locais.","hoje, 08:40"]]},
  {id:1039,s:"curso",t:"Acesso ao portal de férias",cat:"RH",prio:"media",by:"Hugo Montenegro",own:"Carla Dias",co:"Xcope AI",open:"21 jul",upd:"ontem",sla:{label:"Dentro do prazo",tone:"success"},
   msgs:[["Hugo Montenegro","Não consigo submeter pedidos de férias, dá erro de permissões.","21 jul, 14:20"],["Carla Dias","Estou a rever o teu perfil de acesso.","ontem, 11:02"]]},
  {id:1035,s:"curso",t:"Cartão de combustível bloqueado",cat:"Frota",prio:"alta",by:"Tomás Jervell",own:"Rui Pinto",co:"Xcope Produto",open:"20 jul",upd:"há 5 h",sla:{label:"1 h restante",tone:"danger"},
   msgs:[["Tomás Jervell","O cartão do 24-AB-31 foi recusado no abastecimento.","20 jul, 18:31"],["Rui Pinto","Já pedi desbloqueio à operadora.","hoje, 06:15"]]},
  {id:1031,s:"aberto",t:"Pedido de segundo monitor",cat:"IT",prio:"baixa",by:"Ana Reis",own:null,co:"Xcope AI",open:"19 jul",upd:"há 1 dia",sla:{label:"Dentro do prazo",tone:"success"},
   msgs:[["Ana Reis","Trabalho com folhas grandes e um monitor não chega.","19 jul, 09:00"]]},
  {id:1024,s:"aberto",t:"Erro no recibo de vencimento de junho",cat:"RH",prio:"alta",by:"Zain Franci",own:null,co:"Xcope Internacional",open:"18 jul",upd:"há 2 dias",sla:{label:"Em atraso",tone:"danger"},
   msgs:[["Zain Franci","O subsídio de alimentação parece mal calculado.","18 jul, 16:45"]]},
  {id:1018,s:"resolvido",t:"Reposição de palavra-passe",cat:"IT",prio:"media",by:"Hugo Montenegro",own:"Rui Pinto",co:"Xcope AI",open:"15 jul",upd:"16 jul",sla:{label:"Resolvido em 6 h",tone:"success"},
   msgs:[["Hugo Montenegro","Perdi o acesso à conta.","15 jul, 08:10"],["Rui Pinto","Reposta e enviada por SMS.","15 jul, 14:22"]]},
  {id:1011,s:"resolvido",t:"Atualizar morada no perfil",cat:"RH",prio:"baixa",by:"Sofia Melo",own:"Carla Dias",co:"Xcope Produto",open:"12 jul",upd:"13 jul",sla:{label:"Resolvido em 1 dia",tone:"success"},
   msgs:[["Sofia Melo","Mudei de casa, preciso de atualizar a morada.","12 jul, 10:30"],["Carla Dias","Atualizado.","13 jul, 09:05"]]},
];
// column rule: one fixed width for every metadata column, flexible only for the subject
const TC_GRID="72px minmax(180px,1fr) repeat(5,128px) 34px";
const TC_GRID_SM="66px minmax(150px,1fr) repeat(3,116px) 34px";

function TcCell({children}){return <span className="muted" style={{fontSize:"var(--ui-fs-sm)",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"}}>{children}</span>;}

function TcHead({sm,admin}){
  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?TC_GRID_SM:TC_GRID,gap:12,alignItems:"center",padding:"8px 18px",borderBottom:"1px solid var(--ui-divider)"}}>
    <span style={c}>ID</span><span style={c}>Assunto</span><span style={c}>Estado</span>{!sm&&<span style={c}>Categoria</span>}<span style={c}>Prioridade</span>{!sm&&<span style={c}>{admin?"Atribuído":"Responsável"}</span>}<span style={c}>SLA</span><span/>
  </div>;
}

function TcRow({r,sm,admin,onOpen}){
  const st=TC_STATES.find(s=>s.id===r.s);
  return <div className="tk-row" onClick={()=>onOpen(r)} style={{display:"grid",gridTemplateColumns:sm?TC_GRID_SM:TC_GRID,gap:12,alignItems:"center",padding:"12px 16px",borderBottom:"1px solid var(--ui-divider)",cursor:"pointer"}}>
    <span className="muted" style={{fontSize:"var(--ui-fs-sm)",fontWeight:600,fontVariantNumeric:"tabular-nums"}}>#{r.id}</span>
    <span style={{fontWeight:500,whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"}}>{r.t}</span>
    <span><UIPill tone={st.tone} dot>{st.label}</UIPill></span>
    {!sm&&<span><UIPill>{r.cat}</UIPill></span>}
    <span><UIPill tone={TC_PRIO[r.prio].tone} dot>{TC_PRIO[r.prio].label}</UIPill></span>
    {!sm&&(r.own?<span className="row" style={{gap:8,minWidth:0}}><UIAvatar name={r.own} size="xs"/><TcCell>{r.own.split(" ")[0]}</TcCell></span>:<TcCell>Por atribuir</TcCell>)}
    <span style={{fontSize:"var(--ui-fs-sm)",color:"var(--ui-"+r.sla.tone+")",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"}}>{r.sla.label}</span>
    <span className="ico-btn" title="Mais" onClick={e=>e.stopPropagation()}><I d={TC_DOTS} size={16}/></span>
  </div>;
}

function TcDetail({r,admin,onClose,onState,onAssign}){
  if(!r)return null;
  const st=TC_STATES.find(s=>s.id===r.s);
  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(520px,94vw)",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>
        <span className="muted" style={{fontSize:"var(--ui-fs-sm)",fontVariantNumeric:"tabular-nums"}}>#{r.id}</span>
        <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:20}}>
        <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:6,fontSize:"var(--ui-fs-sm)"}}>Aberto a {r.open} por {r.by} · {r.co}</div>
        </div>
        <div style={{display:"grid",gridTemplateColumns:"104px minmax(0,1fr)",gap:"12px 14px",alignItems:"center",fontSize:"var(--ui-fs-sm)"}}>
          <span className="muted">Categoria</span><span><UIPill>{r.cat}</UIPill></span>
          <span className="muted">Prioridade</span><span><UIPill tone={TC_PRIO[r.prio].tone} dot>{TC_PRIO[r.prio].label}</UIPill></span>
          <span className="muted">SLA</span><span style={{color:"var(--ui-"+r.sla.tone+")",fontWeight:500}}>{r.sla.label}</span>
          <span className="muted">Responsável</span>
          {r.own?<span className="row" style={{gap:8}}><UIAvatar name={r.own} size="xs"/><span>{r.own}</span></span>
            :admin?<span><UIButton size="sm" variant="outline" onClick={()=>onAssign(r)}>Atribuir a mim</UIButton></span>
            :<span className="muted">Por atribuir</span>}
        </div>

        <div>
          <div style={{fontWeight:600,fontSize:"var(--ui-fs-sm)",marginBottom:12}}>Conversa</div>
          <div style={{display:"flex",flexDirection:"column",gap:14}}>{r.msgs.map(([who,body,when],i)=>{
            const mine=who==="Hugo Montenegro";
            return <div key={i} className="row" style={{gap:10,alignItems:"flex-start"}}>
              <UIAvatar name={who} size="xs"/>
              <div style={{flex:1,minWidth:0}}>
                <div className="row" style={{gap:8}}><span style={{fontWeight:600,fontSize:"var(--ui-fs-sm)"}}>{mine?"Tu":who}</span><span className="muted" style={{fontSize:"var(--ui-fs-xs)"}}>{when}</span></div>
                <div style={{marginTop:5,padding:"10px 12px",borderRadius:"var(--ui-r-md)",background:mine?"var(--ui-surface-2)":"var(--ui-surface-3, var(--ui-surface-2))",fontSize:"var(--ui-fs-sm)",lineHeight:1.5}}>{body}</div>
              </div>
            </div>;})}</div>
          <div style={{marginTop:14}}><UIInput placeholder="Responder ao ticket…"/></div>
        </div>

        <div>
          <div className="muted" style={{fontSize:"var(--ui-fs-sm)",marginBottom:8}}>Mudar estado</div>
          <div className="row" style={{gap:8,flexWrap:"wrap"}}>{TC_STATES.filter(s=>s.id!==r.s).map(s=><UIButton key={s.id} size="sm" variant="outline" onClick={()=>onState(r,s.id)}>{s.label}</UIButton>)}</div>
        </div>
      </div>
      <div className="row" style={{padding:"12px 16px",borderTop:"1px solid var(--ui-divider)",gap:8}}>
        <div className="spring"/><UIButton variant="ghost" onClick={onClose}>Fechar</UIButton>
        <UIButton onClick={()=>onState(r,r.s==="resolvido"?"curso":"resolvido")}>{r.s==="resolvido"?"Reabrir":"Marcar resolvido"}</UIButton>
      </div>
    </aside>
  </React.Fragment>,document.body);
}

function TicketsScreen({admin}){
  const [rows,setRows]=React.useState(TC);
  const [tab,setTab]=React.useState("abertos");
  const [q,setQ]=React.useState("");
  const [cat,setCat]=React.useState("all");
  const [openId,setOpenId]=React.useState(null);
  const [nova,setNova]=React.useState(false);
  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<980));ro.observe(el);return ()=>ro.disconnect();},[]);

  const mine=r=>admin?true:r.by==="Hugo Montenegro";
  const base=rows.filter(mine).filter(r=>(q===""||(r.t+" "+r.cat+" #"+r.id).toLowerCase().includes(q.toLowerCase()))&&(cat==="all"||r.cat===cat));
  const tabs=admin
    ?[{value:"abertos",label:"Fila"},{value:"meus",label:"Atribuídos a mim"},{value:"naoatrib",label:"Por atribuir"},{value:"resolvidos",label:"Resolvidos"}]
    :[{value:"abertos",label:"Abertos"},{value:"espera",label:"À espera de ti"},{value:"resolvidos",label:"Resolvidos"}];
  const list=base.filter(r=>{
    if(tab==="abertos")return admin?r.s!=="resolvido":r.s!=="resolvido";
    if(tab==="meus")return r.own==="Hugo Montenegro"&&r.s!=="resolvido";
    if(tab==="naoatrib")return !r.own&&r.s!=="resolvido";
    if(tab==="espera")return r.s==="espera";
    return r.s==="resolvido";
  });
  const open=rows.find(r=>r.id===openId)||null;
  const setState=(r,s)=>{setRows(rs=>rs.map(x=>x.id===r.id?{...x,s}:x));if(s==="resolvido")setOpenId(null);};
  const assign=r=>setRows(rs=>rs.map(x=>x.id===r.id?{...x,own:"Hugo Montenegro"}:x));

  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>;
  const cats=["all",...Array.from(new Set(rows.map(r=>r.cat)))];

  return <React.Fragment>
  <Head title={admin?"Tickets":"Os meus tickets"} desc={admin?"Fila de suporte interno":"Pedidos que abriste"} actions={<UIButton icon={<I d={P.plus} size={16}/>} onClick={()=>setNova(true)}>Novo ticket</UIButton>}/>
  <div className="grid g4" style={{marginBottom:16}}>
    {stat("Abertos",base.filter(r=>r.s!=="resolvido").length)}
    {stat("À espera de ti",base.filter(r=>r.s==="espera").length,"danger")}
    {stat(admin?"Por atribuir":"Em curso",admin?base.filter(r=>!r.own&&r.s!=="resolvido").length:base.filter(r=>r.s==="curso").length,"warning")}
    {stat("Resolvidos (30 d)",base.filter(r=>r.s==="resolvido").length,"success")}
  </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={tabs} value={tab} onChange={setTab}/>
        <div className="spring"/>
        <div className="row" style={{gap:8,flexWrap:"wrap"}}>
          <div style={{width:200}}><UIInput leading={<I d={P.search} size={15}/>} placeholder="Pesquisar tickets…" value={q} onChange={e=>setQ(e.target.value)}/></div>
          <UIToggleGroup spacing={0} value={cat} onChange={v=>setCat(v||"all")} items={cats.map(c=>({value:c,label:c==="all"?"Todas":c}))}/>
        </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="Nenhum ticket" description="Não há tickets neste separador."/>}
              columns={[
                {key:"id",label:"#",sortable:true,render:v=><span className="muted" style={{fontWeight:600,fontVariantNumeric:"tabular-nums"}}>#{v}</span>},
                {key:"t",label:"Assunto",sortable:true,render:v=><span style={{fontWeight:500}}>{v}</span>},
                {key:"s",label:"Estado",sortable:true,render:v=>{const st=TC_STATES.find(x=>x.id===v);return <UIPill tone={st.tone} dot>{st.label}</UIPill>;}},
                {key:"cat",label:"Categoria",sortable:true,render:v=><UIPill>{v}</UIPill>},
                {key:"prio",label:"Prioridade",sortable:true,render:v=><UIPill tone={TC_PRIO[v].tone} dot>{TC_PRIO[v].label}</UIPill>},
                {key:"own",label:"Responsável",sortable:true,render:v=>v?<span className="row" style={{gap:8,minWidth:0}}><UIAvatar name={v} size="xs"/><span style={{fontSize:"var(--ui-fs-sm)"}}>{v.split(" ")[0]}</span></span>:<span className="muted" style={{fontSize:"var(--ui-fs-sm)"}}>Por atribuir</span>},
                {key:"sla",label:"Sla",align:"right",render:v=><span style={{fontSize:"var(--ui-fs-sm)",color:"var(--ui-"+v.tone+")",whiteSpace:"nowrap"}}>{v.label}</span>},
              ]}/>
          : <UIEmptyState title="Nenhum ticket" description="Não há tickets neste separador."/>}
      </div>
    </div>
  </UICard>

  <TcDetail r={open} admin={admin} onClose={()=>setOpenId(null)} onState={setState} onAssign={assign}/>

  <UIModal open={nova} onClose={()=>setNova(false)} title="Novo ticket" width={520}
    footer={<div className="row" style={{gap:8}}><div className="spring"/><UIButton variant="ghost" onClick={()=>setNova(false)}>Cancelar</UIButton><UIButton onClick={()=>setNova(false)}>Abrir ticket</UIButton></div>}>
    <div style={{display:"flex",flexDirection:"column",gap:12}}>
      <UIInput label="Assunto" placeholder="Resume o problema numa linha"/>
      <UIInput label="Descrição" placeholder="O que aconteceu, desde quando, o que já tentaste…"/>
      <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:12}}>
        <UISelect label="Categoria" options={["IT","RH","Frota","Instalações"]}/>
        <UISelect label="Prioridade" options={["Baixa","Média","Alta"]}/>
      </div>
    </div>
  </UIModal>
  </React.Fragment>;
}

S["my-tickets"]=()=><TicketsScreen admin={false}/>;
S["admin-tickets"]=()=><TicketsScreen admin={true}/>;