/* sema ikutoke Collections — main App */
const { useState: useStateA, useEffect: useEffectA } = React;

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [view, setView] = useStateA("landing");
  const [page, setPage] = useStateA(window.DEFAULT_PAGE);
  const [checkoutOpen, setCheckoutOpen] = useStateA(false);

  const goto = (v) => {
    if (v === "checkout") {
      // For drawer/modal variants, open overlay over storefront.
      if (tweaks.checkout !== "page") {
        setView("store");
        setCheckoutOpen(true);
        return;
      }
    }
    setCheckoutOpen(false);
    setView(v);
    window.scrollTo({ top: 0, behavior: "instant" });
  };

  // Apply palette + pair via data attrs on root
  useEffectA(() => {
    document.documentElement.setAttribute("data-palette", tweaks.palette);
    document.documentElement.setAttribute("data-pair", tweaks.pair);
  }, [tweaks.palette, tweaks.pair]);

  const item = {
    name: page.find((b) => b.type === "hero")?.data.title || "Field Notes Vol. 03",
    price: page.find((b) => b.type === "buybar")?.data.price || "1,200",
  };

  const onBuy = () => {
    if (tweaks.checkout === "page") setView("checkout");
    else setCheckoutOpen(true);
  };

  const closeCheckout = () => setCheckoutOpen(false);
  const onCheckoutSuccess = () => {
    setCheckoutOpen(false);
    setTimeout(() => setView("dashboard"), 200);
  };

  return (
    <div className="app">
      {view === "landing" && <window.Landing tweaks={tweaks} goto={goto} />}
      {view === "signup" && <window.Signup goto={goto} />}
      {view === "templates" && <window.Templates goto={goto} />}
      {view === "channels" && <window.Channels goto={goto} />}
      {view === "dashboard" && <window.Dashboard goto={goto} />}
      {view === "builder" && (
        <window.Builder
          goto={goto}
          canvasStyle={tweaks.canvas}
          page={page}
          setPage={setPage}
        />
      )}
      {view === "store" && (
        <window.Storefront goto={goto} page={page} onBuy={onBuy} />
      )}
      {view === "checkout" && tweaks.checkout === "page" && (
        <window.CheckoutPage item={item} goto={goto} onSuccess={onCheckoutSuccess} />
      )}

      {checkoutOpen && tweaks.checkout === "drawer" && (
        <window.CheckoutDrawer item={item} onClose={closeCheckout} onSuccess={onCheckoutSuccess} />
      )}
      {checkoutOpen && tweaks.checkout === "modal" && (
        <window.CheckoutModal item={item} onClose={closeCheckout} onSuccess={onCheckoutSuccess} />
      )}

      <window.ProtoNav view={view} goto={goto} />

      <TweaksPanel title="sema ikutoke · Tweaks">
        <TweakSection label="Palette" />
        <PaletteSwatches value={tweaks.palette} onChange={(v) => setTweak("palette", v)} />

        <TweakSection label="Type pairing" />
        <TweakRadio
          label="Pair"
          value={tweaks.pair}
          options={[
            { value: "editorial", label: "Editorial" },
            { value: "modern", label: "Modern" },
            { value: "classic", label: "Classic" },
          ]}
          onChange={(v) => setTweak("pair", v)}
        />
        <TypePreview pair={tweaks.pair} />

        <TweakSection label="Hero layout" />
        <TweakRadio
          label="Variant"
          value={tweaks.hero}
          options={[
            { value: "split", label: "Split" },
            { value: "centered", label: "Centered" },
            { value: "editorial", label: "Magazine" },
          ]}
          onChange={(v) => setTweak("hero", v)}
        />

        <TweakSection label="Pricing" />
        <TweakRadio
          label="Plan structure"
          value={tweaks.pricing}
          options={[
            { value: "duo", label: "2 tiers" },
            { value: "trio", label: "3 tiers" },
            { value: "quad", label: "4 tiers" },
          ]}
          onChange={(v) => setTweak("pricing", v)}
        />

        <TweakSection label="Checkout flow" />
        <TweakSelect
          label="Layout"
          value={tweaks.checkout}
          options={[
            { value: "drawer", label: "Slide-in drawer" },
            { value: "modal", label: "Centered modal" },
            { value: "page", label: "Split full-page" },
          ]}
          onChange={(v) => setTweak("checkout", v)}
        />
        <TweakButton label="Try checkout now" onClick={() => { setView("store"); setTimeout(onBuy, 100); }} />

        <TweakSection label="Builder canvas" />
        <TweakRadio
          label="Style"
          value={tweaks.canvas}
          options={[
            { value: "dots", label: "Dots" },
            { value: "grid", label: "Grid" },
            { value: "paper", label: "Paper" },
            { value: "blueprint", label: "Blueprint" },
          ]}
          onChange={(v) => setTweak("canvas", v)}
        />
      </TweaksPanel>
    </div>
  );
}

/* Custom palette swatch row (since our palettes use named keys, not raw colors) */
const PALETTE_PREVIEWS = {
  cream:  ["#F1E8D1", "#161210", "#E14118"],
  ink:    ["#14110D", "#F2EAD2", "#F1582E"],
  moss:   ["#E8E5D7", "#1B2618", "#C2421A"],
  blush:  ["#F4DCD2", "#2A1813", "#5D2BD0"],
};
function PaletteSwatches({ value, onChange }) {
  return (
    <div style={{display:"flex", gap:6}}>
      {Object.entries(PALETTE_PREVIEWS).map(([k, colors]) => (
        <button
          key={k}
          onClick={() => onChange(k)}
          title={k}
          style={{
            display:"flex", padding:0,
            border: value === k ? "2px solid #29261b" : "2px solid rgba(0,0,0,.08)",
            borderRadius: 8, overflow:"hidden", cursor:"pointer",
            width: 56, height: 28, background:"transparent",
          }}
        >
          {colors.map((c, i) => (
            <span key={i} style={{flex:1, background:c, display:"block"}} />
          ))}
        </button>
      ))}
    </div>
  );
}
function TypePreview({ pair }) {
  const pairs = {
    editorial: { serif: "Instrument Serif", sans: "Geist" },
    modern: { serif: "Newsreader", sans: "Manrope" },
    classic: { serif: "DM Serif Display", sans: "Space Grotesk" },
  };
  const p = pairs[pair];
  return (
    <div style={{
      padding:"10px 12px", borderRadius:8, background:"rgba(255,255,255,.6)",
      border:".5px solid rgba(0,0,0,.08)"
    }}>
      <div style={{fontFamily:`"${p.serif}", serif`, fontStyle:"italic", fontSize:22, lineHeight:1, color:"#29261b"}}>
        Field Notes
      </div>
      <div style={{fontFamily:`"${p.sans}", sans-serif`, fontSize:10.5, color:"rgba(41,38,27,.6)", marginTop:4, letterSpacing:".04em"}}>
        {p.serif} · {p.sans}
      </div>
    </div>
  );
}

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