estimation-flow/src/components/cost-estimator/cost-estimator-form.tsx

"use client";

import React, { useState, useTransition } from 'react';
import { Step1ProjectType } from './step-1-project-type';
import { Step2ServiceType } from './step-2-service-type';
import { Step3ProjectStage } from './step-3-project-stage';
import { Step4DesignProcess } from './step-4-design-process';
import { Step5PageCount } from './step-5-page-count';
import { Step6Animations } from './step-6-animations';
import { Step7Illustrations } from './step-7-illustrations';
import { Card, CardContent } from '@/components/ui/card';
import { AnimatePresence, motion } from 'framer-motion';

export type IllustrationSelection = {
  has2d: boolean;
  is2dAnimated: 'static' | 'animated' | null;
  has3d: boolean;
  is3dAnimated: 'static' | 'animated' | null;
};

export type FormData = {
  projectType: 'website' | 'mobile-app' | 'platform' | null;
  serviceType: 'entire-project' | 'development' | 'ui-ux-design' | 'identity-branding' | null;
  projectStage: number;
  designProcess: 'custom' | 'mockups' | 'existing' | null;
  pageCount: number;
  animatedElements: boolean | null;
  illustrations: IllustrationSelection;
};

export function CostEstimatorForm() {
  const [currentStep, setCurrentStep] = useState(1);
  const [formData, setFormData] = useState<FormData>({
    projectType: null,
    serviceType: null,
    projectStage: 0,
    designProcess: null,
    pageCount: 0,
    animatedElements: null,
    illustrations: {
      has2d: false,
      is2dAnimated: null,
      has3d: false,
      is3dAnimated: null,
    },
  });
  const [isPending, startTransition] = useTransition();

  const handleNextStep = () => {
    startTransition(() => {
        setCurrentStep((prev) => prev + 1);
    });
  };

  const handlePrevStep = () => {
    startTransition(() => {
        setCurrentStep((prev) => prev - 1);
    });
  };

  const handleUpdateFormData = (newData: Partial<FormData>) => {
    setFormData((prev) => ({ ...prev, ...newData }));
  };

  const renderStep = () => {
    switch (currentStep) {
      case 1:
        return (
          <Step1ProjectType
            onNext={handleNextStep}
            onUpdateData={handleUpdateFormData}
          />
        );
      case 2:
        return (
          <Step2ServiceType
            onNext={handleNextStep}
            onBack={handlePrevStep}
            onUpdateData={handleUpdateFormData}
            formData={formData}
          />
        );
      case 3:
        return (
          <Step3ProjectStage
            onNext={handleNextStep}
            onBack={handlePrevStep}
            onUpdateData={handleUpdateFormData}
            formData={formData}
          />
        );
      case 4:
        return (
          <Step4DesignProcess
            onNext={handleNextStep}
            onBack={handlePrevStep}
            onUpdateData={handleUpdateFormData}
            formData={formData}
          />
        );
      case 5:
        return (
          <Step5PageCount
            onNext={handleNextStep}
            onBack={handlePrevStep}
            onUpdateData={handleUpdateFormData}
            formData={formData}
          />
        );
      case 6:
        return (
          <Step6Animations
            onNext={handleNextStep}
            onBack={handlePrevStep}
            onUpdateData={handleUpdateFormData}
            formData={formData}
          />
        );
       case 7:
        return (
          <Step7Illustrations
            onNext={handleNextStep}
            onBack={handlePrevStep}
            onUpdateData={handleUpdateFormData}
            formData={formData}
          />
        );
      default:
        return (
          <Step1ProjectType
            onNext={handleNextStep}
            onUpdateData={handleUpdateFormData}
          />
        );
    }
  };

  return (
    <Card className="mt-8 w-full max-w-4xl shadow-2xl overflow-hidden">
      <CardContent className="p-4 sm:p-8">
        <AnimatePresence mode="wait">
            <motion.div
                key={currentStep}
                initial={{ opacity: 0, x: 50 }}
                animate={{ opacity: 1, x: 0 }}
                exit={{ opacity: 0, x: -50 }}
                transition={{ duration: 0.3 }}
            >
                {renderStep()}
            </motion.div>
        </AnimatePresence>
      </CardContent>
    </Card>
  );
}