"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { useParams, useSearchParams, useRouter } from "next/navigation"
import Header from "@/components/features/header/header"
import Footer from "@/components/features/footer/footer"
import { getCourseById } from "@/services/courses/query"
import { getPackagesByCourseId } from "@/services/course_packages/query"
import { getClassesByPackageId } from "@/services/course_package_classes/query"
import { useTranslation } from "react-i18next"
import Image from "next/image"
import { Info, AlertCircle } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Label } from "@/components/ui/label"
import { Input } from "@/components/ui/input"
import { Checkbox } from "@/components/ui/checkbox"
import { Separator } from "@/components/ui/separator"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { storeCheckoutData, clearCheckoutData } from "@/services/orders/storage"
import { calculateOrder } from "@/services/orders/query"
import { formatCurrency } from "@/services/utils"

export default function EnrollmentFormPage() {
  const { t } = useTranslation()
  const params = useParams()
  const searchParams = useSearchParams()
  const router = useRouter()
  const courseId = Number.parseInt(params.id as string)
  const preSelectedPackageId = searchParams.get("package")
    ? Number.parseInt(searchParams.get("package") as string)
    : null

  const [course, setCourse] = useState<any>(null)
  const [packages, setPackages] = useState<any[]>([])
  const [selectedPackage, setSelectedPackage] = useState<any>(null)
  const [classes, setClasses] = useState<any[]>([])
  const [selectedClasses, setSelectedClasses] = useState<number[]>([])
  const [selectAllClasses, setSelectAllClasses] = useState(false)
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    phone: "",
    address: "",
    agreeToTerms: false,
  })
  const [errors, setErrors] = useState<Record<string, string>>({})
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState("")
  const [totalPrice, setTotalPrice] = useState(0)
  const [discount, setDiscount] = useState(0)
  const [tax, setTax] = useState(0)
  const [finalPrice, setFinalPrice] = useState(0)
  const [canProceedToCheckout, setCanProceedToCheckout] = useState(false)
  const [calculatedOrderData, setCalculatedOrderData] = useState<any>(null)
  const [isCalculatingOrder, setIsCalculatingOrder] = useState(false)

  // Enhanced email validation function
  const isValidEmail = (email: string): boolean => {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
    return emailRegex.test(email)
  }

  useEffect(() => {
    async function fetchData() {
      // Clear any existing checkout data when loading the enrollment form
      clearCheckoutData()

      if (isNaN(courseId)) {
        setError("Invalid course ID")
        setLoading(false)
        return
      }

      try {
        // Fetch course details
        const courseData = await getCourseById(courseId)
        if (!courseData) {
          setError("Course not found")
          setLoading(false)
          return
        }

        setCourse(courseData)

        // Fetch package details
        try {
          console.log("Fetching packages for course ID:", courseId)
          const packageData = await getPackagesByCourseId(courseId)
          console.log("Received package data:", packageData)

          // Ensure packageData is an array
          const packageArray = Array.isArray(packageData)
            ? packageData
            : packageData && packageData.data && Array.isArray(packageData.data)
              ? packageData.data
              : []

          console.log("Processed package array:", packageArray)
          setPackages(packageArray)

          // If a package is pre-selected from the URL, select it
          if (preSelectedPackageId && packageArray.length > 0) {
            const selectedPkg = packageArray.find((pkg) => pkg.id === preSelectedPackageId)
            if (selectedPkg) {
              handlePackageSelect(selectedPkg)
            }
          }
        } catch (packageError) {
          console.error("Error fetching packages:", packageError)
          setPackages([])
        }

        setLoading(false)
      } catch (err) {
        console.error("Error in fetchData:", err)
        setError("Failed to load course details")
        setLoading(false)
      }
    }

    fetchData()
  }, [courseId, preSelectedPackageId])

  // Handle package selection
  const handlePackageSelect = async (pkg: any) => {
    setSelectedPackage(pkg)

    try {
      // Fetch classes for this package
      console.log("Fetching classes for package ID:", pkg.id)
      const classData = await getClassesByPackageId(pkg.id)
      console.log("Received class data:", classData)

      // Ensure classData is an array
      const classArray = Array.isArray(classData)
        ? classData
        : classData && classData.data && Array.isArray(classData.data)
          ? classData.data
          : []

      console.log("Processed class array:", classArray)
      setClasses(classArray)

      // Reset selected classes
      setSelectedClasses([])
      setSelectAllClasses(false)

      // Update price calculation
      calculateTotal(pkg, [])

    } catch (classError) {
      console.error("Error fetching classes:", classError)
      setClasses([])
    }
  }

  // Handle class selection
  const handleClassSelect = async (classId: number) => {
    let newSelectedClasses

    if (selectedClasses.includes(classId)) {
      newSelectedClasses = selectedClasses.filter((id) => id !== classId)
    } else {
      newSelectedClasses = [...selectedClasses, classId]
    }

    setSelectedClasses(newSelectedClasses)

    // Update select all checkbox
    setSelectAllClasses(newSelectedClasses.length === classes.length)

    // Update price calculation
    calculateTotal(selectedPackage, newSelectedClasses)

  }

  // Handle select all classes
  const handleSelectAllClasses = async () => {
    const newSelectAll = !selectAllClasses
    setSelectAllClasses(newSelectAll)

    if (newSelectAll) {
      const allClassIds = classes.map((cls) => cls.id)
      setSelectedClasses(allClassIds)
      calculateTotal(selectedPackage, allClassIds)
    } else {
      setSelectedClasses([])
      calculateTotal(selectedPackage, [])
    }

  }

  // Handle form input change
  const handleInputChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value, type, checked } = e.target
    const newFormData = {
      ...formData,
      [name]: type === "checkbox" ? checked : value,
    }
    setFormData(newFormData)

    // Clear error for this field if it exists
    if (errors[name]) {
      setErrors({
        ...errors,
        [name]: "",
      })
    }

  }

  useEffect(() => {
    const delayDebounce = setTimeout(() => {
      checkConditionsAndCalculateOrder()
    }, 5000) // 5 seconds

    return () => clearTimeout(delayDebounce)
  }, [formData, selectedPackage, selectedClasses])

  // Calculate total price
  const calculateTotal = (pkg: any, selectedClassIds: number[]) => {
    if (!pkg) return

    // Base package price
    let total = Number.parseFloat(pkg.price) || 0

    // Add selected classes prices
    if (selectedClassIds.length > 0) {
      const classesTotal = selectedClassIds.reduce((sum, classId) => {
        const classItem = classes.find((cls) => cls.id === classId)
        return sum + (classItem ? Number.parseFloat(classItem.price) || 0 : 0)
      }, 0)

      total += classesTotal
    }

    setTotalPrice(total)

    // Apply discount if available
    const discountAmount = Number.parseFloat(pkg.discount) || 0
    setDiscount(discountAmount)

    // Calculate final price
    setFinalPrice(total - discountAmount)
  }

  // Validate form
  const validateForm = () => {
    const newErrors: Record<string, string> = {}

    if (!selectedPackage) {
      newErrors.package = "Please select a package"
    }

    if (selectedPackage && classes.length > 0 && selectedClasses.length === 0) {
      newErrors.classes = "Please select at least one class"
    }

    if (!formData.name.trim()) {
      newErrors.name = "Name is required"
    }

    if (!formData.email.trim()) {
      newErrors.email = "Email is required"
    } else if (!isValidEmail(formData.email)) {
      newErrors.email = "Please enter a valid email address"
    }

    if (!formData.phone.trim()) {
      newErrors.phone = "Phone number is required"
    }

    if (!formData.agreeToTerms) {
      newErrors.agreeToTerms = "You must agree to the terms and conditions"
    }

    setErrors(newErrors)
    return Object.keys(newErrors).length === 0
  }

  // Handle form submission
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()

    if (!validateForm()) {
      return
    }

    if (calculatedOrderData) {
      // Store the calculated order data
      storeCheckoutData(calculatedOrderData)

      // Redirect to checkout page
      router.push(`/enroll/checkout`)
    } else {
      setError("Order calculation failed. Please try again.")
    }
  }

  // Check conditions and calculate order
  const checkConditionsAndCalculateOrder = async () => {
    const hasRequiredFields =
      course &&
      selectedPackage &&
      selectedClasses.length > 0 &&
      formData.name.trim() &&
      formData.email.trim() &&
      isValidEmail(formData.email) &&
      formData.phone.trim()

    if (!hasRequiredFields) {
      setCanProceedToCheckout(false)
      return
    }

    setIsCalculatingOrder(true) // 👉 Start loading indicator

    try {
      const orderData = {
        student_id: 0,
        total_amount: totalPrice,
        discount_amount: discount,
        final_amount: finalPrice,
        status: "pending",
        payment_status: "pending",
        id: 0,
      }

      const orderItems = [
        {
          order_id: 0,
          item_type: "course",
          item_id: course.id,
          quantity: 1,
          unit_price: course.price || 0,
          total_price: course.price || 0,
        },
        {
          order_id: 0,
          item_type: "course_package",
          item_id: selectedPackage.id,
          quantity: 1,
          unit_price: selectedPackage.price,
          total_price: selectedPackage.price,
        },
        ...selectedClasses.map((classId) => {
          const classItem = classes.find((cls) => cls.id === classId)
          return {
            order_id: 0,
            item_type: "course_package_class",
            item_id: classId,
            quantity: 1,
            unit_price: classItem?.price || 0,
            total_price: classItem?.price || 0,
          }
        }),
      ]

      const data = {
        order: orderData,
        order_items: orderItems,
        customer_info: formData,
      }

      const response = await calculateOrder(data)

      if (response?.status === "OK") {
        setCalculatedOrderData(response)
        setCanProceedToCheckout(Number.parseFloat(response.order.final_amount) > 0)

        if (response.order) {
          setTotalPrice(Number.parseFloat(response.order.total_amount) || 0)
          setDiscount(Number.parseFloat(response.order.discount_amount) || 0)
          setTax(Number.parseFloat(response.order.tax_amount) || 0)
          setFinalPrice(Number.parseFloat(response.order.final_amount) || 0)
        }
      } else {
        setCalculatedOrderData(null)
        setCanProceedToCheckout(false)
      }
    } catch (error) {
      console.error("Error calculating order:", error)
      setCalculatedOrderData(null)
      setCanProceedToCheckout(false)
    } finally {
      setIsCalculatingOrder(false) // 👉 Stop loading indicator
    }
  }


  // Get order item by type and id
  const getOrderItem = (itemType: string, itemId: number) => {
    if (!calculatedOrderData?.order_items) return null
    return calculatedOrderData.order_items.find((item: any) => item.item_type === itemType && item.item_id === itemId)
  }

  if (loading) {
    return (
      <div className="min-h-screen flex flex-col">
        <Header />
        <main className="flex-grow flex items-center justify-center">
          <div className="text-center">
            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-secondary mx-auto mb-4"></div>
            <p className="text-gray-600">Loading enrollment form...</p>
          </div>
        </main>
        <Footer />
      </div>
    )
  }

  if (error) {
    return (
      <div className="min-h-screen flex flex-col">
        <Header />
        <main className="flex-grow flex items-center justify-center">
          <div className="text-center">
            <h2 className="text-2xl font-bold text-red-600 mb-2">Error</h2>
            <p className="text-gray-600">{error}</p>
            <Button onClick={() => router.back()} className="mt-6">
              Go Back
            </Button>
          </div>
        </main>
        <Footer />
      </div>
    )
  }

  // Check if packages is an array before rendering
  const packagesArray = Array.isArray(packages) ? packages : []

  return (
    <div className="min-h-screen flex flex-col">
      <Header />

      <main className="flex-grow py-12 bg-gray-50">
        <div className="container">
          <div className="mb-8">
            <h1 className="text-3xl md:text-4xl font-bold mb-4 font-heading">Enrollment Form</h1>
            <p className="text-gray-600">Complete the form below to enroll in {course?.title}</p>
          </div>

          <div className="grid md:grid-cols-3 gap-8">
            <div className="md:col-span-2">
              <form onSubmit={handleSubmit} className="space-y-8">
                {/* Package Selection */}
                <Card className="border-0 shadow-sm">
                  <CardHeader>
                    <CardTitle>Select Package</CardTitle>
                  </CardHeader>
                  <CardContent>
                    {errors.package && (
                      <Alert variant="destructive" className="mb-4">
                        <AlertCircle className="h-4 w-4" />
                        <AlertDescription>{errors.package}</AlertDescription>
                      </Alert>
                    )}

                    {packagesArray.length === 0 ? (
                      <Alert className="mb-4">
                        <Info className="h-4 w-4" />
                        <AlertDescription>No packages available for this course.</AlertDescription>
                      </Alert>
                    ) : (
                      <RadioGroup
                        value={selectedPackage?.id?.toString()}
                        onValueChange={(value) => {
                          const pkg = packagesArray.find((p) => p.id === Number.parseInt(value))
                          if (pkg) handlePackageSelect(pkg)
                        }}
                      >
                        <div className="space-y-4">
                          {packagesArray.map((pkg) => {
                            const packageOrderItem = getOrderItem("course_package", pkg.id)
                            const isEnrolled = packageOrderItem?.is_enrolled
                            const hasDiscount = packageOrderItem?.is_discount !== false

                            return (
                              <div
                                key={pkg.id}
                                className={`border rounded-lg p-4 transition-colors ${
                                  selectedPackage?.id === pkg.id
                                    ? "border-secondary bg-secondary-light"
                                    : "border-gray-200 hover:border-gray-300"
                                }`}
                              >
                                <div className="flex items-start">
                                  <RadioGroupItem value={pkg.id.toString()} id={`package-${pkg.id}`} className="mt-1" />
                                  <div className="ml-3 flex-grow">
                                    <Label htmlFor={`package-${pkg.id}`} className="text-lg font-bold block mb-1">
                                      {pkg.name}
                                      {isEnrolled && (
                                        <span className="ml-2 text-sm text-green-600">(Already Enrolled)</span>
                                      )}
                                    </Label>
                                    <p className="text-gray-600 mb-2">{pkg.description}</p>

                                    <div className="flex items-center justify-between">
                                      {Number.parseFloat(pkg.price) > 0 ? (
                                        <div
                                          className={`text-lg font-bold text-secondary ${isEnrolled ? "line-through opacity-60" : ""}`}
                                        >
                                          RM {Number.parseFloat(pkg.price).toLocaleString()}
                                        </div>
                                      ) : (
                                        <div className="text-sm text-gray-500">
                                          Price varies based on selected classes
                                        </div>
                                      )}

                                      {Number.parseFloat(pkg.discount) > 0 && (
                                        <div
                                          className={`bg-primary-light text-secondary text-sm px-2 py-1 rounded ${!hasDiscount ? "line-through opacity-60" : ""}`}
                                        >
                                          Save RM {Number.parseFloat(pkg.discount).toLocaleString()}
                                        </div>
                                      )}
                                    </div>
                                  </div>
                                </div>
                              </div>
                            )
                          })}
                        </div>
                      </RadioGroup>
                    )}
                  </CardContent>
                </Card>

                {/* Class Selection (if applicable) */}
                {selectedPackage && classes.length > 0 && (
                  <Card className="border-0 shadow-sm">
                    <CardHeader>
                      <CardTitle>Select Classes</CardTitle>
                    </CardHeader>
                    <CardContent>
                      {errors.classes && (
                        <Alert variant="destructive" className="mb-4">
                          <AlertCircle className="h-4 w-4" />
                          <AlertDescription>{errors.classes}</AlertDescription>
                        </Alert>
                      )}

                      <div className="mb-4 flex items-center">
                        <Checkbox id="select-all" checked={selectAllClasses} onCheckedChange={handleSelectAllClasses} />
                        <label htmlFor="select-all" className="ml-2 font-medium">
                          Select All Classes
                        </label>
                      </div>

                      <div className="space-y-3">
                        {classes.map((cls) => {
                          const classOrderItem = getOrderItem("course_package_class", cls.id)
                          const isEnrolled = classOrderItem?.is_enrolled

                          return (
                            <div
                              key={cls.id}
                              className={`border rounded-lg p-4 transition-colors ${
                                selectedClasses.includes(cls.id)
                                  ? "border-secondary bg-secondary-light"
                                  : "border-gray-200 hover:border-gray-300"
                              }`}
                            >
                              <div className="flex items-start">
                                <Checkbox
                                  id={`class-${cls.id}`}
                                  checked={selectedClasses.includes(cls.id)}
                                  onCheckedChange={() => handleClassSelect(cls.id)}
                                  className="mt-1"
                                />
                                <div className="ml-3 flex-grow">
                                  <label htmlFor={`class-${cls.id}`} className="text-lg font-bold block mb-1">
                                    {cls.name}
                                    {isEnrolled && (
                                      <span className="ml-2 text-sm text-green-600">(Already Enrolled)</span>
                                    )}
                                  </label>
                                  <p className="text-gray-600 mb-2">{cls.description}</p>

                                  <div
                                    className={`text-lg font-bold text-secondary ${isEnrolled ? "line-through opacity-60" : ""}`}
                                  >
                                    RM {Number.parseFloat(cls.price).toLocaleString()}
                                  </div>
                                </div>
                              </div>
                            </div>
                          )
                        })}
                      </div>
                    </CardContent>
                  </Card>
                )}

                {/* Personal Information */}
                <Card className="border-0 shadow-sm">
                  <CardHeader>
                    <CardTitle>Personal Information</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                      <div className="space-y-2">
                        <Label htmlFor="name">Full Name</Label>
                        <Input
                          id="name"
                          name="name"
                          value={formData.name}
                          onChange={handleInputChange}
                          className={errors.name ? "border-red-500" : ""}
                        />
                        {errors.name && <p className="text-red-500 text-sm">{errors.name}</p>}
                      </div>

                      <div className="space-y-2">
                        <Label htmlFor="email">Email Address</Label>
                        <Input
                          id="email"
                          name="email"
                          type="email"
                          value={formData.email}
                          onChange={handleInputChange}
                          className={errors.email ? "border-red-500" : ""}
                        />
                        <p className="text-sm text-gray-500">
                          Use your login email for us to identify previous purchase.
                        </p>
                        {errors.email && <p className="text-red-500 text-sm">{errors.email}</p>}
                      </div>

                      <div className="space-y-2">
                        <Label htmlFor="phone">Phone Number</Label>
                        <Input
                          id="phone"
                          name="phone"
                          value={formData.phone}
                          onChange={handleInputChange}
                          className={errors.phone ? "border-red-500" : ""}
                        />
                        {errors.phone && <p className="text-red-500 text-sm">{errors.phone}</p>}
                      </div>

                      <div className="space-y-2">
                        <Label htmlFor="address">Address (Optional)</Label>
                        <Input id="address" name="address" value={formData.address} onChange={handleInputChange} />
                      </div>
                    </div>

                    <div className="mt-6">
                      <div className="flex items-start">
                        <Checkbox
                          id="terms"
                          name="agreeToTerms"
                          checked={formData.agreeToTerms}
                          onCheckedChange={(checked) => setFormData({ ...formData, agreeToTerms: checked as boolean })}
                          className={errors.agreeToTerms ? "border-red-500" : ""}
                        />
                        <label htmlFor="terms" className="ml-2 text-sm text-gray-600">
                          I agree to the{" "}
                          <a href="/terms" className="text-secondary hover:underline">
                            Terms and Conditions
                          </a>{" "}
                          and{" "}
                          <a href="/privacy" className="text-secondary hover:underline">
                            Privacy Policy
                          </a>
                        </label>
                      </div>
                      {errors.agreeToTerms && <p className="text-red-500 text-sm mt-1">{errors.agreeToTerms}</p>}
                    </div>
                    <div className="mt-6 pt-4 border-t border-gray-200">
                      <Button
                        type="button"
                        variant="ghost"
                        size="sm"
                        onClick={checkConditionsAndCalculateOrder}
                        className="text-gray-500 hover:text-gray-700"
                      >
                        Recalculate Order
                      </Button>
                    </div>
                  </CardContent>
                </Card>

                <div className="flex justify-end">
                  <Button
                    type="submit"
                    className="bg-secondary text-primary hover:bg-secondary-dark"
                    disabled={!canProceedToCheckout}
                  >
                    Proceed to Checkout
                  </Button>
                </div>
              </form>
            </div>

            {/* Order Summary */}
            <div>
              <div className="sticky top-6">
                <Card className="border-0 shadow-sm">
                  <CardHeader>
                    <CardTitle>Order Summary</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-4">
                      {/* Course Info */}
                      <div className="flex gap-4">
                        <div className="relative w-20 h-20 rounded-md overflow-hidden shrink-0">
                          <Image
                            src={course?.image || "/placeholder.svg"}
                            alt={course?.title || "Course"}
                            fill
                            className="object-cover"
                          />
                        </div>
                        <div>
                          <h3 className="font-bold">{course?.title}</h3>
                          <p className="text-sm text-gray-600">{course?.description}</p>
                        </div>
                      </div>

                      <Separator />

                      {/* Selected Package */}
                      {selectedPackage ? (
                        <div>
                          <h3 className="font-bold mb-2">Selected Package</h3>
                          <div className="flex justify-between items-start">
                            <div className="flex-grow">
                              <p className="text-gray-600">{selectedPackage.name}</p>
                              <p className="text-sm text-gray-500">{selectedPackage.description}</p>
                            </div>
                            {(() => {
                              const packageOrderItem = getOrderItem("course_package", selectedPackage.id)
                              const isEnrolled = packageOrderItem?.is_enrolled
                              return isEnrolled ? (
                                <span className="text-sm text-green-600 font-medium ml-2">Enrolled</span>
                              ) : null
                            })()}
                          </div>

                          {Number.parseFloat(selectedPackage.price) > 0 && (
                            <div className="flex justify-between mt-2">
                              <span>Package Price</span>
                              {(() => {
                                const packageOrderItem = getOrderItem("course_package", selectedPackage.id)
                                const isEnrolled = packageOrderItem?.is_enrolled
                                return (
                                  <span className={isEnrolled ? "line-through opacity-60" : ""}>
                                    RM {formatCurrency(selectedPackage.price)}
                                  </span>
                                )
                              })()}
                            </div>
                          )}
                        </div>
                      ) : (
                        <div className="text-gray-500 italic">No package selected</div>
                      )}

                      {/* Selected Classes */}
                      {selectedPackage && classes.length > 0 && selectedClasses.length > 0 && (
                        <div>
                          <h3 className="font-bold mb-2">Selected Classes</h3>
                          <ul className="space-y-2">
                            {selectedClasses.map((classId) => {
                              const classItem = classes.find((cls) => cls.id === classId)
                              if (!classItem) return null

                              const classOrderItem = getOrderItem("course_package_class", classId)
                              const isEnrolled = classOrderItem?.is_enrolled

                              return (
                                <li key={classId} className="flex justify-between items-center">
                                  <div className="flex items-center gap-2">
                                    <span className="text-gray-600">{classItem.title}</span>
                                    {isEnrolled && <span className="text-sm text-green-600 font-medium">Enrolled</span>}
                                  </div>
                                  <span className={isEnrolled ? "line-through opacity-60" : ""}>
                                    RM {formatCurrency(classItem.price)}
                                  </span>
                                </li>
                              )
                            })}
                          </ul>
                        </div>
                      )}

                      <Separator />

                      {/* Price Calculation */}
                      <div className="space-y-2">
                        <div className="flex justify-between">
                          <span>Subtotal</span>
                          <span>RM {formatCurrency(totalPrice)}</span>
                        </div>

                        {discount > 0 && (
                          <div className="flex justify-between text-green-600">
                            <span>Discount</span>
                            {(() => {
                              const packageOrderItem = selectedPackage
                                ? getOrderItem("course_package", selectedPackage.id)
                                : null
                              const hasDiscount = packageOrderItem?.is_discount !== false
                              return (
                                <span className={!hasDiscount ? "line-through opacity-60" : ""}>
                                  - RM {formatCurrency(discount)}
                                </span>
                              )
                            })()}
                          </div>
                        )}

                        {tax > 0 && (
                          <div className="flex justify-between text-gray-600">
                            <span>Tax</span>
                            <span>RM {formatCurrency(tax)}</span>
                          </div>
                        )}

                        <div className="flex justify-between font-bold text-lg pt-2">
                          <span>Total</span>
                          {isCalculatingOrder ? (
                            <span className="text-sm text-gray-500 animate-pulse">Calculating...</span>
                          ) : (
                            <span>RM {formatCurrency(finalPrice)}</span>
                          )}
                        </div>
                      </div>

                      {/* Info Box */}
                      <Alert className="bg-secondary-light border-secondary">
                        <Info className="h-4 w-4 text-secondary" />
                        <AlertDescription className="text-sm text-gray-600">
                          You will be able to review your order before making payment on the next page.
                        </AlertDescription>
                      </Alert>
                    </div>
                  </CardContent>
                </Card>

                {/* Need Help */}
                <Card className="border-0 shadow-sm mt-6 bg-primary-light">
                  <CardContent className="p-6">
                    <h3 className="font-bold mb-2">Need Help?</h3>
                    <p className="text-sm text-gray-600 mb-4">
                      If you have any questions about enrollment, please contact our support team.
                    </p>
                    <Button variant="outline" className="w-full border-secondary text-secondary">
                      Contact Support
                    </Button>
                  </CardContent>
                </Card>
              </div>
            </div>
          </div>
        </div>
      </main>

      <Footer />
    </div>
  )
}