"use client"

import { useEffect, useState } from "react"
import { useSearchParams } from "next/navigation"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { SubscriptionStatus } from "@/components/subscription/subscription-status"
import { useSubscription } from "@/hooks/use-subscription"
import { useToast } from "@/components/ui/toast"
import { Loader2, Building, Clock } from "lucide-react"
import Link from "next/link"
import { formatLocationDisplay } from "@/lib/location-utils"

export default function SubscriptionPage() {
  const searchParams = useSearchParams()
  const toast = useToast()
  const success = searchParams?.get('success')
  const {
    subscriptionStatus,
    isLoading,
    error,
    refresh,
    grandfatheredFacilitiesDetails,
  } = useSubscription()

  const [hasShownSuccessToast, setHasShownSuccessToast] = useState(false)
  const [hasShownActivationToast, setHasShownActivationToast] = useState(false)
  const [retryCount, setRetryCount] = useState(0)
  const MAX_RETRIES = 10 // Try for up to 15 seconds

  // Show success toast after successful payment and wait for webhook
  useEffect(() => {
    if (success === 'true' && !hasShownSuccessToast) {
      toast.success("Processing your subscription... Please wait.", { title: "Payment Successful!" })
      setHasShownSuccessToast(true)
      
      // Refresh subscription status immediately
      refresh()
    }
  }, [success, hasShownSuccessToast, refresh, toast])

  // Poll for activation and show activation toast only once
  useEffect(() => {
    if (success !== 'true' || !hasShownSuccessToast) return

    if (subscriptionStatus?.isActive && !hasShownActivationToast) {
      console.log('✅ Subscription is now active!')
      setHasShownActivationToast(true)

      toast.success("Your subscription is now active. You can now claim and manage facilities.", { 
        title: "Subscription Activated!",
        duration: 5000
      })

      // Redirect back to saved URL if present
      const redirectUrl = sessionStorage.getItem('post_subscription_redirect')
      if (redirectUrl) {
        console.log('Redirecting back to:', redirectUrl)
        sessionStorage.removeItem('post_subscription_redirect')
        setTimeout(() => {
          window.location.href = redirectUrl
        }, 1500)
      }
      return
    }

    // Poll until active or max attempts
    if (!subscriptionStatus?.isActive && !isLoading && retryCount < MAX_RETRIES) {
      console.log(`Waiting for subscription activation... (attempt ${retryCount + 1}/${MAX_RETRIES})`)
      const timer = setTimeout(() => {
        setRetryCount(prev => prev + 1)
        refresh()
      }, 1500)
      return () => clearTimeout(timer)
    }
  }, [success, hasShownSuccessToast, hasShownActivationToast, subscriptionStatus?.isActive, retryCount, isLoading, refresh, toast])

  if (isLoading) {
    return (
      <div className="flex items-center justify-center min-h-[500px]">
        <div className="text-center">
          <Loader2 className="h-10 w-10 animate-spin mx-auto mb-4 text-[#3F5CEA]" />
          <p className="text-sm text-gray-600 font-medium">Loading subscription...</p>
        </div>
      </div>
    )
  }

  if (error) {
    return (
      <div className="container mx-auto py-8 px-4 max-w-4xl">
        <div className="bg-red-50 border border-red-200 rounded-lg p-6 text-center">
          <p className="text-red-800 font-medium">Error loading subscription: {error}</p>
          <Button onClick={refresh} className="mt-4">
            Try Again
          </Button>
        </div>
      </div>
    )
  }

  if (!subscriptionStatus) {
    return (
      <div className="container mx-auto py-8 px-4 max-w-4xl">
        <div className="bg-gray-50 border border-gray-200 rounded-lg p-6 text-center">
          <p className="text-gray-800 font-medium">No subscription information found.</p>
        </div>
      </div>
    )
  }

  return (
    <div className="container mx-auto py-8 px-4 max-w-5xl space-y-8">
      {/* Page Header */}
      <div>
        <h1 className="text-3xl font-bold text-gray-900 mb-2">Subscription Management</h1>
        <p className="text-gray-600">
          Manage your facility management subscription and billing
        </p>
      </div>

      {/* Subscription Status Card */}
      <SubscriptionStatus
        status={subscriptionStatus.status}
        environment={subscriptionStatus.environment}
        currentPeriodStart={subscriptionStatus.currentPeriodStart}
        currentPeriodEnd={subscriptionStatus.currentPeriodEnd}
        cancelAtPeriodEnd={subscriptionStatus.cancelAtPeriodEnd}
      />

      {/* Grandfathered Facilities */}
      {grandfatheredFacilitiesDetails && grandfatheredFacilitiesDetails.length > 0 && (
        <Card>
          <CardHeader>
            <div className="flex items-center gap-2">
              <Clock className="h-5 w-5 text-blue-600" />
              <CardTitle>Grandfathered Facilities</CardTitle>
            </div>
            <CardDescription>
              These facilities were claimed before the subscription requirement. You can continue to manage them
              regardless of your subscription status.
            </CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-3">
              {grandfatheredFacilitiesDetails.map((facility) => (
                <div
                  key={facility._id}
                  className="flex items-center justify-between p-4 bg-blue-50 border border-blue-200 rounded-lg"
                >
                  <div className="flex items-center gap-3">
                    <Building className="h-5 w-5 text-blue-600" />
                    <div>
                      <h4 className="font-semibold text-gray-900">{facility.name}</h4>
                      <p className="text-sm text-gray-600">
                        {formatLocationDisplay(facility)}
                      </p>
                    </div>
                  </div>
                  <Link href={`/facility/${facility.slug}`}>
                    <Button variant="outline" size="sm">
                      View Facility
                    </Button>
                  </Link>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>
      )}

      {/* What's Included */}
      <Card>
        <CardHeader>
          <CardTitle>What's Included</CardTitle>
          <CardDescription>
            Your subscription includes all the features you need to manage facilities
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            {[
              {
                title: "Unlimited Facility Claims",
                description: "Claim as many facilities as you own or manage",
              },
              {
                title: "Full Facility Editing",
                description: "Update facility details, photos, and information anytime",
              },
              {
                title: "Review Management",
                description: "Reply to all reviews on your facilities",
              },
              {
                title: "Analytics Dashboard",
                description: "Track views, inquiries, and performance metrics",
              },
              {
                title: "Priority Support",
                description: "Get help when you need it from our support team",
              },
              {
                title: "No Long-term Contract",
                description: "Cancel anytime, no questions asked",
              },
            ].map((feature, index) => (
              <div key={index} className="flex gap-3 p-4 bg-gray-50 rounded-lg">
                <div className="h-2 w-2 bg-green-500 rounded-full mt-2 flex-shrink-0" />
                <div>
                  <h4 className="font-semibold text-gray-900 mb-1">{feature.title}</h4>
                  <p className="text-sm text-gray-600">{feature.description}</p>
                </div>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>

      {/* Help Section */}
      <Card className="bg-gradient-to-r from-blue-50 to-purple-50 border-blue-200">
        <CardHeader>
          <CardTitle>Need Help?</CardTitle>
          <CardDescription>
            We're here to assist you with any subscription questions
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-3">
          <p className="text-sm text-gray-700">
            If you have questions about your subscription, billing, or need help managing your facilities,
            please don't hesitate to reach out to our support team.
          </p>
          <div className="flex gap-3">
            <Link href="/help">
              <Button variant="outline">
                Visit Help Center
              </Button>
            </Link>
            <Link href="/contact-success">
              <Button variant="outline">
                Contact Support
              </Button>
            </Link>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}