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

const EQ_CAT={"Portátil":"mon","Monitor":"mon","Telemóvel":"chat","Acessório":"cog","Mobiliário":"building","Audio":"mic"};
const EQ_SEED=[
  {id:1,n:"MacBook Pro 14\" M3",cat:"Portátil",serie:"XCP-LT-0041",who:"Hugo Montenegro",estado:"Atribuído",desde:"03 mar 2024",valor:2450,garantia:"03 mar 2027",nota:"Programa de renovação trienal.",hist:[["Hugo Montenegro","03 mar 2024","em uso"]]},
  {id:2,n:"MacBook Air 13\" M2",cat:"Portátil",serie:"XCP-LT-0038",who:"Ana Reis",estado:"Atribuído",desde:"05 jan 2026",valor:1350,garantia:"05 jan 2029",nota:"",hist:[["Ana Reis","05 jan 2026","em uso"],["Bruno Costa","02 fev 2024","devolvido a 30 jun 2025"]]},
  {id:3,n:"MacBook Pro 14\" M3",cat:"Portátil",serie:"XCP-LT-0042",who:"Rui Pinto",estado:"Atribuído",desde:"12 fev 2024",valor:2450,garantia:"12 fev 2027",nota:"",hist:[["Rui Pinto","12 fev 2024","em uso"]]},
  {id:4,n:"Monitor Dell 27\" 4K",cat:"Monitor",serie:"XCP-MN-0107",who:"Rui Pinto",estado:"Atribuído",desde:"12 fev 2024",valor:520,garantia:"12 fev 2027",nota:"",hist:[["Rui Pinto","12 fev 2024","em uso"]]},
  {id:5,n:"Monitor Dell 27\" 4K",cat:"Monitor",serie:"XCP-MN-0108",who:null,estado:"Disponível",desde:"—",valor:520,garantia:"20 mai 2027",nota:"Em armazém no escritório do Porto.",hist:[["Sofia Melo","20 mai 2024","devolvido a 12 jul 2026"]]},
  {id:6,n:"iPhone 15",cat:"Telemóvel",serie:"XCP-TM-0019",who:"Tomás Jervell",estado:"Atribuído",desde:"22 set 2024",valor:980,garantia:"22 set 2026",nota:"Plano de dados da empresa.",hist:[["Tomás Jervell","22 set 2024","em uso"]]},
  {id:7,n:"MacBook Air 13\" M2",cat:"Portátil",serie:"XCP-LT-0035",who:null,estado:"Em reparação",desde:"—",valor:1350,garantia:"14 nov 2026",nota:"Teclado em substituição. Previsão: 08 ago.",hist:[["Zain Franci","14 nov 2023","devolvido a 21 jul 2026"]]},
  {id:8,n:"Auscultadores Sony WH-1000",cat:"Audio",serie:"XCP-AU-0063",who:"Sofia Melo",estado:"Atribuído",desde:"18 fev 2026",valor:320,garantia:"18 fev 2028",nota:"",hist:[["Sofia Melo","18 fev 2026","em uso"]]},
  {id:9,n:"Dock station Thunderbolt",cat:"Acessório",serie:"XCP-AC-0088",who:null,estado:"Disponível",desde:"—",valor:260,garantia:"02 abr 2027",nota:"",hist:[]},
  {id:10,n:"Cadeira ergonómica Herman",cat:"Mobiliário",serie:"XCP-MB-0012",who:"Carla Dias",estado:"Atribuído",desde:"09 jun 2025",valor:790,garantia:"09 jun 2035",nota:"",hist:[["Carla Dias","09 jun 2025","em uso"]]},
];
const EQ_TONE={"Atribuído":"info","Disponível":"success","Em reparação":"warning","Abatido":"neutral"};
const eqEur=v=>v.toLocaleString("pt-PT")+" €";

