"use client"
import { useState, useEffect } from "react"
import {
  Elements,
  PaymentElement,
  useStripe,
  useElements
} from "@stripe/react-stripe-js"
import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription
} from "@/components/ui/dialog"
import { Loader2, CheckCircle, XCircle } from "lucide-react"
import { stripePromise } from "@/lib/stripe"
import { formatCurrency } from "@/lib/utils"
import { useTranslations } from "next-intl"


interface PaymentFormProps {
  onSuccess: () => void
  onCancel: () => void
}

function PaymentForm({ onSuccess, onCancel }: PaymentFormProps) {
  const t = useTranslations("credits.payment")

  const stripe = useStripe()
  const elements = useElements()
  const [isProcessing, setIsProcessing] = useState(false)
  const [errorMessage, setErrorMessage] = useState<string | null>(null)

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()

    if (!stripe || !elements) {
      return
    }

    setIsProcessing(true)
    setErrorMessage(null)

    const { error } = await stripe.confirmPayment({
      elements,
      confirmParams: {
        return_url: `${window.location.origin}/dashboard/subscriptions?payment=success`
      },
      redirect: "if_required"
    })

    if (error) {
      setErrorMessage(error.message || t("error"))
      setIsProcessing(false)
    } else {
      // Payment succeeded
      onSuccess()
    }
  }

  return (
    <form onSubmit={handleSubmit} className="space-y-6">
      <PaymentElement
        options={{
          layout: "tabs"
        }}
      />

      {errorMessage && (
        <div className="flex items-center gap-2 p-3 bg-red-50 border border-red-200 rounded-lg text-red-700 text-sm">
          <XCircle className="w-4 h-4 shrink-0" />
          {errorMessage}
        </div>
      )}

      <div className="flex gap-3">
        <Button
          type="button"
          variant="outline"
          onClick={onCancel}
          disabled={isProcessing}
          className="flex-1"
        >
          {t("cancel")}
        </Button>
        <Button
          type="submit"
          disabled={!stripe || isProcessing}
          className="flex-1 bg-primary hover:bg-primary/90"
        >
          {isProcessing ? (
            <div className="flex items-center gap-2">
              <Loader2 className="w-4 h-4 animate-spin" />
              {t("processing")}
            </div>
          ) : (
            t("payNow")
          )}
        </Button>
      </div>
    </form>
  )
}

interface StripePaymentModalProps {
  isOpen: boolean
  onClose: () => void
  clientSecret: string | null
  topupName?: string
  amount?: number
  credits?: number
  onPaymentSuccess: () => void
}

export function StripePaymentModal({
  isOpen,
  onClose,
  clientSecret,
  topupName,
  amount,
  credits,
  onPaymentSuccess
}: StripePaymentModalProps) {
  const t = useTranslations("credits.payment")

  const [paymentStatus, setPaymentStatus] = useState<"pending" | "success" | "error">("pending")

  useEffect(() => {
    if (isOpen) {
      setPaymentStatus("pending")
    }
  }, [isOpen])

  const handleSuccess = () => {
    setPaymentStatus("success")
    setTimeout(() => {
      onPaymentSuccess()
      onClose()
    }, 2000)
  }

  const handleCancel = () => {
    onClose()
  }

  if (!clientSecret) return null

  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="sm:max-w-[500px] max-h-[90vh] overflow-y-auto [&>button]:top-5 [&>button]:right-5 [&>button]:text-white [&>button]:hover:text-gray-200 [&>button>svg]:stroke-[4px]">
        <DialogHeader>
          <DialogTitle>{t("completePurchase")}</DialogTitle>
          <DialogDescription>
            {topupName && (
              <span>
                {t("purchaseCredits", { credits: credits ?? 0, amount: formatCurrency(amount ?? 0) })}
              </span>
            )}
          </DialogDescription>
        </DialogHeader>

        {paymentStatus === "success" ? (
          <div className="py-8 text-center">
            <CheckCircle className="w-16 h-16 text-green-500 mx-auto mb-4" />
            <h3 className="text-xl font-semibold text-gray-900 mb-2">{t("success.title")}</h3>
            <p className="text-gray-600">{t("success.description")}</p>
          </div>
        ) : (
          <Elements
            stripe={stripePromise}
            options={{
              clientSecret,
              appearance: {
                theme: "stripe",
                variables: {
                  colorPrimary: "#1A315F",
                  borderRadius: "8px"
                }
              }
            }}
          >
            <PaymentForm onSuccess={handleSuccess} onCancel={handleCancel} />
          </Elements>
        )}
      </DialogContent>
    </Dialog>
  )
}