"use client"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Progress } from "@/components/ui/progress"
import { CreditCard, Calendar, Zap, Clock } from "lucide-react"
import { useGetUserSubscription } from "@/lib/react-query/hooks/subscriptions"
import { CurrentPlanSkeleton } from "./SubscriptionSkeleton"
import { format, differenceInDays } from "date-fns"
import { useTranslations } from "next-intl"

export function CurrentPlan() {
  const t = useTranslations("credits.currentPlan")

  const { data: subscription, isLoading, error } = useGetUserSubscription()

  if (isLoading) {
    return <CurrentPlanSkeleton />
  }

  if (error || !subscription) {
    return (
      <Card>
        <CardContent className="p-6">
          <div className="text-center py-8">
            <CreditCard className="w-12 h-12 text-gray-400 mx-auto mb-4" />
            <h3 className="text-lg font-medium text-gray-900 mb-2">{t("noActiveSubscription.title")}</h3>
            <p className="text-gray-600">
              {t("noActiveSubscription.description")}
            </p>
          </div>
        </CardContent>
      </Card>
    )
  }

  const usagePercentage = (subscription.usedCredits / subscription.totalCredits) * 100
  const daysRemaining = differenceInDays(new Date(subscription.endDate), new Date())
  const isExpiringSoon = daysRemaining <= 7 && daysRemaining > 0
  const isExpired = daysRemaining <= 0

  const getStatusBadge = () => {
    if (subscription.status === "ACTIVE" && !isExpired) {
      return <Badge className="bg-green-100 text-green-800">{t("active")}</Badge>
    }
    if (subscription.status === "EXPIRED" || isExpired) {
      return <Badge className="bg-red-100 text-red-800">{t("expired")}</Badge>
    }
    if (subscription.status === "CANCELLED") {
      return <Badge className="bg-gray-100 text-gray-800">{t("cancelled")}</Badge>
    }
    return <Badge className="bg-gray-100 text-gray-800">{subscription.status}</Badge>
  }

  return (
    <Card className="border-2 border-primary/20">
      <CardHeader className="pb-2">
        <div className="flex items-center justify-between">
          <CardTitle className="flex items-center gap-2 text-lg">
            <CreditCard className="w-5 h-5" />
            {t("title")}
          </CardTitle>
          {getStatusBadge()}
        </div>
      </CardHeader>
      <CardContent className="space-y-6">
        {/* Plan Name */}
        <div className="flex items-center justify-between">
          <div>
            <h3 className="text-2xl font-bold text-gray-900">{subscription.planCode}</h3>
            <p className="text-sm text-gray-500">
              Started {format(new Date(subscription.startDate), "MMM d, yyyy")}
            </p>
          </div>
        </div>

        {/* Credits Usage */}
        <div className="space-y-3">
          <div className="flex items-center justify-between text-sm">
            <span className="flex items-center gap-2 text-gray-600">
              <Zap className="w-4 h-4" />
              {t("creditsUsage")}
            </span>
            <span className="font-medium">
              {subscription.usedCredits} / {subscription.totalCredits} {t("used")}
            </span>
          </div>
          <Progress value={usagePercentage} className="h-2" />
          <div className="flex justify-between text-xs text-gray-500">
            <span>{subscription.remainingCredits} {t("remaining")}</span>
            <span>{Math.round(usagePercentage)}{t("percentUsed")}</span>
          </div>
        </div>

        {/* Stats Grid */}
        <div className="grid grid-cols-2 gap-4">
          <div className="bg-gray-50 rounded-lg p-4">
            <div className="flex items-center gap-2 text-gray-600 mb-1">
              <Zap className="w-4 h-4" />
              <span className="text-xs">Remaining</span>
            </div>
            <p className="text-2xl font-bold text-gray-900">{subscription.remainingCredits}</p>
            <p className="text-xs text-gray-500">crédits</p>
          </div>
          <div className={`rounded-lg p-4 ${isExpiringSoon ? 'bg-amber-50' : isExpired ? 'bg-red-50' : 'bg-gray-50'}`}>
            <div className="flex items-center gap-2 text-gray-600 mb-1">
              <Clock className="w-4 h-4" />
              <span className="text-xs">{t("expires")}</span>
            </div>
            <p className={`text-2xl font-bold ${isExpired ? 'text-red-600' : isExpiringSoon ? 'text-amber-600' : 'text-gray-900'}`}>
              {isExpired ? 'Expired' : `${daysRemaining}`}
            </p>
            <p className="text-xs text-gray-500">
              {isExpired ? format(new Date(subscription.endDate), "MMM d, yyyy") : t("daysLeft")}
            </p>
          </div>
        </div>

        {/* Validity Period */}
        <div className="flex items-center gap-2 text-sm text-gray-600 pt-2 border-t">
          <Calendar className="w-4 h-4" />
          <span>
            {t("validUntil")} {format(new Date(subscription.endDate), "MMMM d, yyyy")}
          </span>
        </div>
      </CardContent>
    </Card>
  )
}