/* GMC FONT — App root + router + state */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "device": "desktop",
  "heroVariant": "v1"
}/*EDITMODE-END*/;

function App() {
  // routing
  const checkoutReturn = new URLSearchParams(window.location.search).get("checkout") === "success";
  const authCallbackError = getStoreAuthCallbackError();
  const [path, setPath] = useState(checkoutReturn ? "checkout" : authCallbackError ? "login" : "home");
  const [param, setParam] = useState("");
  const [query, setQuery] = useState("");

  const go = useCallback((p, q = "") => {
    // detail uses param; "fonts" + "cat=xxx" uses query string
    if (p === "detail") { setPath("detail"); setParam(q); setQuery(""); }
    else { setPath(p); setQuery(q); setParam(""); }
    // scroll the right container to top
    setTimeout(() => {
      const target = document.querySelector(".phone-screen") || document.scrollingElement;
      try { target.scrollTo({ top: 0, behavior: "smooth" }); } catch(e) {}
    }, 40);
  }, []);

  // cart
  const [cart, setCart] = useState([]);
  const addToCart = useCallback((font, licenseTier = "personal", price = null) => {
    setCart(c => [...c, { ...font, licenseTier, price: price ?? (font.sale || font.price) }]);
  }, []);
  const removeFromCart = useCallback((i) => {
    setCart(c => c.filter((_, idx) => idx !== i));
  }, []);
  const clearCart = useCallback(() => setCart([]), []);

  // user
  const [user, setUser] = useState(null);
  const login = useCallback((u) => setUser(u), []);
  const logout = useCallback(() => {
    setUser(null);
    signOutStoreUser().catch(error => console.warn("Supabase sign out failed.", error));
  }, []);

  useEffect(() => {
    let stop = () => {};
    watchStoreUser((nextUser) => {
      setUser(nextUser);
      const returnPath = nextUser && consumeGoogleAuthReturnPath();
      if (returnPath) go(returnPath);
    })
      .then(unsubscribe => { stop = unsubscribe; })
      .catch(error => console.warn("Supabase session sync failed.", error));
    return () => stop();
  }, [go]);

  // fonts from Supabase
  const [fonts, setFonts] = useState([]);
  useEffect(() => {
    loadPublicFonts()
      .then(data => { setFonts(data); injectFontFaces(data); })
      .catch(err => console.warn("Fonts load failed:", err));
  }, []);

  // tweaks (host-managed)
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  const route = { path, param, query, go };
  const app = { cart, addToCart, removeFromCart, clearCart, user, login, logout };

  const isMobile = t.device === "mobile";

  let page = null;
  if (path === "home") page = <Home hero={t.heroVariant}/>;
  else if (path === "fonts") page = <AllFonts/>;
  else if (path === "detail") page = <FontDetail id={param}/>;
  else if (path === "cart") page = <Cart/>;
  else if (path === "checkout") page = <Checkout/>;
  else if (path === "login") page = <AuthPage mode="login"/>;
  else if (path === "signup") page = <AuthPage mode="signup"/>;
  else if (path === "dashboard") page = <Dashboard/>;
  else if (path === "admin") page = <AdminPage/>;
  else page = <Home hero={t.heroVariant}/>;

  const shell = (
    <FontsCtx.Provider value={fonts}>
      <RouteCtx.Provider value={route}>
        <AppCtx.Provider value={app}>
          <div className="app-shell">
            <Nav/>
            {page}
            <Footer/>
          </div>
        </AppCtx.Provider>
      </RouteCtx.Provider>
    </FontsCtx.Provider>
  );

  return (
    <>
      {isMobile ? (
        <div className="viewport-mobile">
          <div className="phone">
            <div className="phone-notch"/>
            <div className="phone-screen">
              <div className="phone-status">
                <span>9:41</span>
                <div style={{display:"flex", gap:6, alignItems:"center"}}>
                  <span>📶</span><span>📡</span><span>🔋</span>
                </div>
              </div>
              {shell}
              <button className="fab" onClick={() => go("cart")}>
                <Icon name="cart" size={22}/>
              </button>
            </div>
          </div>
        </div>
      ) : (
        shell
      )}

      <TweaksPanel title="Tweaks">
        <TweakSection label="อุปกรณ์">
          <TweakRadio
            label="Device"
            value={t.device}
            options={[
              { value: "desktop", label: "Desktop" },
              { value: "mobile", label: "Mobile" },
            ]}
            onChange={(v) => setTweak("device", v)}
          />
        </TweakSection>
        <TweakSection label="Home Hero">
          <TweakRadio
            label="Layout"
            value={t.heroVariant}
            options={[
              { value: "v1", label: "Sticker" },
              { value: "v2", label: "Color Band" },
            ]}
            onChange={(v) => setTweak("heroVariant", v)}
          />
        </TweakSection>
        <TweakSection label="Quick demo">
          <TweakButton label="+ ฟอนต์แรก (Personal)" onClick={() => fonts[0] && addToCart(fonts[0], "personal")} />
          <TweakButton label="+ ฟอนต์ที่สอง (Commercial)" onClick={() => fonts[1] && addToCart(fonts[1], "commercial")} />
          <TweakButton label="ล้างตะกร้า" onClick={clearCart} secondary />
          <TweakButton
            label={user ? "ออกจากระบบ" : "Mock-login (พลอย)"}
            onClick={() => user ? logout() : login({name:"พลอย", email:"ploy@gmail.com"})}
          />
        </TweakSection>
        <TweakSection label="ทางลัดหน้า">
          <TweakButton label="Home" onClick={() => go("home")} secondary />
          <TweakButton label="All Fonts" onClick={() => go("fonts")} secondary />
          <TweakButton label="Font Detail" onClick={() => go("detail", "khanom")} secondary />
          <TweakButton label="Cart" onClick={() => go("cart")} secondary />
          <TweakButton label="Checkout" onClick={() => go("checkout")} secondary />
          <TweakButton label="Login" onClick={() => go("login")} secondary />
          <TweakButton label="Signup" onClick={() => go("signup")} secondary />
          <TweakButton label="Dashboard" onClick={() => go("dashboard")} secondary />
          <TweakButton label="Admin" onClick={() => go("admin")} secondary />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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