// pages/account.jsx — login, register, account dashboard, orders, wishlist page, search results

function LoginPage() {
  const store = useStore();
  const [email, setEmail] = React.useState('');
  const [pw, setPw] = React.useState('');
  const submit = (e) => {
    e.preventDefault();
    if (!email.includes('@')) return HAPStore.notify('Enter a valid email');
    if (!pw || pw.length < 4) return HAPStore.notify('Enter any local passphrase (not verified)');
    // Local session only — password is NOT verified against a server in default mode.
    store.signIn(email);
    HAPRouter.nav('#/account');
  };
  return (
    <AuthShell title="Sign in" sub="Local browser session only. Server customer Auth (Supabase) is not enabled — passwords are not verified.">
      <form onSubmit={submit} style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        <Field label="Email" value={email} onChange={setEmail} placeholder="you@home.com" />
        <Field label="Local passphrase (not verified)" value={pw} onChange={setPw} placeholder="Any 4+ characters" type="password" />
        <p style={{ fontSize: '.78rem', color: 'var(--muted)' }}>
          This form does not check passwords. Anyone with this browser can create a local session. Remote Auth stays blocked until credentials and <code>useRemote</code> are configured.
        </p>
        <button type="submit" className="btn btn--primary btn--lg btn--full">Continue with local session</button>
        <div style={{ textAlign: 'center', fontSize: '.85rem', color: 'var(--ink-2)', marginTop: 8 }}>
          New here? <a href="#/account/register" style={{ color: 'var(--forest)', textDecoration: 'underline', textUnderlineOffset: 3 }}>Create a local profile</a>
        </div>
      </form>
    </AuthShell>
  );
}

function RegisterPage() {
  const store = useStore();
  const [d, setD] = React.useState({ name: '', email: '', pw: '' });
  const submit = (e) => {
    e.preventDefault();
    if (!d.email.includes('@') || !d.name) return HAPStore.notify('Please complete name & email');
    if (!d.pw || d.pw.length < 4) return HAPStore.notify('Enter a local passphrase (stored nowhere securely)');
    store.signIn(d.email, d.name);
    HAPRouter.nav('#/account');
  };
  return (
    <AuthShell title="Create a local profile" sub="Saved on this device only. Not a secure server account — password is not stored or verified.">
      <form onSubmit={submit} style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        <Field label="Your name" value={d.name} onChange={(v) => setD({ ...d, name: v })} placeholder="Anjali" />
        <Field label="Email" value={d.email} onChange={(v) => setD({ ...d, email: v })} placeholder="you@home.com" />
        <Field label="Local passphrase (not stored / not verified)" value={d.pw} onChange={(v) => setD({ ...d, pw: v })} placeholder="At least 4 characters" type="password" />
        <label className="check" style={{ fontSize: '.82rem' }}>
          <input type="checkbox" defaultChecked onChange={(e) => {
            if (e.target.checked && d.email && window.CustomerForms) {
              window.CustomerForms.subscribeNewsletter(d.email, 'register');
            }
          }} />
          <span className="check__box"><Icon name="check" size={12} /></span>
          <span>Add my email to the local newsletter list (no ESP send)</span>
        </label>
        <button type="submit" className="btn btn--primary btn--lg btn--full">Create local profile</button>
        <div style={{ textAlign: 'center', fontSize: '.85rem', color: 'var(--ink-2)' }}>
          Already have a session? <a href="#/account/login" style={{ color: 'var(--forest)', textDecoration: 'underline', textUnderlineOffset: 3 }}>Sign in</a>
        </div>
      </form>
    </AuthShell>
  );
}

