/* Rocket Closet — Home + Listing + Product Detail views.
   Brand Book 2026: Montserrat only, orange reserved for brand moments. */
const { useState: useS1, useEffect: useE1, useMemo: useM1 } = React;
const { fmt, texIdx, Icon, RcMark, Wordmark } = window.RcShared;

// ----- Category silhouettes (SVG) — stand-ins until real photography lands -----
const GearSilhouette = ({ category, fill, stroke }) => {
  const s = { fill, stroke, strokeWidth: 0.8, strokeLinejoin: 'round' };
  const ink = 'rgba(10,25,48,.35)';

  switch (category) {
    case 'jackets':
      return (
        <svg viewBox="0 0 120 160" style={{width:'62%', height:'auto'}}>
          {/* jacket silhouette */}
          <path d="M40 30 Q60 18 80 30 L98 42 L110 80 L96 82 L96 140 Q60 148 24 140 L24 82 L10 80 L22 42 Z" {...s}/>
          {/* zipper */}
          <line x1="60" y1="32" x2="60" y2="138" stroke={ink} strokeWidth="1" strokeDasharray="2 2"/>
          {/* collar */}
          <path d="M44 32 Q60 26 76 32 L72 42 Q60 38 48 42 Z" fill="rgba(255,255,255,.15)"/>
          {/* cuff hints */}
          <path d="M10 80 L22 82 M110 80 L98 82" stroke={ink} strokeWidth=".8"/>
        </svg>
      );
    case 'pants':
      return (
        <svg viewBox="0 0 120 160" style={{width:'48%', height:'auto'}}>
          <path d="M30 20 L90 20 L92 68 L80 150 L64 150 L60 90 L56 150 L40 150 L28 68 Z" {...s}/>
          <line x1="60" y1="22" x2="60" y2="88" stroke={ink} strokeWidth=".8" strokeDasharray="2 2"/>
          <path d="M30 20 L90 20 L92 30 L28 30 Z" fill="rgba(0,0,0,.12)"/>
        </svg>
      );
    case 'gear': {
      // skis / board / helmet — pick by hash
      return (
        <svg viewBox="0 0 160 160" style={{width:'78%', height:'auto'}}>
          {/* two skis */}
          <path d="M42 14 Q46 10 50 14 L56 138 Q52 146 46 146 Q40 146 36 138 Z" {...s}/>
          <path d="M82 14 Q86 10 90 14 L96 138 Q92 146 86 146 Q80 146 76 138 Z" {...s}/>
          {/* binding bands */}
          <rect x="34" y="70" width="24" height="6" fill="rgba(0,0,0,.35)"/>
          <rect x="74" y="70" width="24" height="6" fill="rgba(0,0,0,.35)"/>
          <rect x="34" y="84" width="24" height="4" fill="rgba(0,0,0,.2)"/>
          <rect x="74" y="84" width="24" height="4" fill="rgba(0,0,0,.2)"/>
        </svg>
      );
    }
    case 'accessories':
      return (
        <svg viewBox="0 0 140 120" style={{width:'62%', height:'auto'}}>
          {/* helmet */}
          <path d="M20 70 Q20 20 70 20 Q120 20 120 70 L120 84 L20 84 Z" {...s}/>
          {/* visor */}
          <path d="M28 50 Q70 40 112 50 L110 70 Q70 62 30 70 Z" fill="rgba(10,25,48,.55)"/>
          <path d="M20 84 L120 84 L118 92 L22 92 Z" fill="rgba(0,0,0,.2)"/>
        </svg>
      );
    default:
      return (
        <svg viewBox="0 0 120 120" style={{width:'60%', height:'auto'}}>
          <rect x="20" y="20" width="80" height="80" {...s}/>
        </svg>
      );
  }
};

