"use client"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Check, Zap, Loader2 } from "lucide-react"
import { useGetSubscriptionPlans, useGetUserSubscription, useSubscribeToPlan } from "@/lib/react-query/hooks/subscriptions"
import { SubscriptionCardSkeleton } from "./SubscriptionSkeleton"
import type { SubscriptionPlan } from "@/types/subscriptions"
import { useTranslations } from "next-intl"

interface PlanCardProps {
  plan: SubscriptionPlan
  isCurrentPlan: boolean
  onSubscribe: (planId: string) => void
  isSubscribing: boolean
  subscribingPlanId: string | null
}

function PlanCard({ plan, isCurrentPlan, onSubscribe, isSubscribing, subscribingPlanId }: PlanCardProps) {
  const t = useTranslations("credits.plans")

  const isThisPlanSubscribing = subscribingPlanId === plan._id

  return (
    <Card className={`relative overflow-hidden transition-all ${isCurrentPlan ? 'border-2 border-primary ring-2 ring-primary/20' : 'hover:border-primary/50'}`}>
      {isCurrentPlan && (
        <div className="absolute top-0 right-0 bg-primary text-white text-xs px-3 py-1 rounded-bl-lg">
          {t("currentPlan")}
        </div>
      )}
      <CardHeader className="pb-2">
        <div className="space-y-1">
          <Badge variant="outline" className="w-fit">{plan.code}</Badge>
          <CardTitle className="text-xl">{plan.name}</CardTitle>
        </div>
      </CardHeader>
      <CardContent className="space-y-6">
        {/* Price */}
        <div className="flex items-baseline gap-1">
          <span className="text-4xl font-bold">${plan.price}</span>
          <span className="text-gray-500">/ {t("validForDays", { days: plan.validityDays })}</span>
        </div>

        {/* Features */}
        <ul className="space-y-3">
          <li className="flex items-center gap-3">
            <div className="w-5 h-5 rounded-full bg-green-100 flex items-center justify-center">
              <Check className="w-3 h-3 text-green-600" />
            </div>
            <span className="text-gray-700">
              <strong>{plan.credits}</strong> {t("creditsIncluded")}
            </span>
          </li>
          <li className="flex items-center gap-3">
            <div className="w-5 h-5 rounded-full bg-green-100 flex items-center justify-center">
              <Check className="w-3 h-3 text-green-600" />
            </div>
            <span className="text-gray-700">
              {t("validForDays", { days: plan.validityDays })}
            </span>
          </li>
          <li className="flex items-center gap-3">
            <div className="w-5 h-5 rounded-full bg-green-100 flex items-center justify-center">
              <Check className="w-3 h-3 text-green-600" />
            </div>
            <span className="text-gray-700">{t("aiAssistant")}</span>
          </li>
          <li className="flex items-center gap-3">
            <div className="w-5 h-5 rounded-full bg-green-100 flex items-center justify-center">
              <Check className="w-3 h-3 text-green-600" />
            </div>
            <span className="text-gray-700">{t("voiceSms")}</span>
          </li>
        </ul>

        {/* Subscribe Button */}
        <Button
          onClick={() => onSubscribe(plan._id)}
          disabled={isCurrentPlan || isSubscribing}
          className={`w-full ${isCurrentPlan ? 'bg-gray-100 text-gray-500' : 'bg-primary-gradient text-white'}`}
        >
          {isThisPlanSubscribing ? (
            <div className="flex items-center gap-2">
              <Loader2 className="w-4 h-4 animate-spin" />
              {t("subscribing")}
            </div>
          ) : isCurrentPlan ? (
            t("currentPlan")
          ) : (
            <div className="flex items-center gap-2">
              <Zap className="w-4 h-4" />
              {t("subscribeNow")}
            </div>
          )}
        </Button>
      </CardContent>
    </Card>
  )
}

export function PlansList() {
  const t = useTranslations("credits.plans")

  const { data: plans, isLoading: plansLoading } = useGetSubscriptionPlans()
  const { data: subscription } = useGetUserSubscription()
  const subscribeMutation = useSubscribeToPlan()

  const handleSubscribe = (planId: string) => {
    subscribeMutation.mutate({ planId })
  }

  if (plansLoading) {
    return (
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <SubscriptionCardSkeleton />
        <SubscriptionCardSkeleton />
        <SubscriptionCardSkeleton />
      </div>
    )
  }

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

  // Filter only active plans
  const activePlans = plans.filter(plan => plan.isActive)

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      {activePlans.map(plan => (
        <PlanCard
          key={plan._id}
          plan={plan}
          isCurrentPlan={subscription?.planId === plan._id}
          onSubscribe={handleSubscribe}
          isSubscribing={subscribeMutation.isPending}
          subscribingPlanId={subscribeMutation.isPending ? subscribeMutation.variables?.planId || null : null}
        />
      ))}
    </div>
  )
}