// HimLocal — v2 Shop experience (separate from home)
// Multi-category local-product marketplace: woolen artisans, ghee, fruits,
// honey & tea, crafts, spices. Vendor stories. Cart is a SEPARATE flow.

const { useState: useStateShop, useMemo: useMemoShop } = React;
const ShopIcon = window.HomeIcon;

function V2ShopScreen({ data, initialCat='all', cartCount, onBack, onOpenCart, onAddToCart, onOpenProfile, onOpenProduct }) {
  const [cat, setCat] = useStateShop(initialCat);
  const [query, setQuery] = useStateShop('');
  const [wishlist, setWishlist] = useStateShop(() => new Set());
  const toggleWish = (id) => setWishlist(prev => {
    const next = new Set(prev);
    next.has(id) ? next.delete(id) : next.add(id);
    return next;
  });

  const D = data;
  const cats = D.shopCategories;

  // Filter products
  const filtered = useMemoShop(() => {
    let list = D.shopProducts;
    if (cat !== 'all') list = list.filter(p => p.cat === cat);
    if (query.trim()) {
      const q = query.toLowerCase();
      list = list.filter(p => p.name.toLowerCase().includes(q) || D.shopVendors[p.vendor]?.name.toLowerCase().includes(q));
    }
    return list;
  }, [cat, query]);

  // Group by vendor for storytelling
  const byVendor = useMemoShop(() => {
    const g = {};
    filtered.forEach(p => { (g[p.vendor] ||= []).push(p); });
    return g;
  }, [filtered]);

  // Hero category (when 'all')
  const heroCat = cats.find(c => c.id === 'wool');

  return (
    <div className="v2-shop">
      {/* HEAD: back + title + cart */}
      <div className="v2-shop__head">
        <div className="v2-shop__topbar">
          <button className="v2-shop__back" onClick={onBack} aria-label="Back">←</button>
          <div className="v2-shop__title">Shop <em>local</em></div>
          <button className="v2-shop__cart" onClick={onOpenCart} aria-label="Cart">
            <ShopIcon name="cart" size={16}/>
            {cartCount > 0 && <span className="v2-shop__cart-badge">{cartCount}</span>}
          </button>
        </div>
        <div className="v2-shop__search">
          <span className="v2-shop__search-icon"><ShopIcon name="search" size={16}/></span>
          <input
            placeholder="Search ghee, wool, honey, gucchi…"
            value={query}
            onChange={e => setQuery(e.target.value)}/>
        </div>
        <div className="v2-shop__catbar">
          <button className={`v2-shop__catchip ${cat === 'all' ? 'is-on' : ''}`} onClick={() => setCat('all')}>All</button>
          {cats.map(c => (
            <button key={c.id}
              className={`v2-shop__catchip ${cat === c.id ? 'is-on' : ''}`}
              onClick={() => setCat(c.id)}>{c.name}</button>
          ))}
        </div>
      </div>

      <div className="v2-shop__body">

        {/* HERO (only on 'all') */}
        {cat === 'all' && !query && (
          <>
            <div className="v2-shop-hero">
              <div className="v2-shop-hero__bg" style={{ backgroundImage:`url(${heroCat.img})` }}/>
              <div className="v2-shop-hero__scrim"/>
              <div className="v2-shop-hero__copy">
                <div className="v2-shop-hero__lbl">Featured · This week</div>
                <div className="v2-shop-hero__title">Yak-wool, from <br/>11 looms <em>above Kibber.</em></div>
                <span className="v2-shop-hero__cta" onClick={() => setCat('wool')}>Shop the collection →</span>
              </div>
            </div>

            {/* CATEGORY GRID */}
            <div className="v2-sech">
              <div className="v2-sech__t">Browse <em>categories</em></div>
              <button className="v2-sech__more" onClick={() => setCat('all')}>{cats.length} groups</button>
            </div>
            <div className="v2-cats">
              {cats.map(c => (
                <button key={c.id} className="v2-cat" onClick={() => setCat(c.id)}>
                  <div className="v2-cat__bg" style={{ backgroundImage:`url(${c.img})` }}/>
                  <div className="v2-cat__scrim"/>
                  <div className="v2-cat__name">{c.name}</div>
                  <div className="v2-cat__sub">{c.sub}</div>
                </button>
              ))}
            </div>
          </>
        )}

        {/* VENDOR STORIES + PRODUCTS */}
        <div className="v2-sech" style={{marginTop:cat==='all'?12:0}}>
          <div className="v2-sech__t">
            {cat === 'all'
              ? <>Featured <em>artisans</em></>
              : <>{cats.find(c => c.id === cat)?.name}</>}
          </div>
          <span className="v2-sech__more">{filtered.length} products</span>
        </div>

        {Object.keys(byVendor).length === 0 && (
          <div style={{padding:'40px 20px',textAlign:'center',color:'var(--fg-3)'}}>
            <div style={{fontFamily:'var(--font-display)',fontStyle:'italic',fontSize:16,color:'var(--slate-700)',marginBottom:6}}>Nothing matches “{query}”.</div>
            <div style={{font:'400 12px var(--font-body)'}}>Try a broader term, or browse by category.</div>
          </div>
        )}

        {Object.entries(byVendor).map(([vid, prods]) => {
          const v = D.shopVendors[vid];
          if (!v) return null;
          return (
            <div key={vid} className="v2-vendor">
              <div className="v2-vendor__img" style={{ backgroundImage:`url(${v.img})` }}>
                <div className="v2-vendor__head">
                  <div className="v2-vendor__loc">{v.loc}</div>
                  <div className="v2-vendor__name">{v.name}</div>
                </div>
              </div>
              <div className="v2-vendor__body">
                <div className="v2-vendor__story">{v.story}</div>
              </div>
              <div className="v2-vendor__prods">
                {prods.map(p => (
                  <div key={p.id} className="v2-prod" role="link" tabIndex={0}
                    onClick={() => onOpenProduct && onOpenProduct(p.id)}
                    onKeyDown={e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onOpenProduct && onOpenProduct(p.id); } }}
                    style={{cursor:'pointer'}}>
                    <div className="v2-prod__img" style={{ backgroundImage:`url(${p.img})` }}>
                      <button className="v2-prod__add" onClick={e => { e.stopPropagation(); onAddToCart(p.id); }} title="Add to cart">+</button>
                    </div>
                    <div className="v2-prod__name">{p.name}</div>
                    <div className="v2-prod__meta">{p.weight}</div>
                    <div className="v2-prod__price">₹{p.price.toLocaleString()}</div>
                  </div>
                ))}
              </div>
            </div>
          );
        })}

        {/* Flat 2-col vertical grid below the horizontal vendor rails */}
        {filtered.length > 0 && (
          <>
            <div className="v2-sech" style={{marginTop:18}}>
              <div className="v2-sech__t">Browse <em>all</em></div>
              <span className="v2-sech__more">{filtered.length} · {wishlist.size} saved</span>
            </div>
            <div className="app-allprods">
              {filtered.map(p => {
                const v = D.shopVendors[p.vendor];
                const wished = wishlist.has(p.id);
                return (
                  <div key={p.id} className="app-allprod" role="link" tabIndex={0}
                    onClick={() => onOpenProduct && onOpenProduct(p.id)}>
                    <div className="app-allprod__img" style={{ backgroundImage:`url(${p.img})` }}>
                      <button className={`app-allprod__wish ${wished ? 'is-on' : ''}`}
                        onClick={e => { e.stopPropagation(); toggleWish(p.id); }}
                        aria-label={wished ? 'Remove from wishlist' : 'Save'}>
                        {wished ? '♥' : '♡'}
                      </button>
                    </div>
                    <div className="app-allprod__body">
                      <div className="app-allprod__maker">{v?.name}</div>
                      <div className="app-allprod__name">{p.name}</div>
                      <div className="app-allprod__foot">
                        <span className="app-allprod__price">₹{p.price.toLocaleString()}</span>
                        <button className="app-allprod__add" onClick={e => { e.stopPropagation(); onAddToCart(p.id); }} aria-label="Add">+</button>
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
          </>
        )}

        {/* "Shop gear" hint */}
        {cat === 'all' && !query && (
          <div style={{padding:'18px 16px',background:'var(--bone-100)',borderRadius:12,marginTop:8,display:'flex',gap:12,alignItems:'center'}}>
            <div style={{width:46,height:46,borderRadius:10,background:'var(--slate-700)',color:'white',display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0}}>
              <ShopIcon name="mountain" size={20}/>
            </div>
            <div style={{flex:1,minWidth:0}}>
              <div style={{font:'600 13px var(--font-body)',color:'var(--slate-700)'}}>Shop gear · coming soon</div>
              <div style={{font:'400 11.5px var(--font-body)',color:'var(--fg-3)',marginTop:2,lineHeight:1.4}}>Tents, base layers, crampons. A separate kit-shop, opening late 2026.</div>
            </div>
            <button style={{font:'600 10px var(--font-body)',letterSpacing:'.12em',textTransform:'uppercase',padding:'7px 12px',borderRadius:999,background:'transparent',border:'1px solid var(--border-2)',color:'var(--slate-700)',cursor:'pointer'}}>Notify</button>
          </div>
        )}
      </div>
    </div>
  );
}

window.V2ShopScreen = V2ShopScreen;

// ─── Cart screen (separate experience) ─────────────────────────
function V2CartScreen({ data, items, onBack, onQty, onCheckout }) {
  const D = data;
  const lineItems = items.map(it => ({ ...it, prod: D.shopProducts.find(p => p.id === it.id) })).filter(it => it.prod);
  const sub = lineItems.reduce((s, it) => s + it.prod.price * it.qty, 0);
  const ship = sub > 0 ? 120 : 0;
  const tax  = Math.round(sub * 0.05);
  const total = sub + ship + tax;

  return (
    <div className="v2-cart">
      <div className="v2-cart__head">
        <button className="v2-cart__back" onClick={onBack} aria-label="Back">←</button>
        <div className="v2-cart__title">Your <em>basket</em></div>
        <div style={{font:'500 12px var(--font-mono)',color:'var(--fg-3)',letterSpacing:'.04em'}}>{lineItems.length} {lineItems.length === 1 ? 'item' : 'items'}</div>
      </div>
      <div className="v2-cart__body">
        {lineItems.length === 0 ? (
          <div className="v2-cart__empty">
            <div className="v2-cart__empty-h">No items in your basket.</div>
            <div>Browse the local-product shop and tap “+” to add things.</div>
            <button className="v2-cart__empty-cta" onClick={onBack}>Back to shop</button>
          </div>
        ) : (
          lineItems.map(it => {
            const v = D.shopVendors[it.prod.vendor];
            const key = it.lineKey || it.id;
            return (
              <div key={key} className="v2-cart-row">
                <div className="v2-cart-row__img" style={{ backgroundImage:`url(${it.prod.img})` }}/>
                <div className="v2-cart-row__body">
                  <div className="v2-cart-row__name">{it.prod.name}</div>
                  <div className="v2-cart-row__maker">{v?.name} · {v?.loc}</div>
                  {it.variant && (
                    <div style={{font:'500 11px var(--font-mono)',color:'var(--leaf-700)',letterSpacing:'.04em',marginTop:3}}>{it.variant}</div>
                  )}
                  {it.note && (
                    <div style={{font:'400 11px var(--font-body)',color:'var(--fg-3)',background:'var(--bone-100)',border:'1px solid var(--border-1)',borderRadius:6,padding:'4px 7px',marginTop:5,lineHeight:1.4}}>
                      <span style={{fontWeight:600,color:'var(--fg-2)'}}>Note · </span>{it.note}
                    </div>
                  )}
                  <div className="v2-cart-row__bottom">
                    <span className="v2-cart-row__price">₹{(it.prod.price * it.qty).toLocaleString()}</span>
                    <span className="v2-cart-row__qty">
                      <button onClick={() => onQty(key, -1)}>−</button>
                      <span>{it.qty}</span>
                      <button onClick={() => onQty(key, 1)}>+</button>
                    </span>
                  </div>
                </div>
              </div>
            );
          })
        )}
      </div>
      {lineItems.length > 0 && (
        <div className="v2-cart__sum">
          <div className="v2-cart__line"><span>Subtotal</span><span style={{fontFamily:'var(--font-mono)'}}>₹{sub.toLocaleString()}</span></div>
          <div className="v2-cart__line"><span>Shipping (3—7 days)</span><span style={{fontFamily:'var(--font-mono)'}}>₹{ship}</span></div>
          <div className="v2-cart__line"><span>GST (5%)</span><span style={{fontFamily:'var(--font-mono)'}}>₹{tax.toLocaleString()}</span></div>
          <div className="v2-cart__line" style={{borderTop:'1px dashed var(--border-1)',marginTop:6,paddingTop:8}}>
            <strong>Total</strong>
            <strong style={{fontFamily:'var(--font-mono)'}}>₹{total.toLocaleString()}</strong>
          </div>
          <button className="v2-cart__pay" onClick={() => onCheckout(total)}>Checkout · pay ₹{total.toLocaleString()}</button>
        </div>
      )}
    </div>
  );
}
window.V2CartScreen = V2CartScreen;