import { motion, AnimatePresence } from "motion/react";
import { ServicesSection } from "./ServicesSection";
import { AboutSection } from "./AboutSection";
import { ContactSection } from "./ContactSection";
import { BookingStepRenderer } from "./BookingStepRenderer";
import { LoadingSpinner } from "./LoadingSpinner";
import { PageType } from "../hooks/useNavigation";
import { BookingStep, BookingData, Vehicle } from "../types/booking";
import { LOADING_MESSAGES } from "../constants/app";

interface PageRendererProps {
  currentPage: PageType;
  currentStep: BookingStep;
  bookingData: BookingData | null;
  selectedVehicle: Vehicle | null;
  availableVehicles: Vehicle[];
  isLoading: boolean;
  onSubmit: (data: BookingData) => void;
  onVehicleSelect: (vehicle: Vehicle) => void;
  onConfirm: () => void;
  onBackToForm: () => void;
  onBackToVehicles: () => void;
}

export function PageRenderer({
  currentPage,
  currentStep,
  bookingData,
  selectedVehicle,
  availableVehicles,
  isLoading,
  onSubmit,
  onVehicleSelect,
  onConfirm,
  onBackToForm,
  onBackToVehicles
}: PageRendererProps) {
  const renderHomePage = () => {
    if (isLoading) {
      return (
        <LoadingSpinner 
          message={LOADING_MESSAGES[currentStep] || "Loading..."}
          showCar={true}
        />
      );
    }

    return (
      <AnimatePresence mode="wait">
        <motion.div
          key={currentStep}
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          exit={{ opacity: 0, y: -20 }}
          transition={{ duration: 0.4 }}
        >
          <BookingStepRenderer
            currentStep={currentStep}
            bookingData={bookingData}
            selectedVehicle={selectedVehicle}
            availableVehicles={availableVehicles}
            onSubmit={onSubmit}
            onVehicleSelect={onVehicleSelect}
            onConfirm={onConfirm}
            onBackToForm={onBackToForm}
            onBackToVehicles={onBackToVehicles}
          />
        </motion.div>
      </AnimatePresence>
    );
  };

  if (isLoading && currentPage !== "home") {
    return (
      <LoadingSpinner 
        message="Loading page..."
        showCar={false}
      />
    );
  }

  return (
    <AnimatePresence mode="wait">
      <motion.div
        key={currentPage}
        initial={{ opacity: 0, x: currentPage === "home" ? 0 : 30 }}
        animate={{ opacity: 1, x: 0 }}
        exit={{ opacity: 0, x: currentPage === "home" ? 0 : -30 }}
        transition={{ duration: 0.4 }}
      >
        {(() => {
          switch (currentPage) {
            case "home":
              return renderHomePage();
            case "services":
              return <ServicesSection />;
            case "about":
              return <AboutSection />;
            case "contact":
              return <ContactSection />;
            default:
              return renderHomePage();
          }
        })()}
      </motion.div>
    </AnimatePresence>
  );
}