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

const NW_TONE={Comunicado:"info",Evento:"success","Política":"warning"};

S.news=()=>{
  const [posts,setPosts]=React.useState((window.WFA_NEWS||[]).map(p=>({...p,liked:false,inscrito:false})));
  const [lidos,setLidos]=React.useState({});
  const [sel,setSel]=React.useState(null);
  const [novo,setNovo]=React.useState(false);
  const [f,setF]=React.useState({t:"",cat:"Comunicado",body:"",pin:false});
  const [erro,setErro]=React.useState("");

  const ordered=[...posts].sort((a,b)=>(b.pinned?1:0)-(a.pinned?1:0));
  const cur=sel!=null?posts.find(p=>p.id===sel):null;
  const naoLidos=posts.filter(p=>!lidos[p.id]).length;
  const like=(id,e)=>{e&&e.stopPropagation();setPosts(ps=>ps.map(p=>p.id===id?{...p,liked:!p.liked,likes:p.likes+(p.liked?-1:1)}:p));};
  const rsvp=(id,e)=>{e&&e.stopPropagation();setPosts(ps=>ps.map(p=>p.id===id?{...p,inscrito:!p.inscrito,rsvp:(p.rsvp||0)+(p.inscrito?-1:1)}:p));};
  const abrir=id=>{setSel(id);setLidos(l=>({...l,[id]:true}));};
  const publicar=()=>{
    if(!f.t.trim()){setErro("Dá um título ao comunicado.");return;}
    setPosts(ps=>[{id:Date.now(),pinned:f.pin,cat:f.cat,t:f.t.trim(),by:"Hugo Montenegro",when:"agora",resumo:(f.body.split("\n")[0]||"").slice(0,90),likes:0,liked:false,inscrito:false,rsvp:f.cat==="Evento"?0:undefined,body:f.body?f.body.split("\n").filter(Boolean):["(sem texto)"]},...ps]);
    setF({t:"",cat:"Comunicado",body:"",pin:false});setErro("");setNovo(false);
  };

  return <React.Fragment>
  <Head title="Comunicações" desc={posts.length+" publicações · "+(naoLidos?naoLidos+" por ler":"tudo lido")}
    actions={<UIButton icon={<I d={P.plus} size={16}/>} onClick={()=>setNovo(true)}>Novo comunicado</UIButton>}/>

  <div style={{display:"flex",flexDirection:"column",gap:12,maxWidth:860}}>
    {ordered.map(p=><UICard key={p.id} style={{cursor:"pointer",padding:"18px 20px"}} onClick={()=>abrir(p.id)}>
      <div className="row" style={{gap:12,alignItems:"flex-start"}}>
        {AV(p.by,"md")}
        <div style={{flex:1,minWidth:0}}>
          <div className="row" style={{gap:8,flexWrap:"wrap"}}>
            {p.pinned&&<I d={P.pin} size={14} c="var(--ui-accent)"/>}
            <span style={{fontWeight:600,fontSize:"var(--ui-fs-h3)"}}>{p.t}</span>
            <UIPill tone={NW_TONE[p.cat]||"neutral"}>{p.cat}</UIPill>
            {!lidos[p.id]&&<span title="Por ler" style={{width:8,height:8,borderRadius:999,background:"var(--ui-accent)"}}/>}
          </div>
          <div className="muted" style={{fontSize:"var(--ui-fs-sm)",margin:"3px 0 8px"}}>{p.by} · {p.when}</div>
          <div style={{fontSize:"var(--ui-fs-body)",color:"var(--ui-text-2)"}}>{p.resumo}</div>
          <div className="row" style={{gap:8,marginTop:12,flexWrap:"wrap"}}>
            <UIButton size="sm" variant={p.liked?"secondary":"ghost"} icon={<I d={P.smile} size={14}/>} onClick={e=>like(p.id,e)}>{p.liked?"Gostas disto":"Gosto"} · {p.likes}</UIButton>
            {p.rsvp!=null&&<UIButton size="sm" variant={p.inscrito?"secondary":"outline"} icon={<I d={p.inscrito?["m5 12 4.5 4.5L19 7"]:P.cal} size={14}/>} onClick={e=>rsvp(p.id,e)}>{p.inscrito?"Inscrito":"Inscrever-me"} · {p.rsvp}</UIButton>}
          </div>
        </div>
      </div>
    </UICard>)}
  </div>

  <UIDrawer open={!!cur} width={480} onClose={()=>setSel(null)}
    header={cur&&<span className="row" style={{gap:10,flexWrap:"wrap"}}><span style={{fontWeight:600,fontSize:"var(--ui-fs-h3)"}}>{cur.t}</span><UIPill tone={NW_TONE[cur.cat]||"neutral"}>{cur.cat}</UIPill></span>}
    footer={cur&&<React.Fragment>
      <UIButton variant={cur.liked?"secondary":"outline"} onClick={()=>like(cur.id)}>{cur.liked?"Gostas disto":"Gosto"} · {cur.likes}</UIButton>
      {cur.rsvp!=null&&<UIButton variant={cur.inscrito?"secondary":"outline"} onClick={()=>rsvp(cur.id)}>{cur.inscrito?"Inscrito":"Inscrever-me"} · {cur.rsvp}</UIButton>}
      <div className="spring"/><UIButton variant="ghost" onClick={()=>setSel(null)}>Fechar</UIButton></React.Fragment>}>
    {cur&&<div style={{display:"flex",flexDirection:"column",gap:18}}>
      <div className="row" style={{gap:10}}>{AV(cur.by,"sm")}<span style={{fontWeight:600}}>{cur.by}</span><span className="muted" style={{fontSize:"var(--ui-fs-sm)"}}>{cur.when}</span></div>
      <div style={{display:"flex",flexDirection:"column",gap:12,fontSize:"var(--ui-fs-body)",lineHeight:1.6}}>
        {(cur.body||[cur.resumo]).map((par,i)=><p key={i} style={{margin:0}}>{par}</p>)}
      </div>
      {cur.rsvp!=null&&<div>
        <div className="muted" style={{fontSize:"var(--ui-fs-xs)",fontWeight:600,letterSpacing:"0.06em",textTransform:"uppercase",marginBottom:8}}>Inscritos · {cur.rsvp}</div>
        <div className="row" style={{gap:10}}>
          <UIAvatarGroup size="sm" max={5} avatars={PEOPLE.slice(0,5).map(name=>({name})).concat(cur.inscrito?[{name:"Hugo Montenegro"}]:[])}/>
          <span className="muted" style={{fontSize:"var(--ui-fs-sm)"}}>{cur.inscrito?"incluindo tu":"ainda não estás inscrito"}</span>
        </div>
      </div>}
    </div>}
  </UIDrawer>

  <UIModal open={novo} onClose={()=>setNovo(false)} title="Novo comunicado" width={560}
    footer={<div className="row" style={{gap:8}}><span className="muted" style={{fontSize:"var(--ui-fs-sm)"}}>Publicado a toda a empresa</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.: Town hall de agosto" value={f.t} onChange={e=>{setF({...f,t:e.target.value});setErro("");}} error={erro||undefined}/>
      <UISelect label="Categoria" value={f.cat} onChange={e=>setF({...f,cat:e.target.value})} options={["Comunicado","Evento","Política"]}/>
      <div>
        <div style={{fontSize:"var(--ui-fs-sm)",fontWeight:500,marginBottom:6}}>Texto</div>
        <textarea value={f.body} onChange={e=>setF({...f,body:e.target.value})} rows={5} placeholder="Escreve o comunicado. Cada parágrafo numa linha."
          style={{width:"100%",boxSizing:"border-box",resize:"vertical",padding:"10px 12px",borderRadius:"var(--ui-r-sm)",border:"1px solid var(--ui-border)",background:"var(--ui-surface)",color:"var(--ui-text)",fontFamily:"var(--font-sans)",fontSize:"var(--ui-fs-body)",lineHeight:1.5,outline:"none"}}/>
      </div>
      <UIToggle label="Fixar no topo do mural" checked={f.pin} onChange={()=>setF({...f,pin:!f.pin})}/>
    </div>
  </UIModal>
  </React.Fragment>;
};