// ----- Placeholder product image — real photo first, gear silhouette as fallback -----
const ProductPh = ({ product, variant = 'card' }) => {
  const tex = texIdx(product.id);
  const swatches = (product.colors || []).slice(0, 4);
  const primary = swatches[0] ? window.RC_SWATCH(swatches[0]) : '#6B7A93';
  const stroke = 'rgba(10,25,48,.45)';

  // Try real photo at assets/products/<RC-ID>-1.jpg; on error, reveal silhouette placeholder.
  const [imgStatus, setImgStatus] = useS1('loading');
  const imgSrc = product.image || `assets/products/${product.id}-1.jpg`;

  return (
    <>
      <div className={`phbg ${tex}`}/>

      {/* Silhouette placeholder — always rendered behind the real image so fallback is instant */}
      <div className="ph-silhouette">
        <GearSilhouette category={product.category} fill={primary} stroke={stroke}/>
      </div>
      <div className="ph-brandtag">
        <span className="b">{product.brand}</span>
      </div>

      {/* Real photo — covers the silhouette when it loads. onError simply hides it. */}
      {imgStatus !== 'error' && (
        <img
          src={imgSrc}
          alt={`${product.brand} ${product.name}`}
          className={`ph-real ${imgStatus === 'loaded' ? 'on' : ''}`}
          onLoad={()=>setImgStatus('loaded')}
          onError={()=>setImgStatus('error')}
          draggable={false}
        />
      )}

      {swatches.length > 0 && (
        <div className="swatches">
          {swatches.map((c,i)=> <i key={i} style={{background: window.RC_SWATCH(c)}} title={c}/>)}
        </div>
      )}
    </>
  );
};

// ----- PDP gallery: tries -1..-4 extra angles; falls back to single image -----
const PdpGallery = ({ product }) => {
  const [active, setActive] = useS1(0);
  const [available, setAvailable] = useS1([0]); // indices of images that loaded successfully
  const candidates = [
    `assets/products/${product.id}-1.jpg`,
    `assets/products/${product.id}-2.jpg`,
    `assets/products/${product.id}-3.jpg`,
    `assets/products/${product.id}-4.jpg`,
    `assets/products/${product.id}-5.jpg`,
  ];
  const [statuses, setStatuses] = useS1(candidates.map(()=> 'loading'));

  const mark = (i, s) => setStatuses(prev => {
    const n = prev.slice(); n[i] = s; return n;
  });

  const primaryLoaded = statuses[0] === 'loaded';
  const loadedExtras = statuses.slice(1).map((s,i)=> s==='loaded' ? i+1 : null).filter(x=>x!==null);
  const gallery = primaryLoaded ? [0, ...loadedExtras] : [];

  return (
    <div className="pdp-gallery">
      <div className="pdp-hero">
        <ProductPh product={{...product, image: candidates[gallery[active] || 0]}} variant="hero"/>
        <div className="pct-badge">−{product.pct}%</div>
      </div>
      {/* Hidden preload probes for angles 2..4 so we know whether to show thumbs */}
      {[1,2,3,4].map(i => (
        <img key={i} src={candidates[i]} alt=""
          style={{display:'none'}}
          onLoad={()=>mark(i,'loaded')}
          onError={()=>mark(i,'error')}/>
      ))}
      {gallery.length > 1 && (
        <div className="pdp-thumbs">
          {gallery.map((idx, i) => (
            <button key={idx} className={`thumb ${active===i?'on':''}`} onClick={()=>setActive(i)}>
              <img src={candidates[idx]} alt={`view ${i+1}`}/>
            </button>
          ))}
        </div>
      )}
    </div>
  );
};

// ----- Product card -----
const ProductCard = ({ p, onOpen, fav, onFav }) => (
  <div className="card" onClick={()=>onOpen(p)}>
    <div className="card-img">
      <ProductPh product={p}/>
      <div className="pct">−{p.pct}%</div>
      <button className={`fav ${fav?'on':''}`} onClick={(e)=>{e.stopPropagation(); onFav(p.id);}} aria-label="Save">
        {Icon.heart(fav)}
      </button>
    </div>
    <div className="card-body">
      <div className="brand">{p.brand}</div>
      <div className="name">{p.name}</div>
      <div className="serial">{p.id}</div>
      <div className="price">
        <span className="now">{fmt(p.now)}</span>
        <span className="was">{fmt(p.was)}</span>
      </div>
      <div className="save">Save {fmt(p.saved)}</div>
    </div>
  </div>
);

