"use client"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { useGetUserTopUpTransactions } from "@/lib/react-query/hooks/topups"
import { TopupTransactionsSkeleton } from "./SubscriptionSkeleton"
import { format } from "date-fns"
import { CreditCard, CheckCircle, XCircle } from "lucide-react"
import type { UserTopupTransaction } from "@/types/topups"
import { formatCurrency } from "@/lib/utils"
import { useTranslations } from "next-intl"

export function TopupTransactionsTable() {
  const t = useTranslations("credits.transactions")

  const { data: transactions, isLoading, error } = useGetUserTopUpTransactions()

  if (isLoading) {
    return <TopupTransactionsSkeleton />
  }

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

  if (!transactions || transactions.length === 0) {
    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("noTransactions.title")}</h3>
            <p className="text-gray-600">
              {t("noTransactions.description")}
            </p>
          </div>
        </CardContent>
      </Card>
    )
  }

  return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <CreditCard className="w-5 h-5" />
          {t("title")}
        </CardTitle>
      </CardHeader>
      <CardContent>
        <div className="overflow-x-auto">
          <div className="max-h-96 overflow-y-auto">
            <Table>
              <TableHeader className="sticky top-0 bg-white z-10">
                <TableRow>
                  <TableHead>{t("transactionId")}</TableHead>
                  <TableHead>{t("creditsPurchased")}</TableHead>
                  <TableHead>{t("amount")}</TableHead>
                  <TableHead>{t("status")}</TableHead>
                  <TableHead>{t("purchaseDate")}</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {transactions.map((transaction) => (
                  <TableRow key={transaction._id}>
                    <TableCell className="font-mono text-sm">
                      {transaction._id.slice(-8).toUpperCase()}
                    </TableCell>
                    <TableCell>
                      <span className="font-semibold text-primary">
                        {transaction.credits}
                      </span>
                    </TableCell>
                    <TableCell className="font-medium">
                      {transaction.amountPaid ? formatCurrency(+transaction.amountPaid) : "N/A"}
                    </TableCell>
                    <TableCell>
                      <Badge
                        variant={transaction.isActive ? "default" : "secondary"}
                        className={transaction.isActive ? "bg-green-100 text-green-800" : ""}
                      >
                        {transaction.isActive ? (
                          <div className="flex items-center gap-1">
                            <CheckCircle className="w-3 h-3" />
                            {t("active")}
                          </div>
                        ) : (
                          t("inactive")
                        )}
                      </Badge>
                    </TableCell>
                    <TableCell className="text-sm text-gray-500">
                      {format(new Date(transaction.createdAt), "MMM d, yyyy")}
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </div>
        </div>
      </CardContent>
    </Card>
  )
}