"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { EnvironmentBadge } from "./environment-badge"
import { CheckCircle, XCircle, AlertCircle, CreditCard, Calendar, DollarSign } from "lucide-react"
import { format } from "date-fns"
import { useRouter } from "next/navigation"
import { useState } from "react"
import { useToast } from "@/components/ui/toast"

interface SubscriptionStatusProps {
  status: 'active' | 'inactive' | 'cancelled' | 'past_due'
  environment: 'sandbox' | 'production'
  currentPeriodStart?: Date
  currentPeriodEnd?: Date
  cancelAtPeriodEnd: boolean
  onManageClick?: () => void
  onSubscribeClick?: () => void
}

export function SubscriptionStatus({
  status,
  environment,
  currentPeriodStart,
  currentPeriodEnd,
  cancelAtPeriodEnd,
  onManageClick,
  onSubscribeClick,
}: SubscriptionStatusProps) {
  const router = useRouter()
  const toast = useToast()
  const [isLoading, setIsLoading] = useState(false)

  const isActive = status === 'active'
  const isPastDue = status === 'past_due'
  const isCancelled = status === 'cancelled'
  const isInactive = status === 'inactive'

  const getStatusIcon = () => {
    if (isActive) return <CheckCircle className="h-5 w-5 text-green-600" />
    if (isPastDue) return <AlertCircle className="h-5 w-5 text-orange-600" />
    if (isCancelled) return <XCircle className="h-5 w-5 text-red-600" />
    return <XCircle className="h-5 w-5 text-gray-400" />
  }

  const getStatusBadge = () => {
    if (isActive && cancelAtPeriodEnd) {
      return <Badge variant="outline" className="bg-orange-50 text-orange-700 border-orange-300">Cancelling Soon</Badge>
    }
    if (isActive) return <Badge className="bg-green-100 text-green-800 border-green-300">Active</Badge>
    if (isPastDue) return <Badge variant="destructive">Payment Failed</Badge>
    if (isCancelled) return <Badge variant="outline" className="bg-red-50 text-red-700 border-red-300">Cancelled</Badge>
    return <Badge variant="secondary">Inactive</Badge>
  }

  const getStatusMessage = () => {
    if (isActive && cancelAtPeriodEnd) {
      return "Your subscription will cancel at the end of the current billing period."
    }
    if (isActive) {
      return "Your subscription is active and you have full access to all facility management features."
    }
    if (isPastDue) {
      return "Your payment failed. Please update your payment method to continue your subscription."
    }
    if (isCancelled) {
      return "Your subscription has been cancelled. Resubscribe to manage facilities."
    }
    return "Subscribe now to claim and manage facilities."
  }

  const handleManageSubscription = async () => {
    if (onManageClick) {
      onManageClick()
      return
    }

    try {
      setIsLoading(true)
      const response = await fetch('/api/subscription/portal', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${localStorage.getItem('geezer_guide_token')}`,
        },
        body: JSON.stringify({
          returnUrl: window.location.href,
        }),
      })

      const data = await response.json()

      if (data.success && data.data.url) {
        window.location.href = data.data.url
      } else {
        console.error('Portal error:', data)
        toast.error(data.message || "Failed to open subscription portal", { 
          title: "Error",
          duration: 5000
        })
      }
    } catch (error) {
      console.error('Error opening subscription portal:', error)
      toast.error("Failed to open subscription portal. Please try again.", { 
        title: "Error",
        duration: 5000
      })
    } finally {
      setIsLoading(false)
    }
  }

  const handleSubscribe = async () => {
    if (onSubscribeClick) {
      onSubscribeClick()
      return
    }

    try {
      setIsLoading(true)
      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.origin}/facility-owner/subscription?cancelled=true`,
        }),
      })

      const data = await response.json()

      if (data.success && data.data.url) {
        // Redirect to Stripe Checkout
        window.location.href = data.data.url
      } else {
        console.error('Checkout error:', data)
        toast.error(data.message || "Failed to create checkout session", { 
          title: "Error",
          duration: 5000
        })
      }
    } catch (error) {
      console.error('Error creating checkout session:', error)
      toast.error("Failed to create checkout session. Please try again.", { 
        title: "Error",
        duration: 5000
      })
    } finally {
      setIsLoading(false)
    }
  }

  return (
    <Card className="w-full">
      <CardHeader>
        <div className="flex items-start justify-between">
          <div className="flex items-center gap-3">
            {getStatusIcon()}
            <div>
              <CardTitle className="text-xl">Subscription Status</CardTitle>
              <CardDescription>Manage your facility management subscription</CardDescription>
            </div>
          </div>
          <div className="flex items-center gap-2">
            {getStatusBadge()}
            <EnvironmentBadge environment={environment} />
          </div>
        </div>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="text-sm text-gray-600">
          {getStatusMessage()}
        </div>

        {/* Price Display */}
        <div className="flex items-center gap-2 text-sm">
          <DollarSign className="h-4 w-4 text-gray-500" />
          <span className="font-semibold">$19.99/month</span>
        </div>

        {/* Billing Dates */}
        {isActive && currentPeriodStart && currentPeriodEnd && (
          <div className="space-y-2 border-t pt-4">
            <div className="flex items-center justify-between text-sm">
              <span className="text-gray-600 flex items-center gap-2">
                <Calendar className="h-4 w-4" />
                Current Period Start
              </span>
              <span className="font-medium">
                {format(new Date(currentPeriodStart), 'MMM dd, yyyy')}
              </span>
            </div>
            <div className="flex items-center justify-between text-sm">
              <span className="text-gray-600 flex items-center gap-2">
                <Calendar className="h-4 w-4" />
                Next Billing Date
              </span>
              <span className="font-medium">
                {format(new Date(currentPeriodEnd), 'MMM dd, yyyy')}
              </span>
            </div>
          </div>
        )}

        {/* Action Buttons */}
        <div className="flex gap-3 pt-4 border-t">
          {isActive || isPastDue ? (
            <Button
              onClick={handleManageSubscription}
              disabled={isLoading}
              variant="outline"
              className="flex-1"
            >
              <CreditCard className="h-4 w-4 mr-2" />
              {isLoading ? 'Loading...' : 'Manage Subscription'}
            </Button>
          ) : (
            <Button
              onClick={handleSubscribe}
              disabled={isLoading}
              className="flex-1 bg-[#3F5CEA] hover:bg-[#3F5CEA]/90"
            >
              {isLoading ? 'Creating checkout...' : 'Subscribe for $19.99/month'}
            </Button>
          )}
        </div>

        {/* Warning for past due */}
        {isPastDue && (
          <div className="bg-orange-50 border border-orange-200 rounded-lg p-4">
            <p className="text-sm text-orange-800 font-medium">
              ⚠️ Please update your payment method to avoid service interruption.
            </p>
          </div>
        )}

        {/* Warning for cancellation */}
        {cancelAtPeriodEnd && currentPeriodEnd && (
          <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
            <p className="text-sm text-yellow-800">
              Your subscription will end on {format(new Date(currentPeriodEnd), 'MMMM dd, yyyy')}.
              You can reactivate it anytime before then.
            </p>
          </div>
        )}
      </CardContent>
    </Card>
  )
}