// app.jsx — Forma Sync top-level

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "arctic",
  "typePair": "manrope_geist",
  "heroVariant": "convert",
  "density": "regular",
  "dark": false,
  "brand": "sync"
}/*EDITMODE-END*/;

// Curated palettes. "Arctic" is the default: light blue-grey page, white
// cards, cobalt primary, green success — professional quote-platform look.
const PALETTES = {
  arctic:    { bg: "#eef2f7", ink: "#0f1728", accent: "#2563eb", primary: "#2563eb", success: "#15803d", card: "#ffffff", name: "Arctic · quote platform" },
  studio:    { bg: "#f5f2ec", ink: "#1a1815", accent: "#d6491f", primary: "#d6491f", success: "#1f6f47", card: "#fdfbf7", name: "Studio · ember on paper" },
  graphite:  { bg: "#f3f3f1", ink: "#1c1c1c", accent: "#4a4a4a", primary: "#1c1c1c", success: "#2e7d32", card: "#ffffff", name: "Graphite · neutral" },
  oxford:    { bg: "#eceae6", ink: "#0e1422", accent: "#1f3a8a", primary: "#1f3a8a", success: "#1f6f47", card: "#f9f8f5", name: "Oxford · cobalt" },
  carbon:    { bg: "#0e1118", ink: "#e8ecf4", accent: "#3b82f6", primary: "#3b82f6", success: "#22c55e", card: "#161c28", name: "Carbon · dark", forceDark: true },
};

