/* ═══════════════════════════════════════
   ROMAJA — Data, Context & State
═══════════════════════════════════════ */

/* ─── CATEGORÍAS ─── */
const CATEGORIES = {
  crochet: {
    label: "Crochet",
    color: "#c87d52",
    bg: "#f2e8dc",
    subcategories: ["estuches", "bolsos", "amigurumis", "accesorios", "prendas"]
  },
  bisuteria: {
    label: "Bisutería",
    color: "#7a9468",
    bg: "#e4ecdf",
    subcategories: ["collares", "pulseras", "anillos", "aretes", "tiaras", "conjuntos"]
  }
};

/* ─── PRODUCTOS — array mutable, se llena desde /api/productos en App ─── */
const PRODUCTS = [];

/* ─── CART CONTEXT ─── */
const CartContext = React.createContext(null);

const CartProvider = ({ children }) => {
  const [items, setItems] = React.useState(() => {
    try { return JSON.parse(localStorage.getItem("romaja_cart") || "[]"); } catch { return []; }
  });

  React.useEffect(() => {
    localStorage.setItem("romaja_cart", JSON.stringify(items));
  }, [items]);

  // Al montar, refresca cada item con los datos actuales del producto
  // (precio/stock/imagen pueden haber cambiado desde que se agregó al carrito)
  // y descarta los que ya no existen.
  React.useEffect(() => {
    setItems(prev => prev
      .map(i => {
        const fresh = PRODUCTS.find(p => p.id === i.product.id);
        return fresh ? { ...i, product: fresh } : null;
      })
      .filter(Boolean)
    );
  }, []);

  const addItem = (product, qty = 1, options = {}) => {
    setItems(prev => {
      const key = `${product.id}-${JSON.stringify(options)}`;
      const existing = prev.find(i => i.key === key);
      if (existing) return prev.map(i => i.key === key ? { ...i, qty: i.qty + qty } : i);
      return [...prev, { key, product, qty, options }];
    });
  };

  const removeItem = (key) => setItems(prev => prev.filter(i => i.key !== key));

  const updateQty = (key, qty) => {
    if (qty < 1) { removeItem(key); return; }
    setItems(prev => prev.map(i => i.key === key ? { ...i, qty } : i));
  };

  const clearCart = () => setItems([]);

  const total = items.reduce((sum, i) => sum + i.product.price * i.qty, 0);
  const count = items.reduce((sum, i) => sum + i.qty, 0);

  return (
    <CartContext.Provider value={{ items, addItem, removeItem, updateQty, clearCart, total, count }}>
      {children}
    </CartContext.Provider>
  );
};

const useCart = () => React.useContext(CartContext);

/* ─── NAVIGATION CONTEXT ─── */
const NavContext = React.createContext(null);

const NavProvider = ({ children }) => {
  const getRoute = () => window.location.pathname || "/";

  const [route, setRoute] = React.useState(getRoute);

  React.useEffect(() => {
    const handler = () => setRoute(getRoute());
    window.addEventListener("popstate", handler);
    return () => window.removeEventListener("popstate", handler);
  }, []);

  const navigate = (path) => {
    if (path !== window.location.pathname) {
      window.history.pushState({}, "", path);
    }
    setRoute(path);
  };

  return (
    <NavContext.Provider value={{ route, navigate }}>
      {children}
    </NavContext.Provider>
  );
};

const useNav = () => React.useContext(NavContext);

/* ─── CONSTANTS ─── */
const SINPE_NUMBER = "6059-8892";
const SINPE_NAME = "Jacqueline Gómez";
const WHATSAPP_NUMBER = "50660598892";
const WHATSAPP_LINK = `https://wa.me/${WHATSAPP_NUMBER}`;

const formatPrice = (p) => `₡${p.toLocaleString("es-CR")}`;

/* ─── SLUG (solo cosmético en la URL, el id sigue siendo la clave real) ─── */
const slugify = (text) =>
  (text || "")
    .toString()
    .normalize("NFD")
    .replace(/[̀-ͯ]/g, "") // saca acentos (á->a, ñ->n, etc.)
    .toLowerCase()
    .trim()
    .replace(/[^a-z0-9\s-]/g, "") // saca símbolos/emojis
    .replace(/\s+/g, "-")
    .replace(/-+/g, "-")
    .replace(/^-|-$/g, "");

/* ─── MOBILE HOOK ─── */
const useMobile = (breakpoint = 768) => {
  const [isMobile, setIsMobile] = React.useState(() => window.innerWidth < breakpoint);
  React.useEffect(() => {
    const h = () => setIsMobile(window.innerWidth < breakpoint);
    window.addEventListener("resize", h);
    return () => window.removeEventListener("resize", h);
  }, [breakpoint]);
  return isMobile;
};

/* ─── EXPORT ─── */
Object.assign(window, {
  CATEGORIES, PRODUCTS,
  SINPE_NUMBER, SINPE_NAME, WHATSAPP_NUMBER, WHATSAPP_LINK,
  CartContext, CartProvider, useCart,
  NavContext, NavProvider, useNav,
  formatPrice, useMobile, slugify
});