/* global React, ReactDOM, window */
const { Nav, Footer, Home, FieldDesk, NotesIndex, NotePage, Manifesto, About } = window;
const { useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakSlider, TweakToggle, TweakSelect } = window;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "navy-gold-clay",
  "headlineFont": "oswald",
  "bodyFont": "type",
  "paperGrain": 0.35,
  "ledgerLines": true,
  "darkMode": false
}/*EDITMODE-END*/;

const PALETTES = {
  // Default palette — aligned to Lonesome Goat Brand World v2 (Apr 2026 guide pack)
  "navy-gold-clay": { paper: "#F3EAD7", paperDeep: "#E0D3B0", ink: "#1F2937", inkSoft: "#2d3c4f", inkFaint: "#6f7a85", stone: "#BDBDB3", gold: "#C89A4E", goldDeep: "#a87a3d", clay: "#8a5a3b", rule: "rgba(31,41,55,0.18)", ruleSoft: "rgba(31,41,55,0.10)", tape: "rgba(220,200,140,0.55)" },
  "navy-gold-sage": { paper: "#e8e1cf", paperDeep: "#ddd5be", ink: "#21303f", inkSoft: "#324355", inkFaint: "#6b7480", gold: "#b88a4a", goldDeep: "#8e6730", clay: "#3a4a3a", rule: "rgba(33,48,63,0.18)", ruleSoft: "rgba(33,48,63,0.10)", tape: "rgba(200,190,140,0.55)" },
  "ink-tobacco-rust": { paper: "#efe7d4", paperDeep: "#e3d9bf", ink: "#1a1a1a", inkSoft: "#333", inkFaint: "#7a7066", gold: "#a8763d", goldDeep: "#7d5524", clay: "#6b3f2a", rule: "rgba(26,26,26,0.18)", ruleSoft: "rgba(26,26,26,0.10)", tape: "rgba(190,170,120,0.55)" },
  "minimal":         { paper: "#f4ecd8", paperDeep: "#e9dfc4", ink: "#2a2a2a", inkSoft: "#444", inkFaint: "#7d756a", gold: "#c4a77d", goldDeep: "#8e7041", clay: "#6f6357", rule: "rgba(42,42,42,0.18)", ruleSoft: "rgba(42,42,42,0.10)", tape: "rgba(210,200,160,0.55)" }
};

/* moonlight (dark mode) — single tone, not per-palette */
const MOONLIGHT = {
  paper: "#1a1c1f", paperDeep: "#15171a", ink: "#e8d9b4", inkSoft: "#c9bb95", inkFaint: "#7a7264",
  gold: "#C89A4E", goldDeep: "#d8ac6a", clay: "#a07252",
  rule: "rgba(232,217,180,0.18)", ruleSoft: "rgba(232,217,180,0.08)", tape: "rgba(120,110,80,0.5)"
};

const HEADLINE_FONTS = {
  "oswald":   '"Oswald", "Brothers OT", "Rockwell", sans-serif',
  "bebas":    '"Bebas Neue", "Oswald", sans-serif',
  "franklin": '"Libre Franklin", "Neue Haas Grotesk", "Helvetica Neue", sans-serif',
  "fraunces": '"Fraunces", "Freight Text Pro", serif',
  "stencil":  '"Stardos Stencil", "Rockwell", serif'
};
const BODY_FONTS = {
  "type":     '"Special Elite", "Courier New", monospace',
  "fraunces": '"Fraunces", "Freight Text Pro", serif',
  "franklin": '"Libre Franklin", "Neue Haas Grotesk", "Helvetica Neue", sans-serif',
  "dm":       '"DM Sans", "Helvetica Neue", sans-serif',
  "mono":     '"Cutive Mono", "Courier New", monospace'
};