function AuthShell({ title, sub, children }) {
  return (
    <main style={{ minHeight: '70vh', paddingBlock: 64 }}>
      <div className="container" style={{ maxWidth: 980 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0, borderRadius: 16, overflow: 'hidden', background: 'var(--shell)', boxShadow: 'var(--shadow-2)' }} className="auth-grid">
          <div style={{ background: 'var(--forest)', color: 'var(--paper)', padding: 'clamp(28px, 4vw, 56px)', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', minHeight: 480 }}>
            <div>
              <div className="serif" style={{ fontStyle: 'italic', fontSize: '1.6rem' }}>
                <span style={{ fontFamily: 'var(--sans)', fontWeight: 700, letterSpacing: '0.12em' }}>AMBADY</span>
              </div>
              <h1 className="serif" style={{ fontSize: 'clamp(2rem, 4vw, 2.8rem)', lineHeight: 1.05, marginTop: 36 }}>
                Members<br/>save more.
              </h1>
              <p style={{ color: 'rgba(255,255,255,0.7)', marginTop: 16, maxWidth: 320 }}>
                Save addresses, track shipments, build a wishlist, and unlock seasonal members-only drops.
              </p>
            </div>
            <ul style={{ display: 'flex', flexDirection: 'column', gap: 10, fontSize: '.88rem', color: 'rgba(255,255,255,0.85)' }}>
              <li style={{ display: 'flex', gap: 8, alignItems: 'center' }}><Icon name="check" size={14} style={{ color: 'var(--sage)' }} /> Address book & faster checkout</li>
              <li style={{ display: 'flex', gap: 8, alignItems: 'center' }}><Icon name="check" size={14} style={{ color: 'var(--sage)' }} /> Order history with re-order in one tap</li>
              <li style={{ display: 'flex', gap: 8, alignItems: 'center' }}><Icon name="check" size={14} style={{ color: 'var(--sage)' }} /> Members-only seasonal sales</li>
            </ul>
          </div>
          <div style={{ padding: 'clamp(28px, 4vw, 56px)', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
            <h2 className="serif" style={{ fontSize: '1.8rem', marginBottom: 6 }}>{title}</h2>
            <p style={{ color: 'var(--muted)', marginBottom: 22 }}>{sub}</p>
            {children}
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 720px) {
          .auth-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </main>
  );
}

function AccountPage() {
  const store = useStore();
  const user = store.state.user;
  if (!user) {
    return (
      <main className="container section" style={{ textAlign: 'center', maxWidth: 540 }}>
        <h1 className="serif" style={{ fontSize: 'var(--fs-display)' }}>Sign in</h1>
        <p style={{ color: 'var(--muted)', marginBlock: 16 }}>Sign in to see your account, orders and saved addresses.</p>
        <div style={{ display: 'flex', gap: 10, justifyContent: 'center' }}>
          <a className="btn btn--primary" href="#/account/login">Sign in</a>
          <a className="btn btn--secondary" href="#/account/register">Create account</a>
        </div>
      </main>
    );
  }
  const orders = window.CustomerAccount ? window.CustomerAccount.ordersForUser(user) : store.state.orders;
  return (
    <main className="container" style={{ paddingBlock: 48 }}>
      <div className="crumb" style={{ marginBottom: 16 }}>
        <a href="#/">Home</a><span className="sep">/</span><span className="here">Account</span>
      </div>
      <div className="spread" style={{ marginBottom: 32, alignItems: 'flex-end' }}>
        <div>
          <span className="eyebrow">My account</span>
          <h1 className="serif" style={{ fontSize: 'var(--fs-display)', marginTop: 6 }}>Welcome back, {user.name}.</h1>
        </div>
        <button className="btn btn--secondary" onClick={() => { store.signOut(); HAPRouter.nav('#/'); }}>Sign out</button>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '260px 1fr', gap: 32 }} className="acct-grid">
        <aside>
          <ul style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
            {[
              ['Overview', '#/account'],
              ['Orders', '#/account/orders'],
              ['Wishlist', '#/wishlist'],
              ['Addresses', '#/account/addresses'],
              ['Reviews', '#/account/reviews'],
              ['Profile', '#/account/profile'],
              ['Support tickets', '#/account/support'],
              ['RINPO', '#/phone?tab=chat'],
              ['Help & support', '#/help']
            ].map(([t, h]) => (
              <li key={t}>
                <a href={h} style={{ display: 'block', padding: '10px 14px', borderRadius: 8, background: t === 'Overview' ? 'var(--cream)' : 'transparent', fontSize: '.9rem' }}>{t}</a>
              </li>
            ))}
          </ul>
        </aside>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
          {/* Quick cards */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }} className="acct-cards">
            <QCard label="Orders" value={orders.length} sub="all time" href="#/account/orders" />
            <QCard label="Wishlist" value={store.state.wish.length} sub="saved items" href="#/wishlist" />
            <QCard label="Bag" value={store.cartCount()} sub="ready to checkout" href="#/cart" />
          </div>

          {/* Recent orders */}
          <div style={{ background: 'var(--shell)', border: '1px solid var(--line)', borderRadius: 16, padding: 28 }}>
            <div className="spread" style={{ marginBottom: 18 }}>
              <h2 className="serif" style={{ fontSize: '1.4rem' }}>Recent orders</h2>
              {orders.length > 0 && <a href="#/account/orders" className="btn btn--ghost btn--sm">View all</a>}
            </div>
            {orders.length === 0 ? (
              <div style={{ textAlign: 'center', padding: 32 }}>
                <p style={{ color: 'var(--muted)' }}>No orders yet — your first order is waiting.</p>
                <a className="btn btn--primary" style={{ marginTop: 14 }} href="#/collections/pebbles">Start shopping</a>
              </div>
            ) : (
              <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                {orders.slice(0, 3).map(o => <OrderRow key={o.id} o={o} />)}
              </div>
            )}
          </div>

          {/* Default address */}
          <div style={{ background: 'var(--cream)', borderRadius: 16, padding: 28 }}>
            <div className="spread" style={{ marginBottom: 12 }}>
              <h2 className="serif" style={{ fontSize: '1.2rem' }}>Default shipping address</h2>
              <a className="btn btn--ghost btn--sm" href="#/account/addresses">Manage</a>
            </div>
            {(() => {
              const addrs = window.CustomerAccount.listAddresses();
              const d = addrs.find((a) => a.isDefault) || addrs[0];
              if (!d) return <p style={{ color: 'var(--muted)' }}>No saved address yet.</p>;
              return (
                <p style={{ color: 'var(--ink-2)', lineHeight: 1.5 }}>
                  {d.name}<br />{d.address}<br />{d.city}, {d.state} — {d.pincode}<br />{d.phone}
                </p>
              );
            })()}
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 980px) {
          .acct-grid { grid-template-columns: 1fr !important; }
          .acct-cards { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </main>
  );
}

function QCard({ label, value, sub, href }) {
  return (
    <a href={href} style={{ background: 'var(--cream)', borderRadius: 16, padding: 24, display: 'flex', flexDirection: 'column', gap: 4 }}>
      <span className="eyebrow">{label}</span>
      <span className="serif" style={{ fontSize: '2.4rem', lineHeight: 1, color: 'var(--forest)' }}>{value}</span>
      <span style={{ fontSize: '.78rem', color: 'var(--muted)' }}>{sub}</span>
    </a>
  );
}

function OrderRow({ o }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'auto 1fr auto auto', gap: 16, alignItems: 'center', padding: 14, background: 'var(--paper)', borderRadius: 12 }}>
      <div style={{ display: 'flex', gap: -8 }}>
        {(o.lines || []).slice(0, 3).map((l, i) => (
          <div key={i} style={{ width: 40, height: 50, borderRadius: 6, overflow: 'hidden', background: 'var(--cream)', marginLeft: i > 0 ? -10 : 0, border: '2px solid var(--paper)' }}>
            {l.product && l.product.image ? <img src={l.product.image} alt={l.product.name} style={{ width: '100%', height: '100%', objectFit: 'cover' }} /> : null}
          </div>
        ))}
      </div>
      <div>
        <div style={{ fontWeight: 500 }}>{o.id}</div>
        <div style={{ fontSize: '.78rem', color: 'var(--muted)' }}>
          {new Date(o.placedAt).toLocaleDateString('en-IN', { dateStyle: 'medium' })} · {(o.lines || []).length} item{(o.lines || []).length !== 1 ? 's' : ''}
        </div>
      </div>
      <span className="tag" style={{ background: 'var(--sage-2)', color: 'var(--forest)', border: 'none' }}>{o.status}</span>
      <div style={{ textAlign: 'right' }}>
        <div style={{ fontWeight: 500 }}>{HAP.formatPrice(o.total)}</div>
        <a href={'#/track?o=' + encodeURIComponent(o.id)} style={{ fontSize: '.78rem', color: 'var(--forest)' }}>Track</a>
        {' · '}
        <a href={'#/account/orders/' + encodeURIComponent(o.id)} style={{ fontSize: '.78rem', color: 'var(--forest)' }}>Details</a>
      </div>
    </div>
  );
}

