/* ParallelOS Control Plane — Marketplace (template catalog) */
const { useState:mS, useMemo:mM } = React;

function Stars({r}){
  return <span style={{color:'var(--warn)',fontSize:12,letterSpacing:1}} title={r}>{'★★★★★'.slice(0,Math.round(r))}<span style={{color:'var(--app-border-2)'}}>{'★★★★★'.slice(Math.round(r))}</span></span>;
}

function Marketplace({go}){
  const [q,setQ]=mS('');
  const [cat,setCat]=mS('All');
  const list=mM(()=>TEMPLATES.filter(t=>(cat==='All'||t.cat===cat)&&(t.name.toLowerCase().includes(q.toLowerCase())||t.desc.toLowerCase().includes(q.toLowerCase())||t.cat.toLowerCase().includes(q.toLowerCase()))),[q,cat]);
  const deploy=(t)=>go('new',{prefill:{tplId:t.id}});
  return (
    <div className="view">
      <div style={{marginBottom:18,maxWidth:560,color:'var(--app-dim)',fontSize:13.5}}>Pre-built, container-ready apps maintained by ParallelOS. Deploy any template to the network in one click — or bring your own image.</div>
      <div style={{display:'flex',gap:12,alignItems:'center',marginBottom:16,flexWrap:'wrap'}}>
        <div style={{position:'relative',flex:'1 1 240px',minWidth:200}}>
          <span style={{position:'absolute',left:12,top:'50%',transform:'translateY(-50%)',color:'var(--app-faint)',width:15,height:15}}><Icon n="search"/></span>
          <input className="inp" style={{paddingLeft:36,fontFamily:'var(--f-body)'}} placeholder="Search templates, models, categories…" value={q} onChange={e=>setQ(e.target.value)}/>
        </div>
      </div>
      <div className="seg" style={{marginBottom:20}}>
        {CATEGORIES.map(c=><button key={c} className={cat===c?'on':''} onClick={()=>setCat(c)}>{c}</button>)}
      </div>
      {list.length===0
        ? <div className="empty"><Icon n="search"/><div>No templates match “{q}”</div></div>
        : <div className="dev-grid" style={{gridTemplateColumns:'repeat(auto-fill,minmax(290px,1fr))'}}>
          {list.map(t=>(
            <div className="panel" key={t.id} style={{display:'flex',flexDirection:'column'}}>
              <div className="panel-b" style={{flex:1,display:'flex',flexDirection:'column'}}>
                <div style={{display:'flex',alignItems:'center',gap:12,marginBottom:13}}>
                  <span className="gi" style={{width:42,height:42,borderRadius:10,background:'var(--app-elev)',display:'grid',placeItems:'center',color:'var(--accent)',flex:'0 0 auto'}}><Icon n={t.icon}/></span>
                  <div style={{minWidth:0}}><div style={{fontFamily:'var(--f-display)',fontWeight:600,fontSize:15.5,whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>{t.name}</div>
                    <div style={{fontFamily:'var(--f-mono)',fontSize:11,color:'var(--app-faint)'}}>{t.cat}</div></div>
                </div>
                <p style={{fontSize:13,color:'var(--app-dim)',lineHeight:1.55,margin:'0 0 14px',flex:1}}>{t.desc}</p>
                <div style={{display:'flex',alignItems:'center',gap:14,marginBottom:14,fontSize:11.5,color:'var(--app-faint)',fontFamily:'var(--f-mono)'}}>
                  <Stars r={t.rating}/><span>· {t.pulls} pulls</span>
                </div>
                <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',paddingTop:13,borderTop:'1px solid var(--app-border)'}}>
                  <div><div className="mc" style={{color:'var(--accent)',fontSize:13}}>{t.price} PLOS/h</div><div style={{fontSize:10.5,color:'var(--app-faint)',fontFamily:'var(--f-mono)'}}>{t.minGpu}+</div></div>
                  <button className="b b-pri b-sm" onClick={()=>deploy(t)}><Icon n="play"/>Deploy</button>
                </div>
              </div>
            </div>
          ))}
        </div>}
    </div>
  );
}
Object.assign(window,{Marketplace});