const T="../../assets/templates/";
const RAILS=[
  {title:"Bruce's picks",ranked:true,items:[
    {name:"Football champions helmet",sport:"Football",preview:T+"football-champions-helmet.png"},
    {name:"Conference champions",sport:"Football",preview:T+"conference-champions-player.png"},
    {name:"Lock it in",sport:"Football",preview:T+"lock-it-in.png"},
    {name:"Esports arch",sport:"Esports",preview:T+"esports-arch.png"},
    {name:"Theater arch",sport:"Theater",preview:T+"theater-arch.png"},
    {name:"Water polo arch",sport:"Water polo",preview:T+"water-polo-arch.png"}
  ]},
  {title:"Football",items:[
    {name:"Vintage badge",sport:"Football",preview:T+"football-vintage-badge.png"},
    {name:"Champions helmet",sport:"Football",preview:T+"football-champions-helmet.png"},
    {name:"Flag football badge",sport:"Flag football",preview:T+"flag-football-badge.png"},
    {name:"Conference stacked",sport:"Football",preview:T+"conference-champions-stacked.png"},
    {name:"Conference champions",sport:"Football",preview:T+"conference-champions-player.png"}
  ]},
  {title:"Baseball & softball",items:[
    {name:"Diamond mark",sport:"Softball",preview:T+"softball-diamond.png"},
    {name:"Speed lines",sport:"Softball",preview:T+"softball-speed-lines.png"},
    {name:"Champions banner",sport:"Baseball",preview:T+"baseball-champions-banner.png"}
  ]},
  {title:"More sports",items:[
    {name:"Archery script",sport:"Archery",preview:T+"archery-script.png"},
    {name:"Golf arch",sport:"Golf",preview:T+"golf-arch.png"},
    {name:"Winged shoe",sport:"Track & field",preview:T+"track-winged-shoe.png"},
    {name:"Volleyball badge",sport:"Volleyball",preview:T+"volleyball-badge.png"},
    {name:"Weightlifting banner",sport:"Weightlifting",preview:T+"weightlifting-banner.png"}
  ]},
  {title:"Favorites",items:[
    {name:"Eagles varsity jersey",sport:"Football"},
    {name:"Dragons crest lockup",sport:"Soccer"},
    {name:"Hawks reversible tank",sport:"Basketball"}
  ]}
];
const PRODUCTS=["shirt","sticker","image","package"];
const ACTIVITIES=["trophy","dumbbell","target","flag","medal"];

function BrowseCard({item,go,rank}){
  const [hover,setHover]=React.useState(false);
  return <div style={{display:"flex",alignItems:"flex-end",flex:"0 0 auto"}}>
    {rank&&<span style={{fontSize:160,fontWeight:800,color:"#F2F2F2",lineHeight:.78,marginRight:-38,
      zIndex:2,position:"relative",fontFamily:"var(--font-core)",textShadow:"0 4px 10px #1b211f4F",
      transform:hover?"scale(1.08)":"scale(1)",transformOrigin:"left bottom",
      transition:"transform .2s ease"}}>{rank}</span>}
    <button onClick={()=>go("builderEdit")} onMouseEnter={()=>setHover(true)} onMouseLeave={()=>setHover(false)}
      style={{width:260,flex:"0 0 auto",border:"var(--border-width-hairline) solid var(--border-hairline)",padding:0,cursor:"pointer",
        font:"inherit",textAlign:"left",background:"none",borderRadius:6,overflow:"hidden",position:"relative",zIndex:1,
        transform:hover?"scale(1.02)":"scale(1)",
        transition:"transform .2s ease"}}>
      <div style={{aspectRatio:"1 / 1",background:"#fff",display:"flex",alignItems:"center",justifyContent:"center",overflow:"hidden"}}>
        {item.preview?<img src={item.preview} alt="" style={{width:"100%",height:"100%",objectFit:"contain",padding:20,boxSizing:"border-box"}}/>
          :<span style={{fontSize:12,color:"var(--text-subtle)"}}>No preview</span>}
      </div>
      {hover&&<div style={{position:"absolute",inset:0,background:"rgba(0,0,0,.04)"}}/>}
    </button>
  </div>;
}

