import { Navigate, Outlet, Route, Routes, useLocation, useParams } from "@/lib/router";
import { VOCAB } from "@paperclipai/branding";
import { useQuery } from "@tanstack/react-query";
import { lazy, Suspense, useEffect } from "react";
import { Button } from "@/components/ui/button";
import { Skeleton } from "@/components/ui/skeleton";
import { Layout } from "./components/Layout";
import { OnboardingWizard } from "./components/OnboardingWizard";
import { authApi } from "./api/auth";
import { healthApi } from "./api/health";
import { queryKeys } from "./lib/queryKeys";
import { useCompany } from "./context/CompanyContext";
import { useDialog } from "./context/DialogContext";
import { useNexusMode } from "./hooks/useNexusMode";
import { shouldRedirectCompanylessRouteToOnboarding } from "./lib/onboarding-route";

const AgentDetail = lazy(() => import("./pages/AgentDetail").then(m => ({ default: m.AgentDetail })));
const Projects = lazy(() => import("./pages/Projects").then(m => ({ default: m.Projects })));
const ProjectDetail = lazy(() => import("./pages/ProjectDetail").then(m => ({ default: m.ProjectDetail })));
const IssueDetail = lazy(() => import("./pages/IssueDetail").then(m => ({ default: m.IssueDetail })));
const ExecutionWorkspaceDetail = lazy(() => import("./pages/ExecutionWorkspaceDetail").then(m => ({ default: m.ExecutionWorkspaceDetail })));
const CompanySettings = lazy(() => import("./pages/CompanySettings").then(m => ({ default: m.CompanySettings })));
const CompanySkills = lazy(() => import("./pages/CompanySkills").then(m => ({ default: m.CompanySkills })));
const CompanyExport = lazy(() => import("./pages/CompanyExport").then(m => ({ default: m.CompanyExport })));
const CompanyImport = lazy(() => import("./pages/CompanyImport").then(m => ({ default: m.CompanyImport })));
const DesignGuide = lazy(() => import("./pages/DesignGuide").then(m => ({ default: m.DesignGuide })));
const InstanceGeneralSettings = lazy(() => import("./pages/InstanceGeneralSettings").then(m => ({ default: m.InstanceGeneralSettings })));
const PluginManager = lazy(() => import("./pages/PluginManager").then(m => ({ default: m.PluginManager })));
const PluginSettings = lazy(() => import("./pages/PluginSettings").then(m => ({ default: m.PluginSettings })));
const PluginPage = lazy(() => import("./pages/PluginPage").then(m => ({ default: m.PluginPage })));
const RunTranscriptUxLab = lazy(() => import("./pages/RunTranscriptUxLab").then(m => ({ default: m.RunTranscriptUxLab })));
const NewAgent = lazy(() => import("./pages/NewAgent").then(m => ({ default: m.NewAgent })));
const AuthPage = lazy(() => import("./pages/Auth").then(m => ({ default: m.AuthPage })));
const BoardClaimPage = lazy(() => import("./pages/BoardClaim").then(m => ({ default: m.BoardClaimPage })));
const CliAuthPage = lazy(() => import("./pages/CliAuth").then(m => ({ default: m.CliAuthPage })));
const InviteLandingPage = lazy(() => import("./pages/InviteLanding").then(m => ({ default: m.InviteLandingPage })));
const NotFoundPage = lazy(() => import("./pages/NotFound").then(m => ({ default: m.NotFoundPage })));
const PersonalAssistant = lazy(() => import("./pages/PersonalAssistant").then(m => ({ default: m.PersonalAssistant })));
const ContentStudio = lazy(() => import("./pages/ContentStudio").then(m => ({ default: m.ContentStudio })));

function BootstrapPendingPage({
  hasActiveInvite = false,
  invitePath,
}: {
  hasActiveInvite?: boolean;
  invitePath?: string;
}) {
  // [nexus] Zero-terminal first boot: the server auto-generates a
  // bootstrap_ceo invite on startup when no admin exists and exposes its
  // relative path via /api/health. Redirect straight to /invite/{token}
  // so the first user never sees a CLI command.
  useEffect(() => {
    if (invitePath) {
      window.location.replace(invitePath);
    }
  }, [invitePath]);

  if (invitePath) {
    return (
      <div className="mx-auto max-w-xl py-10 text-sm text-muted-foreground">
        Setting up instance — redirecting to admin account creation…
      </div>
    );
  }

  // Fallback for headless/SSH-only deployments where the server couldn't
  // auto-generate an invite (e.g. startup error). The CLI command still
  // works in that case.
  return (
    <div className="mx-auto max-w-xl py-10">
      <div className="rounded-lg border border-border bg-card p-6">
        <h1 className="text-xl font-semibold">Instance setup required</h1>
        <p className="mt-2 text-sm text-muted-foreground">
          {hasActiveInvite
            ? `No instance admin exists yet. A bootstrap invite is already active. Check your ${VOCAB.appName} startup logs for the first admin invite URL, or run this command to rotate it:`
            : `No instance admin exists yet. Run this command in your ${VOCAB.appName} environment to generate the first admin invite URL:`}
        </p>
        <pre className="mt-4 overflow-x-auto rounded-md border border-border bg-muted/30 p-3 text-xs">
{`pnpm paperclipai auth bootstrap-ceo`}
        </pre>
      </div>
    </div>
  );
}

