// layout.jsx — Header, CategoryBar, Footer, shared ProductCard, PriceTag

function PriceTag({ jpy, idr, oldIDR, currency, size = 'md' }) {
  const main =
    currency === 'jpy' ? fmtJPY(jpy) :
    currency === 'idr' ? fmtIDR(idr) :
    fmtIDR(idr);
  const alt =
    currency === 'jpy' ? fmtIDR(idr) :
    currency === 'idr' ? fmtJPY(jpy) :
    fmtJPY(jpy);
  return (
    <div className="product-price">
      <span className="main">{main}</span>
      <span className="alt">/ {alt}</span>
      {oldIDR && currency !== 'jpy' && <span className="strike">{fmtIDR(oldIDR)}</span>}
    </div>
  );
}

function ProductCard({ product, ctx }) {
  const cat = CATEGORY_BY_SLUG[product.cat];
  const isWished = ctx.wishlist.includes(product.id);
  const badges = (product.badges || []).map(b => BADGES[b]).filter(Boolean);
  return (
    <div className="product" onClick={() => ctx.go('produk', product.id)}>
      <div className="product-img">
        <div className="kanji-bg">{product.glyph || cat.kanji}</div>
        <div className="product-badges">
          {badges.map((b, i) => (
            <span key={i} className={`badge-jp ${b.cls}`}>{b.text}</span>
          ))}
        </div>
        <button className={`wish ${isWished ? 'active' : ''}`}
                onClick={(e) => { e.stopPropagation(); ctx.toggleWishlist(product.id); }}
                aria-label="Wishlist">
          <Icon name="heart" size={14} />
        </button>
      </div>
      <div className="product-body">
        <div className="product-cat">{cat.nameID} · {product.brand}</div>
        <div className="product-name">{product.nameID}</div>
        <div className="product-name-jp">{product.nameJP}</div>
        <div className="product-meta">
          <span className="stars"><Icon name="star" size={11} /> {product.rating}</span>
          <span>· {product.sold.toLocaleString('id-ID')} terjual</span>
        </div>
        <PriceTag jpy={product.priceJPY} idr={product.priceIDR} oldIDR={product.oldIDR}
                  currency={ctx.currency} />
      </div>
    </div>
  );
}

function Header({ ctx }) {
  const cartCount = ctx.cart.reduce((a, b) => a + b.qty, 0);
  const wishCount = ctx.wishlist.length;
  const [q, setQ] = React.useState('');
  const onSearch = (e) => {
    e.preventDefault();
    ctx.go('pencarian', q || 'matcha');
  };
  return (
    <header className="hdr">
      <div className="hdr-strip">
        <div className="hdr-strip-inner">
          <div className="row">
            <span className="jp">送料無料</span>
            <span>Gratis ongkir untuk pesanan di atas ¥5,000 · EMS Japan Post ke seluruh Indonesia</span>
          </div>
          <div className="hdr-strip-links">
            <a>Bantuan</a>
            <a>Lacak Pesanan</a>
            <a>ID / 日本語</a>
          </div>
        </div>
      </div>
      <div className="hdr-main">
        <div className="logo" onClick={() => ctx.go('home')}>
          <div className="logo-jp">Wie<span className="accent">Dam</span></div>
          <div className="logo-sub">ウィーダム</div>
        </div>
        <form className="search" onSubmit={onSearch}>
          <Icon name="search" size={16} />
          <input value={q} onChange={(e) => setQ(e.target.value)}
                 placeholder="Cari produk Jepang… (matcha, yukata, switch)" />
          <button type="submit" className="search-btn">
            <Icon name="search" size={14} /> Cari
          </button>
        </form>
        <div className="hdr-actions">
          <button className="hdr-icon-btn" onClick={() => ctx.go('akun', 'wishlist')} aria-label="Wishlist">
            <Icon name="heart" size={18} />
            {wishCount > 0 && <span className="badge">{wishCount}</span>}
          </button>
          <button className="hdr-icon-btn" onClick={() => ctx.go('keranjang')} aria-label="Keranjang">
            <Icon name="cart" size={18} />
            {cartCount > 0 && <span className="badge">{cartCount}</span>}
          </button>
          <button className="hdr-icon-btn"
                  onClick={() => ctx.go(ctx.role === 'guest' ? 'auth' : 'akun', 'profil')}
                  aria-label="Akun">
            <Icon name="user" size={18} />
          </button>
        </div>
      </div>
    </header>
  );
}

function CategoryBar({ ctx }) {
  return (
    <nav className="catbar">
      <div className="catbar-inner">
        <button className={`catbar-item ${ctx.page === 'katalog' && !ctx.pageParam ? 'active' : ''}`}
                onClick={() => ctx.go('katalog', null)}>
          <Icon name="menu" size={16} /> Semua Kategori
        </button>
        {CATEGORIES.map(c => (
          <button key={c.slug}
                  className={`catbar-item ${ctx.page === 'katalog' && ctx.pageParam === c.slug ? 'active' : ''}`}
                  onClick={() => ctx.go('katalog', c.slug)}>
            <span className="kanji">{c.kanji}</span> {c.nameID}
          </button>
        ))}
        <div className="spacer" />
        <button className="catbar-item deal" onClick={() => ctx.go('katalog', null)}>
          <Icon name="spark" size={14} /> Sale
        </button>
      </div>
    </nav>
  );
}

function Footer({ ctx }) {
  return (
    <footer className="ftr">
      <div className="ftr-inner">
        <div className="ftr-grid">
          <div className="ftr-about">
            <div className="ftr-logo">Wie<span className="accent">Dam</span></div>
            <p style={{ marginTop: 8 }}>
              Marketplace produk asli Jepang langsung dari 47 prefektur ke seluruh Indonesia.
              Makanan, fashion, beauty, elektronik, home, anime & stationery.
            </p>
            <div className="ftr-pay">
              <span>VISA</span><span>MC</span><span>GOPAY</span>
              <span>OVO</span><span>DANA</span><span>BCA</span>
              <span>BRI</span><span>QRIS</span>
            </div>
          </div>
          <div>
            <h5>Tentang</h5>
            <ul>
              <li><a>Tentang Wie Dam</a></li>
              <li><a>Karir</a></li>
              <li><a>Blog & Inspirasi</a></li>
              <li><a>Press Kit</a></li>
            </ul>
          </div>
          <div>
            <h5>Layanan</h5>
            <ul>
              <li><a>Cara Belanja</a></li>
              <li><a>Pengiriman EMS</a></li>
              <li><a>Bea Cukai & Pajak</a></li>
              <li><a>Pre-order Jepang</a></li>
            </ul>
          </div>
          <div>
            <h5>Bantuan</h5>
            <ul>
              <li><a>Pusat Bantuan</a></li>
              <li><a>Lacak Pesanan</a></li>
              <li><a>Refund & Tukar</a></li>
              <li><a>Hubungi Kami</a></li>
            </ul>
          </div>
          <div>
            <h5>Sosial</h5>
            <ul>
              <li><a>Instagram @wiedam.id</a></li>
              <li><a>TikTok @wiedam</a></li>
              <li><a>LINE @wiedam</a></li>
              <li><a>YouTube Wie Dam</a></li>
            </ul>
          </div>
        </div>
        <div className="ftr-bottom">
          <div>© 2026 Wie Dam · PT Sakura Niaga Nusantara</div>
          <div>Syarat & Ketentuan · Privasi · Cookies</div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Header, CategoryBar, Footer, ProductCard, PriceTag });