/**
 * InlineGetStartedSection - Inline email-first registration for service pages
 *
 * Uses the get-started store flow (email → OTP → status → form) inline on service pages
 * like the SIM configure page. Supports service context to track plan selection through the flow.
 *
 * The email-first approach auto-detects the user's account status after OTP verification:
 * - portal_exists: Shows LoginForm inline
 * - whmcs_unmapped: Shows LinkWhmcsForm inline
 * - sf_unmapped / new_customer: Continues to account completion
 */

"use client";

import { useEffect } from "react";
import { useRouter } from "next/navigation";
import { getSafeRedirect } from "@/features/auth/utils/route-protection";
import { useGetStartedStore, type ServiceContext } from "../../stores/get-started.store";
import { EmailStep } from "../GetStartedForm/steps/EmailStep";
import { VerificationStep } from "../GetStartedForm/steps/VerificationStep";
import { AccountStatusStep } from "../GetStartedForm/steps/AccountStatusStep";
import { CompleteAccountStep } from "../GetStartedForm/steps/CompleteAccountStep";

interface HighlightItem {
  title: string;
  description: string;
}

interface InlineGetStartedSectionProps {
  title: string;
  description?: string;
  serviceContext?: Omit<ServiceContext, "redirectTo">;
  redirectTo?: string;
  highlights?: HighlightItem[];
  className?: string;
}

export function InlineGetStartedSection({
  title,
  description,
  serviceContext,
  redirectTo,
  highlights = [],
  className = "",
}: InlineGetStartedSectionProps) {
  const router = useRouter();
  const safeRedirect = getSafeRedirect(redirectTo, "/account/dashboard");

  const { step, setServiceContext, setRedirectTo, setInline } = useGetStartedStore();

  // Set inline mode and redirect URL when component mounts
  useEffect(() => {
    setInline(true);
    setRedirectTo(safeRedirect);

    if (serviceContext) {
      setServiceContext({
        ...serviceContext,
        redirectTo: safeRedirect,
      });
    }

    return () => {
      // Clear inline mode when unmounting
      setInline(false);
      setServiceContext(null);
    };
  }, [serviceContext, safeRedirect, setServiceContext, setRedirectTo, setInline]);

  // Render the current step
  const renderStep = () => {
    switch (step) {
      case "email":
        return <EmailStep />;
      case "verification":
        return <VerificationStep />;
      case "account-status":
        return <AccountStatusStep />;
      case "complete-account":
        return <CompleteAccountStep />;
      case "success":
        // Redirect on success
        router.push(safeRedirect);
        return null;
      default:
        return <EmailStep />;
    }
  };

  return (
    <div className={`bg-muted/50 border border-border rounded-2xl p-6 md:p-8 ${className}`}>
      <div className="text-center mb-6">
        <h3 className="text-lg font-semibold text-foreground mb-2">{title}</h3>
        {description && (
          <p className="text-sm text-muted-foreground max-w-2xl mx-auto">{description}</p>
        )}
      </div>

      <div className="bg-card border border-border rounded-xl p-5 sm:p-6 shadow-[var(--cp-shadow-1)]">
        {renderStep()}
      </div>

      {highlights.length > 0 && (
        <div className="mt-6 pt-6 border-t border-border">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-center">
            {highlights.map(item => (
              <div key={item.title}>
                <div className="text-sm font-medium text-foreground mb-1">{item.title}</div>
                <div className="text-xs text-muted-foreground">{item.description}</div>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}
