import { useEffect } from "react";
import { useNavigate } from "react-router";

import { DashboardPage } from "../../components/admin/DashboardPage";
import { useScriptWorkspaceStore } from "./state/scriptWorkspaceStore";

export default function DashboardRoute() {
  const scripts = useScriptWorkspaceStore((s) => s.scripts);
  const scriptCount = useScriptWorkspaceStore((s) => s.scriptCount);
  const loadScriptCount = useScriptWorkspaceStore((s) => s.loadScriptCount);
  const apiOnline = useScriptWorkspaceStore((s) => s.apiOnline);
  const navigate = useNavigate();

  // Independent of the lazy-loaded `scripts` array — the count endpoint
  // returns the workspace-wide total even when no folders have been
  // expanded yet (see #34 + #37).
  useEffect(() => {
    void loadScriptCount();
  }, [loadScriptCount]);

  return (
    <DashboardPage
      scriptCount={scriptCount ?? scripts.length}
      online={apiOnline}
      onNavigate={(page) => {
        if (page === "scripts") navigate("/scripts");
        else if (page === "schedules") navigate("/schedules");
        else navigate("/system");
      }}
    />
  );
}