/**
 * WhatsApp Setup Guide - Main Orchestrator
 * Controls the wizard flow through all setup stages
 */

"use client";

import { useState } from "react";
import type { Lang } from "@/lib/config";
import WhatsAppSetupWelcome from "./WhatsAppSetupWelcome";
import WhatsAppSetupSteps from "./WhatsAppSetupSteps";
import WhatsAppCredentialsForm from "./WhatsAppCredentialsForm";
import TwilioCredentialsForm from "./TwilioCredentialsForm";
import SectorPickerForm from "./SectorPickerForm";
import WhatsAppSetupSuccess from "./WhatsAppSetupSuccess";

type SetupStage =
  | "welcome"
  | "steps"
  | "credentials"
  | "twilio_credentials"
  | "sector_picker"
  | "success";

interface WhatsAppSetupGuideProps {
  lang: Lang;
  onComplete: () => void;
}

interface SavedCredentials {
  displayNumber?: string;
  businessName?: string;
}

export default function WhatsAppSetupGuide({
  lang,
  onComplete,
}: WhatsAppSetupGuideProps) {
  const [currentStage, setCurrentStage] = useState<SetupStage>("welcome");
  const [savedCredentials, setSavedCredentials] = useState<SavedCredentials>(
    {},
  );

  // Stage handlers
  const handleGetStarted = () => {
    setCurrentStage("steps");
  };

  const handleSkipToCredentials = () => {
    setCurrentStage("credentials");
  };

  const handleUseTwilio = () => {
    setCurrentStage("twilio_credentials");
  };

  const handleTwilioBack = () => {
    setCurrentStage("welcome");
  };

  const handleStepsComplete = () => {
    setCurrentStage("credentials");
  };

  const handleStepsBack = () => {
    setCurrentStage("welcome");
  };

  const handleCredentialsSaved = (data: SavedCredentials) => {
    setSavedCredentials(data);
    // After credentials are saved (Meta or Twilio), pick the sector
    // so the AI engine starts using the right vocabulary + workflows.
    setCurrentStage("sector_picker");
  };

  const handleSectorPicked = () => {
    setCurrentStage("success");
  };

  const handleSectorSkipped = () => {
    // Owners can skip the picker and configure later from the dashboard
    setCurrentStage("success");
  };

  const handleCredentialsBack = () => {
    setCurrentStage("steps");
  };

  const handleGoToConversations = () => {
    onComplete();
  };

  // Render current stage
  switch (currentStage) {
    case "welcome":
      return (
        <WhatsAppSetupWelcome
          lang={lang}
          onGetStarted={handleGetStarted}
          onSkipToCredentials={handleSkipToCredentials}
          onUseTwilio={handleUseTwilio}
        />
      );

    case "steps":
      return (
        <WhatsAppSetupSteps
          lang={lang}
          onComplete={handleStepsComplete}
          onBack={handleStepsBack}
        />
      );

    case "credentials":
      return (
        <WhatsAppCredentialsForm
          lang={lang}
          onSuccess={handleCredentialsSaved}
          onBack={handleCredentialsBack}
        />
      );

    case "twilio_credentials":
      return (
        <TwilioCredentialsForm
          lang={lang}
          onSuccess={handleCredentialsSaved}
          onBack={handleTwilioBack}
        />
      );

    case "sector_picker":
      return (
        <SectorPickerForm
          lang={lang}
          onSuccess={handleSectorPicked}
          onSkip={handleSectorSkipped}
          showSkip
        />
      );

    case "success":
      return (
        <WhatsAppSetupSuccess
          lang={lang}
          displayNumber={savedCredentials.displayNumber}
          businessName={savedCredentials.businessName}
          onGoToConversations={handleGoToConversations}
        />
      );

    default:
      return null;
  }
}