"use client";

import { ReactNode, useEffect } from "react";
import { useRouter } from "next/navigation";
import { useAuth } from "@/lib/auth-context";
import { FullScreenLoader } from "@/components/ui/FullScreenLoader";
import { BottomNav } from "@/components/BottomNav";
import { stepByOrder } from "@/lib/onboarding-steps";

export default function MainLayout({ children }: { children: ReactNode }) {
  const router = useRouter();
  const { status, user } = useAuth();

  useEffect(() => {
    if (status === "guest") {
      router.replace("/login");
      return;
    }
    if (status === "authenticated" && user && !user.is_onboarded) {
      const slug = stepByOrder(user.current_step)?.slug ?? "basic-info";
      router.replace(`/onboarding/${slug}`);
    }
  }, [status, user, router]);

  if (status !== "authenticated" || !user?.is_onboarded) {
    return <FullScreenLoader />;
  }

  return (
    <div className="flex flex-col flex-1 min-h-dvh">
      <div className="flex-1 overflow-y-auto">{children}</div>
      <BottomNav />
    </div>
  );
}