// ----- Home -----
const Home = ({ go, onFav, favs }) => {
  const total = window.RC_PRODUCTS.length;
  const avgPct = Math.round(window.RC_PRODUCTS.reduce((s,p)=>s+p.pct,0)/total);

  const countBy = (g) => window.RC_PRODUCTS.filter(p=>p.gender===g).length;

  const featured = useM1(()=>{
    return [...window.RC_PRODUCTS].sort((a,b)=>b.saved-a.saved).slice(0,6);
  },[]);

  return (
    <div className="view home">
      <div className="home-hero">
        <div className="kicker">Spring Clearance · 2026</div>
        <div className="headline">The Catalogue.</div>
        <div className="sub">150+ pieces curated from boutiques in six Rocky Mountain resorts. 40–70% off retail.</div>
        <div className="meta-row">
          <span>{total} items</span>
          <span className="slogan-sm">MY GEAR MEETS ME THERE.</span>
        </div>
      </div>

      <div className="home-quickstats">
        <div className="stat"><span className="n">{total}</span><span className="l">Curated</span></div>
        <div className="stat"><span className="n">{avgPct}%</span><span className="l">Avg. Off</span></div>
        <div className="stat"><span className="n">6</span><span className="l">Resorts</span></div>
      </div>

      <div className="section-label">Shop by collection <span className="bar"/></div>

      <div className="cat-grid">
        <div className="cat-card" style={{background:'linear-gradient(180deg, #243658 0%, #0A1930 100%)'}}
             onClick={()=>go({view:'listing', gender:'men'})}>
          <span className="label">Collection · 01</span>
          <div className="title"><span className="kicker">The Mountain</span>Men</div>
          <span className="count">{countBy('men')} Pieces</span>
          <div className="bg"><svg viewBox="0 0 200 220" preserveAspectRatio="xMidYMax slice" style={{position:'absolute',inset:0,width:'100%',height:'100%',opacity:.18}}>
            <path d="M0 160 L60 110 L120 140 L200 90 L200 220 L0 220Z" fill="#fff"/>
          </svg></div>
        </div>
        <div className="cat-card" style={{background:'linear-gradient(180deg, #1F3464 0%, #0A1930 100%)'}}
             onClick={()=>go({view:'listing', gender:'women'})}>
          <span className="label">Collection · 02</span>
          <div className="title"><span className="kicker">The Mountain</span>Women</div>
          <span className="count">{countBy('women')} Pieces</span>
          <div className="bg"><svg viewBox="0 0 200 220" preserveAspectRatio="xMidYMax slice" style={{position:'absolute',inset:0,width:'100%',height:'100%',opacity:.2}}>
            <path d="M0 170 L50 130 L110 160 L200 100 L200 220 L0 220Z" fill="#fff"/>
          </svg></div>
        </div>
        <div className="cat-card wide" style={{background:'linear-gradient(90deg, #162949 0%, #0A1930 70%, #243658 100%)'}}
             onClick={()=>go({view:'listing', gender:'kids'})}>
          <span className="label">Collection · 03</span>
          <div className="title" style={{display:'flex', alignItems:'baseline', gap:12}}>
            <span style={{fontSize:32}}>Kids</span>
            <span className="kicker" style={{margin:0}}>the next generation</span>
          </div>
          <span className="count">{countBy('kids')} Pieces</span>
        </div>
      </div>

      <div className="section-label">Deepest discounts <span className="bar"/></div>
      <div className="featured-strip">
        {featured.map(p => (
          <div className="fc" key={p.id}>
            <ProductCard p={p} onOpen={(pp)=>go({view:'pdp', id:pp.id})} fav={favs.has(p.id)} onFav={onFav}/>
          </div>
        ))}
      </div>

      <div className="service-block">
        <div className="kicker">How it works</div>
        <h3>Concierge Buying Service</h3>
        <p>Your gear ships directly to your Rocket Closet storage unit, tuned and ready for next season.</p>
        <ol>
          <li><span>Browse the catalogue and save pieces to your Order List.</span></li>
          <li><span>Check out via WhatsApp or email. We confirm within 24 hours.</span></li>
          <li><span>Receive a secure payment link at retailer price — no markups.</span></li>
          <li><span>We purchase and ship to your RC locker. Your gear meets you there.</span></li>
        </ol>
      </div>

      <div className="membership">
        <div className="k">Required · Account</div>
        <h3>Rocket Closet Storage</h3>
        <p>Plans start at $500 / year (Small Locker). Climate-controlled, fully insured, human concierge — seven days a week. New members, open your account before ordering.</p>
        <div className="cta">Start membership <Icon.arrow/></div>
        <div className="slogan-sm">MY GEAR MEETS ME THERE.</div>
      </div>
    </div>
  );
};

