"use client"
import { Card, CardContent } from "@/components/ui/card"
import { Zap } from "lucide-react"
import { useGetTopUpBalance } from "@/lib/react-query/hooks/topups"
import { Skeleton } from "@/components/ui/skeleton"
import { useTranslations } from "next-intl"

export function TopupBalanceCard() {
  const t = useTranslations("credits.balance")

  const { data: balance, isLoading, error } = useGetTopUpBalance()

  if (isLoading) {
    return (
      <Card className="border-2 border-primary/20">
        <CardContent className="p-6">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-4">
              <Skeleton className="w-14 h-14 rounded-xl" />
              <div className="space-y-2">
                <Skeleton className="h-4 w-32" />
                <Skeleton className="h-8 w-24" />
              </div>
            </div>
          </div>
        </CardContent>
      </Card>
    )
  }

  if (error) {
    return (
      <Card className="border-2 border-red-200">
        <CardContent className="p-6">
          <div className="flex items-center gap-4">
            <div className="w-14 h-14 rounded-xl bg-red-50 flex items-center justify-center">
              <Zap className="w-7 h-7 text-red-500" />
            </div>
            <div>
              <p className="text-sm text-gray-500">{t("availableCredits")}</p>
              <p className="text-gray-600 text-sm">{t("unableToLoad")}</p>
            </div>
          </div>
        </CardContent>
      </Card>
    )
  }

  return (
    <Card className="border-2 border-primary/20 bg-linear-to-br from-primary/5 to-transparent">
      <CardContent className="p-6">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-4">
            <div className="w-14 h-14 rounded-xl bg-primary/10 flex items-center justify-center">
              <Zap className="w-7 h-7 text-primary" />
            </div>
            <div>
              <p className="text-sm text-gray-500 font-medium">{t("availableCredits")}</p>
              <div className="flex items-baseline gap-2">
                <span className="text-4xl font-bold text-gray-900">
                  {balance?.totalCredits.toFixed(2) ?? 0}
                </span>
                <span className="text-lg text-gray-500">{t("credits")}</span>
              </div>
            </div>
          </div>

          <div className="hidden sm:block text-right">
            <p className="text-xs text-gray-400">{t("neverExpire")}</p>
          </div>
        </div>
      </CardContent>
    </Card>
  )
}