"use client";

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@hexahost/ui";
import { useQuery } from "@tanstack/react-query";
import { useTranslations } from "next-intl";
import { getWallet } from "@/lib/api/billing";

export function BillingContent() {
  const t = useTranslations("account.billing");
  const { data, isLoading, isError } = useQuery({
    queryKey: ["wallet"],
    queryFn: getWallet,
  });

  if (isLoading) {
    return <p className="text-sm text-zinc-600 dark:text-zinc-400">{t("loading")}</p>;
  }

  if (isError || !data) {
    return <p className="text-sm text-red-600 dark:text-red-400">{t("loadError")}</p>;
  }

  const transactions = data.transactions ?? [];

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-semibold tracking-tight text-zinc-900 dark:text-zinc-50">
          {t("title")}
        </h1>
        <p className="mt-1 text-sm text-zinc-600 dark:text-zinc-400">{t("subtitle")}</p>
      </div>

      <Card>
        <CardHeader>
          <CardTitle>{t("balanceTitle")}</CardTitle>
          <CardDescription>
            {t("periodStart", {
              date: new Date(data.periodStart).toLocaleDateString(),
            })}
          </CardDescription>
        </CardHeader>
        <CardContent>
          <p className="font-mono text-3xl font-semibold text-zinc-900 dark:text-zinc-50">
            {data.balance}
          </p>
          <p className="mt-1 text-sm text-zinc-600 dark:text-zinc-400">{t("creditsLabel")}</p>
        </CardContent>
      </Card>

      <section>
        <h2 className="mb-4 text-lg font-medium text-zinc-900 dark:text-zinc-50">
          {t("transactionsTitle")}
        </h2>
        {transactions.length === 0 ? (
          <p className="text-sm text-zinc-600 dark:text-zinc-400">{t("transactionsEmpty")}</p>
        ) : (
          <div className="overflow-x-auto rounded-lg border border-zinc-200 dark:border-zinc-800">
            <table className="min-w-full text-left text-sm">
              <thead className="border-b border-zinc-200 bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900">
                <tr>
                  <th className="px-4 py-3 font-medium">{t("columns.date")}</th>
                  <th className="px-4 py-3 font-medium">{t("columns.type")}</th>
                  <th className="px-4 py-3 font-medium">{t("columns.amount")}</th>
                  <th className="px-4 py-3 font-medium">{t("columns.reference")}</th>
                </tr>
              </thead>
              <tbody>
                {transactions.map((tx) => (
                  <tr
                    key={tx.id}
                    className="border-b border-zinc-100 last:border-0 dark:border-zinc-800"
                  >
                    <td className="px-4 py-3 font-mono text-xs">
                      {new Date(tx.createdAt).toLocaleString()}
                    </td>
                    <td className="px-4 py-3 font-mono text-xs">{tx.type}</td>
                    <td className="px-4 py-3 font-mono">{tx.amount}</td>
                    <td className="px-4 py-3 font-mono text-xs">
                      {tx.referenceType ?? "—"}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </section>
    </div>
  );
}