S["admin-assets"]=()=>{
  const [rows,setRows]=React.useState(EQ_SEED);
  const [tab,setTab]=React.useState("todos");
  const [sel,setSel]=React.useState(null);
  const [atrib,setAtrib]=React.useState(null);
  const [quem,setQuem]=React.useState(PEOPLE[0]);
  const [novo,setNovo]=React.useState(false);
  const [f,setF]=React.useState({n:"",cat:"Portátil",serie:"",valor:""});
  const [aviso,setAviso]=React.useState(null);
  React.useEffect(()=>{if(!aviso)return;const t=setTimeout(()=>setAviso(null),3200);return ()=>clearTimeout(t);},[aviso]);

  const cur=sel?rows.find(r=>r.id===sel):null;
  const list=rows.filter(r=>tab==="todos"?true:tab==="atrib"?r.estado==="Atribuído":tab==="disp"?r.estado==="Disponível":r.estado==="Em reparação");
  const nAtrib=rows.filter(r=>r.estado==="Atribuído").length;
  const nDisp=rows.filter(r=>r.estado==="Disponível").length;
  const nRep=rows.filter(r=>r.estado==="Em reparação").length;
  const valorTotal=rows.reduce((n,r)=>n+r.valor,0);

  const devolver=r=>{setRows(rs=>rs.map(x=>x.id===r.id?{...x,who:null,estado:"Disponível",desde:"—",hist:[[r.who,r.desde,"devolvido hoje"],...x.hist.slice(1)]}:x));setAviso(r.n+" devolvido por "+r.who+". Fica disponível em armazém.");};
  const atribuir=()=>{const r=atrib;setRows(rs=>rs.map(x=>x.id===r.id?{...x,who:quem,estado:"Atribuído",desde:"24 jul 2026",hist:[[quem,"24 jul 2026","em uso"],...x.hist]}:x));setAviso(r.n+" atribuído a "+quem+". Termo de responsabilidade enviado para assinatura.");setAtrib(null);};
  const adicionar=()=>{
    if(!f.n.trim()){setAviso(null);return;}
    setRows(rs=>[{id:Date.now(),n:f.n.trim(),cat:f.cat,serie:f.serie||("XCP-EQ-0"+Math.floor(100+rs.length)),who:null,estado:"Disponível",desde:"—",valor:parseInt(f.valor,10)||0,garantia:"24 jul 2029",nota:"",hist:[]},...rs]);
    setF({n:"",cat:"Portátil",serie:"",valor:""});setNovo(false);setAviso("Equipamento adicionado ao inventário.");};

  return <React.Fragment>
  <Head scoped title="Equipamentos" desc={rows.length+" ativos · "+eqEur(valorTotal)+" em inventário"}
    actions={<UIButton icon={<I d={P.plus} size={16}/>} onClick={()=>setNovo(true)}>Adicionar equipamento</UIButton>}/>

  {aviso&&<UIBanner tone="success" title="Feito" style={{marginBottom:16}}>{aviso}</UIBanner>}

  <div className="grid g4" style={{marginBottom:16}}>
    <UICard><UIStat label="Total de ativos" value={String(rows.length)} sublabel={eqEur(valorTotal)+" de valor"}/></UICard>
    <UICard><UIStat label="Atribuídos" value={String(nAtrib)} sublabel="com termo de responsabilidade"/></UICard>
    <UICard><UIStat label="Disponíveis" value={String(nDisp)} sublabel="em armazém"/></UICard>
    <UICard><UIStat label="Em reparação" value={String(nRep)} sublabel={nRep?"previsão: 08 ago":"nenhum"}/></UICard>
  </div>

  <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:"atrib",label:"Atribuídos",count:nAtrib},
        {value:"disp",label:"Disponíveis",count:nDisp},
        {value:"rep",label:"Em reparação",count:nRep}]}/>
    </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 por nome, série ou pessoa…"
        emptyState={<UIEmptyState title="Sem equipamentos" description="Não há ativos neste separador."/>}
        columns={[
          {key:"n",label:"Equipamento",sortable:true,render:(v,r)=><span className="row" style={{gap:12,minWidth:0}}>
            <span style={{width:34,height:34,borderRadius:"var(--ui-r-sm)",background:"var(--ui-surface-2)",display:"flex",alignItems:"center",justifyContent:"center",color:"var(--ui-text-3)",flexShrink:0}}><I d={P[EQ_CAT[r.cat]]||P.cog} size={16}/></span>
            <span style={{minWidth:0}}><span style={{fontWeight:600,display:"block",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>{v}</span><span className="muted" style={{fontSize:"var(--ui-fs-sm)"}}>{r.cat} · {r.serie}</span></span></span>},
          {key:"who",label:"Atribuído a",sortable:true,render:(v,r)=>v?<span className="row" style={{gap:10}}>{AV(v,"xs")}<span style={{fontWeight:500}}>{v}</span></span>:<span className="muted">—</span>},
          {key:"desde",label:"Desde",render:v=><span className="muted" style={{fontSize:"var(--ui-fs-sm)",whiteSpace:"nowrap"}}>{v}</span>},
          {key:"valor",label:"Valor",sortable:true,align:"right",render:v=><span style={{fontVariantNumeric:"tabular-nums"}}>{eqEur(v)}</span>},
          {key:"estado",label:"Estado",align:"right",render:v=><UIPill tone={EQ_TONE[v]||"neutral"} dot>{v}</UIPill>},
        ]}
        rowActions={r=><span onClick={e=>e.stopPropagation()}>
          {r.estado==="Disponível"&&<UIButton size="sm" onClick={()=>{setQuem(PEOPLE[0]);setAtrib(r);}}>Atribuir</UIButton>}
          {r.estado==="Atribuído"&&<UIButton size="sm" variant="outline" onClick={()=>devolver(r)}>Registar devolução</UIButton>}
        </span>}/>
    </div>
  </UICard>

  <UIDrawer open={!!cur} width={460} onClose={()=>setSel(null)}
    header={cur&&<span className="row" style={{gap:12}}>
      <span style={{width:38,height:38,borderRadius:"var(--ui-r-sm)",background:"var(--ui-surface-2)",display:"flex",alignItems:"center",justifyContent:"center",color:"var(--ui-text-3)",flexShrink:0}}><I d={P[EQ_CAT[cur.cat]]||P.cog} size={18}/></span>
      <span><span style={{fontWeight:600,display:"block"}}>{cur.n}</span><span className="muted" style={{fontSize:"var(--ui-fs-sm)"}}>{cur.cat} · {cur.serie}</span></span></span>}
    footer={cur&&<React.Fragment>
      {cur.estado==="Disponível"&&<UIButton onClick={()=>{setQuem(PEOPLE[0]);setAtrib(cur);setSel(null);}}>Atribuir</UIButton>}
      {cur.estado==="Atribuído"&&<UIButton variant="outline" onClick={()=>{devolver(cur);setSel(null);}}>Registar devolução</UIButton>}
      <div className="spring"/><UIButton variant="ghost" onClick={()=>setSel(null)}>Fechar</UIButton></React.Fragment>}>
    {cur&&<div style={{display:"flex",flexDirection:"column",gap:22}}>
      <div className="row" style={{gap:8,flexWrap:"wrap"}}>
        <UIPill tone={EQ_TONE[cur.estado]||"neutral"} dot>{cur.estado}</UIPill>
        {cur.who&&<UIPill><span className="row" style={{gap:6}}>{AV(cur.who,"xs")}{cur.who}</span></UIPill>}
      </div>
      <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:16}}>
        {[["N.º de série",cur.serie],["Valor de compra",eqEur(cur.valor)],["Garantia até",cur.garantia],["Atribuído desde",cur.desde]].map(([l,v])=>
          <div key={l}><div className="muted" style={{fontSize:"var(--ui-fs-xs)",fontWeight:600,letterSpacing:"0.06em",textTransform:"uppercase",marginBottom:4}}>{l}</div><div style={{fontWeight:500}}>{v}</div></div>)}
      </div>
      {cur.nota&&<div className="row" style={{gap:10,padding:"12px 14px",borderRadius:"var(--ui-r-md)",background:"var(--ui-surface-2)",fontSize:"var(--ui-fs-sm)"}}>
        <I d={P.info} size={16} c="var(--ui-text-3)"/><span>{cur.nota}</span></div>}
      <div>
        <div className="muted" style={{fontSize:"var(--ui-fs-xs)",fontWeight:600,letterSpacing:"0.06em",textTransform:"uppercase",marginBottom:8}}>Histórico de atribuições</div>
        {cur.hist.length?cur.hist.map(([w,d,st],i)=><div key={i} className="row" style={{gap:10,padding:"9px 0",borderBottom:"1px solid var(--ui-divider)",fontSize:"var(--ui-fs-sm)"}}>
          {AV(w,"xs")}<span style={{fontWeight:500}}>{w}</span><span className="muted">desde {d}</span><div className="spring"/><span className="muted">{st}</span>
        </div>):<div className="muted" style={{fontSize:"var(--ui-fs-sm)"}}>Nunca foi atribuído.</div>}
      </div>
      <div className="muted" style={{fontSize:"var(--ui-fs-sm)"}}>Cada atribuição gera um termo de responsabilidade assinado digitalmente, guardado nos documentos da pessoa.</div>
    </div>}
  </UIDrawer>

  {atrib&&<UIModal open onClose={()=>setAtrib(null)} title={"Atribuir · "+atrib.n} width={460}
    footer={<div className="row" style={{gap:8}}><span className="muted" style={{fontSize:"var(--ui-fs-sm)"}}>Gera termo de responsabilidade</span><div className="spring"/><UIButton variant="ghost" onClick={()=>setAtrib(null)}>Cancelar</UIButton><UIButton onClick={atribuir}>Atribuir</UIButton></div>}>
    <div style={{display:"flex",flexDirection:"column",gap:16}}>
      <UISelect label="Pessoa" value={quem} onChange={e=>setQuem(e.target.value)} options={PEOPLE}/>
      <div className="muted" style={{fontSize:"var(--ui-fs-sm)"}}>A pessoa recebe o termo de responsabilidade para assinar no Perfil, em Documentos.</div>
    </div>
  </UIModal>}

  <UIModal open={novo} onClose={()=>setNovo(false)} title="Adicionar equipamento" width={520}
    footer={<div className="row" style={{gap:8}}><div className="spring"/><UIButton variant="ghost" onClick={()=>setNovo(false)}>Cancelar</UIButton><UIButton onClick={adicionar}>Adicionar</UIButton></div>}>
    <div style={{display:"flex",flexDirection:"column",gap:16}}>
      <UIInput label="Nome" placeholder="Ex.: MacBook Pro 14&quot; M3" value={f.n} onChange={e=>setF({...f,n: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={Object.keys(EQ_CAT)}/>
        <UIInput label="Valor (€)" placeholder="0" value={f.valor} onChange={e=>setF({...f,valor:e.target.value.replace(/[^0-9]/g,"")})}/>
      </div>
      <UIInput label="N.º de série (opcional)" placeholder="Gerado automaticamente se vazio" value={f.serie} onChange={e=>setF({...f,serie:e.target.value})}/>
    </div>
  </UIModal>
  </React.Fragment>;
};