function CloudAccessGate() {
  const location = useLocation();
  const healthQuery = useQuery({
    queryKey: queryKeys.health,
    queryFn: () => healthApi.get(),
    retry: false,
    refetchInterval: (query) => {
      const data = query.state.data as
        | { deploymentMode?: "local_trusted" | "authenticated"; bootstrapStatus?: "ready" | "bootstrap_pending" }
        | undefined;
      return data?.deploymentMode === "authenticated" && data.bootstrapStatus === "bootstrap_pending"
        ? 2000
        : false;
    },
    refetchIntervalInBackground: true,
  });

  const isAuthenticatedMode = healthQuery.data?.deploymentMode === "authenticated";
  const sessionQuery = useQuery({
    queryKey: queryKeys.auth.session,
    queryFn: () => authApi.getSession(),
    enabled: isAuthenticatedMode,
    retry: false,
  });

  if (healthQuery.isLoading || (isAuthenticatedMode && sessionQuery.isLoading)) {
    return <div className="mx-auto max-w-xl py-10 text-sm text-muted-foreground">Loading...</div>;
  }

  if (healthQuery.error) {
    return (
      <div className="mx-auto max-w-xl py-10 text-sm text-destructive">
        {healthQuery.error instanceof Error ? healthQuery.error.message : "Failed to load app state"}
      </div>
    );
  }

  if (isAuthenticatedMode && healthQuery.data?.bootstrapStatus === "bootstrap_pending") {
    return (
      <BootstrapPendingPage
        hasActiveInvite={healthQuery.data.bootstrapInviteActive}
        invitePath={healthQuery.data.bootstrapInvitePath}
      />
    );
  }

  if (isAuthenticatedMode && !sessionQuery.data) {
    const next = encodeURIComponent(`${location.pathname}${location.search}`);
    return <Navigate to={`/auth?next=${next}`} replace />;
  }

  return <Outlet />;
}

function boardRoutes() {
  return (
    <>
      <Route index element={<Navigate to="assistant" replace />} />
      <Route path="onboarding" element={<OnboardingRoutePage />} />
      <Route path="company/settings" element={<CompanySettings />} />
      <Route path="company/export/*" element={<CompanyExport />} />
      <Route path="company/import" element={<CompanyImport />} />
      <Route path="skills/*" element={<CompanySkills />} />
      <Route path="settings" element={<LegacySettingsRedirect />} />
      <Route path="settings/*" element={<LegacySettingsRedirect />} />
      <Route path="plugins/:pluginId" element={<PluginPage />} />
      {/* Phase 16b: /agents top-level redirects to /projects. Agent detail pages remain. */}
      <Route path="agents" element={<Navigate to="/projects" replace />} />
      <Route path="agents/all" element={<Navigate to="/projects" replace />} />
      <Route path="agents/active" element={<Navigate to="/projects" replace />} />
      <Route path="agents/paused" element={<Navigate to="/projects" replace />} />
      <Route path="agents/error" element={<Navigate to="/projects" replace />} />
      <Route path="agents/new" element={<NewAgent />} />
      <Route path="agents/:agentId" element={<AgentDetail />} />
      <Route path="agents/:agentId/:tab" element={<AgentDetail />} />
      <Route path="agents/:agentId/runs/:runId" element={<AgentDetail />} />
      <Route path="projects" element={<Projects />} />
      <Route path="projects/:projectId" element={<ProjectDetail />} />
      <Route path="projects/:projectId/overview" element={<ProjectDetail />} />
      <Route path="projects/:projectId/issues" element={<ProjectDetail />} />
      <Route path="projects/:projectId/issues/:filter" element={<ProjectDetail />} />
      <Route path="projects/:projectId/agents" element={<ProjectDetail />} />
      <Route path="projects/:projectId/gates" element={<ProjectDetail />} />
      <Route path="projects/:projectId/costs" element={<ProjectDetail />} />
      <Route path="projects/:projectId/activity" element={<ProjectDetail />} />
      <Route path="projects/:projectId/org" element={<ProjectDetail />} />
      <Route path="projects/:projectId/configuration" element={<ProjectDetail />} />
      <Route path="projects/:projectId/budget" element={<ProjectDetail />} />
      {/* Phase 16b: /issues top-level redirects to /projects. Issue detail pages remain. */}
      <Route path="issues" element={<Navigate to="/projects" replace />} />
      <Route path="issues/all" element={<Navigate to="/projects" replace />} />
      <Route path="issues/active" element={<Navigate to="/projects" replace />} />
      <Route path="issues/backlog" element={<Navigate to="/projects" replace />} />
      <Route path="issues/done" element={<Navigate to="/projects" replace />} />
      <Route path="issues/recent" element={<Navigate to="/projects" replace />} />
      <Route path="issues/:issueId" element={<IssueDetail />} />
      <Route path="execution-workspaces/:workspaceId" element={<ExecutionWorkspaceDetail />} />
      <Route path="assistant" element={<PersonalAssistant />} />
      <Route path="assistant/:conversationId" element={<PersonalAssistant />} />
      <Route path="content-studio" element={<ContentStudio />} />
      <Route path="content-studio/:workshopSlug" element={<ContentStudio />} />
      {/* Phase 16b: /convert folded into Studio Convert workshop. */}
      <Route path="convert" element={<Navigate to="content-studio/convert" replace />} />
      <Route path="convert/:sourceFormat" element={<Navigate to="content-studio/convert" replace />} />
      <Route path="convert/:sourceFormat/:targetFormat" element={<Navigate to="content-studio/convert" replace />} />
      <Route path="design-guide" element={<DesignGuide />} />
      <Route path="tests/ux/runs" element={<RunTranscriptUxLab />} />
      <Route path=":pluginRoutePath" element={<PluginPage />} />
      <Route path="*" element={<NotFoundPage scope="board" />} />
    </>
  );
}