const TYPE_PAIRS = {
  manrope_geist:    { display: '"Manrope", system-ui, sans-serif',  sans: '"Geist", "DM Sans", system-ui, sans-serif', mono: '"Geist Mono", ui-monospace, monospace', name: "Manrope · Geist" },
  instrument_geist: { display: '"Instrument Serif", serif',     sans: '"Geist", system-ui, sans-serif',         mono: '"Geist Mono", ui-monospace, monospace', name: "Instrument · Geist" },
  dmsans_geist:     { display: '"DM Sans", system-ui, sans-serif', sans: '"Geist", system-ui, sans-serif',       mono: '"Geist Mono", ui-monospace, monospace', name: "DM Sans · Geist" },
};

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [screen, setScreen] = React.useState("home");
  const [screenArgs, setScreenArgs] = React.useState({});
  const [cart, setCart] = React.useState([]);
  const [preload, setPreload] = React.useState(null);

  // Central navigator — used by Nav, Footer, in-page CTAs.
  // navigate(target, args?) where target is a screen id ("home" | "about" |
  // "upload" | "cart" | "contact" | "policy") and args is any per-screen
  // payload (e.g. { section: "faq" } for policy, { scrollTo: "materials" }
  // for home, { subject: "cfd" } for contact, etc).
  const navigate = (target, args = {}) => {
    setScreen(target);
    setScreenArgs(args);
  };

  // apply palette / type / density / mode to :root
  React.useEffect(() => {
    const p = PALETTES[t.palette] || PALETTES.arctic;
    const isDark = t.dark || p.forceDark;
    // dark variant for light palettes
    const eff = isDark && !p.forceDark
      ? { ...p, bg: "#0e1118", ink: "#e8ecf4", card: "#161c28" }
      : p;
    const r = document.documentElement;
    r.style.setProperty("--bg", eff.bg);
    r.style.setProperty("--ink", eff.ink);
    r.style.setProperty("--accent", eff.accent);
    r.style.setProperty("--primary", eff.primary || eff.accent);
    r.style.setProperty("--success", eff.success || "#15803d");
    r.style.setProperty("--card", eff.card || "#ffffff");
    // derive softs
    const inkRgb = hexToRgb(eff.ink);
    r.style.setProperty("--ink-soft", `rgba(${inkRgb}, 0.64)`);
    r.style.setProperty("--muted",    `rgba(${inkRgb}, 0.40)`);
    r.style.setProperty("--line",     `rgba(${inkRgb}, 0.10)`);
    r.style.setProperty("--primary-soft", isDark ? "rgba(59,130,246,0.16)" : "#eff4ff");
    const tp = TYPE_PAIRS[t.typePair] || TYPE_PAIRS.manrope_geist;
    r.style.setProperty("--display", tp.display);
    r.style.setProperty("--sans", tp.sans);
    r.style.setProperty("--mono", tp.mono);
    document.body.setAttribute("data-density", t.density);
    document.body.setAttribute("data-mode", isDark ? "dark" : "light");
  }, [t.palette, t.typePair, t.density, t.dark]);

  function hexToRgb(hex) {
    const h = hex.replace("#", "");
    const r = parseInt(h.substring(0, 2), 16);
    const g = parseInt(h.substring(2, 4), 16);
    const b = parseInt(h.substring(4, 6), 16);
    return `${r}, ${g}, ${b}`;
  }

  // scroll to top on screen change + SPA pageview tracking
  React.useEffect(() => {
    window.scrollTo({ top: 0, behavior: "instant" });
    if (window.syncAnalytics) window.syncAnalytics.pageview("/" + (screen === "home" ? "" : screen));
    // clear any pending preload when leaving upload screen
    if (screen !== "upload") setPreload(null);
  }, [screen]);

  return (
    <>
      <Nav brand={t.brand} screen={screen} cartCount={cart.length} onNav={navigate} />

      {screen === "home" && (
        <HomeScreen
          heroVariant={t.heroVariant}
          brand={t.brand}
          scrollTo={screenArgs.scrollTo}
          onNav={navigate}
          onUpload={(buf, name) => { if (buf) setPreload({ buf, name }); navigate("upload"); }}
        />
      )}
      {screen === "about" && (
        <AboutScreen
          brand={t.brand}
          onUpload={(buf, name) => { if (buf) setPreload({ buf, name }); navigate("upload"); }}
          onHome={() => navigate("home")}
          onNav={navigate}
        />
      )}
      {screen === "contact" && (
        <ContactScreen
          brand={t.brand}
          initialSubject={screenArgs.subject}
          onUpload={() => navigate("upload")}
          onHome={() => navigate("home")}
          onNav={navigate}
        />
      )}
      {screen === "policy" && (
        <PolicyScreen
          brand={t.brand}
          initialSection={screenArgs.section}
          onUpload={() => navigate("upload")}
          onHome={() => navigate("home")}
          onContact={() => navigate("contact")}
          onNav={navigate}
        />
      )}
      {screen === "upload" && (
        <UploadScreen
          density={t.density}
          brand={t.brand}
          cart={cart}
          removeCartItem={(i) => setCart(cart.filter((_, idx) => idx !== i))}
          preloadBuffer={preload?.buf}
          preloadName={preload?.name}
          onNav={navigate}
          onAddToCart={(item) => { setCart(c => [...c, item]); setPreload(null); }}
          onPlaceOrder={() => navigate("cart")}
        />
      )}
      {screen === "cart" && (
        <CartScreen
          items={cart}
          brand={t.brand}
          onNav={navigate}
          removeItem={(i) => setCart(cart.filter((_, idx) => idx !== i))}
          onContinue={() => { setCart([]); navigate("home"); }}
          onBrowse={() => navigate("upload")}
          onCheckout={() => {}}
        />
      )}

      <TweaksPanel title="Tweaks">
        <TweakSection label="Brand" />
        <TweakText label="Trading name" value={t.brand} onChange={(v) => setTweak("brand", v.toLowerCase().slice(0, 16))} />

        <TweakSection label="Hero" />
        <TweakSelect label="Variant" value={t.heroVariant}
          options={[
            { value: "convert",          label: "Convert · drop + 3D companion (new)" },
            { value: "stl",              label: "Your own STL · upload & view" },
            { value: "viewer-vase",     label: "3D Viewer · Fluted vessel" },
            { value: "viewer-impeller", label: "3D Viewer · Turbine impeller" },
            { value: "viewer-bracket",  label: "3D Viewer · Aero bracket" },
            { value: "viewer-blade",    label: "3D Viewer · Twisted blade" },
            { value: "viewer-knot",     label: "3D Viewer · Trefoil knot" },
            { value: "viewer-cog",      label: "3D Viewer · Cog 14T" },
            { value: "image",           label: "Your own photo · drop-in" },
            { value: "dropzone",        label: "Dropzone hero" },
            { value: "gallery",         label: "Print gallery hero" },
          ]}
          onChange={(v) => setTweak("heroVariant", v)} />

        <TweakSection label="Palette" />
        <TweakColor
          label="Theme"
          value={(() => { const p = PALETTES[t.palette] || PALETTES.arctic; return [p.accent, p.ink, p.bg]; })()}
          options={Object.values(PALETTES).map(p => [p.accent, p.ink, p.bg])}
          onChange={(arr) => {
            const key = Object.keys(PALETTES).find(k => PALETTES[k].accent === arr[0]) || "arctic";
            setTweak("palette", key);
          }}
        />
        <TweakToggle label="Dark mode" value={t.dark} onChange={(v) => setTweak("dark", v)} />

        <TweakSection label="Type" />
        <TweakSelect label="Pairing" value={t.typePair}
          options={Object.entries(TYPE_PAIRS).map(([k, v]) => ({ value: k, label: v.name }))}
          onChange={(v) => setTweak("typePair", v)} />

        <TweakSection label="Layout" />
        <TweakRadio label="Density" value={t.density}
          options={["compact", "regular", "comfy"]}
          onChange={(v) => setTweak("density", v)} />
      </TweaksPanel>
    </>
  );
}

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