"use client"

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 { enrollGetOrders } from "@/services/orders/query"
import { useTranslation } from "react-i18next"
import { Check } from "lucide-react"
import { Button } from "@/components/ui/button"
import type { Order, OrderPayment } from "@/services/types"
import { ShowReceipt } from "@/components/features/receipt/show-receipt"
export default function ReceiptPage() {
  const { t } = useTranslation()
  const searchParams = useSearchParams()
  const router = useRouter()

  // Extract URL parameters with debugging
  const idParam = searchParams.get("id")
  const emailParam = searchParams.get("email")
  const orderId = idParam ? Number.parseInt(idParam) : null
  const email = emailParam

  // Debug log for URL parameters
  console.log("URL Parameters:", {
    idParam,
    emailParam,
    parsedOrderId: orderId,
    allParams: Object.fromEntries([...searchParams.entries()]),
  })

  const [order, setOrder] = useState<Order | null>(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState("")

  useEffect(() => {
    const fetchData = async () => {
      try {
        console.log("Receipt page data fetching started")
        console.log("Checking parameters:", { orderId, email })

        // Require both order ID and email parameters
        if (orderId && email) {
          console.log("Fetching order data for:", { orderId, email })

          // Fetch order details from API using enrollGetOrders
          const orderData = await enrollGetOrders(orderId, email)
          console.log("Order data received:", orderData)

          if (!orderData) {
            setError("Order not found")
            setLoading(false)
            return
          }

          setOrder(orderData)
        } else {
          console.log("URL parameters missing - both id and email are required")
          setError(
            "Receipt information not found. Please provide both order ID and email in the URL (e.g., /enroll/receipt?id=123&email=user@example.com)",
          )
        }

        setLoading(false)
      } catch (err) {
        console.error("Failed to load receipt details:", err)
        setError(`Failed to load receipt details: ${err instanceof Error ? err.message : String(err)}`)
        setLoading(false)
      }
    }

    fetchData()
  }, [orderId, email])

  // Format date
  const formatDate = (dateString: string) => {
    const date = new Date(dateString)
    return date.toLocaleDateString("en-US", {
      year: "numeric",
      month: "long",
      day: "numeric",
    })
  }

  // Format time
  const formatTime = (dateString: string) => {
    const date = new Date(dateString)
    return date.toLocaleTimeString("en-US", {
      hour: "2-digit",
      minute: "2-digit",
    })
  }

  // Get the most recent payment
  const getLatestPayment = (): OrderPayment | null => {
    if (!order?.payments || order.payments.length === 0) return null
    return order.payments.sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime())[0]
  }

  // Get customer information
  const getCustomer = () => {
    return order?.customer
  }

  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 receipt 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>
            <div className="mt-4 p-4 bg-gray-100 rounded-md text-left max-w-md mx-auto">
              <h3 className="font-medium mb-2">Debug Information:</h3>
              <p className="text-sm">URL Parameters: {JSON.stringify({ id: idParam, email: emailParam })}</p>
              <p className="text-sm">Parsed Order ID: {orderId}</p>
            </div>
            <Button onClick={() => router.push("/courses")} className="mt-6">
              Browse Courses
            </Button>
          </div>
        </main>
        <Footer />
      </div>
    )
  }

  const latestPayment = getLatestPayment()
  const customer = getCustomer()

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

      <main className="flex-grow py-12 bg-gray-50">
        <div className="container max-w-4xl">
          <div className="bg-white rounded-lg shadow-sm p-8 mb-8">
            <div className="text-center mb-8">
              <div className="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
                <Check className="h-10 w-10 text-green-600" />
              </div>
              <h1 className="text-3xl font-bold mb-2 font-heading">Payment Successful!</h1>
              <p className="text-gray-600">
                Thank you for your enrollment. Your payment has been processed successfully.
              </p>
            </div>

            <ShowReceipt order={order} />

            {/* Next Steps */}
            <div className="bg-secondary-light rounded-lg p-6">
              <h2 className="text-xl font-bold mb-4 font-heading">Next Steps</h2>

              <div className="space-y-4">
                <div className="flex gap-4 bg-yellow-100 p-4 rounded-lg">
                  <div className="w-10 h-10 rounded-full bg-primary-light flex items-center justify-center shrink-0">
                    <span className="font-bold text-secondary">1</span>
                  </div>
                  <div>
                    <h3 className="font-bold">Check Your Email</h3>
                    <p className="text-gray-600">
                      We've sent a confirmation email with all the details of your enrollment.
                    </p>
                  </div>
                </div>

                <div className="flex gap-4">
                  <div className="w-10 h-10 rounded-full bg-primary-light flex items-center justify-center shrink-0">
                    <span className="font-bold text-secondary">2</span>
                  </div>
                  <div>
                    <h3 className="font-bold">Access Your Student Dashboard</h3>
                    <p className="text-gray-600">
                      Log in to your account to access course materials and track your progress.
                    </p>
                  </div>
                </div>

                <div className="flex gap-4">
                  <div className="w-10 h-10 rounded-full bg-primary-light flex items-center justify-center shrink-0">
                    <span className="font-bold text-secondary">3</span>
                  </div>
                  <div>
                    <h3 className="font-bold">Mark Your Calendar</h3>
                    <p className="text-gray-600">
                      Your first session will begin soon. Make sure to note the date and time.
                    </p>
                  </div>
                </div>
              </div>
            </div>

            <div className="flex flex-col md:flex-row gap-4 justify-center mt-8">
              <Button
                onClick={() => router.push("/student")}
                className="bg-secondary text-primary hover:bg-secondary-dark"
              >
                Go to Student Dashboard
              </Button>

              <Button variant="outline" onClick={() => router.push("/courses")}>
                Browse More Courses
              </Button>
            </div>
          </div>
        </div>
      </main>

      <Footer />
    </div>
  )
}