function OrdersPage() {
  const store = useStore();
  const user = store.state.user;
  if (!user) return <AccountPage />;
  const [filter, setFilter] = React.useState('all');
  let orders = window.CustomerAccount.ordersForUser(user);
  if (filter === 'active') orders = orders.filter((o) => !['delivered', 'cancelled', 'returned'].includes(o.status));
  if (filter === 'delivered') orders = orders.filter((o) => o.status === 'delivered');
  if (filter === 'cancelled') orders = orders.filter((o) => o.status === 'cancelled');
  if (filter === 'returned') orders = orders.filter((o) => o.status === 'returned');
  return (
    <main className="container" style={{ paddingBlock: 48 }}>
      <div className="crumb"><a href="#/account">Account</a><span className="sep">/</span><span className="here">Orders</span></div>
      <h1 className="serif" style={{ fontSize: 'var(--fs-display)', marginBlock: 16 }}>Orders</h1>
      <div style={{ display: 'flex', gap: 8, marginBottom: 16, flexWrap: 'wrap' }}>
        {['all', 'active', 'delivered', 'cancelled', 'returned'].map((f) => (
          <button key={f} className={'btn btn--sm ' + (filter === f ? 'btn--primary' : 'btn--ghost')} onClick={() => setFilter(f)}>{f}</button>
        ))}
      </div>
      {orders.length === 0 ? (
        <EmptyState icon="package" title="No orders yet" note="When you place your first order, it'll show up here."
                    cta={{ label: 'Shop pebbles', href: '#/collections/pebbles' }} />
      ) : (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          {orders.map((o) => <OrderRow key={o.id} o={o} />)}
        </div>
      )}
    </main>
  );
}