// ----- Listing -----
const Listing = ({ gender, initialCat, go, onFav, favs }) => {
  const [cat, setCat] = useS1(initialCat || 'all');
  const [brand, setBrand] = useS1('all');
  const [minPct, setMinPct] = useS1(0);
  const [sort, setSort] = useS1('featured');

  const all = window.RC_PRODUCTS.filter(p => p.gender === gender);
  const cats = ['all','jackets','pants','gear','accessories'];
  const brandsAvail = useM1(()=>{
    const set = new Set();
    all.forEach(p=>set.add(p.brand));
    return ['all', ...Array.from(set).sort()];
  }, [gender]);

  const list = useM1(() => {
    let arr = all.slice();
    if (cat !== 'all') arr = arr.filter(p=>p.category===cat);
    if (brand !== 'all') arr = arr.filter(p=>p.brand===brand);
    if (minPct > 0) arr = arr.filter(p=>p.pct >= minPct);
    switch(sort){
      case 'price-asc': arr.sort((a,b)=>a.now-b.now); break;
      case 'price-desc': arr.sort((a,b)=>b.now-a.now); break;
      case 'save-desc': arr.sort((a,b)=>b.saved-a.saved); break;
      case 'pct-desc': arr.sort((a,b)=>b.pct-a.pct); break;
      default: break;
    }
    return arr;
  }, [gender, cat, brand, minPct, sort]);

  const genderTitle = { men:'Men', women:'Women', kids:'Kids' }[gender];
  const subTag = { men:'— M E N —', women:'— W O M E N —', kids:'— K I D S —' }[gender];

  return (
    <div className="view listing">
      <div className="listing-head">
        <div>
          <div className="crumb">Catalogue · {genderTitle}</div>
          <h1>{genderTitle}.</h1>
          <span className="kicker">{subTag}</span>
        </div>
        <button className="back" onClick={()=>go({view:'home'})}>← Home</button>
      </div>

      <div className="seg">
        {cats.map(c => (
          <button key={c} className={cat===c?'on':''} onClick={()=>setCat(c)}>
            {c==='all' ? 'All' : c}
          </button>
        ))}
      </div>

      <div className="filter-bar">
        <select className="chip" value={brand} onChange={e=>setBrand(e.target.value)}
          style={{appearance:'none', padding:'8px 24px 8px 12px',
            backgroundImage:"url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%230A1930'/%3E%3C/svg%3E\")",
            backgroundRepeat:'no-repeat', backgroundPosition:'right 8px center', backgroundSize:8}}>
          {brandsAvail.map(b => <option key={b} value={b}>{b==='all'?'All brands':b}</option>)}
        </select>
        {[40,50,60,70].map(pc => (
          <button key={pc} className={`chip ${minPct===pc?'active':''}`} onClick={()=>setMinPct(minPct===pc?0:pc)}>
            {pc}%+ off
          </button>
        ))}
      </div>

      <div className="controls">
        <span className="count">{list.length} results</span>
        <select value={sort} onChange={e=>setSort(e.target.value)}>
          <option value="featured">Sort · Featured</option>
          <option value="save-desc">Biggest savings</option>
          <option value="pct-desc">Highest % off</option>
          <option value="price-asc">Price: low to high</option>
          <option value="price-desc">Price: high to low</option>
        </select>
      </div>

      {list.length === 0 ? (
        <div className="empty">
          <div className="k">No results</div>
          <h3>Try fewer filters</h3>
          <p>Clear a filter to see more of the catalogue.</p>
        </div>
      ) : (
        <div className="products">
          {list.map(p => (
            <ProductCard key={p.id} p={p}
              onOpen={(pp)=>go({view:'pdp', id:pp.id, from:{gender, cat, brand, minPct, sort}})}
              fav={favs.has(p.id)} onFav={onFav}/>
          ))}
        </div>
      )}
    </div>
  );
};

