import { getWorkspace } from "@/lib/session";
import { onboardingState } from "@/lib/queries/account";
import { PageHeader } from "@/components/ui/page-header";
import { OnboardingFlow } from "@/components/dashboard/onboarding/flow";

export const dynamic = "force-dynamic";

export const metadata = { title: "Get started · Fetcha" };

export default async function OnboardingPage() {
  const ws = await getWorkspace();
  const state = await onboardingState(ws.organization.id);
  const projects = ws.projects.map((p) => ({ id: p.id, name: p.name, environment: p.environment }));
  return (
    <div className="mx-auto w-full max-w-3xl">
      <PageHeader eyebrow="Getting started" title="Set up Fetcha" description="Five short steps from an empty account to your first routed request. You can leave and come back anytime." />
      <OnboardingFlow
        projects={projects}
        currentProject={{ id: ws.project.id, name: ws.project.name, environment: ws.project.environment }}
        hasKey={state.hasKey}
        hasRequest={state.hasRequest}
        alreadyCompleted={Boolean(ws.user.onboardingCompletedAt)}
        userName={ws.user.name}
      />
    </div>
  );
}