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

import { useAuth, usePermission } from "~/context/AuthContext";
import { DashboardPage } from "../admin/DashboardPage";
import { useScriptWorkspaceStore } from "./state/scriptWorkspaceStore";

export default function DashboardRoute() {
  const canViewDevelopmentWorkbench = usePermission("dashboard:view");
  const { currentWorkspace } = useAuth();
  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 workspaceId = currentWorkspace?.workspace_id;
  const navigate = useNavigate();

  if (!canViewDevelopmentWorkbench) {
    return <Navigate to="/operations" replace />;
  }

  // Reload on workspace switch — DashboardRoute is not keyed by
  // workspace/user (only ScriptsPage is), so without this dep the
  // previous workspace's count would persist.
  useEffect(() => {
    void loadScriptCount();
  }, [loadScriptCount, workspaceId]);

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