"use client"

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { CheckCircle, Lock } from "lucide-react"
import { useRouter } from "next/navigation"
import { useState } from "react"
import { toast } from "@/hooks/use-toast"

interface SubscriptionPromptProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  feature: 'claim' | 'edit' | 'reply'
  facilityName?: string
}

export function SubscriptionPrompt({
  open,
  onOpenChange,
  feature,
  facilityName,
}: SubscriptionPromptProps) {
  const router = useRouter()
  const [isLoading, setIsLoading] = useState(false)

  const getFeatureText = () => {
    switch (feature) {
      case 'claim':
        return 'claim facilities'
      case 'edit':
        return 'edit facility details'
      case 'reply':
        return 'reply to reviews'
      default:
        return 'access this feature'
    }
  }

  const getTitle = () => {
    if (feature === 'claim' && facilityName) {
      return `Subscribe to Claim ${facilityName}`
    }
    return 'Subscription Required'
  }

  const handleSubscribe = async () => {
    try {
      setIsLoading(true)
      
      // Store the current page URL to redirect back after subscription
      const currentUrl = window.location.href
      if (currentUrl.includes('/facilities/claim/')) {
        // Save the facility details page URL for redirect after subscription
        sessionStorage.setItem('post_subscription_redirect', currentUrl)
      }
      
      // Create checkout session
      const response = await fetch('/api/subscription/create-checkout', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${localStorage.getItem('geezer_guide_token')}`,
        },
        body: JSON.stringify({
          successUrl: `${window.location.origin}/facility-owner/subscription?success=true`,
          cancelUrl: window.location.href,
        }),
      })

      const data = await response.json()

      if (data.success && data.data.url) {
        // Redirect to Stripe Checkout
        window.location.href = data.data.url
      } else {
        toast({
          title: "Error",
          description: data.message || "Failed to create checkout session",
          variant: "destructive",
        })
        setIsLoading(false)
      }
    } catch (error) {
      console.error('Error creating checkout session:', error)
      toast({
        title: "Error",
        description: "Failed to start subscription process",
        variant: "destructive",
      })
      setIsLoading(false)
    }
  }

  const handleLearnMore = () => {
    router.push('/facility-owner/subscription')
    onOpenChange(false)
  }

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-[500px]">
        <DialogHeader>
          <div className="flex items-center gap-3 mb-2">
            <div className="h-12 w-12 rounded-full bg-blue-100 flex items-center justify-center">
              <Lock className="h-6 w-6 text-[#3F5CEA]" />
            </div>
            <DialogTitle className="text-2xl">{getTitle()}</DialogTitle>
          </div>
          <DialogDescription className="text-base">
            Subscribe to unlock full facility management features and {getFeatureText()}.
          </DialogDescription>
        </DialogHeader>

        <div className="space-y-4 py-4">
          {/* Pricing */}
          <div className="bg-gradient-to-r from-blue-50 to-purple-50 rounded-lg p-6 border border-blue-100">
            <div className="text-center">
              <div className="text-4xl font-bold text-[#3F5CEA] mb-1">$19.99</div>
              <div className="text-gray-600">per month</div>
            </div>
          </div>

          {/* Features */}
          <div className="space-y-3">
            <h4 className="font-semibold text-gray-900">What's Included:</h4>
            <div className="space-y-2">
              {[
                'Claim unlimited facilities',
                'Edit and update facility details',
                'Reply to all reviews',
                'Access facility analytics',
                'Priority support',
              ].map((feature, index) => (
                <div key={index} className="flex items-start gap-2">
                  <CheckCircle className="h-5 w-5 text-green-600 flex-shrink-0 mt-0.5" />
                  <span className="text-sm text-gray-700">{feature}</span>
                </div>
              ))}
            </div>
          </div>

          {/* Note */}
          <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-3">
            <p className="text-sm text-yellow-800">
              <strong>Note:</strong> Cancel anytime. No long-term commitment required.
            </p>
          </div>
        </div>

        <DialogFooter className="flex-col sm:flex-row gap-2">
          <Button
            variant="outline"
            onClick={handleLearnMore}
            disabled={isLoading}
            className="w-full sm:w-auto"
          >
            Learn More
          </Button>
          <Button
            onClick={handleSubscribe}
            disabled={isLoading}
            className="w-full sm:w-auto bg-[#3F5CEA] hover:bg-[#3F5CEA]/90"
          >
            {isLoading ? 'Loading...' : 'Subscribe Now'}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}