function CollectionCard({p,entry,onRemove}){
  const [stock,setStock]=React.useState(null);
  const [confirming,setConfirming]=React.useState(false);
  React.useEffect(()=>{setStock(stockInfo(p.id));},[]);
  const oos=stock&&stock.status==='out-of-stock';
  const label=availabilityLabel(stock?stock.status:'in-stock');
  const savedPrice=entry&&entry.priceAtAdd;
  const priceChanged=savedPrice!=null&&savedPrice!==p.price;
  function moveToBag(){ if(oos)return; BB_STORE.addToCart(p.id,entry&&entry.size?entry.size:'Free Size',1); triggerCollectionToast('Added to Bag'); }
  function buyNow(){ if(oos)return; BB_STORE.addToCart(p.id,entry&&entry.size?entry.size:'Free Size',1); location.href='Checkout.html'; }
  return (
    <div>
      <a href={`Product.html?id=${p.id}`} {...productLinkProps()} style={{display:'block',textDecoration:'none'}}>
        <div style={{position:'relative',aspectRatio:'4/5',borderRadius:'var(--radius-lg)',overflow:'hidden',marginBottom:16,boxShadow:'var(--shadow-card)'}}>
          <img src={photo(p.imgs[0])} alt={p.name} style={{width:'100%',height:'100%',objectFit:'cover',filter:oos?'grayscale(0.6)':'none'}}/>
        </div>
        <div style={{fontFamily:'var(--font-serif)',fontSize:19,color:'var(--text-primary)'}}>{p.name}</div>
        <div style={{fontSize:13,color:'var(--text-muted)',marginTop:2}}>{p.sub}{entry&&entry.size?` · ${entry.size}`:''}</div>
        {priceChanged?(
          <div style={{fontSize:13,marginTop:8}}><span style={{color:'var(--text-muted)',textDecoration:'line-through',marginRight:8}}>{money(savedPrice)}</span><span style={{color:'var(--text-primary)'}}>{money(p.price)}</span></div>
        ):(<div style={{fontSize:15,color:'var(--text-primary)',marginTop:8}}>{money(p.price)}</div>)}
      </a>
      <div style={{fontSize:11,letterSpacing:'0.06em',textTransform:'uppercase',color:oos?'#9A4A3C':'var(--text-muted)',marginTop:8}}>{label}</div>
      <div style={{display:'flex',gap:18,marginTop:12,flexWrap:'wrap',fontSize:12,letterSpacing:'0.04em',textTransform:'uppercase'}}>
        <button onClick={buyNow} disabled={oos} style={{background:'none',border:'none',padding:0,cursor:oos?'default':'pointer',color:oos?'var(--text-muted)':'var(--text-primary)',opacity:oos?0.5:1}}>Buy Now</button>
        <button onClick={moveToBag} disabled={oos} style={{background:'none',border:'none',padding:0,cursor:oos?'default':'pointer',color:oos?'var(--text-muted)':'var(--gold-deep)',opacity:oos?0.5:1}}>Move to Cart</button>
        <button onClick={()=>setConfirming(true)} style={{background:'none',border:'none',padding:0,cursor:'pointer',color:'var(--text-muted)'}}>Remove</button>
      </div>
      {confirming&&(
        <div onClick={()=>setConfirming(false)} style={{position:'fixed',inset:0,background:'rgba(31,31,31,0.5)',zIndex:400,display:'flex',alignItems:'center',justifyContent:'center',padding:20}}>
          <div onClick={e=>e.stopPropagation()} style={{background:'var(--ivory)',borderRadius:'var(--radius-lg)',padding:28,maxWidth:380,textAlign:'center'}}>
            <p style={{fontSize:15,color:'var(--text-primary)',marginBottom:20}}>Remove this creation from your Collection?</p>
            <div style={{display:'flex',gap:12,justifyContent:'center'}}>
              <button onClick={()=>setConfirming(false)} style={{border:'1px solid var(--border-default)',background:'none',borderRadius:'var(--radius-md)',padding:'10px 18px',fontSize:12,letterSpacing:'0.04em',textTransform:'uppercase',cursor:'pointer'}}>Cancel</button>
              <button onClick={()=>{onRemove(p.id);setConfirming(false);}} style={{border:'none',background:'var(--charcoal)',color:'var(--ivory)',borderRadius:'var(--radius-md)',padding:'10px 18px',fontSize:12,letterSpacing:'0.04em',textTransform:'uppercase',cursor:'pointer'}}>Remove</button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}
function Wishlist(){
  const [entries,setEntries]=React.useState([]);
  React.useEffect(()=>{
    document.title='My Collection — Bold Bee';
    const upd=()=>setEntries(BB_STORE.wishEntries());
    upd();
    window.addEventListener('bb-wish-update',upd);
    return ()=>window.removeEventListener('bb-wish-update',upd);
  },[]);
  const items=entries.map(e=>({entry:e,p:productBySlug(e.id)})).filter(i=>i.p);
  const itemIdsKey=items.map(i=>i.p.id).join(',');
  const estValue=items.reduce((a,i)=>a+i.p.price,0);
  React.useEffect(()=>{
    if(typeof NotificationStore==='undefined'||!items.length)return;
    const user=typeof BB_AUTH!=='undefined'?BB_AUTH.currentUser():null;
    const lastKey='bb_collection_stock_watch';
    let last={};
    try{last=JSON.parse(localStorage.getItem(lastKey)||'{}');}catch(e){}
    items.forEach(i=>{
      const s=stockInfo(i.p.id);
      if(last[i.p.id]==='out-of-stock'&&s.status!=='out-of-stock'){
        NotificationStore.publish('collection.backInStock',{name:user?user.name:'',email:user?user.email:'',customerId:user?user.id:'',productName:i.p.name});
      }
      last[i.p.id]=s.status;
    });
    localStorage.setItem(lastKey,JSON.stringify(last));
  },[itemIdsKey]);
  function remove(id){ BB_STORE.toggleWishlist(id); }
  const recCollections=Array.from(new Set(items.map(i=>i.p.collection)));
  const recommended=PRODUCTS.filter(p=>recCollections.includes(p.collection)&&!items.some(i=>i.p.id===p.id)).slice(0,3);
  const shareProduct=items[0]?{id:'my-collection',name:`My Collection (${items.length})`,imgs:items[0].p.imgs}:null;
  return (
    <div style={{maxWidth:'var(--container-max)',margin:'0 auto',padding:'var(--space-7) var(--container-pad) var(--space-section)'}}>
      <Breadcrumbs trail={[{label:'Home',href:'index.html'},{label:'My Collection'}]}/>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',flexWrap:'wrap',gap:16,margin:'24px 0 40px'}}>
        <h1 style={{fontFamily:'var(--font-serif)',fontWeight:400,fontSize:'clamp(28px,3vw,38px)',margin:0,color:'var(--text-primary)'}}>My Collection{items.length>0?` (${items.length})`:''}</h1>
        {shareProduct&&typeof ShareSheet!=='undefined'&&<ShareSheet product={shareProduct} url={location.href}/>}
      </div>
      {items.length>0&&<p style={{fontSize:13,color:'var(--text-muted)',margin:'-24px 0 32px'}}>Estimated Collection Value {money(estValue)}</p>}
      {items.length===0?(
        <div style={{textAlign:'center',padding:'var(--space-8) 0'}}>
          <H2 style={{marginBottom:16}}>Your Collection Awaits</H2>
          <p style={{color:'var(--text-secondary)',marginBottom:28,maxWidth:480,marginLeft:'auto',marginRight:'auto',lineHeight:1.8}}>Every remarkable collection begins with a single creation. Save the pieces that inspire you, and they'll be waiting whenever you're ready to return.</p>
          <a href="Collections.html" style={{textDecoration:'none'}}><PrimaryButton>Discover Creations</PrimaryButton></a>
        </div>
      ):(
        <React.Fragment>
          <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:32}}>{items.map(i=>(<CollectionCard key={i.p.id} p={i.p} entry={i.entry} onRemove={remove}/>))}</div>
          {recommended.length>0&&(
            <div style={{marginTop:'var(--space-section)'}}>
              <Eyebrow>Continue Exploring</Eyebrow>
              <H2 style={{marginBottom:32}}>You May Also Appreciate</H2>
              <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:28}}>{recommended.map(r=>(<ProductTile key={r.id} p={r}/>))}</div>
            </div>
          )}
        </React.Fragment>
      )}
    </div>
  );
}
window.Wishlist=Wishlist;