"use client"

import { useState, useEffect } from "react"
import { useSearchParams } from "next/navigation"
import { useTranslation } from "react-i18next"
import { ArrowLeft, Download, Mail, Printer } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { Breadcrumb, BreadcrumbItem, BreadcrumbLink } from "@/components/ui/breadcrumb"
import { ShowReceipt } from "@/components/features/receipt/show-receipt"
import { enrollGetOrders } from "@/services/orders/query"
import type { Order } from "@/services/types"
import Link from "next/link"

export default function ReceiptPage() {
  const { t } = useTranslation()
  const searchParams = useSearchParams()
  const id = searchParams.get("id")
  const email = searchParams.get("email")

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

  useEffect(() => {
    const fetchOrder = async () => {
      if (!id || !email) {
        setError("Missing order ID or email")
        setLoading(false)
        return
      }

      try {
        setLoading(true)
        const orderData = await enrollGetOrders(Number(id), email)
        console.log("[receipt] Order data:", orderData)
        setOrder(orderData)
      } catch (err) {
        console.error("Error fetching order:", err)
        setError("Failed to load receipt. Please try again.")
      } finally {
        setLoading(false)
      }
    }

    fetchOrder()
  }, [id, email])

  const handlePrint = () => {
    window.print()
  }

  const handleDownload = () => {
    // This would be implemented with a PDF generation library
    alert("Download functionality will be implemented soon")
  }

  const handleEmail = () => {
    // This would send an email with the receipt
    alert(`Email will be sent to ${email}`)
  }

  return (
    <div className="max-w-4xl mx-auto">
      <div className="mb-6">
        <Breadcrumb>
          <BreadcrumbItem>
            <BreadcrumbLink href="/admin">Admin</BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbItem>
            <BreadcrumbLink href="/admin/payments">Payments</BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbItem>Receipt</BreadcrumbItem>
        </Breadcrumb>
      </div>

      <div className="flex items-center justify-between mb-6">
        <div className="flex items-center">
          <Button variant="outline" size="sm" className="mr-2" asChild>
            <Link href="/admin/payments">
              <ArrowLeft className="h-4 w-4 mr-1" />
              Back to Payments
            </Link>
          </Button>
          <h1 className="text-2xl font-bold font-heading">{t("admin.receipt.title", "Payment Receipt")}</h1>
        </div>
        <div className="flex gap-2">
          <Button variant="outline" size="sm" onClick={handlePrint}>
            <Printer className="h-4 w-4 mr-1" />
            Print
          </Button>
          <Button variant="outline" size="sm" onClick={handleDownload}>
            <Download className="h-4 w-4 mr-1" />
            Download
          </Button>
          <Button variant="outline" size="sm" onClick={handleEmail}>
            <Mail className="h-4 w-4 mr-1" />
            Email
          </Button>
        </div>
      </div>

      {loading && (
        <Card className="p-8 flex justify-center items-center">
          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
        </Card>
      )}

      {error && (
        <Card className="p-8">
          <div className="text-center text-red-500">
            <p className="mb-4">{error}</p>
            <Button onClick={() => window.location.reload()}>Retry</Button>
          </div>
        </Card>
      )}

      {!loading && !error && order && (
        <div className="print:shadow-none">
          <ShowReceipt order={order} />
        </div>
      )}

      {!loading && !error && !order && (
        <Card className="p-8">
          <div className="text-center text-gray-500">
            <p>No receipt found for this order.</p>
          </div>
        </Card>
      )}
    </div>
  )
}