// App — Artesanías Chepe

const PALETTES = /*EDITMODE-BEGIN*/{
  "palette": "bone-clay",
  "type": "cormorant-manrope"
}/*EDITMODE-END*/;

const PALETTE_DEFS = {
  "bone-clay":   { bone: "#f4ecda", paper: "#faf3e1", linen: "#ebe2cb", ink: "#3a2e22", ink80: "#574539", ink60: "#857162", ink40: "#b3a08c", clay: "#c66544", clayDark: "#a04a2c" },
  "linen-moss":  { bone: "#ede5d0", paper: "#f5eeda", linen: "#e2d9c0", ink: "#1a1f17", ink80: "#2e362a", ink60: "#5a6450", ink40: "#8c947f", clay: "#5e6a3a", clayDark: "#42482a" },
  "sand-rust":   { bone: "#f1e4cc", paper: "#f8edd5", linen: "#e6d4b3", ink: "#1f1208", ink80: "#3d271a", ink60: "#6e4f37", ink40: "#9c7e60", clay: "#a83a1a", clayDark: "#722410" },
  "shell-ink":   { bone: "#ece5d0", paper: "#f4edd6", linen: "#dcd2b6", ink: "#0f0f10", ink80: "#252522", ink60: "#5a564c", ink40: "#8f8a7e", clay: "#3a3a3a", clayDark: "#1f1f1f" },
};
const TYPE_DEFS = {
  "cormorant-manrope": { serif: "'Cormorant Garamond', Georgia, serif",  sans: "'Manrope', system-ui, sans-serif" },
  "playfair-worksans": { serif: "'Playfair Display', Georgia, serif",    sans: "'Work Sans', system-ui, sans-serif" },
  "dmserif-inter":     { serif: "'DM Serif Display', Georgia, serif",    sans: "'Inter', system-ui, sans-serif" },
};

