"use client"

import { Dialog, DialogContent } from "@/components/ui/dialog"
import { PaystackButton } from "react-paystack"

// Initialize Paystack with your public key
const paystackPublicKey = process.env.NEXT_PUBLIC_PAYSTACK_PUBLIC_KEY || "pk_test_your_public_key"

interface PaystackCheckoutProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  amount: number
  email: string
  onSuccess: (reference: any) => void
  onClose: () => void
}

export function PaystackCheckout({ 
  open, 
  onOpenChange, 
  amount, 
  email, 
  onSuccess, 
  onClose 
}: PaystackCheckoutProps) {
  
  const componentProps = {
    email: email || "customer@email.com",
    amount: amount, // amount in kobo
    metadata: {
      custom_fields: [
        {
          display_name: "Product Name",
          variable_name: "product_name",
          value: "Trade Fair Registration"
        }
      ]
    },
    publicKey: paystackPublicKey,
    text: "Pay Now",
    onSuccess: (reference: any) => {
      console.log("Payment successful:", reference)
      onSuccess(reference)
      onOpenChange(false)
    },
    onClose: () => {
      console.log("Payment modal closed")
      onClose()
      onOpenChange(false)
    },
  }

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-md">
        <div className="text-center space-y-4 p-6">
          <h3 className="text-2xl font-bold">Trade Fair Registration</h3>
          <p className="text-muted-foreground">
            Complete your registration by making payment of ₦{amount / 100}
          </p>
          
          <div className="bg-muted p-4 rounded-lg">
            <p className="font-semibold">Registration Fee: ₦{amount / 100}</p>
            <p className="text-sm text-muted-foreground mt-2">
              Includes exhibition space and basic amenities
            </p>
          </div>

          <div className="pt-4">
            <PaystackButton 
              {...componentProps}
              className="w-full bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-6 rounded-lg transition-colors"
            />
          </div>

          <p className="text-xs text-muted-foreground">
            Secure payment powered by Paystack
          </p>
        </div>
      </DialogContent>
    </Dialog>
  )
}