// App root — wires routes + drawer + data polling.

const { Sidebar, Topbar, PipelineView, SessionsView, Drawer, ConsoleView } = window.LHViews;
const { IntakeView, TasksView, QueueView } = window.LHViewsExtra;
const { useState, useEffect } = React;
const { usePolling, fetchIntake, fetchTasks, fetchSessions, fetchTmuxSessions, fetchAllQueue, postIntake } = window.LHData;

function LoginView({ onLogin }) {
  const [token, setToken] = useState("");
  const [error, setError] = useState("");
  const submit = async (event) => {
    event.preventDefault();
    if (token.trim().length < 32) {
      setError("Token 至少需要 32 个字符");
      return;
    }
    const res = await fetch("/api/intakes", { headers: { Authorization: `Bearer ${token.trim()}` } });
    if (!res.ok) { setError("登录失败：token 不正确或 API 不可用"); return; }
    window.LHAuth.setToken(token);
    onLogin();
  };
  return <div style={{minHeight:"100vh",display:"grid",placeItems:"center",background:"var(--bg)"}}>
    <form onSubmit={submit} style={{width:"min(420px,90vw)",padding:28,background:"var(--surface)",border:"1px solid var(--line-soft)",borderRadius:12}}>
      <div className="page-title">Lighthouse</div>
      <div className="page-sub" style={{marginBottom:20}}>登录后读取云端 Postgres 状态</div>
      <input autoFocus type="password" value={token} onChange={e => setToken(e.target.value)} placeholder="LIGHTHOUSE token" style={{width:"100%",padding:12,background:"var(--bg)",border:"1px solid var(--line)",borderRadius:6}} />
      {error && <div style={{color:"var(--err)",marginTop:10}}>{error}</div>}
      <button className="btn btn-accent" type="submit" style={{marginTop:16,width:"100%",justifyContent:"center"}}>登录</button>
    </form>
  </div>;
}

function App() {
  const [authenticated, setAuthenticated] = useState(Boolean(window.LHAuth.getToken()));
  if (!authenticated) return <LoginView onLogin={() => setAuthenticated(true)} />;
  const [route, setRoute] = useState("pipeline");
  const [selected, setSelected] = useState(null);
  const [draft, setDraft] = useState("");
  const [project, setProject] = useState("17_Always_On_Agent");
  const [filterProj, setFilterProj] = useState("__all");
  const [consoleSession, setConsoleSession] = useState(null);
  const [nextGoStatus, setNextGoStatus] = useState("");

  // ---- Data polling ----
  const { data: intake, refresh: refreshIntake } = usePolling(fetchIntake, 5000);
  const { data: tasks, refresh: refreshTasks } = usePolling(fetchTasks, 5000);
  const { data: sessions, refresh: refreshSessions } = usePolling(fetchSessions, 5000);
  const { data: tmuxSessions, refresh: refreshTmux } = usePolling(fetchTmuxSessions, 5000);
  const { data: queue, refresh: refreshQueue } = usePolling(fetchAllQueue, 5000);

  const onSubmit = async () => {
    if (!draft.trim()) return;
    try {
      await postIntake({ project, raw_text: draft });
      setDraft("");
      setNextGoStatus("intake submitted");
      refreshIntake();
      setTimeout(() => setNextGoStatus(""), 1800);
    } catch (err) {
      setNextGoStatus("submit failed: " + err.message);
      setTimeout(() => setNextGoStatus(""), 3000);
    }
  };

  return (
    <>
      <Sidebar route={route} setRoute={(r) => { setRoute(r); setSelected(null); }}
               filterProj={filterProj}
               onProjectClick={(pid) => { setRoute("pipeline"); setSelected(null); setFilterProj(pid); }}
               intake={intake} tasks={tasks} sessions={sessions} queue={queue}/>
      <div className="main">
        <Topbar route={route} nextGoStatus={nextGoStatus}/>
        <div className="content" style={{flexDirection:"row"}}>
          <div style={{flex: 1, minWidth: 0, overflow: "hidden", display: "flex", flexDirection: "column"}}>
            {route === "pipeline" && <PipelineView onSelect={setSelected} selectedId={selected?.id} project={project} setProject={setProject} draft={draft} setDraft={setDraft} onSubmit={onSubmit} filterProj={filterProj} setFilterProj={setFilterProj} setRoute={(r) => { setRoute(r); setSelected(null); }} intake={intake} tasks={tasks} sessions={sessions} queue={queue}/>}
            {route === "intake"   && <IntakeView   onSelect={setSelected} selectedId={selected?.id} project={project} setProject={setProject} draft={draft} setDraft={setDraft} onSubmit={onSubmit} filterProj={filterProj} setFilterProj={setFilterProj} intake={intake} refreshIntake={refreshIntake}/>}
            {route === "tasks"    && <TasksView    onSelect={setSelected} selectedId={selected?.id} filterProj={filterProj} setFilterProj={setFilterProj} tasks={tasks}/>}
            {route === "queue"    && <QueueView    onSelect={setSelected} selectedId={selected?.id} filterProj={filterProj} setFilterProj={setFilterProj} queue={queue} sessions={sessions} refreshQueue={refreshQueue}/>}
            {route === "sessions" && <SessionsView onSelect={setSelected} onOpenConsole={(sid) => { setConsoleSession(sid); setRoute("console"); setSelected(null); }} filterProj={filterProj} setFilterProj={setFilterProj} sessions={sessions} tmuxSessions={tmuxSessions}/>}
            {route === "console"  && <ConsoleView sessionId={consoleSession} setSessionId={setConsoleSession} sessions={sessions} tmuxSessions={tmuxSessions}/>}
          </div>
          <Drawer item={selected} onClose={() => setSelected(null)} onSelect={setSelected}/>
        </div>
      </div>
    </>
  );
}

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