"use client"

import React from "react"
import { cn } from "../../lib/utils"
import { FormWizardProvider } from "./form-wizard-context"
import { FormWizardProgress } from "./form-wizard-progress"
import { FormWizardStep } from "./form-wizard-step"
import { FormWizardNavigation } from "./form-wizard-navigation"
import { FormWizardProps } from "./types"
import { Card, CardContent } from "../ui/card"
import { Separator } from "../ui/separator"

export const MoonUIFormWizardPro = React.forwardRef<HTMLDivElement, FormWizardProps>(({
  steps,
  currentStep = 0,
  onStepChange,
  onComplete,
  orientation = 'horizontal',
  progressType = 'linear',
  allowStepSkip = false,
  allowBackNavigation = true,
  validateOnStepChange = true,
  animationType = 'slide',
  animationDuration = 0.3,
  showStepNumbers = true,
  showStepTitles = true,
  showProgressBar = true,
  stepIconPosition = 'top',
  completedStepIcon,
  activeStepIcon,
  errorStepIcon,
  className,
  progressClassName,
  navigationClassName,
  contentClassName,
  stepClassName,
  autoSave = false,
  autoSaveDelay = 2000,
  onAutoSave,
  persistData = false,
  storageKey = "form-wizard-data"
}, ref) => {
  return (
    <FormWizardProvider
      steps={steps}
      initialStep={currentStep}
      onStepChange={onStepChange}
      onComplete={onComplete}
      validateOnStepChange={validateOnStepChange}
      allowBackNavigation={allowBackNavigation}
      allowStepSkip={allowStepSkip}
      autoSave={autoSave}
      autoSaveDelay={autoSaveDelay}
      onAutoSave={onAutoSave}
      persistData={persistData}
      storageKey={storageKey}
    >
      <div ref={ref} className={cn("w-full", className)}>
        {showProgressBar && (
          <>
            <FormWizardProgress
              className={cn("mb-12", progressClassName)}
              progressType={progressType}
              orientation={orientation}
              showStepNumbers={showStepNumbers}
              showStepTitles={showStepTitles}
              stepIconPosition={stepIconPosition}
              completedStepIcon={completedStepIcon}
              activeStepIcon={activeStepIcon}
              errorStepIcon={errorStepIcon}
            />
          </>
        )}

        <Card className={cn("border-0 shadow-none", contentClassName)}>
          <CardContent className="p-0">
            <FormWizardStep
              className={stepClassName}
              animationType={animationType}
              animationDuration={animationDuration}
            />
          </CardContent>
        </Card>

        <FormWizardNavigation
          className={cn("mt-8", navigationClassName)}
        />
      </div>
    </FormWizardProvider>
  )
})

MoonUIFormWizardPro.displayName = "MoonUIFormWizardPro"

// Export types and hooks
export type { FormWizardProps, WizardStep, WizardStepContentProps } from "./types"
export { useFormWizard } from "./form-wizard-context"

// Export sub-components for advanced usage
export { FormWizardProgress } from "./form-wizard-progress"
export { FormWizardStep } from "./form-wizard-step"
export { FormWizardNavigation } from "./form-wizard-navigation"