const App = () => {
  const [page, setPage] = useState("home");
  const [pageData, setPageData] = useState(null);
  const [menuOpen, setMenuOpen] = useState(false);
  const [cartOpen, setCartOpen] = useState(false);
  const [cart, setCart] = useState([]);
  const [scrolled, setScrolled] = useState(false);
  const [flyParts, setFlyParts] = useState([]);
  const [waOpen, setWaOpen] = useState(false);

  // Tweaks state
  const [tweaks, setTweak] = window.useTweaks(PALETTES);
  const palette = PALETTE_DEFS[tweaks.palette] || PALETTE_DEFS["bone-clay"];
  const type = TYPE_DEFS[tweaks.type] || TYPE_DEFS["cormorant-manrope"];

  // Apply tweaks to CSS vars
  useEffect(() => {
    const r = document.documentElement.style;
    r.setProperty("--bone", palette.bone);
    r.setProperty("--paper", palette.paper);
    r.setProperty("--linen", palette.linen);
    r.setProperty("--ink", palette.ink);
    r.setProperty("--ink-80", palette.ink80);
    r.setProperty("--ink-60", palette.ink60);
    r.setProperty("--ink-40", palette.ink40);
    r.setProperty("--clay", palette.clay);
    r.setProperty("--clay-dark", palette.clayDark);
    r.setProperty("--serif", type.serif);
    r.setProperty("--sans", type.sans);
    document.body.style.fontFamily = type.sans;
  }, [tweaks]);

  // External nav: hash on load + postMessage from a parent frame
  useEffect(() => {
    const validPages = new Set(["home","catalog","product","checkout","projects","wholesale","about","contact","brand"]);
    const fromHash = () => {
      const h = (window.location.hash || "").replace("#", "");
      if (validPages.has(h)) setPage(h);
    };
    fromHash();
    const onHash = () => fromHash();
    const onMsg = (e) => {
      const d = e && e.data;
      if (!d || d.type !== "__chepe_nav" || !validPages.has(d.page)) return;
      if (d.page === "product" && d.productId) {
        const found = (window.PRODUCTS || []).find(p => p.id === d.productId);
        if (found) {
          setPage("product");
          setPageData({ product: found });
        }
      } else {
        setPage(d.page);
        setPageData(null);
      }
    };
    window.addEventListener("hashchange", onHash);
    window.addEventListener("message", onMsg);
    return () => {
      window.removeEventListener("hashchange", onHash);
      window.removeEventListener("message", onMsg);
    };
  }, []);

  // Scroll listener for header
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 16);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  // Scroll to top on page change
  useEffect(() => {
    window.scrollTo({ top: 0, behavior: "instant" });
  }, [page]);

  // ---- Cart actions ----
  const addToCart = (p, e, qty = 1) => {
    // line id based on config
    const lineId = `${p.id}-${p.finish || p.finishes?.[0]}-${p.size || p.sizes?.[0]?.label}`;
    setCart(prev => {
      const i = prev.findIndex(it => it.lineId === lineId);
      if (i >= 0) {
        const next = [...prev];
        next[i] = { ...next[i], qty: next[i].qty + qty };
        return next;
      }
      return [...prev, {
        lineId,
        id: p.id,
        name: p.name,
        price: p.price,
        finish: p.finish || p.finishes?.[0],
        size: p.size || p.sizes?.[0]?.label,
        material: p.material || p.materials?.[0],
        placeholderClass: p.placeholderClass,
        placeholderLabel: p.placeholderLabel,
        qty,
      }];
    });

    // Fly-to-cart animation
    if (e && e.currentTarget) {
      const rect = e.currentTarget.getBoundingClientRect();
      const bag = document.querySelector("[aria-label='Bolsa']");
      const target = bag ? bag.getBoundingClientRect() : { left: window.innerWidth - 40, top: 20 };
      const id = Math.random().toString(36).slice(2);
      const dx = target.left - rect.left;
      const dy = target.top - rect.top;
      setFlyParts(parts => [...parts, { id, left: rect.left, top: rect.top, dx, dy, label: p.placeholderLabel }]);
      setTimeout(() => setFlyParts(parts => parts.filter(p => p.id !== id)), 800);
    }
  };

  const changeQty = (lineId, delta) => {
    setCart(prev => prev.map(it => it.lineId === lineId
      ? { ...it, qty: Math.max(1, it.qty + delta) }
      : it
    ));
  };
  const removeLine = (lineId) => setCart(prev => prev.filter(it => it.lineId !== lineId));

  // ---- Navigation ----
  const navigate = (p, data) => {
    setPage(p);
    setPageData(data || null);
    setMenuOpen(false);
    setCartOpen(false);
  };
  const openProduct = (product) => navigate("product", { product });

  const cartCount = cart.reduce((a, it) => a + it.qty, 0);

  const onCheckout = () => { setCartOpen(false); navigate("checkout"); };

  let pageEl = null;
  if (page === "home")      pageEl = <Home onNav={navigate} onProduct={openProduct} onAddCart={addToCart} />;
  if (page === "catalog")   pageEl = <Catalog onNav={navigate} onProduct={openProduct} onAddCart={addToCart} initialCat={pageData?.cat} />;
  if (page === "product")   pageEl = <ProductDetail product={pageData?.product} onNav={navigate} onAddCart={addToCart} onProduct={openProduct} />;
  if (page === "checkout")  pageEl = <Checkout items={cart} onChangeQty={changeQty} onRemove={removeLine} onNav={navigate} />;
  if (page === "projects")  pageEl = <Projects onNav={navigate} />;
  if (page === "wholesale") pageEl = <Wholesale onNav={navigate} />;
  if (page === "about")     pageEl = <About onNav={navigate} />;
  if (page === "contact")   pageEl = <Contact onNav={navigate} />;
  if (page === "brand")     pageEl = <Brand onNav={navigate} />;

  return (
    <div className="app-shell">
      <TopBar
        onMenu={() => setMenuOpen(true)}
        onCart={() => setCartOpen(true)}
        cartCount={cartCount}
        onLogo={() => navigate("home")}
        scrolled={scrolled}
      />

      {pageEl}

      <DrawerMenu open={menuOpen} onClose={() => setMenuOpen(false)} onNav={navigate} page={page} />
      <CartDrawer
        open={cartOpen} onClose={() => setCartOpen(false)}
        items={cart}
        onChangeQty={changeQty} onRemove={removeLine}
        onCheckout={onCheckout}
        onContinue={() => navigate("catalog")}
      />

      {/* WhatsApp FAB */}
      <div style={{
        position: "fixed", bottom: 22, right: 22, zIndex: 35,
        maxWidth: 480, pointerEvents: "none",
      }}>
        <div style={{ position: "absolute", right: 0, bottom: 0, pointerEvents: "auto" }}>
          {waOpen && (
            <div className="card hair fade-up" style={{
              position: "absolute", bottom: 64, right: 0,
              width: 260, padding: 16, borderRadius: 16,
              background: "var(--bone)", boxShadow: "var(--shadow)",
            }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 10 }}>
                <div>
                  <div className="mono" style={{ fontSize: 9, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--ink-60)" }}>En línea</div>
                  <div className="serif" style={{ fontSize: 18, marginTop: 2 }}>Hola, soy Lucía 👋🏽</div>
                </div>
                <button onClick={() => setWaOpen(false)} aria-label="Cerrar"><Icon name="close" size={16} /></button>
              </div>
              <p style={{ fontSize: 13, color: "var(--ink-80)", lineHeight: 1.45, margin: "0 0 14px" }}>
                ¿En qué te puedo ayudar? Soy asesora de la casa.
              </p>
              <button onClick={() => { setWaOpen(false); navigate("contact"); }}
                style={{
                  width: "100%", padding: "12px 14px", borderRadius: 999,
                  background: "#1a8e4a", color: "white",
                  display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 8,
                  fontSize: 14, fontWeight: 500,
                }}>
                <Icon name="wa" size={16} /> Iniciar chat
              </button>
            </div>
          )}
          <button onClick={() => setWaOpen(o => !o)}
            aria-label="WhatsApp"
            style={{
              width: 56, height: 56, borderRadius: 999,
              background: "#1a8e4a", color: "white",
              display: "grid", placeItems: "center",
              boxShadow: "0 12px 28px -10px rgba(26,142,74,0.6)",
            }}>
            <Icon name="wa" size={26} stroke={1.6} />
          </button>
        </div>
      </div>

      {/* Fly-to-cart pieces */}
      {flyParts.map(p => (
        <div key={p.id} className="ph" style={{
          position: "fixed", left: p.left, top: p.top,
          width: 60, height: 60, borderRadius: 999, zIndex: 100,
          fontSize: 0,
          pointerEvents: "none",
          animation: "flyToCart .7s cubic-bezier(.5,0,.7,1) forwards",
          "--fly-end": `translate(${p.dx}px, ${p.dy}px) scale(0.2)`,
        }}></div>
      ))}

      {/* Tweaks Panel */}
      <window.TweaksPanel>
        <window.TweakSection label="Paleta">
          <window.TweakSelect
            label="Color"
            value={tweaks.palette}
            onChange={(v) => setTweak("palette", v)}
            options={[
              { value: "bone-clay",  label: "Bone + Terracota" },
              { value: "linen-moss", label: "Lino + Musgo" },
              { value: "sand-rust",  label: "Arena + Óxido" },
              { value: "shell-ink",  label: "Concha + Tinta" },
            ]}
          />
        </window.TweakSection>
        <window.TweakSection label="Tipografía">
          <window.TweakSelect
            label="Pareja"
            value={tweaks.type}
            onChange={(v) => setTweak("type", v)}
            options={[
              { value: "cormorant-manrope", label: "Cormorant + Manrope" },
              { value: "playfair-worksans", label: "Playfair + Work Sans" },
              { value: "dmserif-inter",     label: "DM Serif + Inter" },
            ]}
          />
        </window.TweakSection>
      </window.TweaksPanel>
    </div>
  );
};

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);