function Rail({title,items,ranked,go,isMobile}){
  const trackRef=React.useRef(null);
  const scrollBy=dir=>{const el=trackRef.current;if(el)el.scrollBy({left:dir*el.clientWidth*.9,behavior:"smooth"});};
  return <div style={{display:"flex",flexDirection:"column",gap:10}}>
    <div style={{display:"flex",alignItems:"center",gap:12,padding:isMobile?"0 16px":"0 48px"}}>
      <span style={{fontSize:17,fontWeight:700,color:"var(--text-body)"}}>{title}</span>
      <div style={{flex:1}}/>
      <Button variant="ghost" size="sm" iconRight={<Icon name="arrow-right" size={14}/>}>View all</Button>
    </div>
    <div style={{position:"relative",padding:"6px 0 20px"}}>
      <button aria-label={title+" — previous"} onClick={()=>scrollBy(-1)} style={{position:"absolute",left:0,top:0,bottom:20,width:48,zIndex:3,
        border:"none",background:"linear-gradient(90deg,rgba(255,255,255,.92),transparent)",color:"var(--text-body)",cursor:"pointer",
        display:"flex",alignItems:"center",justifyContent:"center"}}>
        <Icon name="chevron-left" size={22}/>
      </button>
      <div ref={trackRef} style={{display:"flex",gap:14,overflowX:"scroll",overflowY:"hidden",padding:isMobile?"6px 16px":"6px 48px",margin:"-6px 0",
        scrollbarWidth:"none",msOverflowStyle:"none"}} className="bruce-rail-track">
        {items.map((it,i)=><BrowseCard key={it.name} item={it} go={go} rank={ranked?i+1:undefined}/>)}
      </div>
      <button aria-label={title+" — next"} onClick={()=>scrollBy(1)} style={{position:"absolute",right:0,top:0,bottom:20,width:48,zIndex:3,
        border:"none",background:"linear-gradient(270deg,rgba(255,255,255,.92),transparent)",color:"var(--text-body)",cursor:"pointer",
        display:"flex",alignItems:"center",justifyContent:"center"}}>
        <Icon name="chevron-right" size={22}/>
      </button>
    </div>
  </div>;
}

function FilterRow({label,icons,dropdown,nowrap}){
  return <div style={{display:"flex",alignItems:"center",gap:10,flexWrap:nowrap?"nowrap":"wrap",minWidth:0}}>
    <span style={{fontSize:11,fontWeight:700,textTransform:"uppercase",letterSpacing:".1em",color:"var(--text-muted)"}}>{label}</span>
    {icons.map(ic=><button key={ic} aria-label={label+": "+ic.replace(/-/g," ")}
      style={{width:34,height:34,border:"var(--border-width-hairline) solid var(--border-hairline)",borderRadius:6,
      background:"var(--bruce-white)",color:"var(--text-muted)",cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center"}}>
      <Icon name={ic} size={16}/></button>)}
    <Select options={[dropdown]} wrapperStyle={{width:190,flex:"0 0 auto"}}/>
  </div>;
}

function TemplateBrowse({go}){
  const {isMobile,isDesktop}=useBreakpoint();
  return <div style={{minHeight:"100%",background:"var(--bruce-white)",display:"flex",flexDirection:"column",gap:36,paddingBottom:48}}>
    <style>{".bruce-rail-track::-webkit-scrollbar{display:none}"}</style>
    <ActiveTeamHeader/>
    <div style={{display:"flex",alignItems:"center",gap:isMobile?16:32,flexWrap:isDesktop?"nowrap":"wrap",
      padding:isMobile?"0 16px 16px":"0 48px 24px",overflowX:isDesktop?"auto":"visible",
      borderBottom:"var(--border-width-hairline) solid var(--border-hairline)"}}>
      <FilterRow label="Activity" icons={ACTIVITIES} dropdown="Show all" nowrap={isDesktop}/>
      <FilterRow label="Product" icons={PRODUCTS} dropdown="Art templates" nowrap={isDesktop}/>
    </div>
    {RAILS.map(r=><Rail key={r.title} {...r} go={go} isMobile={isMobile}/>)}
  </div>;
}
window.TemplateBrowse=TemplateBrowse;