// ----- Product detail -----
const Pdp = ({ id, from, go, onAdd, inCart, onFav, favs }) => {
  const p = window.RC_PRODUCTS.find(x => x.id === id);
  const [size, setSize] = useS1('');
  const [color, setColor] = useS1((p && p.colors && p.colors[0]) || '');

  if (!p) return <div className="empty">Not found</div>;

  const sizeOptions = useM1(()=> window.RC_EXPAND_SIZES(p.sizes, p.category), [p.id]);

  const add = () => {
    if (!size) { alert('Please select a size / option first.'); return; }
    onAdd({ id: p.id, size, color });
  };

  return (
    <div className="view pdp">
      <div className="pdp-back">
        <button onClick={()=> from ? go({view:'listing', gender: from.gender}) : go({view:'home'})}>← Back</button>
        <button onClick={()=>{
          const url = encodeURIComponent(location.href.split('#')[0] + '#' + p.id);
          const text = encodeURIComponent(`${p.brand} ${p.name} (${p.id}) — ${fmt(p.now)} (was ${fmt(p.was)}). ${url}`);
          window.open(`https://wa.me/?text=${text}`, '_blank');
        }}><Icon.share/></button>
      </div>

      <PdpGallery product={p}/>

      <div className="pdp-body">
        <div className="brand">{p.brand}</div>
        <h1>{p.name}</h1>
        <div className="serial">{p.id} · {p.gender} · {p.category}</div>

        <div className="price">
          <span className="now">{fmt(p.now)}</span>
          <span className="was">{fmt(p.was)}</span>
          <span className="pct">−{p.pct}%</span>
        </div>
        <div style={{marginTop:6, fontFamily:'var(--mono)', fontSize:10, fontWeight:500, letterSpacing:'.2em', textTransform:'uppercase', color:'var(--navy-soft)'}}>
          You save {fmt(p.saved)}
        </div>

        <p className="desc">{p.desc}</p>

        <div className="pdp-spec">
          <div className="row"><span className="k">Gender</span><span className="v">{p.gender}</span></div>
          <div className="row"><span className="k">Category</span><span className="v">{p.category}</span></div>
          <div className="row"><span className="k">Sizes</span><span className="v">{p.sizes}</span></div>
          <div className="row"><span className="k">Colours</span><span className="v">{p.colors.join(' · ')}</span></div>
        </div>

        <div className="pdp-selector">
          <div className="h">Colour</div>
          <div className="color-grid">
            {p.colors.map(c => (
              <button key={c} className={`c ${color===c?'on':''}`} onClick={()=>setColor(c)}>
                <i style={{background: window.RC_SWATCH(c)}}/> {c}
              </button>
            ))}
          </div>
        </div>

        <div className="pdp-selector">
          <div className="h">Size</div>
          <div className="size-grid">
            {sizeOptions.map(s => (
              <button key={s} className={size===s?'on':''} onClick={()=>setSize(s)}>{s}</button>
            ))}
          </div>
        </div>
      </div>

      <div className="pdp-actions">
        <button className="btn-ghost" onClick={()=>onFav(p.id)} aria-label="Save">
          {Icon.heart(favs.has(p.id))}
        </button>
        <button className="btn-primary" onClick={add}>
          {inCart ? 'Added · view list' : 'Add to Order List'} <Icon.arrow/>
        </button>
      </div>
    </div>
  );
};

window.RcViews = { Home, Listing, Pdp, ProductCard, ProductPh };