// Top-level app
function App() {
  const [view, setView] = React.useState("chat");
  const [panelOpen, setPanelOpen] = React.useState(true);
  const [sidebarCollapsed, setSidebarCollapsed] = React.useState(localStorage.getItem("sidebarCollapsed") === "1");
  const [drawerOpen, setDrawerOpen] = React.useState(false);
  const [currentUser, setCurrentUser] = React.useState(null);
  const [conversationId, setConversationId] = React.useState(null);
  const [conversations, setConversations] = React.useState([]);
  const [loadedMessages, setLoadedMessages] = React.useState(null);

  const openConversation = async (convo) => {
    const token = localStorage.getItem("token");
    const res = await fetch(`${window.API_BASE}/api/conversations/${convo.id}/messages`, {
      headers: { "Authorization": "Bearer " + token }
    });
    const msgs = await res.json();
    setConversationId(convo.id);
    setLoadedMessages(msgs.map((m, i) => ({
      id: m.id || i,
      role: m.role,
      content: m.role === "user" ? m.content : null,
      body: m.role === "assistant" ? [m.content] : null,
      intro: null, tool: null, pills: [],
      timestamp: m.created_at,
    })));
    setView("chat");
    setDrawerOpen(false);
  };

  const loadConversations = () => {
    const token = localStorage.getItem("token");
    if (!token) return;
    fetch(`${window.API_BASE}/api/conversations`, {
      headers: { "Authorization": "Bearer " + token }
    }).then(r => r.json()).then(setConversations).catch(() => {});
  };

  React.useEffect(() => { if (currentUser) loadConversations(); }, [currentUser]);

  // expose globally so chat.jsx can trigger a refresh
  React.useEffect(() => { window.__refreshConversations = loadConversations; }, []);

  React.useEffect(() => {
    fetchCurrentUser().then(user => { if (user) setCurrentUser(user); });
  }, []);

  if (!currentUser) return null;

  const effectivePanelOpen = panelOpen && view === "chat";
  const pickView = (v) => { setView(v); setDrawerOpen(false); };
  const toggleSidebar = () => {
    setSidebarCollapsed(c => {
      localStorage.setItem("sidebarCollapsed", c ? "0" : "1");
      return !c;
    });
  };

  const viewTitles = { chat: "Advisor Chat", plan: "Degree Plan", courses: "Catalog", profile: "Profile" };

  return (
    <div className={`app ${effectivePanelOpen ? "" : "panel-closed"} ${sidebarCollapsed ? "sidebar-closed" : ""}`}>
      {/* Mobile top bar */}
      <div className="mobile-topbar">
        <button className="hamburger" onClick={() => setDrawerOpen(true)} aria-label="Menu">
          <svg className="ico" viewBox="0 0 24 24"><path d="M4 7h16M4 12h16M4 17h16" stroke="currentColor" fill="none" strokeLinecap="round"/></svg>
        </button>
        <div className="mark">A</div>
        <div className="mt-title">{viewTitles[view]}</div>
      </div>

      <div className={`backdrop ${drawerOpen ? "open" : ""}`} onClick={() => setDrawerOpen(false)} />
      <Sidebar view={view} setView={pickView} drawerOpen={drawerOpen} currentUser={currentUser} conversations={conversations} onNewChat={() => { setConversationId(null); setLoadedMessages(null); setView("chat"); loadConversations(); }} onOpenConversation={openConversation} activeConversationId={conversationId} onCollapse={toggleSidebar} />

      <main className="main" data-screen-label={`${view}`}>
        <div className="tabs" style={{display: "flex"}}>
          {sidebarCollapsed && (
            <button className="icon-btn" onClick={toggleSidebar} title="Show sidebar" style={{marginRight: 4}}>
              <I.panel />
            </button>
          )}
          <button className={`tab ${view === "chat" ? "active" : ""}`} onClick={()=>pickView("chat")}>Conversation</button>
          <button className={`tab ${view === "plan" ? "active" : ""}`} onClick={()=>pickView("plan")}>Plan</button>
          <button className={`tab ${view === "courses" ? "active" : ""}`} onClick={()=>pickView("courses")}>Catalog</button>
          <button className={`tab ${view === "profile" ? "active" : ""}`} onClick={()=>pickView("profile")}>Profile</button>
        </div>

        {view === "chat"    && <ChatView panelOpen={effectivePanelOpen} togglePanel={() => setPanelOpen(o => !o)} currentUser={currentUser} setCurrentUser={setCurrentUser} conversationId={conversationId} setConversationId={setConversationId} loadedMessages={loadedMessages} setLoadedMessages={setLoadedMessages} />}
        {view === "plan"    && <PlanView currentUser={currentUser} />}
        {view === "courses" && <CoursesView setView={pickView} currentUser={currentUser} />}
        {view === "profile" && <ProfileView currentUser={currentUser} setCurrentUser={setCurrentUser} />}
      </main>

      <div className={`panel-backdrop ${effectivePanelOpen ? "open" : ""}`} onClick={() => setPanelOpen(false)} />
      <ContextPanel open={effectivePanelOpen} onClose={() => setPanelOpen(false)} currentUser={currentUser} setCurrentUser={setCurrentUser} />

      {/* Mobile bottom tab bar */}
      <nav className="mobile-tabbar">
        <div className="mt-grid">
          {[
            { id: "chat", label: "Chat", icon: I.chat },
            { id: "plan", label: "Plan", icon: I.plan },
            { id: "courses", label: "Catalog", icon: I.book },
            { id: "profile", label: "Profile", icon: I.user },
          ].map(t => {
            const Ico = t.icon;
            return (
              <button key={t.id} className={view === t.id ? "active" : ""} onClick={() => pickView(t.id)}>
                <Ico />{t.label}
              </button>
            );
          })}
        </div>
      </nav>
    </div>
  );
}

if (!window.__PRINT_MODE__) {
  ReactDOM.createRoot(document.getElementById("root")).render(<App />);
}