import { useState } from "react";
import { ConsoleContext } from "./context";
import { useConsoleStore } from "./hooks/useConsoleStore";
import { useAutoRefresh, useIntervalMs } from "./hooks/useAutoRefresh";
import IconRail, { type View } from "./components/IconRail";
import ApiKeySection from "./sections/ApiKeySection";
import AdminSection from "./sections/AdminSection";
import ProjectsSection from "./sections/ProjectsSection";
import EnvSection from "./sections/EnvSection";
import WorkersSection from "./sections/WorkersSection";
import SkillsSection from "./sections/SkillsSection";
import AutomationsSection from "./sections/AutomationsSection";
import TriageSection from "./sections/TriageSection";
import TaskListSection from "./sections/TaskListSection";
import ConversationSection from "./sections/ConversationSection";
import RightPanel from "./sections/RightPanel";

// Layout only, Muse web/desktop style: no big header bar.
// Icon rail (56px) + left list (260px) + centre conversation (elastic,
// content centred) + right panel (300px, profile/today/detail). The
// centre top bar is minimal: a back arrow (back to the task view) on
// the left, and, only when the right panel is closed, a button to
// reopen it — the right panel's own X closes it. Selecting a task in
// the left list switches the centre conversation and the right detail
// to that task together; selecting a module switches the centre to
// that module and the right detail to its context.
export default function App() {
  const store = useConsoleStore();
  const [view, setView] = useState<View>("task");
  const [rightOpen, setRightOpen] = useState(true);
  useAutoRefresh((selectFocused) => store.refreshAll(selectFocused), 10000);
  useIntervalMs(() => store.refreshSlow(), 60000);

  const centre = (() => {
    switch (view) {
      case "projects": return <ProjectsSection />;
      case "env": return <EnvSection />;
      case "workers": return <WorkersSection />;
      case "skills": return <SkillsSection />;
      case "automations": return <AutomationsSection />;
      case "triage": return <TriageSection />;
      case "admin": return <AdminSection />;
      case "key": return <ApiKeySection />;
      default: return <ConversationSection />;
    }
  })();

  return (
    <ConsoleContext.Provider value={store}>
      <div className={"muse-app" + (rightOpen ? "" : " no-right")}>
        <IconRail view={view} onSelect={setView} />
        <aside className="list-col">
          <TaskListSection onNew={() => setView("task")} />
        </aside>
        <main className="center-col">
          <div className="center-topbar">
            <button type="button" className="icon-btn" aria-label="返回任务" title="返回任务" onClick={() => setView("task")}>←</button>
            {rightOpen ? <span className="muted">Codex 命令台</span> : (
              <button type="button" onClick={() => setRightOpen(true)}>显示右侧栏</button>
            )}
          </div>
          <div className="center-inner">{centre}</div>
        </main>
        {rightOpen ? (
          <aside className="right-col">
            <RightPanel view={view} onSelect={setView} onClose={() => setRightOpen(false)} />
          </aside>
        ) : null}
      </div>
    </ConsoleContext.Provider>
  );
}