'use client'

import { useEffect, useState, Suspense } from 'react'
import { useRouter, useSearchParams } from 'next/navigation'
import { loadStripe } from '@stripe/stripe-js'
import { Elements, PaymentElement, useStripe, useElements } from '@stripe/react-stripe-js'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card'
import { Alert, AlertDescription } from '@/components/ui/alert'
import { Loader2, CheckCircle, AlertCircle } from 'lucide-react'
import { Header } from '@/components/ui/header'

const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY!)

function PaymentFormContent() {
  const router = useRouter()
  const searchParams = useSearchParams()
  const stripe = useStripe()
  const elements = useElements()

  const [isProcessing, setIsProcessing] = useState(false)
  const [error, setError] = useState('')
  const [adDetails, setAdDetails] = useState<any>(null)
  const [isPaymentReady, setIsPaymentReady] = useState(false)

  const adId = searchParams?.get('adId')
  const clientSecret = searchParams?.get('clientSecret')

  useEffect(() => {
    // Load ad details from sessionStorage
    const details = sessionStorage.getItem('pendingAdDetails')
    if (details) {
      setAdDetails(JSON.parse(details))
    }
  }, [])

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

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

    setIsProcessing(true)
    setError('')

    try {
      const { error: submitError } = await elements.submit()
      if (submitError) {
        throw new Error(submitError.message)
      }

      const { error: confirmError, paymentIntent } = await stripe.confirmPayment({
        elements,
        confirmParams: {
          return_url: `${window.location.origin}/advertise/success?adId=${adId}`,
        },
        redirect: 'if_required'
      })

      if (confirmError) {
        throw new Error(confirmError.message)
      }

      if (paymentIntent && paymentIntent.status === 'succeeded') {
        // Update ad status to paid
        await fetch('/api/ads/confirm-payment', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            adId,
            paymentIntentId: paymentIntent.id
          })
        })

        // Clear session storage
        sessionStorage.removeItem('pendingAdDetails')

        // Redirect to success page
        router.push(`/advertise/success?adId=${adId}`)
      }
    } catch (err: any) {
      setError(err.message || 'Payment failed. Please try again.')
    } finally {
      setIsProcessing(false)
    }
  }

  if (!clientSecret) {
    return (
      <Alert variant="destructive">
        <AlertCircle className="h-4 w-4" />
        <AlertDescription>Invalid payment session. Please try again.</AlertDescription>
      </Alert>
    )
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-blue-50">
      <Header />

      <div className="container mx-auto px-4 py-12">
        <Card className="max-w-2xl mx-auto">
          <CardHeader>
            <CardTitle className="text-3xl">Complete Payment</CardTitle>
            <CardDescription>
              Your ad will be submitted to admin for approval after payment
            </CardDescription>
          </CardHeader>
          <CardContent>
            {adDetails && (
              <div className="mb-6 p-4 bg-blue-50 rounded-lg">
                <h3 className="font-bold mb-2">Order Summary</h3>
                <div className="space-y-1 text-sm">
                  <div className="flex justify-between">
                    <span>Facility:</span>
                    <span className="font-semibold">{adDetails.facilityName}</span>
                  </div>
                  <div className="flex justify-between">
                    <span>Placement:</span>
                    <span className="font-semibold">{adDetails.placementType}</span>
                  </div>
                  <div className="flex justify-between">
                    <span>Duration:</span>
                    <span className="font-semibold">{adDetails.duration} days</span>
                  </div>
                  <div className="flex justify-between text-lg font-bold text-blue-600 pt-2 border-t mt-2">
                    <span>Total:</span>
                    <span>${adDetails.totalCost}</span>
                  </div>
                </div>
              </div>
            )}

            {error && (
              <Alert variant="destructive" className="mb-4">
                <AlertCircle className="h-4 w-4" />
                <AlertDescription>{error}</AlertDescription>
              </Alert>
            )}

            <form onSubmit={handleSubmit} className="space-y-6">
              <PaymentElement
                onChange={(e) => {
                  // Track if payment details are complete
                  setIsPaymentReady(e.complete)
                  // Clear any previous errors when user starts filling
                  if (error) setError('')
                }}
              />

              <Button
                type="submit"
                className="w-full bg-[#3F5CEA] hover:bg-[#09183D] text-lg py-6"
                disabled={!stripe || isProcessing || !isPaymentReady}
              >
                {isProcessing ? (
                  <>
                    <Loader2 className="mr-2 h-5 w-5 animate-spin" />
                    Processing Payment...
                  </>
                ) : !isPaymentReady ? (
                  <>Enter Payment Details</>
                ) : (
                  <>Pay ${adDetails?.totalCost || 0}</>
                )}
              </Button>

              <p className="text-sm text-gray-500 text-center">
                Payment will be processed immediately. Full refund if admin rejects your ad.
              </p>
            </form>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}

function PaymentPageContent() {
  const searchParams = useSearchParams()
  const clientSecret = searchParams?.get('clientSecret')

  if (!clientSecret) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-blue-50 flex items-center justify-center">
        <Alert variant="destructive" className="max-w-md">
          <AlertCircle className="h-4 w-4" />
          <AlertDescription>Invalid payment session. Please try again.</AlertDescription>
        </Alert>
      </div>
    )
  }

  const options = {
    clientSecret,
    appearance: {
      theme: 'stripe' as const,
    },
  }

  return (
    <Elements stripe={stripePromise} options={options}>
      <PaymentFormContent />
    </Elements>
  )
}

export default function PaymentPage() {
  return (
    <Suspense fallback={
      <div className="min-h-screen flex items-center justify-center">
        <Loader2 className="h-8 w-8 animate-spin text-blue-600" />
      </div>
    }>
      <PaymentPageContent />
    </Suspense>
  )
}