function App() {
  const [route, setRoute] = React.useState("home");
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  const go = (r) => {
    setRoute(r);
    window.scrollTo({ top: 0, behavior: 'instant' });
  };

  // apply palette + fonts to root
  React.useEffect(() => {
    const base = PALETTES[t.palette] || PALETTES["navy-gold-clay"];
    const p = t.darkMode ? { ...MOONLIGHT, gold: base.gold, goldDeep: base.goldDeep } : base;
    const root = document.documentElement;
    root.style.setProperty('--paper', p.paper);
    root.style.setProperty('--paper-deep', p.paperDeep);
    root.style.setProperty('--paper-edge', p.paperDeep);
    root.style.setProperty('--ink', p.ink);
    root.style.setProperty('--ink-soft', p.inkSoft);
    root.style.setProperty('--ink-faint', p.inkFaint);
    root.style.setProperty('--gold', p.gold);
    root.style.setProperty('--gold-deep', p.goldDeep);
    root.style.setProperty('--clay', p.clay);
    if (p.stone) root.style.setProperty('--stone', p.stone);
    root.style.setProperty('--rule', p.rule);
    root.style.setProperty('--rule-soft', p.ruleSoft);
    root.style.setProperty('--tape', p.tape);
    root.style.setProperty('--f-display', HEADLINE_FONTS[t.headlineFont] || HEADLINE_FONTS.stardos);
    root.style.setProperty('--f-type', BODY_FONTS[t.bodyFont] || BODY_FONTS.type);
    document.body.dataset.mode = t.darkMode ? 'moonlight' : 'daylight';
  }, [t.palette, t.headlineFont, t.bodyFont, t.darkMode]);

  React.useEffect(() => {
    document.body.style.setProperty('--grain-opacity', t.paperGrain);
    const sheet = document.getElementById('grain-style') || (() => {
      const s = document.createElement('style');
      s.id = 'grain-style';
      document.head.appendChild(s);
      return s;
    })();
    sheet.textContent = `.paper::before { opacity: ${t.paperGrain} !important; }`;
  }, [t.paperGrain]);

  // The "Ritual" modal entry-flow has been retired — Field Desk is now the
  // single, consistent path for adding Goat Notes. The pages/ritual.jsx file
  // is kept dormant in case we want to revive that flow later.

  let page;
  if (route.startsWith("note:")) {
    page = <NotePage id={route.slice(5)} go={go} />;
  } else if (route === "notes") {
    page = <NotesIndex go={go} />;
  } else if (route === "desk") {
    page = <FieldDesk go={go} />;
  } else if (route === "manifesto") {
    page = <Manifesto />;
  } else if (route === "about") {
    page = <About go={go} />;
  } else {
    page = <Home go={go} dark={t.darkMode} />;
  }

  return (
    <div className="paper" style={{ minHeight: '100vh' }}>
      <Nav route={route} go={go} dark={t.darkMode} setDark={(v) => setTweak('darkMode', v)} />
      {page}
      <Footer go={go} dark={t.darkMode} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Palette" />
        <TweakRadio
          label="Color"
          value={t.palette}
          onChange={(v) => setTweak('palette', v)}
          options={[
            { value: "navy-gold-clay", label: "Clay" },
            { value: "navy-gold-sage", label: "Sage" },
            { value: "ink-tobacco-rust", label: "Rust" },
            { value: "minimal", label: "Bone" }
          ]}
        />
        <TweakSection label="Headline font" />
        <TweakRadio
          label="Headline"
          value={t.headlineFont}
          onChange={(v) => setTweak('headlineFont', v)}
          options={[
            { value: "oswald", label: "Brothers" },
            { value: "bebas", label: "Bebas" },
            { value: "franklin", label: "NHG" },
            { value: "fraunces", label: "Freight" },
            { value: "stencil", label: "Stencil" }
          ]}
        />
        <TweakSection label="Body font" />
        <TweakRadio
          label="Body"
          value={t.bodyFont}
          onChange={(v) => setTweak('bodyFont', v)}
          options={[
            { value: "type", label: "Type" },
            { value: "fraunces", label: "Freight" },
            { value: "franklin", label: "Helv." },
            { value: "dm", label: "DM" },
            { value: "mono", label: "Mono" }
          ]}
        />
        <TweakSection label="Texture" />
        <TweakSlider label="Paper grain" value={t.paperGrain} min={0} max={0.7} step={0.05} onChange={(v) => setTweak('paperGrain', v)} />
      </TweaksPanel>
    </div>
  );
}

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