/* Main app shell — top bar, screen routing, tweaks */

const { useState: useAS, useEffect: useAE } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "gold",
  "ground": "warm",
  "showAdminNote": true,
  "dense": false
}/*EDITMODE-END*/;

const ACCENT_THEMES = {
  gold:    { gold: "#d4a24a", goldDeep: "#b07f24" },
  indigo:  { gold: "#5b6cf7", goldDeep: "#3a48c4" },
  emerald: { gold: "#1f8a5b", goldDeep: "#156e47" },
  copper:  { gold: "#c66a3a", goldDeep: "#a04e23" },
};
const GROUND_THEMES = {
  warm: { paper: "#f6f3ec", paper2: "#efeadb", card: "#fffdf6", hair: "#e6e0d2", hairStrong: "#c9c1ad" },
  cool: { paper: "#f3f5f8", paper2: "#e7ecf2", card: "#ffffff", hair: "#dde3ec", hairStrong: "#c1cad8" },
  mono: { paper: "#f2f2f0", paper2: "#e8e8e5", card: "#ffffff", hair: "#e0e0dc", hairStrong: "#c5c5c0" },
};

function applyTheme(t) {
  const root = document.documentElement;
  const a = ACCENT_THEMES[t.accent] || ACCENT_THEMES.gold;
  const g = GROUND_THEMES[t.ground] || GROUND_THEMES.warm;
  root.style.setProperty("--gold", a.gold);
  root.style.setProperty("--gold-deep", a.goldDeep);
  root.style.setProperty("--paper", g.paper);
  root.style.setProperty("--paper-2", g.paper2);
  root.style.setProperty("--card", g.card);
  root.style.setProperty("--hair", g.hair);
  root.style.setProperty("--hair-strong", g.hairStrong);
  document.body.style.background = g.paper;
  if (t.dense) {
    root.style.setProperty("--radius", "10px");
    root.style.setProperty("--radius-sm", "8px");
  } else {
    root.style.setProperty("--radius", "14px");
    root.style.setProperty("--radius-sm", "10px");
  }
}

function App() {
  // Returning from Thawani (?pay=return|cancel) must land on the roadmap so
  // its status-check effect can run and surface the result.
  const returningFromPay =
    typeof window !== "undefined" &&
    new URLSearchParams(window.location.search).has("pay");
  // screen: "chat" | "roadmap" | "journey" | "stories"
  const [screen, setScreen] = useAS(returningFromPay ? "roadmap" : "chat");
  const [paid, setPaid] = useAS(false);
  const [payResult, setPayResult] = useAS(null);
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  useAE(() => {
    applyTheme(t);
  }, [t]);

  return (
    <>
      <header className="topbar">
        <div className="brand">
          <span className="glyph" />
          <span className="name">
            <b>logic</b>connect
          </span>
          <span className="by">by Arkan Logic</span>
        </div>

        <nav className="navlinks">
          <a
            href="#"
            className={screen === "chat" ? "active" : ""}
            onClick={(e) => {
              e.preventDefault();
              setScreen("chat");
            }}
          >
            Counselor
          </a>
          <a
            href="#"
            className={
              screen === "roadmap" || screen === "journey" ? "active" : ""
            }
            onClick={(e) => {
              e.preventDefault();
              setScreen(paid ? "journey" : "roadmap");
            }}
          >
            My Plan
          </a>
          <a
            href="#"
            className={screen === "stories" ? "active" : ""}
            onClick={(e) => {
              e.preventDefault();
              setScreen("stories");
            }}
          >
            Success stories
          </a>
        </nav>

        <div className="topright">
          <span className="pill">
            <span className="dot" />
            Atlas online
          </span>
          <span style={{ fontSize: 13 }}>Khalid Al Balushi</span>
          <span className="avatar">KB</span>
        </div>
      </header>

      <main className="canvas">
        <div className="screen" key={screen}>
          {screen === "chat" && (
            <ChatScreen onComplete={() => setScreen("roadmap")} />
          )}
          {screen === "roadmap" && (
            <RoadmapScreen
              onBack={() => setScreen("chat")}
              onPaid={(result) => {
                setPaid(true);
                setPayResult(result || null);
                setScreen("journey");
              }}
            />
          )}
          {screen === "journey" && (
            <JourneyScreen
              result={payResult}
              onBack={() => setScreen("roadmap")}
              onStories={() => setScreen("stories")}
            />
          )}
          {screen === "stories" && (
            <StoriesScreen onStart={() => setScreen("chat")} />
          )}
        </div>
      </main>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Accent">
          <TweakColor
            value={ACCENT_THEMES[t.accent]?.gold}
            options={Object.values(ACCENT_THEMES).map((v) => v.gold)}
            onChange={(hex) => {
              const k = Object.entries(ACCENT_THEMES).find(
                ([, v]) => v.gold === hex
              );
              setTweak("accent", k ? k[0] : "gold");
            }}
          />
        </TweakSection>

        <TweakSection label="Ground">
          <TweakRadio
            value={t.ground}
            options={[
              { value: "warm", label: "Warm" },
              { value: "cool", label: "Cool" },
              { value: "mono", label: "Neutral" },
            ]}
            onChange={(v) => setTweak("ground", v)}
          />
        </TweakSection>

        <TweakSection label="Density">
          <TweakToggle
            value={t.dense}
            onChange={(v) => setTweak("dense", v)}
            label="Compact"
          />
        </TweakSection>

        <TweakSection label="Jump">
          <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
            <TweakButton label="▸ Counselor" onClick={() => setScreen("chat")} />
            <TweakButton label="▸ Roadmap" onClick={() => setScreen("roadmap")} />
            <TweakButton label="▸ Journey" onClick={() => setScreen("journey")} />
            <TweakButton label="▸ Stories" onClick={() => setScreen("stories")} />
          </div>
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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