"use client"

import { useEffect, useState } from "react"
import { useSearchParams, useRouter } from "next/navigation"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { CheckCircle, XCircle, Loader2, Globe, Users } from "lucide-react"
import Image from "next/image"

export default function PaymentCallback() {
  const searchParams = useSearchParams()
  const router = useRouter()
  const [status, setStatus] = useState<"loading" | "success" | "failed">("loading")
  const [voucher, setVoucher] = useState<any>(null)
  const [studentType, setStudentType] = useState<"local" | "foreign">("local")
  const [error, setError] = useState<string>("")

  useEffect(() => {
    const verifyPayment = async () => {
      try {
        const reference = searchParams.get("reference")
        const storedStudentType = (localStorage.getItem("studentType") as "local" | "foreign") || "local"
        const storedEmail = localStorage.getItem("userEmail")

        setStudentType(storedStudentType)

        if (!reference) {
          throw new Error("No payment reference found")
        }

        // Verify payment with backend
        const response = await fetch("/api/payments/verify", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            reference,
            studentType: storedStudentType,
            email: storedEmail,
          }),
        })

        const data = await response.json()

        if (data.success && data.voucher) {
          setVoucher(data.voucher)
          setStatus("success")

          // Store voucher for login
          localStorage.setItem("voucherCode", data.voucher.serial_number)
          localStorage.setItem("voucherPin", data.voucher.pin)

          // Clean up stored data
          localStorage.removeItem("paymentReference")
        } else {
          throw new Error(data.message || "Payment verification failed")
        }
      } catch (error) {
        console.error("[v0] Payment verification error:", error)
        setError(error instanceof Error ? error.message : "Payment verification failed")
        setStatus("failed")
      }
    }

    verifyPayment()
  }, [searchParams])

  const handleContinue = () => {
    if (studentType === "foreign") {
      router.push("/login?type=foreign")
    } else {
      router.push("/login?type=local")
    }
  }

  return (
    <div className="min-h-screen bg-background flex items-center justify-center p-4">
      <Card className="w-full max-w-md">
        <CardHeader className="text-center">
          <div className="flex items-center justify-center gap-2 mb-4">
            <Image
              src="/images/fanaka-logo.png"
              alt="Fanaka University Logo"
              width={32}
              height={32}
              className="h-8 w-auto"
            />
            <span className="text-lg font-bold text-primary">Fanaka University</span>
          </div>
          <CardTitle className="flex items-center justify-center gap-2">
            {status === "loading" && <Loader2 className="h-6 w-6 animate-spin" />}
            {status === "success" && <CheckCircle className="h-6 w-6 text-green-600" />}
            {status === "failed" && <XCircle className="h-6 w-6 text-red-600" />}
            Payment {status === "loading" ? "Processing" : status === "success" ? "Successful" : "Failed"}
          </CardTitle>
        </CardHeader>
        <CardContent className="text-center space-y-4">
          {status === "loading" && (
            <div className="space-y-2">
              <p className="text-muted-foreground">Verifying your payment...</p>
              <p className="text-sm text-muted-foreground">Please wait while we confirm your transaction</p>
            </div>
          )}

          {status === "success" && voucher && (
            <div className="space-y-4">
              <div className="flex items-center justify-center gap-2 mb-4">
                {studentType === "foreign" ? (
                  <Globe className="h-5 w-5 text-accent" />
                ) : (
                  <Users className="h-5 w-5 text-accent" />
                )}
                <span className="font-medium capitalize">{studentType} Student</span>
              </div>

              <p className="text-green-600">Your payment has been processed successfully!</p>

              <div className="bg-green-50 border border-green-200 p-4 rounded-lg">
                <h3 className="font-semibold text-green-800">Your Voucher Details</h3>
                <div className="mt-2 space-y-1">
                  <p className="text-sm text-green-700">
                    <strong>Serial Number:</strong> {voucher.serial_number}
                  </p>
                  <p className="text-sm text-green-700">
                    <strong>PIN:</strong> {voucher.pin}
                  </p>
                  <p className="text-sm text-green-700">
                    <strong>Amount:</strong> {voucher.currency} {voucher.price}
                  </p>
                  <p className="text-sm text-green-700">
                    <strong>Valid until:</strong> {new Date(voucher.expiry_date).toLocaleDateString()}
                  </p>
                </div>
              </div>

              <div className="bg-accent/10 border border-accent/20 p-3 rounded-lg">
                <p className="text-sm text-accent-foreground">
                  <strong>Next Steps:</strong> Use your serial number and PIN to login and access your {studentType}{" "}
                  student application portal.
                </p>
              </div>

              <p className="text-sm text-muted-foreground">
                A confirmation email has been sent to your email address with your voucher details.
              </p>

              <Button onClick={handleContinue} className="w-full bg-accent hover:bg-accent/90">
                Continue to {studentType === "foreign" ? "International" : "Local"} Student Portal
              </Button>
            </div>
          )}

          {status === "failed" && (
            <div className="space-y-4">
              <p className="text-red-600">Payment verification failed.</p>
              {error && <p className="text-sm text-red-500">{error}</p>}
              <Button onClick={() => router.push("/purchase-voucher")} variant="outline" className="w-full">
                Try Again
              </Button>
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  )
}