'use client'

import { useEffect, useState, Suspense } from 'react'
import { useRouter, useSearchParams } from 'next/navigation'
import { CheckCircleIcon, SparklesIcon } from '@heroicons/react/24/outline'
import { useAuth } from '@/components/AuthProvider'

function BillingContent() {
  const router = useRouter()
  const searchParams = useSearchParams()
  const { user, loading } = useAuth()
  const [redirectTimer, setRedirectTimer] = useState(5)
  
  const isSuccess = searchParams.get('success') === 'true'

  useEffect(() => {
    // Redirect to login if not authenticated
    if (!loading && !user) {
      router.push('/auth/login')
      return
    }

    // If this is a success page, start countdown timer
    if (isSuccess && user) {
      const timer = setInterval(() => {
        setRedirectTimer(prev => {
          if (prev <= 1) {
            clearInterval(timer)
            router.push('/dashboard/billing')
            return 0
          }
          return prev - 1
        })
      }, 1000)

      return () => clearInterval(timer)
    } else if (user) {
      // If not a success page, redirect immediately to dashboard billing
      router.push('/dashboard/billing')
    }
  }, [user, loading, isSuccess, router])

  // Show loading while checking auth
  if (loading) {
    return (
      <div className="min-h-screen bg-gray-950 flex items-center justify-center">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-teal-500"></div>
      </div>
    )
  }

  // Show success message if this is a success redirect
  if (isSuccess && user) {
    return (
      <div className="min-h-screen bg-gray-950 relative overflow-hidden">
        {/* Background gradient */}
        <div className="absolute inset-0 bg-gradient-to-br from-teal-500/5 to-cyan-500/5"></div>
        
        {/* Grid pattern */}
        <div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZGVmcz48cGF0dGVybiBpZD0iZ3JpZCIgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIj48cGF0aCBkPSJNIDQwIDAgTCAwIDAgMCA0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMTlmOTYxIiBzdHJva2Utd2lkdGg9IjAuNSIgb3BhY2l0eT0iMC4xIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyaWQpIi8+PC9zdmc+')] opacity-30"></div>
        
        <div className="relative z-10 flex items-center justify-center min-h-screen px-4">
          <div className="text-center max-w-md">
            {/* Success icon */}
            <div className="mx-auto mb-8 w-24 h-24 bg-gradient-to-br from-emerald-500/20 to-teal-500/20 rounded-full flex items-center justify-center border border-emerald-500/30 backdrop-blur-sm">
              <CheckCircleIcon className="w-12 h-12 text-emerald-400" />
            </div>
            
            {/* Success message */}
            <h1 className="text-3xl font-bold text-white mb-4">
              🎉 Welcome to Premium!
            </h1>
            <p className="text-gray-300 mb-6 leading-relaxed">
              Your subscription has been activated successfully! You now have access to all premium features.
            </p>
            
            {/* Features highlight */}
            <div className="bg-gray-900/40 backdrop-blur-sm border border-gray-800/50 rounded-xl p-6 mb-8">
              <div className="flex items-center justify-center mb-4">
                <SparklesIcon className="w-6 h-6 text-teal-400 mr-2" />
                <span className="text-lg font-semibold text-white">Premium Features Unlocked</span>
              </div>
              <div className="space-y-2 text-sm text-gray-300">
                <div className="flex items-center">
                  <CheckCircleIcon className="w-4 h-4 text-emerald-400 mr-2 flex-shrink-0" />
                  <span>🧠 Smart AI writing assistance</span>
                </div>
                <div className="flex items-center">
                  <CheckCircleIcon className="w-4 h-4 text-emerald-400 mr-2 flex-shrink-0" />
                  <span>Unlimited AI conversations</span>
                </div>
                <div className="flex items-center">
                  <CheckCircleIcon className="w-4 h-4 text-emerald-400 mr-2 flex-shrink-0" />
                  <span>Priority support</span>
                </div>
              </div>
            </div>
            
            {/* Redirect timer */}
            <div className="text-gray-400 text-sm mb-6">
              Redirecting to your billing dashboard in {redirectTimer} seconds...
            </div>
            
            {/* Manual redirect button */}
            <button
              onClick={() => router.push('/dashboard/billing')}
              className="px-8 py-3 text-sm font-medium text-white bg-gradient-to-r from-teal-500 to-cyan-500 hover:from-teal-600 hover:to-cyan-600 rounded-xl transition-all duration-200 shadow-lg hover:shadow-xl"
            >
              Go to Billing Dashboard
            </button>
          </div>
        </div>
      </div>
    )
  }

  // Default case - redirect to dashboard billing (handled by useEffect)
  return (
    <div className="min-h-screen bg-gray-950 flex items-center justify-center">
      <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-teal-500"></div>
    </div>
  )
}

function BillingSkeleton() {
  return (
    <div className="min-h-screen bg-gray-950 flex items-center justify-center">
      <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-teal-500"></div>
    </div>
  )
}

export default function BillingPage() {
  return (
    <Suspense fallback={<BillingSkeleton />}>
      <BillingContent />
    </Suspense>
  )
}