/* global React, Icons */
const { useState, useEffect, useRef } = React;

// ─── LINK (hash router) ─────────────────────────────────────
function Link({ to, children, className, style, onClick, ...rest }) {
  const handle = (e) => {
    e.preventDefault();
    if (onClick) onClick(e);
    if (!e.defaultPrevented) {
      window.location.hash = to.startsWith("#") ? to.slice(1) : to;
    }
  };
  return React.createElement("a", { href: "#" + (to.startsWith("#") ? to.slice(1) : to), onClick: handle, className, style, ...rest }, children);
}

// ─── BUTTON ────────────────────────────────────────────────
function Button({ variant = "primary", size, block, icon, iconRight, children, ...rest }) {
  const cls = [
    "btn",
    `btn-${variant}`,
    size && `btn-${size}`,
    block && "btn-block",
    rest.className,
  ].filter(Boolean).join(" ");
  const { className, ...restNoCls } = rest;
  return React.createElement("button", { ...restNoCls, className: cls },
    icon, children, iconRight
  );
}

// ─── NAVBAR ────────────────────────────────────────────────
function Navbar() {
  const { cartCount, user, categories } = useStore();
  const { navigate, path } = useRouter();
  const [q, setQ] = useState("");
  const [mobileOpen, setMobileOpen] = useState(false);

  const submitSearch = (e) => {
    e.preventDefault();
    if (q.trim()) navigate(`/search?q=${encodeURIComponent(q.trim())}`);
  };

  const navItems = [
    { to: "/", label: "Home" },
    { to: "/shop", label: "Shop all" },
    { to: "/shop?cat=Knitwear", label: "Knitwear" },
    { to: "/shop?cat=Outerwear", label: "Outerwear" },
    { to: "/shop?cat=Accessories", label: "Accessories" },
  ];

  return React.createElement(React.Fragment, null,
    React.createElement("div", { className: "announcement" },
      "Free express shipping in Indonesia over ",
      React.createElement("strong", null, "Rp 1.000.000"),
      " — use code ",
      React.createElement("strong", null, "FIRST10"),
      " for 10% off your first order"
    ),
    React.createElement("header", { className: "nav" },
      React.createElement("div", { className: "container nav-inner" },
        React.createElement(Link, { to: "/", className: "nav-brand" },
          React.createElement("img", { src: "morpheme/assets/morpheme-logomark.svg", alt: "" }),
          "Morpheme Store"
        ),
        React.createElement("nav", { className: "nav-links" },
          navItems.map((i) =>
            React.createElement(Link, {
              key: i.to, to: i.to,
              className: (path === i.to.split("?")[0] || (i.to === "/shop" && path === "/shop")) ? "active" : "",
            }, i.label)
          )
        ),
        React.createElement("form", { className: "nav-search", onSubmit: submitSearch },
          React.createElement("span", { className: "search-icon" }, React.createElement(Icons.Search, { size: 18 })),
          React.createElement("input", {
            className: "input",
            placeholder: "Search dresses, trousers, coats…",
            value: q, onChange: (e) => setQ(e.target.value),
          })
        ),
        React.createElement("div", { className: "nav-actions" },
          React.createElement(Button, {
            variant: "ghost", size: "sm",
            className: "btn-icon", "aria-label": "Account",
            onClick: () => navigate(user ? "/account" : "/login"),
          }, React.createElement(Icons.User, { size: 20 })),
          React.createElement(Button, {
            variant: "ghost", size: "sm",
            className: "btn-icon nav-cart", "aria-label": "Bag",
            onClick: () => navigate("/cart"),
          },
            React.createElement(Icons.ShoppingBag, { size: 20 }),
            cartCount > 0 && React.createElement("span", { className: "count" }, cartCount)
          ),
          React.createElement(Button, {
            variant: "ghost", size: "sm",
            className: "btn-icon nav-mobile-toggle", "aria-label": "Menu",
            onClick: () => setMobileOpen((v) => !v),
          }, mobileOpen ? React.createElement(Icons.X, { size: 20 }) : React.createElement(Icons.Menu, { size: 20 }))
        ),
      ),
      mobileOpen && React.createElement("div", { className: "container" },
        React.createElement("nav", { className: "nav-mobile-menu" },
          navItems.map((i) =>
            React.createElement(Link, { key: i.to, to: i.to, onClick: () => setMobileOpen(false) }, i.label)
          )
        )
      )
    )
  );
}