function WishlistPage() {
  const store = useStore();
  const items = store.wishProducts();
  return (
    <main className="container" style={{ paddingBlock: 48 }}>
      <div className="crumb"><a href="#/">Home</a><span className="sep">/</span><span className="here">Wishlist</span></div>
      <div className="spread" style={{ marginBlock: 16, alignItems: 'flex-end' }}>
        <div>
          <span className="eyebrow">Saved for later</span>
          <h1 className="serif" style={{ fontSize: 'var(--fs-display)', marginTop: 6 }}>Your wishlist</h1>
        </div>
        {items.length > 0 && <span style={{ color: 'var(--muted)' }}>{items.length} item{items.length > 1 ? 's' : ''}</span>}
      </div>
      {items.length === 0 ? (
        <EmptyState icon="heart" title="Nothing saved yet"
                    note="Tap the heart on any product to save it here for later."
                    cta={{ label: 'Browse pebbles', href: '#/collections/pebbles' }} />
      ) : (
        <div className="product-grid product-grid--4">
          {items.map(p => <ProductCard key={p.id} p={p} />)}
        </div>
      )}
    </main>
  );
}

function SearchPage() {
  const route = useRoute();
  const [q, setQ] = React.useState(route.query.q || '');
  const [sort, setSort] = React.useState('relevance');
  const [avail, setAvail] = React.useState('all');
  const [mobileFilters, setMobileFilters] = React.useState(false);
  React.useEffect(() => {
    setQ(route.query.q || '');
  }, [route.query.q]);
  const base = React.useMemo(() => {
    if (window.CustomerSearch && window.CustomerSearch.search) {
      return window.CustomerSearch.search(q, { pageSize: 48 }).results || [];
    }
    return HAP.search(q);
  }, [q]);
  const emptyHelp = React.useMemo(() => {
    if (!q || base.length > 0) return null;
    if (window.CustomerSearch && window.CustomerSearch.emptyStateHelp) {
      return window.CustomerSearch.emptyStateHelp(q);
    }
    return { message: 'No products found.', popularProducts: [] };
  }, [q, base.length]);
  React.useEffect(() => {
    if (q && window.CustomerAnalytics) window.CustomerAnalytics.search(q);
  }, [q]);

  const colors = React.useMemo(() => {
    const set = new Set();
    base.forEach((p) => { if (p.color) set.add(p.color); });
    return Array.from(set).sort();
  }, [base]);
  const [color, setColor] = React.useState('');

  let results = base.slice();
  if (color) results = results.filter((p) => p.color === color);
  if (avail === 'in') results = results.filter((p) => window.CustomerCommerce.isPurchasable(p, 1));
  if (avail === 'out') results = results.filter((p) => !window.CustomerCommerce.isPurchasable(p, 1));
  if (sort === 'price-asc') results.sort((a, b) => a.price - b.price);
  if (sort === 'price-desc') results.sort((a, b) => b.price - a.price);
  if (sort === 'newest') results.sort((a, b) => (b.isNew === a.isNew ? 0 : b.isNew ? 1 : -1));
  // relevance = search order — no fabricated scores

  const FilterPanel = (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
      <div>
        <div className="eyebrow" style={{ marginBottom: 8 }}>Availability</div>
        <select className="input" value={avail} onChange={(e) => setAvail(e.target.value)}>
          <option value="all">All</option>
          <option value="in">In stock</option>
          <option value="out">Out of stock</option>
        </select>
      </div>
      {colors.length > 0 && (
        <div>
          <div className="eyebrow" style={{ marginBottom: 8 }}>Colour</div>
          <select className="input" value={color} onChange={(e) => setColor(e.target.value)}>
            <option value="">All colours</option>
            {colors.map((c) => <option key={c} value={c}>{c}</option>)}
          </select>
        </div>
      )}
    </div>
  );

  return (
    <main className="container" style={{ paddingBlock: 48 }}>
      <h1 className="serif" style={{ fontSize: 'var(--fs-display)' }}>Search</h1>
      <div style={{ position: 'relative', marginBlock: 24, maxWidth: 600 }}>
        <label htmlFor="search-page-q" className="visually-hidden" style={{ position: 'absolute', width: 1, height: 1, overflow: 'hidden', clip: 'rect(0 0 0 0)' }}>Search products</label>
        <Icon name="search" size={18} style={{ position: 'absolute', top: '50%', left: 14, transform: 'translateY(-50%)', color: 'var(--muted)' }} />
        <input id="search-page-q" className="input input--lg" placeholder="Search products, colours, categories" value={q} onChange={(e) => setQ(e.target.value)} style={{ paddingLeft: 42, width: '100%' }} autoFocus aria-label="Search products" />
      </div>

      {q && (
        <div className="spread" style={{ marginBottom: 16, gap: 12, flexWrap: 'wrap' }}>
          <div style={{ color: 'var(--muted)' }}>{results.length} result{results.length !== 1 ? 's' : ''} for "{q}"</div>
          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
            <button className="btn btn--secondary btn--sm mobile-only" onClick={() => setMobileFilters(true)}>Filter</button>
            <select className="input" value={sort} onChange={(e) => setSort(e.target.value)} aria-label="Sort">
              <option value="relevance">Relevance</option>
              <option value="price-asc">Price: low to high</option>
              <option value="price-desc">Price: high to low</option>
              <option value="newest">Newest</option>
            </select>
          </div>
        </div>
      )}

      <div style={{ display: 'grid', gridTemplateColumns: q ? '220px 1fr' : '1fr', gap: 28 }} className="search-layout">
        {q && <aside className="desktop-only">{FilterPanel}</aside>}
        <div>
          {q && results.length === 0 ? (
            <div>
              <EmptyState icon="search" title={(emptyHelp && emptyHelp.message) || 'No products found.'} note={`Nothing found for "${q}".`} />
              {emptyHelp && emptyHelp.popularProducts && emptyHelp.popularProducts.length > 0 && (
                <div style={{ marginTop: 20 }}>
                  <h3 style={{ fontSize: '.78rem', textTransform: 'uppercase', letterSpacing: '.14em', color: 'var(--moss)', marginBottom: 10 }}>Popular</h3>
                  <div className="product-grid product-grid--4">
                    {emptyHelp.popularProducts.map((p) => <ProductCard key={p.id} p={p} />)}
                  </div>
                </div>
              )}
            </div>
          ) : results.length > 0 ? (
            <div className="product-grid product-grid--4">{results.map((p) => <ProductCard key={p.id} p={p} />)}</div>
          ) : (
            <div>
              <h3 style={{ fontSize: '.78rem', textTransform: 'uppercase', letterSpacing: '.14em', color: 'var(--moss)', marginBottom: 10 }}>Trending</h3>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                {HAP.TRENDING_SEARCHES.map((t) => <button key={t} className="tag" onClick={() => setQ(t)}>{t}</button>)}
              </div>
            </div>
          )}
        </div>
      </div>

      {mobileFilters && (
        <div className="scrim" onClick={() => setMobileFilters(false)}>
          <div className="drawer" role="dialog" aria-modal="true" aria-label="Search filters" style={{ maxWidth: '100%' }} onClick={(e) => e.stopPropagation()}>
            <div className="drawer__head"><h2 className="drawer__title">Filters</h2><button className="icon-btn" onClick={() => setMobileFilters(false)} aria-label="Close"><Icon name="close" /></button></div>
            <div className="drawer__body">{FilterPanel}</div>
            <div className="drawer__foot"><button className="btn btn--primary btn--full" onClick={() => setMobileFilters(false)}>Show results</button></div>
          </div>
        </div>
      )}

      <style>{`
        @media (max-width: 900px) {
          .search-layout { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </main>
  );
}

function CollectionsIndexPage() {
  return (
    <main style={{ paddingBlock: 48 }}>
      <div className="container">
        <div className="crumb" style={{ marginBottom: 16 }}><a href="#/">Home</a><span className="sep">/</span><span className="here">Collections</span></div>
        <h1 className="serif" style={{ fontSize: 'var(--fs-hero)', lineHeight: 1, marginBottom: 32 }}>All collections</h1>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 48 }}>
          {HAP.CATEGORIES.map(top => (
            <section key={top.slug}>
              <div className="spread" style={{ marginBottom: 18 }}>
                <h2 className="serif" style={{ fontSize: 'clamp(1.6rem, 3vw, 2.4rem)' }}>{top.name}</h2>
                <a className="btn btn--ghost btn--sm" href={'#/collections/' + top.slug}>See all <Icon name="arrow-right" size={14} /></a>
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))', gap: 12 }}>
                {(top.sub || []).map(s => (
                  <a key={s.slug} href={'#/collections/' + s.slug}
                     style={{ background: 'var(--cream)', borderRadius: 12, padding: 18, fontSize: '.92rem', minHeight: 96, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
                    <span>{s.name}</span>
                    <span style={{ fontSize: '.75rem', color: 'var(--muted)' }}>{HAP.productsInCategory(s.slug).length} items →</span>
                  </a>
                ))}
              </div>
            </section>
          ))}
        </div>
      </div>
    </main>
  );
}

window.LoginPage = LoginPage;
window.RegisterPage = RegisterPage;
window.AccountPage = AccountPage;
window.OrdersPage = OrdersPage;
window.WishlistPage = WishlistPage;
window.SearchPage = SearchPage;
window.CollectionsIndexPage = CollectionsIndexPage;