"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { 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 { getPackageById } from "@/services/course_packages/query"
import { getClassById } from "@/services/course_package_classes/query"
import { performCheckout } from "@/services/orders/query"
import { useTranslation } from "react-i18next"
import Image from "next/image"
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 { Separator } from "@/components/ui/separator"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { retrieveCheckoutData, updateCheckoutData } from "@/services/orders/storage"
import { formatCurrency } from "@/services/utils"

export default function CheckoutPage() {
  const { t } = useTranslation()
  const searchParams = useSearchParams()
  const router = useRouter()
  const orderId = searchParams.get("orderId") ? Number.parseInt(searchParams.get("orderId") as string) : null

  const [order, setOrder] = useState<any>(null)
  const [orderItems, setOrderItems] = useState<any[]>([])
  const [course, setCourse] = useState<any>(null)
  const [coursePackage, setCoursePackage] = useState<any>(null)
  const [classes, setClasses] = useState<any[]>([])
  const [paymentMethod, setPaymentMethod] = useState("credit_card")
  const [couponCode, setCouponCode] = useState("")
  const [couponApplied, setCouponApplied] = useState(false)
  const [couponDiscount, setCouponDiscount] = useState(0)
  const [formData, setFormData] = useState({
    cardNumber: "",
    cardName: "",
    expiryDate: "",
    cvv: "",
  })
  const [errors, setErrors] = useState<Record<string, string>>({})
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState("")
  const [processing, setProcessing] = useState(false)

  useEffect(() => {
    const fetchData = async () => {
      try {
        // Get data from local storage
        const storedData = retrieveCheckoutData()
        console.log("Retrieved checkout data from storage:", storedData)

        if (storedData && storedData.order && storedData.order_items) {
          console.log("Using checkout data from local storage:", storedData)

          // Set order data
          setOrder(storedData.order)
          setOrderItems(storedData.order_items || [])

          // Find items by type
          const courseItem = storedData.order_items.find((item) => item.item_type === "course")
          const packageItem = storedData.order_items.find((item) => item.item_type === "course_package")
          const classItems = storedData.order_items.filter((item) => item.item_type === "course_package_class")

          console.log("Found course item:", courseItem)
          console.log("Found package item:", packageItem)
          console.log("Found class items:", classItems)

          // Fetch data using async services
          if (courseItem) {
            try {
              console.log("Fetching course data for ID:", courseItem.item_id)
              const courseData = await getCourseById(courseItem.item_id)
              console.log("Received course data:", courseData)
              setCourse(courseData)
            } catch (error) {
              console.error("Error fetching course data:", error)
            }
          }

          if (packageItem) {
            try {
              console.log("Fetching package data for ID:", packageItem.item_id)
              const packageData = await getPackageById(packageItem.item_id)
              console.log("Received package data:", packageData)
              if (packageData) {
                // Ensure numeric values
                packageData.price = packageItem.total_price ;//= typeof packageData.price === "number" ? packageData.price : 0
                setCoursePackage(packageData)
              }
            } catch (error) {
              console.error("Error fetching package data:", error)
            }
          }

          if (classItems.length > 0) {
            try {
              console.log(
                "Fetching class data for IDs:",
                classItems.map((item) => item.item_id),
              )
              const classPromises = classItems.map((item) => getClassById(item.item_id))
              const classesData = await Promise.all(classPromises)
              console.log("Received classes data:", classesData)

              // Process class data
              const validClasses = classesData.filter(Boolean).map((classData) => {
                if (classData) {
                  // Ensure numeric values
                  const k = classItems.filter((item) => item.item_id === classData.id)
                  const i = k[0]
                  classData.price = (i!= null && typeof i.total_price === "number" )? classData.price : 0
                  //classData.price = typeof classData.price === "number" ? classData.price : 0
                }
                return classData
              })

              setClasses(validClasses)
            } catch (error) {
              console.error("Error fetching class data:", error)
            }
          }

          // Ensure numeric values for calculations
          if (storedData.order) {
            storedData.order.total_amount =
              typeof storedData.order.total_amount === "number" ? storedData.order.total_amount : 0
            storedData.order.discount_amount =
              typeof storedData.order.discount_amount === "number" ? storedData.order.discount_amount : 0
            storedData.order.final_amount =
              typeof storedData.order.final_amount === "number" ? storedData.order.final_amount : 0
          }

          setLoading(false)
          return
        }

        // If no stored data, show error
        console.error("No checkout data found in storage")
        setError("No checkout data found. Please select a course to enroll first.")
        setLoading(false)
      } catch (err) {
        console.error("Error loading checkout data:", err)
        setError("Failed to load order details")
        setLoading(false)
      }
    }

    fetchData()
  }, [])

  // Handle payment method selection
  const handlePaymentMethodChange = (value: string) => {
    console.log("Payment method changed to:", value)
    setPaymentMethod(value)

    // Clear form errors when changing payment method
    setErrors({})
  }

  // Handle form input change
  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target

    // Format card number with spaces
    if (name === "cardNumber") {
      const formatted = value
        .replace(/\s/g, "")
        .replace(/(\d{4})/g, "$1 ")
        .trim()
      setFormData({
        ...formData,
        [name]: formatted,
      })
    }
    // Format expiry date with slash
    else if (name === "expiryDate") {
      const cleaned = value.replace(/\D/g, "")
      let formatted = cleaned

      if (cleaned.length > 2) {
        formatted = `${cleaned.slice(0, 2)}/${cleaned.slice(2, 4)}`
      }

      setFormData({
        ...formData,
        [name]: formatted,
      })
    }
    // Other fields
    else {
      setFormData({
        ...formData,
        [name]: value,
      })
    }

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

  // Apply coupon code
  const applyCoupon = () => {
    if (!couponCode.trim() || !order) {
      return
    }

    console.log("Applying coupon code:", couponCode)

    // Mock coupon validation - in a real app, this would be a server call
    if (couponCode.toUpperCase() === "WELCOME10") {
      const orderAmount = order.final_amount || 0
      const discount = Math.round(orderAmount * 0.1) // 10% discount
      console.log("Coupon applied successfully. Discount amount:", discount)
      setCouponDiscount(discount)
      setCouponApplied(true)

      // Update the stored checkout data with the coupon information
      updateCheckoutData({
        coupon_code: couponCode,
        coupon_discount: discount,
      })
    } else {
      console.log("Invalid coupon code:", couponCode)
      setErrors({
        ...errors,
        coupon: "Invalid coupon code",
      })
    }
  }

  // Remove applied coupon
  const removeCoupon = () => {
    console.log("Removing coupon code")
    setCouponCode("")
    setCouponDiscount(0)
    setCouponApplied(false)

    // Clear coupon error if it exists
    if (errors.coupon) {
      const { coupon, ...restErrors } = errors
      setErrors(restErrors)
    }
  }

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

    // No validation needed for credit card as we're redirecting to payment gateway

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

  // Handle form submission
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    console.log("Form submitted")

    if (!validateForm() || !order) {
      console.log("Form validation failed or no order data")
      return
    }

    setProcessing(true)
    console.log("Processing payment...")

    try {
      // Calculate final amount after coupon
      const orderAmount = order.final_amount || 0
      const finalAmount = Math.max(0, orderAmount - couponDiscount)
      console.log("Final amount after coupon:", finalAmount)

      // Create payment data
      let paymentDescription = ""

      if (paymentMethod === "credit_card") {
        paymentDescription = "Online Payment via Stripe"
      } else if (paymentMethod === "bank_transfer") {
        paymentDescription = "Bank Transfer"
      }

      const paymentData = {
        order_id: 0, // Use 0 as order ID
        method: paymentMethod,
        description: paymentDescription,
        amount_paid: finalAmount,
        reference: `PAY-${Date.now()}`,
        status: "pending",
        paid_at: new Date().toISOString(),
      }

      console.log("Created payment data:", paymentData)

      // Get the current domain for redirect URLs
      const protocol = window.location.protocol
      const host = window.location.host
      const domain = `${protocol}//${host}`
      console.log("Current domain:", domain)

      // Update checkout data with payment information and redirect URLs
      const checkoutData = retrieveCheckoutData()
      const updatedCheckoutData = {
        ...checkoutData,
        payment: paymentData,
        payment_method: paymentMethod,
        coupon_code: couponApplied ? couponCode : null,
        coupon_discount: couponDiscount,
        final_amount: finalAmount,
        redirect_success: `${domain}/enroll/receipt`,
        redirect_failed: `${domain}/enroll/failed`,
      }

      console.log("Updating checkout data with payment info and redirect URLs:", updatedCheckoutData)
      updateCheckoutData(updatedCheckoutData)

      // Send checkout data to server
      console.log("Sending checkout data to server...")
      const response = await performCheckout(updatedCheckoutData)
      console.log("Received checkout response:", response)

      if (response && response.status === "OK" && response.redirect) {
        // Redirect to payment gateway or receipt page
        console.log("Redirecting to:", response.redirect)
        window.location.href = response.redirect
      } else {
        // Handle unexpected response
        console.error("Invalid response format:", response)
        throw new Error("Invalid response from checkout service")
      }
    } catch (err) {
      console.error("Payment processing error:", err)
      setProcessing(false)
      setError("Payment processing failed. Please try again.")
    }
  }

  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 checkout information...</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>
    )
  }

  // If no order data, show error
  if (!order) {
    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">No Order Found</h2>
            <p className="text-gray-600">Please select a course to enroll first.</p>
            <Button onClick={() => router.push("/courses")} className="mt-6">
              Browse Courses
            </Button>
          </div>
        </main>
        <Footer />
      </div>
    )
  }

  const taxAmount = order.tax_amount;
  // Calculate final amount after coupon
  const orderAmount = order.final_amount || 0
  const finalAmount = Math.max(0, orderAmount - couponDiscount)

  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">Checkout</h1>
            <p className="text-gray-600">Complete your payment to finalize your enrollment</p>
          </div>

          <div className="grid md:grid-cols-3 gap-8">
            <div className="md:col-span-2">
              <form onSubmit={handleSubmit} className="space-y-8">
                {/* Payment Method Selection */}
                <Card className="border-0 shadow-sm">
                  <CardHeader>
                    <CardTitle>Payment Method</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <RadioGroup value={paymentMethod} onValueChange={handlePaymentMethodChange} className="space-y-4">
                      <div className="border rounded-lg p-4 transition-colors hover:border-gray-300">
                        <div className="flex items-start">
                          <RadioGroupItem value="credit_card" id="payment-credit-card" className="mt-1" />
                          <div className="ml-3 flex-grow">
                            <Label htmlFor="payment-credit-card" className="text-lg font-bold block mb-1">
                              Online Payment
                            </Label>
                            <p className="text-gray-600 text-sm">Pay securely using Stripe</p>
                          </div>
                          <div className="flex gap-2">
                            <div className="w-10 h-6 bg-blue-600 rounded"></div>
                            <div className="w-10 h-6 bg-red-500 rounded"></div>
                            <div className="w-10 h-6 bg-yellow-500 rounded"></div>
                          </div>
                        </div>
                      </div>
   {false && (
                      <div className="border rounded-lg p-4 transition-colors hover:border-gray-300">
                     <div className="flex items-start">
                          <RadioGroupItem value="bank_transfer" id="payment-bank" className="mt-1" />
                          <div className="ml-3 flex-grow">
                            <Label htmlFor="payment-bank" className="text-lg font-bold block mb-1">
                              Bank Transfer
                            </Label>
                            <p className="text-gray-600 text-sm">Pay directly from your bank account</p>
                          </div>
                        </div>
                      </div>)}
                    </RadioGroup>
                  </CardContent>
                </Card>

                {/* Online Payment Instructions */}
                {paymentMethod === "credit_card" && (
                  <Card className="border-0 shadow-sm">
                    <CardContent className="p-6">
                      <Alert className="bg-blue-50 border-blue-200 mb-4">
                        <AlertDescription className="text-blue-800">
                          You will be redirected to our secure payment gateway to complete your payment after clicking
                          "Confirm Payment".
                        </AlertDescription>
                      </Alert>

                      <p className="text-gray-600">
                        Our online payment system is secure and encrypted. Your payment information is never stored on
                        our servers.
                      </p>
                    </CardContent>
                  </Card>
                )}

                {/* Bank Transfer Instructions */}
                {paymentMethod === "bank_transfer" && (
                  <Card className="border-0 shadow-sm">
                    <CardContent className="p-6">
                      <Alert className="bg-secondary-light border-secondary mb-4">
                        <AlertDescription className="text-secondary">
                          Please make your payment to the following bank account within 48 hours.
                        </AlertDescription>
                      </Alert>

                      <div className="space-y-3 mb-4">
                        <div className="flex justify-between">
                          <span className="font-medium">Bank Name:</span>
                          <span>World Mind Bank</span>
                        </div>
                        <div className="flex justify-between">
                          <span className="font-medium">Account Name:</span>
                          <span>World Mind Development Sdn Bhd</span>
                        </div>
                        <div className="flex justify-between">
                          <span className="font-medium">Account Number:</span>
                          <span>1234-5678-9012</span>
                        </div>
                        <div className="flex justify-between">
                          <span className="font-medium">Reference:</span>
                          <span>WM-{Date.now().toString().slice(-6)}</span>
                        </div>
                      </div>

                      <p className="text-gray-600 text-sm">
                        Please include the reference number in your payment description. Your enrollment will be
                        confirmed once payment is verified.
                      </p>
                    </CardContent>
                  </Card>
                )}

                <div className="flex justify-end">
                  <Button
                    type="submit"
                    className="bg-secondary text-primary hover:bg-secondary-dark"
                    disabled={processing}
                  >
                    {processing ? (
                      <>
                        <span className="animate-spin rounded-full h-4 w-4 border-b-2 border-primary mr-2"></span>
                        Processing...
                      </>
                    ) : (
                      "Confirm Payment"
                    )}
                  </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 */}
                      {loading ? (
                        <div className="flex items-center justify-center py-4">
                          <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-secondary"></div>
                        </div>
                      ) : course ? (
                        <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 || "Course"}</h3>
                            <p className="text-sm text-gray-600">{coursePackage?.name || ""}</p>
                          </div>
                        </div>
                      ) : (
                        <div className="text-gray-500 text-center py-2">Course information not available</div>
                      )}

                      <Separator />

                      {/* Order Items */}
                      <div className="space-y-3">
                        {/* Package */}
                        {coursePackage && coursePackage.price > 0 && (
                          <div className="flex justify-between">
                            <span className="text-gray-600">{coursePackage.name || "Package"}</span>
                            <span>RM {formatCurrency(coursePackage.price)}</span>
                          </div>
                        )}

                        {/* Classes */}
                        {classes && classes.length > 0 ? (
                          <>
                            {classes.map((cls) => (
                              <div key={cls.id} className="flex justify-between">
                                <span className="text-gray-600">{cls.title || "Class"}</span>
                                <span>RM {formatCurrency(cls.price)}</span>
                              </div>
                            ))}
                          </>
                        ) : (
                          orderItems.some((item) => item.item_type === "course_package_class") && (
                            <div className="text-gray-500 text-center py-1">Loading class information...</div>
                          )
                        )}
                      </div>

                      <Separator />

                      {/* Coupon Code */}
                      <div>
                        <h3 className="font-bold mb-2">Coupon Code</h3>

                        {!couponApplied ? (
                          <div className="flex gap-2">
                            <Input
                              value={couponCode}
                              onChange={(e) => setCouponCode(e.target.value)}
                              placeholder="Enter coupon code"
                              className={errors.coupon ? "border-red-500" : ""}
                            />
                            <Button type="button" variant="outline" onClick={applyCoupon}>
                              Apply
                            </Button>
                          </div>
                        ) : (
                          <div className="flex justify-between items-center bg-green-50 border border-green-200 rounded-md p-2">
                            <div>
                              <span className="font-medium text-green-700">{couponCode.toUpperCase()}</span>
                              <span className="text-sm text-green-600 block">10% discount applied</span>
                            </div>
                            <Button
                              type="button"
                              variant="ghost"
                              size="sm"
                              onClick={removeCoupon}
                              className="h-8 text-gray-500 hover:text-gray-700"
                            >
                              Remove
                            </Button>
                          </div>
                        )}

                        {errors.coupon && <p className="text-red-500 text-sm mt-1">{errors.coupon}</p>}
                      </div>

                      <Separator />

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

                        {order.discount_amount > 0 && (
                          <div className="flex justify-between text-green-600">
                            <span>Package Discount</span>
                            <span>- RM {formatCurrency(order.discount_amount)}</span>
                          </div>
                        )}

                        {couponDiscount > 0 && (
                          <div className="flex justify-between text-green-600">
                            <span>Coupon Discount</span>
                            <span>- RM {formatCurrency(couponDiscount)}</span>
                          </div>
                        )}

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

                        <div className="flex justify-between font-bold text-lg pt-2">
                          <span>Total</span>
                          <span>RM {formatCurrency(finalAmount)}</span>
                        </div>
                      </div>

                      {/* Secure Payment Notice */}
                      <div className="flex items-center justify-center text-sm text-gray-500 mt-4">
                        <svg
                          className="w-4 h-4 mr-1"
                          fill="none"
                          stroke="currentColor"
                          viewBox="0 0 24 24"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <path
                            strokeLinecap="round"
                            strokeLinejoin="round"
                            strokeWidth="2"
                            d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
                          ></path>
                        </svg>
                        Secure Payment
                      </div>
                    </div>
                  </CardContent>
                </Card>
              </div>
            </div>
          </div>
        </div>
      </main>
      <Footer />
    </div>
  )
}