"use client"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { ArrowLeft, Download, Mail } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import Link from "next/link"
import { enrollGetOrders } from "@/services/orders/query"
import { getStudent } from "@/services/students/storage"
import { ShowReceipt } from "@/components/features/receipt/show-receipt"
import type { Order } from "@/services/types"

export default function StudentReceiptPage({ params }: { params: { id: string } }) {
  const router = useRouter()
  const [order, setOrder] = useState<Order | null>(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

  const orderId = Number.parseInt(params.id)

  useEffect(() => {
    const fetchOrderData = async () => {
      try {
        setLoading(true)
        setError(null)

        console.log("Student receipt page - Order ID:", orderId)

        // Get student info from localStorage
        const student = getStudent()
        if (!student) {
          console.error("No student info found in localStorage")
          setError("Student information not found. Please log in again.")
          return
        }

        console.log("Student info retrieved:", { id: student.id, email: student.email })

        // Fetch order data using enrollGetOrders
        console.log("Fetching order data for:", { orderId, email: student.email })
        const orderData = await enrollGetOrders(orderId, student.email)
        console.log("Order data received:", orderData)

        if (!orderData) {
          setError("Order not found or you don't have permission to view this receipt.")
          return
        }

        setOrder(orderData)
      } catch (err) {
        console.error("Error fetching order data:", err)
        setError("Failed to load receipt. Please try again.")
      } finally {
        setLoading(false)
      }
    }

    if (orderId) {
      fetchOrderData()
    } else {
      setError("Invalid order ID")
      setLoading(false)
    }
  }, [orderId])

  const handleDownload = () => {
    console.log("Download receipt for order:", orderId)
    // TODO: Implement PDF download functionality
  }

  const handleEmail = () => {
    console.log("Email receipt for order:", orderId)
    // TODO: Implement email receipt functionality
  }

  if (loading) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <div className="text-center">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto mb-4"></div>
          <p className="text-gray-600">Loading receipt...</p>
        </div>
      </div>
    )
  }

  if (error) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <Card className="w-full max-w-md">
          <CardContent className="p-6 text-center">
            <h2 className="text-xl font-bold text-red-600 mb-4">Error</h2>
            <p className="text-gray-600 mb-6">{error}</p>
            <div className="space-y-2">
              <Button asChild className="w-full">
                <Link href="/student/payments">
                  <ArrowLeft className="h-4 w-4 mr-2" />
                  Back to Payments
                </Link>
              </Button>
              <Button variant="outline" onClick={() => window.location.reload()} className="w-full">
                Try Again
              </Button>
            </div>
          </CardContent>
        </Card>
      </div>
    )
  }

  if (!order) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <Card className="w-full max-w-md">
          <CardContent className="p-6 text-center">
            <h2 className="text-xl font-bold text-gray-800 mb-4">Receipt Not Found</h2>
            <p className="text-gray-600 mb-6">The requested receipt could not be found.</p>
            <Button asChild className="w-full">
              <Link href="/student/payments">
                <ArrowLeft className="h-4 w-4 mr-2" />
                Back to Payments
              </Link>
            </Button>
          </CardContent>
        </Card>
      </div>
    )
  }

  return (
    <div className="min-h-screen bg-gray-50 py-8">
      <div className="max-w-4xl mx-auto px-4">
        {/* Header with actions */}
        <div className="flex items-center justify-between mb-8">
          <Button variant="ghost" asChild>
            <Link href="/student/payments">
              <ArrowLeft className="h-4 w-4 mr-2" />
              Back to Payments
            </Link>
          </Button>
          {false && (
          <div className="flex items-center gap-2">
            <Button variant="outline" onClick={handleDownload}>
              <Download className="h-4 w-4 mr-2" />
              Download PDF
            </Button>
            <Button variant="outline" onClick={handleEmail}>
              <Mail className="h-4 w-4 mr-2" />
              Email Receipt
            </Button>
          </div>
             )}
        </div>

        {/* Receipt Component */}
        <ShowReceipt order={order} />
      </div>
    </div>
  )
}