// ============================================================
// App — routing + cart + tweaks + language.
// Owns the global tweaks state (hero variant, language).
// ============================================================

const SITE_DEFAULTS = { lang: 'vi', heroVariant: 'editorial-split', device: 'browser' };

function readLang() {
  try { return localStorage.getItem('jm-lang') === 'en' ? 'en' : 'vi'; } catch (e) { return 'vi'; }
}

// Sản phẩm -> dòng giỏ hàng
function toCartItem(p, lang) {
  // Thêm nhanh từ thẻ sản phẩm: chỉ dùng cho mã không cần chọn phân loại (1 màu, 1 size)
  const v = JM.variantsOf(p)[0];
  return { id: p.id, productId: p.id, code: JM.skuFor(p, v, {}), baseCode: p.code, name: lang === 'vi' ? p.name : p.enName,
    variantLabel: JM.choiceLabel(p, v.label ? v : null, {}, lang), glyph: p.glyph, image: (v.images || p.images || [])[0],
    material: v.material || p.material, price: p.price, qty: 1, size: p.sizes[0] };
}

function JmApp() {
  const [siteLang, setSiteLang] = React.useState(readLang);
  const t = { ...SITE_DEFAULTS, lang: siteLang };
  const setTweak = (k, v) => {
    if (k !== 'lang') return;
    setSiteLang(v);
    try { localStorage.setItem('jm-lang', v); } catch (e) {}
  };
  const [order, setOrder] = React.useState(null);

  // View: home | shop | product | about | collections | collection | bestsellers | contact | checkout | success
  // Mỗi view có đường link riêng (#/...) — xem JM.hrefFor / JM.parseHash trong site.js
  const toView = (r) => ({ ...r, name: r.view });
  const [view, setView]         = React.useState(() => toView(JM.parseHash(window.location.hash)));
  const [cart, setCart]         = React.useState([]);
  const [cartOpen, setCartOpen] = React.useState(false);
  const [mobileOpen, setMobileOpen] = React.useState(false);
  const [searchOpen, setSearchOpen] = React.useState(false);

  // Scroll to top on view changes
  React.useEffect(() => {
    window.scrollTo({ top: 0, behavior: 'instant' });
  }, [view.name, view.product?.id, view.id, view.category]);

  // Nút Back / Forward của trình duyệt
  React.useEffect(() => {
    const onHash = () => setView(toView(JM.parseHash(window.location.hash)));
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);

  // Giỏ hàng đang tắt: vào thẳng link thanh toán / đã đặt hàng thì chuyển về cửa hàng
  React.useEffect(() => {
    if (!JM.orderingOn() && (view.name === 'checkout' || view.name === 'success')) {
      window.location.replace(JM.hrefFor({ view: 'shop' }));
    }
  }, [view.name]);

  function navigate(opts) {
    const href = JM.hrefFor(opts);
    if (window.location.hash !== href) window.location.hash = href;   // hashchange sẽ cập nhật view
    else setView(toView(JM.parseHash(href)));
  }

  function openProduct(p) {
    navigate({ view: 'product', product: p });
  }

  function addToCart(item) {
    if (!JM.orderingOn()) { JM.orderViaChat(item); return; }   // giỏ hàng đang tắt
    if (item.images && !item.productId) item = toCartItem(item, lang);
    setCart(c => {
      // Cùng mã nhưng khác màu/size (SKU khác) là 2 dòng riêng
      const key = (i) => `${i.productId || i.id}|${i.code || ''}|${i.size || ''}`;
      const idx = c.findIndex(i => key(i) === key(item));
      if (idx >= 0) {
        const copy = c.slice();
        copy[idx] = { ...copy[idx], qty: (copy[idx].qty || 1) + (item.qty || 1) };
        return copy;
      }
      return [...c, { ...item, qty: item.qty || 1 }];
    });
    setCartOpen(true);
  }
  function removeFromCart(idx) {
    setCart(c => c.filter((_, i) => i !== idx));
  }
  function updateQty(idx, q) {
    setCart(c => c.map((it, i) => i === idx ? { ...it, qty: q } : it));
  }

  function toggleLang() {
    setTweak('lang', t.lang === 'vi' ? 'en' : 'vi');
  }

  function activeKey() {
    if (view.name === 'collection') return 'collections';
    if (view.name === 'product') return 'shop';
    return view.name;
  }

  const lang = t.lang || 'vi';
  const cartCount = cart.reduce((s, i) => s + (i.qty || 1), 0);

  return (
    <div className={`jm-app jm-device-${t.device || 'browser'}`}>
      <JmHeader
        active={activeKey()}
        lang={lang}
        onNavigate={(opts) => { setMobileOpen(false); navigate(opts); }}
        cartCount={cartCount}
        onOpenCart={() => setCartOpen(true)}
        onOpenMobile={() => setMobileOpen(true)}
        onSearchOpen={() => setSearchOpen(true)}
        onToggleLang={toggleLang}
      />

      <JmSearch open={searchOpen} lang={lang} onClose={() => setSearchOpen(false)} onOpenProduct={openProduct}/>

      <main>
        {view.name === 'home' && (
          <JmHome
            lang={lang}
            heroVariant={t.heroVariant || 'editorial-split'}
            onOpenProduct={openProduct}
            onAdd={(p) => addToCart(toCartItem(p, lang))}
            onGoShop={() => navigate({ view: 'shop' })}
            onGoAbout={() => navigate({ view: 'about' })}
            onGoCollection={(id) => navigate({ view: 'collection', id })}
            onGoBestsellers={() => navigate({ view: 'bestsellers' })}
          />
        )}

        {view.name === 'collections' && (
          <JmCollectionsIndex lang={lang} onOpenCollection={(id) => navigate({ view: 'collection', id })}/>
        )}

        {view.name === 'collection' && (
          <JmCollectionPage
            id={view.id}
            lang={lang}
            onOpenProduct={openProduct}
            onAdd={(p) => addToCart(toCartItem(p, lang))}
            onGoShop={() => navigate({ view: 'shop' })}
            onOpenCollection={(id) => navigate({ view: 'collection', id })}
          />
        )}

        {view.name === 'bestsellers' && (
          <JmBestsellers lang={lang} onOpenProduct={openProduct} onAdd={(p) => addToCart(toCartItem(p, lang))}/>
        )}

        {view.name === 'shop' && (
          <JmShop
            lang={lang}
            initialCategory={view.category || 'all'}
            onOpenProduct={openProduct}
            onAdd={(p) => addToCart(toCartItem(p, lang))}
          />
        )}

        {view.name === 'product' && view.product && (
          <JmProductDetail
            product={view.product}
            lang={lang}
            onBack={() => navigate({ view: 'shop' })}
            onAddToCart={addToCart}
            onOpenProduct={openProduct}
          />
        )}

        {view.name === 'about' && (
          <JmAbout lang={lang} onGoShop={() => navigate({ view: 'shop' })}/>
        )}

        {view.name === 'contact' && (
          <JmPlaceholderPage view={view.name} lang={lang} onGoShop={() => navigate({ view: 'shop' })}/>
        )}

        {!JM.orderingOn() && (view.name === 'checkout' || view.name === 'success') && (
          <JmCheckoutEmpty lang={lang} onGoShop={() => navigate({ view: 'shop' })}/>
        )}

        {JM.orderingOn() && view.name === 'checkout' && (
          cart.length === 0
            ? <JmCheckoutEmpty lang={lang} onGoShop={() => navigate({ view: 'shop' })}/>
            : <JmCheckout
                items={cart}
                lang={lang}
                onBack={() => { setCartOpen(false); navigate({ view: 'shop' }); }}
                onComplete={(o) => { setOrder(o); navigate({ view: 'success' }); setCart([]); }}/>
        )}

        {JM.orderingOn() && view.name === 'success' && (
          <JmCheckoutSuccess lang={lang} order={order} onHome={() => navigate({ view: 'home' })}/>
        )}
      </main>

      <JmFooter lang={lang} onNavigate={(opts) => navigate(opts)}/>

      {JM.orderingOn() && <JmCartDrawer
        open={cartOpen}
        items={cart}
        lang={lang}
        onClose={() => setCartOpen(false)}
        onRemove={removeFromCart}
        onUpdateQty={updateQty}
        onCheckout={() => { setCartOpen(false); navigate({ view: 'checkout' }); }}
        onGoShop={() => navigate({ view: 'shop' })}
      />}

      <JmMobileDrawer
        open={mobileOpen}
        lang={lang}
        onClose={() => setMobileOpen(false)}
        onNavigate={navigate}
        onToggleLang={toggleLang}
      />

    </div>
  );
}

// ============================================================
// Lightweight placeholder pages (Journal, Contact) for nav
// completeness without scope creep.
// ============================================================
function JmPlaceholderPage({ view, lang, onGoShop }) {
  React.useEffect(() => { if (window.lucide) lucide.createIcons(); });
  const content = {
    journal: {
      eyebrow: lang === 'vi' ? 'Tạp chí' : 'Journal',
      title: lang === 'vi' ? 'Lời thầm thì từ bàn làm việc' : 'Notes from the studio desk',
      sub: lang === 'vi' ? 'Bài viết mix & match, xu hướng, cách bảo quản — vài lá thư mỗi tháng.' : 'Styling notes, trends, care guides — a few letters every month.',
      placeholder: lang === 'vi' ? 'Tạp chí đang được biên tập. Bài viết đầu tiên sẽ lên sóng cùng bộ sưu tập Vellum.' : 'Our journal is being edited. The first piece arrives with the Vellum collection.',
    },
    contact: {
      eyebrow: lang === 'vi' ? 'Liên hệ' : 'Contact',
      title: lang === 'vi' ? 'Nhắn cho Jesmee' : 'Get in touch',
      sub: lang === 'vi' ? 'Nhắn Jesmee để được tư vấn chọn size, phối set hay chọn quà tặng.' : 'Message Jesmee for help with sizing, styling or gifts.',
      placeholder: null,
    },
  }[view];

  return (
    <section className="jm-section" data-screen-label={view === 'journal' ? 'Journal' : 'Contact'}>
      <div className="jm-container">
        <div className="jm-label" style={{ color: 'var(--jm-cam-dat)' }}>{content.eyebrow}</div>
        <h1 className="jm-h1" style={{ marginTop: 12 }}>{content.title}</h1>
        <p className="jm-small" style={{ marginTop: 16, maxWidth: 540, marginBottom: 56 }}>{content.sub}</p>

        {view === 'contact' ? (
          <div className="jm-contact__side jm-contact__side--solo">
            {JM.shop.messenger && (
              <div className="jm-contact__block">
                <div className="jm-label">{lang === 'vi' ? 'Nhắn tin Fanpage' : 'Message us'}</div>
                <p className="jm-small">{lang === 'vi' ? 'Tư vấn chọn size, phối set, quà tặng.' : 'Sizing, styling and gift advice.'}</p>
                <a className="jm-btn jm-btn-primary" href={JM.shop.messenger} target="_blank" rel="noopener">{lang === 'vi' ? 'Nhắn tin Messenger' : 'Open Messenger'}</a>
              </div>
            )}
            {JM.shop.hotline && (
              <div className="jm-contact__block">
                <div className="jm-label">Hotline</div>
                <p><a href={`tel:${JM.shop.hotline.replace(/\D/g, '')}`}>{JM.shop.hotline}</a></p>
              </div>
            )}
            {JM.shop.address && (
              <div className="jm-contact__block">
                <div className="jm-label">{lang === 'vi' ? 'Địa chỉ' : 'Address'}</div>
                <p>{JM.shop.address}</p>
              </div>
            )}
            {JM.shop.email && (
              <div className="jm-contact__block">
                <div className="jm-label">Email</div>
                <p>{JM.shop.email}</p>
              </div>
            )}
            {[['Shopee', JM.shop.shopee], ['TikTok Shop', JM.shop.tiktok], ['Facebook', JM.shop.facebook], ['Instagram', JM.shop.instagram]].filter(x => x[1]).length > 0 && (
              <div className="jm-contact__block">
                <div className="jm-label">{lang === 'vi' ? 'Mua tại sàn' : 'Shop online'}</div>
                {[['Shopee', JM.shop.shopee], ['TikTok Shop', JM.shop.tiktok], ['Facebook', JM.shop.facebook], ['Instagram', JM.shop.instagram]].filter(x => x[1]).map(([n, u]) => (
                  <p key={n}><a href={u} target="_blank" rel="noopener">{n} →</a></p>
                ))}
              </div>
            )}
            {!JM.shop.messenger && !JM.shop.hotline && !JM.shop.address && !JM.shop.email && (
              <div className="jm-contact__block">
                <p className="jm-small">{lang === 'vi' ? 'Thông tin liên hệ đang được cập nhật.' : 'Contact details coming soon.'}</p>
              </div>
            )}
          </div>
        ) : (
          <div className="jm-journal__placeholder">
            <i data-lucide="feather" className="jm-icon jm-icon-lg" style={{ color: 'var(--jm-cam-dat)' }}></i>
            <p style={{ marginTop: 16, color: 'var(--jm-muted)', maxWidth: 480 }}>{content.placeholder}</p>
            <button className="jm-btn jm-btn-secondary" onClick={onGoShop} style={{ marginTop: 28 }}>{lang === 'vi' ? 'Tới cửa hàng' : 'Visit the shop'}</button>
          </div>
        )}
      </div>
    </section>
  );
}

function JmCheckoutEmpty({ lang, onGoShop }) {
  React.useEffect(() => { if (window.lucide) lucide.createIcons(); });
  return (
    <section className="jm-section" data-screen-label="Checkout · empty">
      <div className="jm-container" style={{ textAlign: 'center', padding: '120px 16px' }}>
        <i data-lucide="shopping-bag" className="jm-icon" style={{ width: 36, height: 36, color: 'var(--jm-muted)' }}></i>
        <h1 className="jm-h1" style={{ marginTop: 20 }}>{lang === 'vi' ? 'Chưa có món nào để thanh toán' : 'Nothing to check out yet'}</h1>
        <p className="jm-small" style={{ marginTop: 12, color: 'var(--jm-muted)' }}>
          {!JM.orderingOn()
            ? (lang === 'vi' ? 'Bạn có thể mua trên Shopee hoặc nhắn Zalo 038.6468.999 để được tư vấn.' : 'Buy on Shopee or message us on Zalo 038.6468.999.')
            : (lang === 'vi' ? 'Thêm vào giỏ một món Jesmee để tiếp tục.' : 'Add a Jesmee piece to your bag to continue.')}
        </p>
        <button className="jm-btn jm-btn-primary" style={{ marginTop: 28 }} onClick={onGoShop}>
          {lang === 'vi' ? 'Khám phá cửa hàng' : 'Browse the shop'}
        </button>
      </div>
    </section>
  );
}

window.JmApp = JmApp;

// Mount
ReactDOM.createRoot(document.getElementById('root')).render(<JmApp/>);