portabase/src/features/onboarding/onboarding-checklist.tsx

"use client";

import { useOnboarding } from "@onboardjs/react";
import { CheckCircle2, Circle } from "lucide-react";
import { cn } from "@/lib/utils";

const CHECKLIST_STEPS = [
    { id: "login", label: "Sign in" },
    { id: "account-info", label: "Your account" },
    { id: "security", label: "Security" },
    { id: "preferences", label: "Preferences" },
    { id: "org-create", label: "Organisation" },
    { id: "invite-members", label: "Team members" },
    { id: "notifier", label: "Notifications" },
    { id: "storage", label: "Storage" },
    { id: "defaults", label: "Defaults" },
    { id: "agent-create", label: "Agent setup" },
    { id: "agent-key", label: "Agent key" },
    { id: "agent-waiting", label: "Agent connection" },
    { id: "project-create", label: "Project" },
    { id: "db-settings", label: "Database settings" },
    { id: "finish", label: "Done" },
] as const;

export const OnboardingChecklist = () => {
    const { state } = useOnboarding();
    if (!state) return null;

    const currentId = state.currentStep?.id ?? "";
    const currentIndex = CHECKLIST_STEPS.findIndex((s) => s.id === currentId);

    return (
        <div className="flex flex-col gap-0 p-6 h-full">
            <p className="text-xs font-medium text-zinc-500 uppercase tracking-wider mb-4">Progress</p>
            <div className="flex flex-col relative">
                {CHECKLIST_STEPS.map((step, i) => {
                    const isCompleted = i < currentIndex;
                    const isCurrent = i === currentIndex;
                    const isLast = i === CHECKLIST_STEPS.length - 1;

                    return (
                        <div key={step.id} className="flex gap-3">
                            {/* Icon + line */}
                            <div className="flex flex-col items-center">
                                {isCompleted ? (
                                    <CheckCircle2 className="size-4 text-green-500 shrink-0 mt-0.5" />
                                ) : (
                                    <Circle
                                        className={cn(
                                            "size-4 shrink-0 mt-0.5",
                                            isCurrent ? "text-primary" : "text-zinc-700"
                                        )}
                                    />
                                )}
                                {!isLast && (
                                    <div className={cn(
                                        "w-px flex-1 mt-1 mb-1 min-h-[16px]",
                                        isCompleted ? "bg-green-500/40" : "bg-zinc-800"
                                    )} />
                                )}
                            </div>

                            {/* Label */}
                            <p
                                className={cn(
                                    "text-sm pb-4",
                                    isCompleted && "text-zinc-400",
                                    isCurrent && "text-white font-medium",
                                    !isCompleted && !isCurrent && "text-zinc-600"
                                )}
                            >
                                {step.label}
                            </p>
                        </div>
                    );
                })}
            </div>
        </div>
    );
};