/**
 * SuccessStep - Account creation success screen
 */

"use client";

import Link from "next/link";
import { Button } from "@/components/atoms";
import { CheckCircleIcon, ArrowRightIcon } from "@heroicons/react/24/outline";
import { useGetStartedStore } from "../../../stores/get-started.store";

export function SuccessStep() {
  const { redirectTo, serviceContext } = useGetStartedStore();

  // Compute effective redirect URL from store state
  const effectiveRedirectTo = redirectTo || serviceContext?.redirectTo || "/account/dashboard";

  // Determine if redirecting to dashboard (default) or a specific service
  const isDefaultRedirect = effectiveRedirectTo === "/account/dashboard";

  return (
    <div className="space-y-6 text-center">
      <div className="flex justify-center">
        <div className="h-16 w-16 rounded-full bg-success/10 flex items-center justify-center">
          <CheckCircleIcon className="h-8 w-8 text-success" />
        </div>
      </div>

      <div className="space-y-2">
        <h3 className="text-lg font-semibold text-foreground">Account Created!</h3>
        <p className="text-sm text-muted-foreground">
          Your account has been set up successfully. You can now access all our services.
        </p>
      </div>

      <div className="space-y-3">
        <Link href={effectiveRedirectTo}>
          <Button className="w-full h-11">
            {isDefaultRedirect ? "Go to Dashboard" : "Continue"}
            <ArrowRightIcon className="h-4 w-4 ml-2" />
          </Button>
        </Link>

        {isDefaultRedirect && (
          <Link href="/services/internet">
            <Button variant="outline" className="w-full h-11">
              Check Internet Availability
            </Button>
          </Link>
        )}
      </div>
    </div>
  );
}
