// Root app: owns auth, view, role, tweaks

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "role": "counselor"
}/*EDITMODE-END*/;

function App() {
  const [loggedIn, setLoggedIn] = useState(() => localStorage.getItem("sasa_logged_in") === "1");
  const [role, setRole] = useState(() => localStorage.getItem("sasa_role") || TWEAK_DEFAULTS.role);
  const [view, setView] = useState(() => {
    const saved = localStorage.getItem("sasa_view");
    if (saved) return saved;
    return role === "admin" ? "admin_overview" : "home";
  });
  const [openedSession, setOpenedSession] = useState(null);
  const [chatOpen, setChatOpen] = useState(false);
  const [tweaksVisible, setTweaksVisible] = useState(false);

  // Persist
  useEffect(() => { localStorage.setItem("sasa_view", view); }, [view]);
  useEffect(() => { localStorage.setItem("sasa_role", role); }, [role]);
  useEffect(() => { localStorage.setItem("sasa_logged_in", loggedIn ? "1" : "0"); }, [loggedIn]);

  // If role changes, switch to a valid view
  useEffect(() => {
    if (role === "admin" && !view.startsWith("admin")) setView("admin_overview");
    if (role === "counselor" && view.startsWith("admin")) setView("home");
  }, [role]);

  // Tweaks protocol
  useEffect(() => {
    const handler = (e) => {
      if (e.data?.type === "__activate_edit_mode") setTweaksVisible(true);
      if (e.data?.type === "__deactivate_edit_mode") setTweaksVisible(false);
    };
    window.addEventListener("message", handler);
    window.parent.postMessage({ type: "__edit_mode_available" }, "*");
    return () => window.removeEventListener("message", handler);
  }, []);

  const setRoleAndPersist = (r) => {
    setRole(r);
    window.parent.postMessage({ type: "__edit_mode_set_keys", edits: { role: r } }, "*");
  };

  if (!loggedIn) {
    return <window.Login onLogin={() => setLoggedIn(true)} />;
  }

  const isAdmin = role === "admin";

  return (
    <>
      <window.Shell view={view} setView={setView} role={role} chatOpen={chatOpen} setChatOpen={setChatOpen}>
        {isAdmin ? (
          <window.AdminView view={view} />
        ) : (
          <>
            {view === "home" && <window.HomeView setView={setView} openSession={setOpenedSession} />}
            {view === "training" && <window.TrainingView openSession={setOpenedSession} />}
            {view === "resources" && <window.ResourcesView />}
            {view === "roadmap" && <window.RoadmapView />}
            {view === "impact" && <window.ImpactView />}
          </>
        )}
      </window.Shell>

      {openedSession && <window.SessionModal session={openedSession} onClose={() => setOpenedSession(null)} />}
      <window.Chatbot open={chatOpen && !isAdmin} onClose={() => setChatOpen(false)} />

      {tweaksVisible && <TweaksPanel role={role} setRole={setRoleAndPersist} />}
    </>
  );
}

function TweaksPanel({ role, setRole }) {
  return (
    <div style={{
      position: "fixed", bottom: 24, left: 24, zIndex: 60,
      background: "var(--card)", border: "1px solid var(--line-2)",
      borderRadius: 12, padding: 16, width: 260,
      boxShadow: "0 12px 32px -10px rgba(27,61,47,0.25)",
    }}>
      <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 12 }}>
        <window.I.Sliders size={14} stroke="var(--ink-2)" />
        <div style={{ fontSize: 13, fontWeight: 500, letterSpacing: -0.005 }}>Tweaks</div>
      </div>
      <div style={{ fontSize: 11, color: "var(--ink-3)", letterSpacing: 0.04, textTransform: "uppercase", fontWeight: 500, marginBottom: 8 }}>View as</div>
      <div style={{ display: "flex", padding: 3, background: "var(--bg-2)", borderRadius: 8, border: "1px solid var(--line)" }}>
        <button
          onClick={() => setRole("counselor")}
          style={{
            flex: 1, padding: "7px 10px", borderRadius: 6,
            background: role === "counselor" ? "var(--card)" : "transparent",
            fontSize: 12.5, fontWeight: 500, letterSpacing: -0.005,
            color: role === "counselor" ? "var(--ink)" : "var(--ink-3)",
            boxShadow: role === "counselor" ? "0 1px 2px rgba(0,0,0,0.06)" : "none",
          }}
        >
          Counselor
        </button>
        <button
          onClick={() => setRole("admin")}
          style={{
            flex: 1, padding: "7px 10px", borderRadius: 6,
            background: role === "admin" ? "var(--card)" : "transparent",
            fontSize: 12.5, fontWeight: 500, letterSpacing: -0.005,
            color: role === "admin" ? "var(--ink)" : "var(--ink-3)",
            boxShadow: role === "admin" ? "0 1px 2px rgba(0,0,0,0.06)" : "none",
          }}
        >
          Admin
        </button>
      </div>
      <div style={{ fontSize: 11, color: "var(--ink-3)", marginTop: 10, lineHeight: 1.4 }}>
        Counselors have view-only access. Admins can upload training sessions + resources and run reports.
      </div>
    </div>
  );
}

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