// ─── FOOTER ────────────────────────────────────────────────
function Footer() {
  const { navigate } = useRouter();
  return React.createElement("footer", { className: "site-footer" },
    React.createElement("div", { className: "container" },
      React.createElement("div", null,
        React.createElement("div", { className: "fbrand" },
          React.createElement("img", { src: "morpheme/assets/morpheme-logomark.svg", alt: "" }),
          "Morpheme Store"
        ),
        React.createElement("p", { className: "tagline" }, "Considered wardrobe staples, made in small batches in Bandung and Bologna."),
        React.createElement("div", { style: { display: "flex", gap: 10, marginTop: 20 } },
          [
            { I: Icons.Instagram, to: "/shop" },
            { I: Icons.Twitter, to: "/shop" },
            { I: Icons.Facebook, to: "/shop" },
          ].map((s, i) =>
            React.createElement(Link, { key: i, to: s.to, style: { color: "inherit", padding: 6, cursor: "pointer" } }, React.createElement(s.I, { size: 18 }))
          )
        )
      ),
      React.createElement("div", null,
        React.createElement("h4", null, "Shop"),
        React.createElement("ul", null,
          ["Shirts","Dresses","Knitwear","Outerwear","Accessories"].map((c) =>
            React.createElement("li", { key: c }, React.createElement("a", { onClick: () => navigate(`/shop?cat=${c}`) }, c))
          )
        )
      ),
      React.createElement("div", null,
        React.createElement("h4", null, "Help"),
        React.createElement("ul", null,
          [
            { label: "Shipping", to: "/checkout" },
            { label: "Returns", to: "/account" },
            { label: "Size guide", to: "/shop" },
            { label: "Contact us", to: "/login" },
            { label: "FAQs", to: "/shop" },
          ].map((c) =>
            React.createElement("li", { key: c.label }, React.createElement("a", { onClick: () => navigate(c.to), style: { cursor: "pointer" } }, c.label))
          )
        )
      ),
      React.createElement("div", null,
        React.createElement("h4", null, "Newsletter"),
        React.createElement("p", { style: { color: "var(--graycool-400)", fontSize: 14, marginBottom: 12 } }, "Monthly. New drops and a 10% welcome code."),
        React.createElement("form", { style: { display: "flex", gap: 8 }, onSubmit: (e) => e.preventDefault() },
          React.createElement("input", { className: "input", placeholder: "you@email.com", style: { background: "rgba(255,255,255,0.08)", border: "1px solid rgba(255,255,255,0.12)", color: "#fff" } }),
          React.createElement(Button, { variant: "primary" }, "Join")
        )
      ),
      React.createElement("div", { className: "legal", style: { gridColumn: "1 / -1" } },
        React.createElement("div", null, "© 2026 Morpheme Store by GITS.id"),
        React.createElement("div", { style: { display: "flex", gap: 16 } },
          React.createElement("a", { onClick: () => navigate("/account"), style: { cursor: "pointer" } }, "Privacy"),
          React.createElement("a", { onClick: () => navigate("/account"), style: { cursor: "pointer" } }, "Terms"),
          React.createElement("a", { onClick: () => navigate("/account"), style: { cursor: "pointer" } }, "Cookies")
        )
      ),
    )
  );
}

// ─── PRODUCT CARD ──────────────────────────────────────────
function ProductCard({ product }) {
  const { toggleWishlist, wishlist, formatIDR } = useStore();
  const { navigate } = useRouter();
  const faved = wishlist.includes(product.id);
  const discount = product.priceOld ? Math.round(((product.priceOld - product.price) / product.priceOld) * 100) : 0;

  return React.createElement("article", {
    className: "product-card fade-in",
    onClick: () => navigate(`/product/${product.id}`),
  },
    React.createElement("div", { className: "thumb" },
      React.createElement("img", { src: product.images[0], alt: product.name, loading: "lazy" }),
      React.createElement("div", { className: "badges" },
        product.tag && React.createElement("span", { className: `badge ${product.tag === "New" ? "badge-brand" : product.tag === "Low stock" ? "badge-warning" : "badge-dark"}` }, product.tag),
        discount > 0 && React.createElement("span", { className: "badge badge-error" }, "-", discount, "%"),
      ),
      React.createElement("button", {
        className: "wishlist" + (faved ? " active" : ""),
        onClick: (e) => { e.stopPropagation(); toggleWishlist(product.id); },
        "aria-label": "Wishlist",
      },
        React.createElement(Icons.Heart, { size: 18, style: faved ? { fill: "currentColor" } : {} })
      ),
    ),
    React.createElement("div", { className: "meta" },
      React.createElement("div", { className: "cat" }, product.category),
      React.createElement("div", { className: "title" }, product.name),
      React.createElement("div", { className: "price-row" },
        React.createElement("span", { className: "price" }, formatIDR(product.price)),
        product.priceOld && React.createElement("span", { className: "price-old" }, formatIDR(product.priceOld))
      ),
      React.createElement("div", { className: "colors" },
        product.colors.slice(0, 5).map((c) =>
          React.createElement("span", { key: c.name, className: "swatch", title: c.name, style: { background: c.hex } })
        )
      )
    )
  );
}

// ─── TOAST ─────────────────────────────────────────────────
function Toast() {
  const { toast } = useStore();
  if (!toast) return null;
  const IconMap = { bag: Icons.ShoppingBag, check: Icons.CheckCircle, heart: Icons.Heart };
  const I = IconMap[toast.icon] || Icons.CheckCircle;
  return React.createElement("div", { className: "toast", key: toast.id },
    React.createElement(I, { size: 16, style: { color: "var(--success-400)" } }),
    toast.msg
  );
}

// ─── STEPPER ───────────────────────────────────────────────
function Stepper({ value, onChange, min = 1, max = 99 }) {
  return React.createElement("div", { className: "stepper" },
    React.createElement("button", { onClick: () => onChange(Math.max(min, value - 1)), disabled: value <= min, "aria-label": "Decrease" },
      React.createElement(Icons.Minus, { size: 16 })
    ),
    React.createElement("span", { className: "val" }, value),
    React.createElement("button", { onClick: () => onChange(Math.min(max, value + 1)), disabled: value >= max, "aria-label": "Increase" },
      React.createElement(Icons.Plus, { size: 16 })
    )
  );
}

// ─── BREADCRUMBS ───────────────────────────────────────────
function Breadcrumbs({ items }) {
  return React.createElement("nav", { className: "breadcrumbs" },
    items.map((it, i) => React.createElement(React.Fragment, { key: i },
      i > 0 && React.createElement(Icons.ChevronRight, { size: 14, className: "crumb-sep" }),
      it.to ? React.createElement(Link, { to: it.to }, it.label) : React.createElement("span", { className: "current" }, it.label)
    ))
  );
}

Object.assign(window, { Link, Button, Navbar, Footer, ProductCard, Toast, Stepper, Breadcrumbs });