// Tweaks panel for interior pages. State lives in the shared CRCStore
// (see shared-layout.jsx) so the header and the panel stay in sync and the
// defaults are identical to the homepage. Exposes the full cross-page tweak set.

function InteriorTweaks({ contentMode, page }) {
  const [t, set] = useCRCTweaks();

  React.useEffect(() => { CRCStore.setContentMode(contentMode || "center"); }, [contentMode]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Density" />
      <TweakSlider label="Scale" value={t.density ?? 90} min={78} max={100} step={2} unit="%"
        onChange={(v) => set("density", v)} />
      <TweakToggle label="Larger UI text" value={t.uiText === "large"}
        onChange={(v) => set("uiText", v ? "large" : "regular")} />

      <TweakSection label="Body font" />
      <TweakRadio label="Paragraphs" value={t.bodyFont}
        onChange={(v) => set("bodyFont", v)}
        options={[
          { value: "sourceSerif", label: "Source Serif" },
          { value: "plexSerif",   label: "Plex Serif" },
          { value: "inter",       label: "Inter" }
        ]} />

      <TweakSection label="Brand" />
      <TweakRadio label="Brand text" value={t.brandText || "none"}
        onChange={(v) => set("brandText", v)}
        options={[
          { value: "abbr", label: "CRC" },
          { value: "full", label: "Full name" },
          { value: "none", label: "None" }
        ]} />
      <TweakRadio label="Brand side" value={t.brandSide || "left"}
        onChange={(v) => set("brandSide", v)}
        options={[{ value: "left", label: "Left" }, { value: "right", label: "Right" }]} />
      <TweakRadio label="CRC position" value={t.brandOrder || "crcFirst"}
        onChange={(v) => set("brandOrder", v)}
        options={[{ value: "crcFirst", label: "Before Redwood" }, { value: "redwoodFirst", label: "After Redwood" }]} />
      <TweakRadio label="Brand match" value={t.brandMatch || "highlight"}
        onChange={(v) => set("brandMatch", v)}
        options={[{ value: "logo", label: "Logo → teal" }, { value: "highlight", label: "Highlight → green" }]} />

      <TweakSection label="Top bar" />
      <TweakRadio label="Navbar height" value={t.navFit || "roomy"}
        onChange={(v) => set("navFit", v)}
        options={[
          { value: "roomy", label: "Roomy" },
          { value: "snug",  label: "Snug" }
        ]} />
      <TweakSelect label="Dataset links" value={t.dsNavStyle || "plain"}
        onChange={(v) => set("dsNavStyle", v)}
        options={[
          { value: "plain",    label: "Plain" },
          { value: "dropdown", label: "Dropdown" },
          { value: "pill",     label: "Pill" },
          { value: "bracket",  label: "Brackets" },
          { value: "dot",      label: "Dot marker" },
          { value: "tint",     label: "Teal tint" },
          { value: "sublabel", label: "“dataset” sublabel" }
        ]} />
      <TweakToggle label="Datasets background" value={t.dsNavBg === true}
        onChange={(v) => set("dsNavBg", v)} />
      <TweakRadio label="Datasets menu" value={t.dsMenu || "flat"}
        onChange={(v) => set("dsMenu", v)}
        options={[
          { value: "card",      label: "Card" },
          { value: "flat",      label: "Flat" },
          { value: "editorial", label: "Editorial" }
        ]} />
      {(t.dsNavStyle || "plain") === "sublabel" && (
        <TweakRadio label="Sublabel alignment" value={t.dsSubAlign || "center"}
          onChange={(v) => set("dsSubAlign", v)}
          options={[{ value: "center", label: "Centered" }, { value: "top", label: "Label on row" }]} />
      )}
      <TweakSection label="Teal saturation" />
      <TweakRadio label="Shade" value={t.teal || "medium"}
        onChange={(v) => set("teal", v)}
        options={[
          { value: "medium",      label: "Medium" },
          { value: "balancedLt",  label: "Balanced Lt" },
          { value: "balancedMid", label: "Balanced Mid" },
          { value: "balanced",    label: "Balanced" }
        ]} />

      <TweakSection label="Background" />
      <TweakRadio label="Shade" value={t.bgShade || "soft"}
        onChange={(v) => set("bgShade", v)}
        options={[
          { value: "warm",  label: "Warm" },
          { value: "soft",  label: "Soft" },
          { value: "light", label: "Light" },
          { value: "white", label: "White" }
        ]} />

      <TweakSection label="Paper links" />
      <TweakRadio label="Position" value={t.linkPos || "top"}
        onChange={(v) => set("linkPos", v)}
        options={[
          { value: "top",   label: "By label" },
          { value: "below", label: "Below title" },
          { value: "right", label: "Right of title" }
        ]} />
      <TweakSelect label="Style" value={t.arxivStyle || "underline"}
        onChange={(v) => set("arxivStyle", v)}
        options={[
          { value: "text",      label: "Text" },
          { value: "button",    label: "Button" },
          { value: "underline", label: "Underline" }
        ]} />
      <TweakSelect label="Bottom repeat" value={t.endLinks || "plain"}
        onChange={(v) => set("endLinks", v)}
        options={[
          { value: "plain",   label: "Plain centered" },
          { value: "read",    label: "“Keep reading —”" },
          { value: "deeper",  label: "“Want to go deeper?”" },
          { value: "sources", label: "“Read the paper…”" },
          { value: "more",    label: "“More info:” centered" },
          { value: "moreLeft", label: "“More info:” left" },
          { value: "moreSplit", label: "“More info:” left, links centered" },
          { value: "caption", label: "Mono caption" },
          { value: "rule",    label: "Divider line" }
        ]} />

      <TweakSection label="Layout" />
      <TweakSelect label="Contributors" value={t.contributors || "off"}
        onChange={(v) => set("contributors", v)}
        options={[
          { value: "off",            label: "Hidden" },
          { value: "belowTitle",     label: "Below title" },
          { value: "belowTitlePlain",label: "Below title — names only" },
          { value: "belowTitleSerif",label: "Below title — serif label" },
          { value: "belowLede",      label: "Below intro" },
          { value: "belowLedePlain", label: "Below intro — names only" },
          { value: "belowLedeSerif", label: "Below intro — serif label" },
          { value: "byline",         label: "Byline (mono)" }
        ]} />
      {page === "consistency" && (
        <TweakRadio label="Constraint example" value={t.consExample || "rows"}
          onChange={(v) => set("consExample", v)}
          options={[
            { value: "rows",     label: "Stacked rows" },
            { value: "converge", label: "Converging diagram" }
          ]} />
      )}
      {page === "methodology" && (
        <TweakRadio label="Text width" value={t.methodText || "wide"}
          onChange={(v) => set("methodText", v)}
          options={[
            { value: "constrained", label: "Constrained" },
            { value: "wide",        label: "Wide" }
          ]} />
      )}
      {page === "methodology" && (
        <TweakRadio label="Graph width" value={t.graphFit || "margins"}
          onChange={(v) => set("graphFit", v)}
          options={[
            { value: "margins", label: "Within margins" },
            { value: "full",    label: "Full width" }
          ]} />
      )}
      <TweakToggle label="Larger apply button" value={t.applyBig === true}
        onChange={(v) => set("applyBig", v)} />
      <TweakToggle label="Dataset page label" value={t.dsEyebrow !== false}
        onChange={(v) => set("dsEyebrow", v)} />
      <TweakToggle label="Page divider lines" value={t.pageRules === true}
        onChange={(v) => set("pageRules", v)} />
      {contentMode !== "wide" && (
        <TweakToggle label="Symmetric page margins" value={t.symMargins !== false}
          onChange={(v) => set("symMargins", v)} />
      )}
      {contentMode !== "wide" && t.symMargins !== false && (
        <TweakToggle label="Smaller margins" value={t.snugMargins === true}
          onChange={(v) => set("snugMargins", v)} />
      )}
    </TweaksPanel>
  );
}

window.InteriorTweaks = InteriorTweaks;