"use client";

import { useEffect } from "react";
import { useRouter } from "next/navigation";
import { CheckCircle } from "lucide-react";

import { Button } from "@/components/ui/button";
import { useOnboardingStore } from "@/stores/onboarding";
import { useDataProvider } from "@/lib/demo/data-provider-context";

export function CompleteStep() {
  const router = useRouter();
  const { basePath } = useDataProvider();
  const { path, residenceId, complete } = useOnboardingStore();

  useEffect(() => {
    localStorage.setItem("onboarding_complete", "true");
    complete();
  }, [complete]);

  const isCreatePath = path === "create";

  const handleNavigate = () => {
    if (isCreatePath && residenceId) {
      router.push(`${basePath}/residences/${residenceId}`);
    } else {
      router.push(`${basePath}/residences`);
    }
  };

  return (
    <div className="flex flex-col items-center text-center space-y-6 py-12">
      <div className="flex h-16 w-16 items-center justify-center rounded-full bg-green-100 text-green-600 dark:bg-green-900/30 dark:text-green-400">
        <CheckCircle className="size-9" />
      </div>

      <div className="space-y-2">
        <h2 className="text-3xl font-bold tracking-tight">
          {isCreatePath ? "You're all set!" : "Welcome to the residence!"}
        </h2>
        <p className="text-muted-foreground text-lg max-w-sm mx-auto">
          {isCreatePath
            ? "Your residence is ready. Start managing your property like a pro."
            : "You've successfully joined the residence. Time to get organized."}
        </p>
      </div>

      <Button size="lg" onClick={handleNavigate} className="mt-4">
        {isCreatePath ? "Go to your residence" : "View residences"}
      </Button>
    </div>
  );
}