function LegacySettingsRedirect() {
  const location = useLocation();
  return <Navigate to={`/instance/settings/general${location.search}${location.hash}`} replace />;
}

function OnboardingRoutePage() {
  const { companies, loading: companiesLoading } = useCompany();
  const { openOnboarding, onboardingOpen } = useDialog();
  const { companyPrefix } = useParams<{ companyPrefix?: string }>();
  const matchedCompany = companyPrefix
    ? companies.find((company) => company.issuePrefix.toUpperCase() === companyPrefix.toUpperCase()) ?? null
    : null;

  // [nexus] Auto-open the first-run wizard when a user lands on /onboarding
  // with zero companies. CompanyRootRedirect navigates here on fresh DB, and
  // without this effect the user would see the fallback "Start Onboarding"
  // button and have to click it. The wizard itself already renders via its
  // URL-based trigger (routeOnboardingOptions), but we also flip the dialog
  // state so that post-wizard-creation navigation (which closes via
  // closeOnboarding) works consistently. The button below is retained as a
  // harmless fallback for the "add another" flows.
  useEffect(() => {
    if (companiesLoading) return;
    if (onboardingOpen) return;
    if (companies.length === 0 && !companyPrefix) {
      openOnboarding();
    }
  }, [companies.length, companiesLoading, companyPrefix, onboardingOpen, openOnboarding]);

  const title = matchedCompany
    ? `Add another agent to ${matchedCompany.name}`
    : companies.length > 0
      ? "Create another workspace"
      : "Create your first workspace";
  const description = matchedCompany
    ? "Run onboarding again to add an agent and a starter task for this workspace."
    : companies.length > 0
      ? "Run onboarding again to create another workspace and seed its first agent."
      : "Get started by creating a workspace and your first agent.";

  return (
    <div className="mx-auto max-w-xl py-10">
      <div className="rounded-lg border border-border bg-card p-6">
        <h1 className="text-xl font-semibold">{title}</h1>
        <p className="mt-2 text-sm text-muted-foreground">{description}</p>
        <div className="mt-4">
          <Button
            onClick={() =>
              matchedCompany
                ? openOnboarding({ initialStep: 2, companyId: matchedCompany.id })
                : openOnboarding()
            }
          >
            {matchedCompany ? "Add Agent" : "Start Onboarding"}
          </Button>
        </div>
      </div>
    </div>
  );
}

function CompanyRootRedirect() {
  const { companies, selectedCompany, loading } = useCompany();
  const { mode, isLoading: nexusModeLoading } = useNexusMode();
  const location = useLocation();

  if (loading || nexusModeLoading) {
    return <div className="mx-auto max-w-xl py-10 text-sm text-muted-foreground">Loading...</div>;
  }

  const targetCompany = selectedCompany ?? companies[0] ?? null;
  if (!targetCompany) {
    if (
      shouldRedirectCompanylessRouteToOnboarding({
        pathname: location.pathname,
        hasCompanies: false,
      })
    ) {
      return <Navigate to="/onboarding" replace />;
    }
    return <NoCompaniesStartPage />;
  }

  // [nexus] Nexus-first landing: in personal_ai / both (default) modes, land
  // on the Personal Assistant. project_builder mode lands on projects. The
  // legacy dashboard route is deleted in Phase 16b.
  const landingPath = mode === "project_builder" ? "projects" : "assistant";
  return <Navigate to={`/${targetCompany.issuePrefix}/${landingPath}`} replace />;
}

