const PERMS=["Design editor","Comments","Quoting","Approvals","Orders","User admin","Platform settings"];

function AdminScreen({tab,setTab,showTabs,tabs,askBruce,setAskBruce}){
  const [invite,setInvite]=React.useState(false);
  const [qUsers,setQUsers]=React.useState("");
  const [qCat,setQCat]=React.useState("");
  const [col,setCol]=React.useState("graphics");
  const [openRole,setOpenRole]=React.useState(null);
  const [subidos,setSubidos]=React.useState([]);
  const [sel,setSel]=React.useState(()=>new Set());
  const [removed,setRemoved]=React.useState(()=>new Set());
  const file=React.useRef(null);
  const subir=e=>{const f=[...(e.target.files||[])];if(f.length)setSubidos(s=>s.concat(f.map(x=>x.name)));e.target.value=""};
  const users=window.DATA.users.filter(u=>(u.name+u.email+u.role).toLowerCase().includes(qUsers.toLowerCase()));
  const cat=window.DATA.catalog,catKeys=Object.keys(cat),cur=cat[col]||cat[catKeys[0]];
  const key=n=>col+":"+n;
  const items=(cur.items||[]).filter(x=>{const n=x.name||x;return n.toLowerCase().includes(qCat.toLowerCase())&&!removed.has(key(n))});
  const nombres=items.map(x=>x.name||x);
  const toggle=n=>setSel(s=>{const x=new Set(s);x.has(n)?x.delete(n):x.add(n);return x});
  const toggleAll=()=>setSel(s=>s.size>=nombres.length&&nombres.length?new Set():new Set(nombres));
  const abrirCol=k=>{setCol(k);setQCat("");setSel(new Set())};
  const quitarSel=()=>{setRemoved(r=>{const x=new Set(r);sel.forEach(n=>x.add(key(n)));return x});setSel(new Set())};
  const userCols=[
    {key:"name",label:"User",render:r=><span style={{display:"flex",alignItems:"center",gap:10}}><Avatar name={r.name} size="sm"/><span><span style={{display:"block",fontWeight:600}}>{r.name}</span><span style={{display:"block",fontSize:12,color:"var(--text-muted)"}}>{r.email}</span></span></span>},
    {key:"role",label:"Role",render:r=><span style={{fontSize:"var(--text-micro)",textTransform:"uppercase",
      letterSpacing:"var(--tracking-label)",whiteSpace:"nowrap",
      fontWeight:r.role==="Platform admin"?"var(--weight-bold)":"var(--weight-medium)",
      color:r.role==="Platform admin"?"var(--text-body)":"var(--text-muted)"}}>{r.role}</span>},
    {key:"status",label:"Status",render:r=><StatusPill status={r.status==="Active"?"approved":"draft"} label={r.status}/>},
    {key:"a",label:"",width:40,align:"right",render:()=><IconButton label="More" size="sm" variant="ghost"><Icon name="ellipsis" size={16}/></IconButton>}
  ];
  return <div style={{display:"flex",flexDirection:"column",gap:16}}>
    <div style={{display:"flex",alignItems:"center",gap:16,flexWrap:"wrap"}}>
      {showTabs&&<div style={{overflowX:"auto"}}><Tabs tabs={tabs} value={tab} onChange={setTab}/></div>}
      <div style={{flex:1}}></div>
      {tab==="Users"&&<React.Fragment>
        <SearchInput placeholder="Search users" value={qUsers} onChange={e=>setQUsers(e.target.value)} width={240}/>
        <Button size="sm" onClick={()=>setInvite(true)}>Invite user</Button>
      </React.Fragment>}
    </div>
    {tab==="Users"&&(users.length
      ?<div style={{overflowX:"auto"}}><Table columns={userCols} rows={users} style={{minWidth:640}}/></div>
      :<Card padding="0"><EmptyState base="../.." title="No users match" body="Try another name, email or role."
        action={<Button size="sm" onClick={()=>setQUsers("")}>Clear search</Button>}/></Card>)}
    {tab==="Catalog"&&<div style={{display:"flex",flexDirection:"column",gap:16}}>
      <span style={{fontSize:12,color:"var(--text-subtle)"}}>Internal content library — managed by staff. Not visible to customers.</span>
      {/* Las colecciones que administra el staff. La Graphics Library es la que el Member consume desde el Locker. */}
      <div style={{display:"grid",gridTemplateColumns:"repeat(auto-fit,minmax(170px,1fr))",gap:16}}>
        {catKeys.map(k=>{const c=cat[k];const sel=col===k;
          return <button key={k} type="button" onClick={()=>abrirCol(k)}
            style={{textAlign:"left",cursor:"pointer",font:"inherit",padding:0,border:"none",background:"none"}}>
            <Card padding="18px" style={{display:"flex",flexDirection:"column",gap:6,
              border:sel?"var(--border-width-strong) solid var(--bruce-black)":"var(--border-width-hairline) solid var(--border-hairline)"}}>
              <span style={{fontSize:11,fontWeight:700,textTransform:"uppercase",letterSpacing:".1em",color:"var(--text-muted)"}}>{c.label}</span>
              <span style={{fontSize:28,fontWeight:700,letterSpacing:"-.01em"}}>{c.items.length}</span>
              <span style={{fontSize:12,color:"var(--text-subtle)"}}>{c.categories?c.categories.length+" categories":"No categories"}</span>
            </Card>
          </button>;})}
      </div>
      <Card padding="20px" style={{display:"flex",flexDirection:"column",gap:16}}>
        <div style={{display:"flex",alignItems:"center",gap:8,flexWrap:"wrap"}}>
          <span style={{flex:1,fontSize:13,fontWeight:700,textTransform:"uppercase",letterSpacing:".06em"}}>{cur.label}</span>
          <SearchInput placeholder={"Search "+cur.label} value={qCat} onChange={e=>setQCat(e.target.value)} width={200}/>
          <Button size="sm" onClick={()=>file.current.click()} iconLeft={<Icon name="cloud-upload" size={15}/>}>Upload</Button>
          <input ref={file} type="file" accept="image/*,.svg,.pdf" multiple onChange={subir} style={{display:"none"}}/>
        </div>
        {cur.categories&&<div style={{display:"flex",flexDirection:"column",gap:8}}>
          <span style={{fontSize:11,fontWeight:700,textTransform:"uppercase",letterSpacing:".1em",color:"var(--text-muted)"}}>Categories</span>
          <div style={{display:"flex",gap:8,flexWrap:"wrap"}}>
            {cur.categories.map(c=><span key={c} style={{fontSize:12,fontWeight:600,padding:"4px 12px",
              border:"var(--border-width-hairline) solid var(--border-hairline)",borderRadius:"var(--radius-pill)",color:"var(--text-muted)"}}>{c}</span>)}
            <button type="button" style={{fontSize:12,fontWeight:700,padding:"4px 12px",border:"1px dashed var(--border-hairline)",
              borderRadius:"var(--radius-pill)",background:"none",cursor:"pointer",color:"var(--text-link)"}}>+ Add category</button>
          </div>
        </div>}
        {items.length
          ?<div style={{display:"flex",flexDirection:"column"}}>
            {/* Cabecera de lista: seleccionar todo + acción sobre lo seleccionado. */}
            <div style={{display:"flex",alignItems:"center",gap:12,padding:"8px 4px",borderBottom:"var(--border-width-hairline) solid var(--border-hairline)"}}>
              <Checkbox checked={nombres.length>0&&sel.size>=nombres.length} onChange={toggleAll}
                label={sel.size?sel.size+" selected":"Select all"} style={{flex:1}}/>
              {sel.size>0&&<Button size="sm" variant="ghost" iconLeft={<Icon name="trash-2" size={15}/>} onClick={quitarSel}>Remove</Button>}
            </div>
            {items.map(it=>{const n=it.name||it,on=sel.has(n);
              return <div key={n} style={{display:"flex",alignItems:"center",gap:12,padding:"12px 4px",
                borderBottom:"var(--border-width-hairline) solid var(--border-hairline)",background:on?"var(--surface-sunken)":"transparent"}}>
                <Checkbox checked={on} onChange={()=>toggle(n)} label={n} style={{flex:1,minWidth:0}}/>
                {it.cat&&<span style={{fontSize:11,fontWeight:700,textTransform:"uppercase",letterSpacing:".1em",color:"var(--text-subtle)",whiteSpace:"nowrap"}}>{it.cat}</span>}
                <IconButton label={"Manage "+n} size="sm" variant="ghost"><Icon name="ellipsis" size={16}/></IconButton>
              </div>;})}
          </div>
          :<EmptyState base="../.." title="Nothing here" body="Try another search or upload new content."
            action={<Button size="sm" onClick={()=>setQCat("")}>Clear search</Button>}/>}
        {subidos.length>0&&<span style={{fontSize:12,color:"var(--text-subtle)"}}>Uploaded this session: {subidos.join(", ")}</span>}
      </Card>
    </div>}
    {tab==="Settings"&&<div style={{display:"flex",flexDirection:"column",gap:20,maxWidth:720}}>
      <Card padding="20px" style={{display:"flex",flexDirection:"column",gap:12}}>
        <span style={{fontSize:13,fontWeight:700,textTransform:"uppercase",letterSpacing:".06em"}}>Ask Bruce assistant</span>
        <p style={{margin:0,fontSize:13,lineHeight:1.5,color:"var(--text-muted)"}}>Show the floating Ask Bruce launcher across the platform. Off by default.</p>
        <Switch label="Show Ask Bruce launcher" checked={!!askBruce} onChange={v=>setAskBruce&&setAskBruce(v)} style={{marginTop:4}}/>
      </Card>
      {/* Roles y permisos: un desplegable por rol. */}
      <div style={{display:"flex",flexDirection:"column",gap:10}}>
        <span style={{fontSize:13,fontWeight:700,textTransform:"uppercase",letterSpacing:".06em"}}>Roles & permissions</span>
        <Card padding="0" style={{overflow:"hidden"}}>
          {Object.entries(window.DATA.roles).map(([r,d],i)=>{const open=openRole===r;
            return <div key={r} style={{borderTop:i?"var(--border-width-hairline) solid var(--border-hairline)":"none"}}>
              <button type="button" onClick={()=>setOpenRole(open?null:r)} aria-expanded={open}
                style={{display:"flex",alignItems:"center",gap:12,width:"100%",textAlign:"left",border:"none",
                  background:"none",cursor:"pointer",font:"inherit",padding:"16px 20px"}}>
                <span style={{flex:1,fontSize:13,fontWeight:700,textTransform:"uppercase",letterSpacing:".06em"}}>{r}</span>
                <span style={{fontSize:12,color:"var(--text-muted)"}}>{(window.DATA.perms[r]||[]).length} permissions</span>
                <Icon name={open?"chevron-up":"chevron-down"} size={16} strokeColor="var(--text-muted)"/>
              </button>
              {open&&<div style={{padding:"0 20px 20px",display:"flex",flexDirection:"column",gap:12}}>
                <p style={{margin:0,fontSize:13,lineHeight:1.5,color:"var(--text-muted)"}}>{d}</p>
                <div style={{display:"grid",gridTemplateColumns:"repeat(auto-fit,minmax(200px,1fr))",gap:10}}>
                  {PERMS.map(p=><Switch key={p} label={p} defaultChecked={(window.DATA.perms[r]||[]).indexOf(p)>=0}/>)}
                </div>
              </div>}
            </div>;})}
        </Card>
      </div>
    </div>}
    <Dialog open={invite} onClose={()=>setInvite(false)} title="Invite user" width={460}
      footer={<Button size="sm" onClick={()=>setInvite(false)}>Send invite</Button>}>
      <div style={{display:"flex",flexDirection:"column",gap:16,marginTop:8}}>
        <Input label="Work email" placeholder="name@company.com"/>
        <Select label="Role" options={["Platform admin","Staff","Member","Viewer"]}/>
      </div>
    </Dialog>
  </div>;
}
window.AdminScreen=AdminScreen;