import { useState } from "react";
import ChatBox from "./ChatBox";
import McpStudio from "./McpStudio";
import "./styles.css";

export default function App() {
  const [activePage, setActivePage] = useState("chat");

  return (
    <div className="app">
      <div className="app-shell">
        <aside className="app-sidebar">
          <div className="sidebar-brand">
            <div className="nav-title">Strata Bio OS</div>
            <div className="nav-subtitle">Chat + Available Tool Studio</div>
          </div>
          <nav className="nav-actions">
            <button
              type="button"
              className={`nav-btn ${activePage === "chat" ? "nav-btn-active" : ""}`}
              onClick={() => setActivePage("chat")}
            >
              Chatbox
            </button>
            <button
              type="button"
              className={`nav-btn ${activePage === "mcp" ? "nav-btn-active" : ""}`}
              onClick={() => setActivePage("mcp")}
            >
              Available Tool Studio
            </button>
          </nav>
        </aside>

        <div className="page-shell">
          <div style={{ display: activePage === "chat" ? "block" : "none", height: "100%" }}>
            <ChatBox />
          </div>
          <div style={{ display: activePage === "mcp" ? "block" : "none", height: "100%" }}>
            <McpStudio onOpenChat={() => setActivePage("chat")} />
          </div>
        </div>
      </div>
    </div>
  );
}