// El estado no es un dato del locker: es el del pedido que tiene abierto. Se
// lee de los pedidos para que las dos pantallas no puedan contradecirse.
function proyectoDe(nombre){
  return (window.DATA.orders||[]).find(o=>o.team===nombre);
}

function TeamsScreen({go,openCustomTeam}){
  const [q,setQ]=React.useState("");
  const rows=window.DATA.lockers.filter(t=>t.name.toLowerCase().includes(q.toLowerCase())
    ||t.school.toLowerCase().includes(q.toLowerCase()));
  const cols=[
    {key:"name",label:"Locker",render:t=><span style={{display:"flex",alignItems:"center",gap:12}}>
      <span style={{width:36,height:36,borderRadius:4,border:"1px solid var(--border-hairline)",background:"var(--surface-sunken)",
        display:"flex",alignItems:"center",justifyContent:"center",overflow:"hidden",flex:"0 0 auto"}}>
        {t.logo?<img src={t.logo} alt="" style={{width:"100%",height:"100%",objectFit:"contain"}}/>
          :<Icon name="shirt" size={15} strokeColor="var(--text-subtle)"/>}
      </span>
      <span style={{minWidth:0}}><span style={{display:"block",fontWeight:700}}>{t.name}</span>
        <span style={{display:"block",fontSize:12,color:"var(--text-muted)"}}>{t.school}</span></span></span>},
    {key:"mascot",label:"Mascot"},
    {key:"colors",label:"Colors",render:t=><span style={{display:"flex",gap:6}}>{t.colors.map(c=>
      <span key={c} style={{width:20,height:20,borderRadius:4,background:c,border:"1px solid var(--border-hairline)"}}/>)}</span>},
    {key:"project",label:"Project",render:t=>{const o=proyectoDe(t.name);
      return o?<span style={{display:"flex",flexDirection:"column",gap:3}}>
          <EstadoPedido status={o.status}/>
          <span style={{fontSize:11,color:"var(--text-subtle)"}}>Order {o.id}{o.due?" · ships "+o.due:""}</span>
        </span>
        :<span style={{fontSize:12,color:"var(--text-subtle)"}}>No open project</span>}},
    {key:"updated",label:"Last activity",width:120,render:t=><span style={{fontSize:13,color:"var(--text-muted)"}}>{t.updated}</span>},
    {key:"a",label:"",width:44,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:12,flexWrap:"wrap"}}>
      <SearchInput placeholder="Search lockers" value={q} onChange={e=>setQ(e.target.value)}
        style={{flex:"1 1 260px",maxWidth:360,boxSizing:"border-box"}}/>
      <Button size="sm" onClick={openCustomTeam} iconLeft={<Icon name="plus" size={15}/>}>Add</Button>
    </div>
    {rows.length
      ?<div style={{overflowX:"auto"}}><Table columns={cols} rows={rows} onRowClick={()=>go&&go("browse")} style={{minWidth:720}}/></div>
      :<Card padding="0"><EmptyState base="../.." title={q?"No lockers match":"No lockers yet"}
        body={q?"Try another school or team name.":"Add a team to store its colors, mascot and lockups."}
        action={<Button size="sm" onClick={q?()=>setQ(""):openCustomTeam}>{q?"Clear search":"Add a team"}</Button>}/></Card>}
  </div>;
}
window.TeamsScreen=TeamsScreen;