/* ============ KIRO Jewelry — Main app (router + data bootstrap) ============ */
const { useState: useS, useEffect: useE } = React;

function App() {
  // Router
  const [route, setRoute] = useS(parseRoute(location.hash));
  useE(() => {
    const onHash = () => setRoute(parseRoute(location.hash));
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);

  // Data store loaded from Supabase
  const [store, setStore]       = useS(null);
  const [loadError, setLoadErr] = useS(null);
  const [sizeGuideOpen, setSizeGuideOpen] = useS(false);
  const openSizeGuide  = () => setSizeGuideOpen(true);
  const closeSizeGuide = () => setSizeGuideOpen(false);

  const refreshStore = React.useCallback(async () => {
    try {
      const s = await window.kiroDB.fetchStore();
      setStore({
        categories: s.categories || [],
        products: s.products || [],
        content: mergeContent(s.content),
      });
      setLoadErr(null);
    } catch (err) {
      console.error("fetchStore failed:", err);
      setLoadErr(err);
      // Last-resort fallback so the public site is not blank if Supabase is down
      setStore(prev => prev || {
        categories: SEED_CATEGORIES,
        products: SEED_PRODUCTS,
        content: SEED_CONTENT,
      });
    }
  }, []);

  useE(() => { refreshStore(); }, [refreshStore]);

  const navigate = (path) => {
    location.hash = path;
    window.scrollTo({ top: 0, behavior: "instant" });
  };

  // Loading screen until first fetch completes
  if (!store) {
    return (
      <div style={{
        minHeight: "100vh", display: "flex", alignItems: "center", justifyContent: "center",
        background: "var(--bg)", color: "var(--burgundy)", fontFamily: "var(--serif)",
        flexDirection: "column", gap: 14,
      }}>
        <div style={{ fontSize: 32, letterSpacing: "0.18em" }}>KIRO</div>
        <div style={{ display: "flex", gap: 10, alignItems: "center", fontFamily: "var(--sans)",
          fontSize: 12, letterSpacing: "0.18em", textTransform: "uppercase" }}>
          <span className="spinner"/> Cargando
        </div>
      </div>
    );
  }

  // Pick page
  let page;
  if (route.path === "/") {
    page = <HomePage store={store} navigate={navigate} />;
  } else if (route.path.startsWith("/c/")) {
    page = <CategoryPage store={store} categoryId={route.params.id} navigate={navigate} />;
  } else if (route.path.startsWith("/p/")) {
    page = <ProductPage store={store} productId={route.params.id} navigate={navigate} openSizeGuide={openSizeGuide} />;
  } else if (route.path === "/admin") {
    page = <AdminPage store={store} setStore={setStore} navigate={navigate} refreshStore={refreshStore} />;
  } else {
    page = <HomePage store={store} navigate={navigate} />;
  }

  const isAdmin = route.path === "/admin";

  return (
    <div className="app-shell">
      {!isAdmin && <Header route={route} navigate={navigate} bagCount={0} store={store} />}
      {page}
      {!isAdmin && <Footer store={store} navigate={navigate} openSizeGuide={openSizeGuide} />}
      {!isAdmin && (
        <SizeGuideModal
          open={sizeGuideOpen}
          onClose={closeSizeGuide}
          title={
            (store.content?.footer?.sizingButtonLabel || "").trim() ||
            SEED_CONTENT.footer.sizingButtonLabel
          }
          content={
            (store.content?.footer?.sizingContent || "").trim() ||
            SEED_CONTENT.footer.sizingContent
          }
          image={store.content?.footer?.sizingImage || null}
        />
      )}
      {loadError && !isAdmin && (
        <div style={{
          position: "fixed", bottom: 16, left: 16, background: "var(--burgundy)",
          color: "var(--pink-50)", padding: "10px 14px", fontSize: 12, letterSpacing: "0.1em",
          maxWidth: 320, zIndex: 100,
        }}>
          No se pudo conectar con el servidor. Mostrando contenido de respaldo.
        </div>
      )}
    </div>
  );
}

function parseRoute(hash) {
  const clean = (hash || "").replace(/^#/, "") || "/";
  if (clean.startsWith("/c/")) return { path: "/c/" + clean.split("/")[2], params: { id: clean.split("/")[2] } };
  if (clean.startsWith("/p/")) return { path: "/p/" + clean.split("/")[2], params: { id: clean.split("/")[2] } };
  if (clean === "/admin")      return { path: "/admin", params: {} };
  return { path: "/", params: {} };
}

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