// Lo que es del cliente, en un sitio: sus lockers y lo que ha guardado. Los
// equipos favoritos no necesitan pestana propia — se marcan con la estrella de
// su fila, que ya estaba.
const FAV_TEMPLATES=[
  {name:"Gridiron 21",category:"Football · Game jersey"},
  {name:"Varsity 04",category:"Basketball · Reversible"},
  {name:"Diamond 12",category:"Baseball · Full-button"},
  {name:"Pitch 09",category:"Soccer · Match kit"}
];

// Los graficos que la plataforma ofrece (Admin -> Catalog -> Graphics Library),
// aqui puestos para usarlos en los disenyos del equipo. El staff los administra;
// el Member solo los navega y los mete al diseno. El cliente no ve el Locker.
function GraphicsPanel({go}){
  const g=window.DATA.catalog.graphics;
  const [cat,setCat]=React.useState("All");
  const cats=["All",...g.categories];
  const items=cat==="All"?g.items:g.items.filter(i=>i.cat===cat);
  return <div style={{display:"flex",flexDirection:"column",gap:16}}>
    <span style={{fontSize:12,color:"var(--text-subtle)"}}>From the platform Graphics Library — drop these into your team designs.</span>
    <div style={{display:"flex",gap:8,flexWrap:"wrap"}}>
      {cats.map(c=><button key={c} type="button" onClick={()=>setCat(c)}
        style={{fontSize:12,fontWeight:700,padding:"6px 14px",borderRadius:"var(--radius-pill)",cursor:"pointer",
          border:"var(--border-width-hairline) solid "+(cat===c?"var(--bruce-black)":"var(--border-hairline)"),
          background:cat===c?"var(--bruce-black)":"var(--bruce-white)",color:cat===c?"#fff":"var(--text-muted)"}}>{c}</button>)}
    </div>
    <div style={{display:"grid",gridTemplateColumns:"repeat(auto-fill,minmax(180px,1fr))",gap:16}}>
      {items.map(it=><button key={it.name} type="button" onClick={()=>go("builderEdit")}
        style={{textAlign:"left",cursor:"pointer",font:"inherit",padding:0,border:"none",background:"none"}}>
        <Card padding="0" style={{overflow:"hidden"}}>
          <div style={{aspectRatio:"1 / 1",background:"var(--surface-sunken)",display:"flex",alignItems:"center",justifyContent:"center"}}>
            <Icon name="image" size={30} strokeColor="var(--text-subtle)"/>
          </div>
          <div style={{padding:"10px 12px",display:"flex",flexDirection:"column",gap:2}}>
            <span style={{fontSize:13,fontWeight:600}}>{it.name}</span>
            <span style={{fontSize:11,fontWeight:700,textTransform:"uppercase",letterSpacing:".1em",color:"var(--text-subtle)"}}>{it.cat}</span>
          </div>
        </Card>
      </button>)}
    </div>
  </div>;
}

function LockersScreen({go,openCustomTeam,tab,setTab,showTabs,tabs}){
  return <div style={{display:"flex",flexDirection:"column",gap:16}}>
    {showTabs&&<div style={{overflowX:"auto"}}><Tabs tabs={tabs} value={tab} onChange={setTab}/></div>}

    {tab==="Lockers"&&<TeamsScreen go={go} openCustomTeam={openCustomTeam}/>}

    {tab==="Graphics"&&<GraphicsPanel go={go}/>}

    {tab==="Favorites"&&(FAV_TEMPLATES.length
      ?<div style={{display:"grid",gridTemplateColumns:"repeat(auto-fill,minmax(200px,1fr))",gap:16}}>
        {FAV_TEMPLATES.map(t=><TemplateCard key={t.name} {...t} onClick={()=>go("browse")}/>)}
      </div>
      :<Card padding="0"><EmptyState base="../.." title="No favorites yet"
        body="Star a template in the library and it shows up here."
        action={<Button size="sm" onClick={()=>go("designs")}>Browse library</Button>}/></Card>)}

    {tab==="Creations"&&<Card padding="0"><EmptyState base="../.." title="No saved creations"
      body="Star a creation and it shows up here."
      action={<Button size="sm" onClick={()=>go("designs")}>Browse library</Button>}/></Card>}
  </div>;
}
window.LockersScreen=LockersScreen;