pragativeer-v2/src/app/checkout/page.tsx

"use client"

import { useEffect, useState } from "react"
import { useRouter, useSearchParams } from "next/navigation"
import { useActiveUser } from "@/hooks/useActiveUser"
import { Card, CardContent, CardDescription, CardHeader, CardTitle, CardFooter } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Loader2, ShieldCheck, ArrowLeft, CheckCircle2 } from "lucide-react"
import Link from "next/link"

declare global {
  interface Window {
    Razorpay: any
  }
}

import { Suspense } from "react"

export default function CheckoutPage() {
  return (
    <Suspense fallback={<div className="min-h-screen bg-background flex items-center justify-center"><Loader2 className="animate-spin text-[var(--cyan-ai)]" size={48} /></div>}>
      <CheckoutContent />
    </Suspense>
  )
}

function CheckoutContent() {
  const router = useRouter()
  const searchParams = useSearchParams()
  const tier = searchParams.get("tier") || "Pro"
  
  const { userId, loading: userLoading, user } = useActiveUser()
  const [address, setAddress] = useState("")
  const [phone, setPhone] = useState("")
  const [processing, setProcessing] = useState(false)
  const [success, setSuccess] = useState(false)
  const [error, setError] = useState("")

  const paymentGateway = process.env.NEXT_PUBLIC_PAYMENT_GATEWAY || "razorpay"

  // Ensure Gateway scripts are loaded
  useEffect(() => {
    if (paymentGateway === "razorpay") {
      const script = document.createElement("script")
      script.src = "https://checkout.razorpay.com/v1/checkout.js"
      script.async = true
      document.body.appendChild(script)
      return () => {
        document.body.removeChild(script)
      }
    } else if (paymentGateway === "stripe") {
      // Load Stripe.js if using stripe
      // const script = document.createElement("script")
      // script.src = "https://js.stripe.com/v3/"
      // document.body.appendChild(script)
    }
    // PhonePe usually relies on S2S redirection, so no client SDK needed
  }, [paymentGateway])

  // If user is definitely not logged in after loading, redirect to login
  useEffect(() => {
    if (!userLoading && !userId) {
      router.push(`/login?redirect=/checkout?tier=${tier}`)
    }
  }, [userId, userLoading, router, tier])

  const amount = tier === "Al_Coach" ? 11999 : 3499

  const handlePayment = async () => {
    if (!address.trim() || !phone.trim() || phone.length < 10) {
      setError("Please provide a valid address and 10-digit phone number.")
      return
    }
    setError("")
    setProcessing(true)

    try {
      // 1. Create order on backend (Passing gateway to abstract logic)
      const orderRes = await fetch(`/api/billing/create-order?user_id=${userId}&plan_tier=${tier}`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ gateway: paymentGateway })
      })
      
      if (!orderRes.ok) {
        throw new Error("Failed to create order. Please try again.")
      }
      
      const orderData = await orderRes.json()

      if (paymentGateway === "razorpay") {
        // 2a. Open Razorpay Checkout
        const options = {
          key: process.env.NEXT_PUBLIC_RAZORPAY_KEY_ID || "rzp_test_local_sandbox",
          amount: orderData.amount, 
          currency: "INR",
          name: "PragatiVeer",
          description: `Upgrade to ${tier} Tier`,
          image: "/icon.svg", // Logo
          order_id: orderData.id, 
          handler: async function (response: any) {
            try {
              const verifyRes = await fetch("/api/billing/verify-payment", {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({
                  gateway: "razorpay",
                  razorpay_order_id: response.razorpay_order_id,
                  razorpay_payment_id: response.razorpay_payment_id,
                  razorpay_signature: response.razorpay_signature,
                  user_id: userId,
                  tier: tier
                })
              })

              const verifyData = await verifyRes.json()
              if (verifyData.success) {
                setSuccess(true)
                setTimeout(() => {
                  window.location.href = "/dashboard"
                }, 2000)
              } else {
                setError("Payment verification failed. If money was deducted, please contact support.")
                setProcessing(false)
              }
            } catch (err) {
              setError("Failed to verify payment with server.")
              setProcessing(false)
            }
          },
          prefill: {
            name: user?.name || "",
            email: user?.email || "",
            contact: phone
          },
          notes: {
            address: address
          },
          theme: {
            color: "var(--cyan-ai)"
          }
        }

        const rzp = new window.Razorpay(options)
        
        rzp.on('payment.failed', function (response: any) {
          setError(`Payment Failed: ${response.error.description}`)
          setProcessing(false)
        })

        rzp.open()
      } else if (paymentGateway === "phonepe") {
        // 2b. PhonePe Redirection logic
        console.log("Redirecting to PhonePe Gateway...")
        // window.location.href = orderData.redirect_url
        alert("PhonePe Gateway Logic would trigger here.")
        setProcessing(false)
      } else if (paymentGateway === "stripe") {
        // 2c. Stripe Checkout logic
        console.log("Redirecting to Stripe Checkout...")
        alert("Stripe SDK logic would trigger here.")
        setProcessing(false)
      }

    } catch (err: any) {
      setError(err.message)
      setProcessing(false)
    }
  }

  if (userLoading || !userId) {
    return (
      <div className="min-h-screen bg-background flex items-center justify-center">
        <Loader2 className="animate-spin text-[var(--cyan-ai)]" size={48} />
      </div>
    )
  }

  if (success) {
    return (
      <div className="min-h-screen bg-background flex flex-col items-center justify-center p-6 animate-in fade-in zoom-in duration-500">
        <Card className="max-w-md w-full border-border bg-secondary/10 backdrop-blur-xl shadow-2xl shadow-[var(--cyan-ai-20)] rounded-[2rem] text-center p-8">
          <CheckCircle2 size={80} className="text-[var(--cyan-ai)] mx-auto mb-6" />
          <h2 className="text-3xl font-black mb-2">Payment Successful!</h2>
          <p className="text-muted-foreground mb-8">Your account has been upgraded to the <strong>{tier}</strong> tier.</p>
          <div className="flex justify-center">
            <Loader2 className="animate-spin text-[var(--cyan-ai)]" size={24} />
            <span className="ml-3 font-medium">Redirecting to dashboard...</span>
          </div>
        </Card>
      </div>
    )
  }

  return (
    <div className="min-h-screen bg-background p-6 md:p-12">
      <Link href="/upgrade" className="text-muted-foreground hover:text-foreground flex items-center gap-2 transition-colors font-medium mb-8 w-max">
        <ArrowLeft size={16} /> Back to Plans
      </Link>
      
      <div className="max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-8 animate-in fade-in slide-in-from-bottom-8 duration-700">
        
        {/* Billing Details */}
        <div className="space-y-6">
          <h1 className="text-3xl font-black tracking-tight">Checkout</h1>
          <Card className="border-border bg-secondary/10 backdrop-blur-md rounded-[2rem] overflow-hidden">
            <CardHeader>
              <CardTitle>Billing Details</CardTitle>
              <CardDescription>Please enter your details to complete the purchase.</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="space-y-2">
                <label className="text-sm font-bold text-foreground">Phone Number</label>
                <input 
                  type="tel" 
                  value={phone}
                  onChange={(e) => setPhone(e.target.value.replace(/[^0-9]/g, ''))}
                  maxLength={10}
                  placeholder="9876543210" 
                  className="w-full bg-background border border-border rounded-xl px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--cyan-ai)] focus:border-transparent transition-all"
                />
              </div>
              <div className="space-y-2">
                <label className="text-sm font-bold text-foreground">Billing Address</label>
                <textarea 
                  value={address}
                  onChange={(e) => setAddress(e.target.value)}
                  placeholder="Complete address (House No, Street, City, State, PIN)" 
                  rows={3}
                  className="w-full bg-background border border-border rounded-xl px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--cyan-ai)] focus:border-transparent transition-all resize-none"
                />
              </div>
            </CardContent>
          </Card>
        </div>

        {/* Order Summary */}
        <div className="space-y-6">
          <div className="hidden md:block">
            <h2 className="text-3xl font-black tracking-tight text-transparent select-none">Summary</h2>
          </div>
          <Card className="border-border bg-gradient-to-b from-secondary/30 to-background backdrop-blur-md rounded-[2rem] overflow-hidden relative shadow-xl shadow-[var(--cyan-ai-10)]">
            <CardHeader className="border-b border-border/50 bg-background/50">
              <CardTitle>Order Summary</CardTitle>
            </CardHeader>
            <CardContent className="pt-6 space-y-4">
              <div className="flex justify-between items-center font-medium">
                <span>PragatiVeer {tier.replace("_", " ")} Tier (1 Year)</span>
                <span>₹{amount.toLocaleString()}</span>
              </div>
              <div className="flex justify-between items-center text-sm text-muted-foreground">
                <span>GST (18% inclusive)</span>
                <span>-</span>
              </div>
              <div className="h-px w-full bg-border/50 my-4" />
              <div className="flex justify-between items-center text-xl font-black">
                <span>Total Amount</span>
                <span className="text-[var(--cyan-ai)]">₹{amount.toLocaleString()}</span>
              </div>
              
              {error && (
                <div className="p-3 bg-red-500/10 border border-red-500/20 rounded-xl text-red-500 text-sm font-medium text-center animate-in zoom-in mt-4">
                  {error}
                </div>
              )}
            </CardContent>
            <CardFooter className="flex-col gap-4 bg-background/50 pt-4">
              <Button 
                className="w-full rounded-xl h-14 font-bold text-lg bg-[var(--cyan-ai)] text-black hover:bg-[var(--cyan-ai-80)] transition-all shadow-[0_0_20px_-5px_var(--cyan-ai)]"
                onClick={handlePayment}
                disabled={processing}
              >
                {processing ? <Loader2 className="animate-spin mr-2" /> : <ShieldCheck className="mr-2" />}
                {processing ? "Processing..." : `Pay ₹${amount.toLocaleString()}`}
              </Button>
              <div className="flex items-center justify-center gap-2 text-xs text-muted-foreground w-full">
                <ShieldCheck size={14} /> Secured by Razorpay 256-bit encryption
              </div>
            </CardFooter>
          </Card>
        </div>

      </div>
    </div>
  )
}