// App entry — wires up the route, Tweaks panel, and live-data fetch.
const { useState: useAState, useEffect: useAEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#FF8A3D",
  "headline": "catalog",
  "heroLayout": "split",
  "priceDisplay": "both",
  "brandDensity": "medium",
  "theme": "dark"
}/*EDITMODE-END*/;

const PAGE = document.body.getAttribute("data-page") || "home";

// Fallback values used until data.json loads (or if the fetch fails).
// `wysync/scripts/refresh-counts.mjs` writes the live numbers into data.json daily.
const DATA_FALLBACK = {
  refreshed_at: null,
  counts: {
    wheels:   { brands: 466, skus: 243052 },
    tires:    { brands: 117, skus: 42403 },
    combined: { brands: 573, skus: 285455 },
  },
  brand_wall: [],
  all_wheel_brands: [],
  all_tire_brands:  [],
};

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [data, setData] = useAState(DATA_FALLBACK);

  useAEffect(() => {
    applyDesignTokens({ accent: tweaks.accent, theme: tweaks.theme });
  }, [tweaks.accent, tweaks.theme]);

  // Pull live counts + brand list from data.json (refreshed daily).
  useAEffect(() => {
    fetch("data.json", { cache: "no-cache" })
      .then(r => r.ok ? r.json() : null)
      .then(j => { if (j) setData(j); })
      .catch(() => { /* keep fallback */ });
  }, []);

  // Stash on window so widgets that don't take props can read it.
  useAEffect(() => {
    window.WYSYNC_DATA = data;
  }, [data]);

  const Page =
    PAGE === "products" ? Products :
    PAGE === "pricing"  ? Pricing  :
    PAGE === "compare"  ? Compare  :
    PAGE === "about"    ? About    : Home;

  return (
    <>
      <Page tweaks={tweaks} data={data} />
      <TweaksPanel title="Tweaks">
        <TweakSection label="Theme" />
        <TweakRadio
          label="Mode"
          value={tweaks.theme}
          onChange={v => setTweak("theme", v)}
          options={["dark", "light"]}
        />
        <TweakColor
          label="Accent"
          value={tweaks.accent}
          onChange={v => setTweak("accent", v)}
        />

        {PAGE === "home" && (
          <>
            <TweakSection label="Hero" />
            <TweakSelect
              label="Headline"
              value={tweaks.headline}
              onChange={v => setTweak("headline", v)}
              options={[
                { value: "catalog", label: "The catalog you shouldn't build" },
                { value: "shipped", label: "We did the painful part" },
                { value: "speed",   label: "Live in 12-14 days" },
              ]}
            />
            <TweakRadio
              label="Layout"
              value={tweaks.heroLayout}
              onChange={v => setTweak("heroLayout", v)}
              options={["split", "centered", "fullbleed"]}
            />
            <TweakRadio
              label="Brand wall"
              value={tweaks.brandDensity}
              onChange={v => setTweak("brandDensity", v)}
              options={["sparse", "medium", "dense"]}
            />
          </>
        )}

        {PAGE === "pricing" && (
          <>
            <TweakSection label="Pricing" />
            <TweakRadio
              label="Display"
              value={tweaks.priceDisplay}
              onChange={v => setTweak("priceDisplay", v)}
              options={["both", "monthly", "annual"]}
            />
          </>
        )}

        <TweakSection label="Navigate" />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 4, fontSize: 11 }}>
          <a className="btn btn-sm" href="index.html">Home</a>
          <a className="btn btn-sm" href="products.html">Products</a>
          <a className="btn btn-sm" href="pricing.html">Pricing</a>
          <a className="btn btn-sm" href="compare.html">Compare</a>
          <a className="btn btn-sm" href="about.html" style={{ gridColumn: "1 / -1" }}>About</a>
        </div>
      </TweaksPanel>
    </>
  );
}

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