function UnprefixedBoardRedirect() {
  const location = useLocation();
  const { companies, selectedCompany, loading } = useCompany();

  if (loading) {
    return <div className="mx-auto max-w-xl py-10 text-sm text-muted-foreground">Loading...</div>;
  }

  const targetCompany = selectedCompany ?? companies[0] ?? null;
  if (!targetCompany) {
    if (
      shouldRedirectCompanylessRouteToOnboarding({
        pathname: location.pathname,
        hasCompanies: false,
      })
    ) {
      return <Navigate to="/onboarding" replace />;
    }
    return <NoCompaniesStartPage />;
  }

  return (
    <Navigate
      to={`/${targetCompany.issuePrefix}${location.pathname}${location.search}${location.hash}`}
      replace
    />
  );
}

function NoCompaniesStartPage() {
  // [nexus] Single-workspace mode: there is no user-facing "create company"
  // action. The onboarding wizard is the only path to initial workspace
  // creation and is triggered separately. Show a minimal loading shim while
  // that flow runs.
  return (
    <div className="mx-auto max-w-xl py-10 text-sm text-muted-foreground">
      Setting up your workspace…
    </div>
  );
}

export function App() {
  return (
    <>
      <Suspense fallback={<div className="flex items-center justify-center h-full"><Skeleton className="h-8 w-48" /></div>}>
        <Routes>
          <Route path="auth" element={<AuthPage />} />
          <Route path="board-claim/:token" element={<BoardClaimPage />} />
          <Route path="cli-auth/:id" element={<CliAuthPage />} />
          <Route path="invite/:token" element={<InviteLandingPage />} />

          <Route element={<CloudAccessGate />}>
            <Route index element={<CompanyRootRedirect />} />
            <Route path="onboarding" element={<OnboardingRoutePage />} />
            <Route path="instance" element={<Navigate to="/instance/settings/general" replace />} />
            <Route path="instance/settings" element={<Layout />}>
              <Route index element={<Navigate to="general" replace />} />
              <Route path="general" element={<InstanceGeneralSettings />} />
              {/* Phase 13: nested settings sub-routes collapse into /general. */}
              <Route path="heartbeats" element={<Navigate to="/instance/settings/general" replace />} />
              <Route path="experimental" element={<Navigate to="/instance/settings/general" replace />} />
              {/* Plugins remain top-level pages owned by the plugin system, not settings sub-pages. */}
              <Route path="plugins" element={<PluginManager />} />
              <Route path="plugins/:pluginId" element={<PluginSettings />} />
            </Route>
            <Route path="issues/:issueId" element={<UnprefixedBoardRedirect />} />
            <Route path="skills/*" element={<UnprefixedBoardRedirect />} />
            <Route path="settings" element={<LegacySettingsRedirect />} />
            <Route path="settings/*" element={<LegacySettingsRedirect />} />
            <Route path="agents/new" element={<UnprefixedBoardRedirect />} />
            <Route path="agents/:agentId" element={<UnprefixedBoardRedirect />} />
            <Route path="agents/:agentId/:tab" element={<UnprefixedBoardRedirect />} />
            <Route path="agents/:agentId/runs/:runId" element={<UnprefixedBoardRedirect />} />
            <Route path="projects" element={<UnprefixedBoardRedirect />} />
            <Route path="projects/:projectId" element={<UnprefixedBoardRedirect />} />
            <Route path="projects/:projectId/overview" element={<UnprefixedBoardRedirect />} />
            <Route path="projects/:projectId/issues" element={<UnprefixedBoardRedirect />} />
            <Route path="projects/:projectId/issues/:filter" element={<UnprefixedBoardRedirect />} />
            <Route path="projects/:projectId/agents" element={<UnprefixedBoardRedirect />} />
            <Route path="projects/:projectId/gates" element={<UnprefixedBoardRedirect />} />
            <Route path="projects/:projectId/costs" element={<UnprefixedBoardRedirect />} />
            <Route path="projects/:projectId/activity" element={<UnprefixedBoardRedirect />} />
            <Route path="projects/:projectId/org" element={<UnprefixedBoardRedirect />} />
            <Route path="projects/:projectId/configuration" element={<UnprefixedBoardRedirect />} />
            <Route path="tests/ux/runs" element={<UnprefixedBoardRedirect />} />
            <Route path=":companyPrefix" element={<Layout />}>
              {boardRoutes()}
            </Route>
            <Route path="*" element={<NotFoundPage scope="global" />} />
          </Route>
        </Routes>
      </Suspense>
      <OnboardingWizard />
    </>
  );
}