"use client";

import { useMutation } from "convex/react";
import { useAuthQuery } from "@/hooks/use-auth-query";
import { useTranslations } from "next-intl";
import { api } from "@/convex/_generated/api";
import { Coins } from "lucide-react";
import { toast } from "@/lib/toast";

const showTestCreditGrant =
  typeof process.env.NEXT_PUBLIC_ALLOW_TEST_CREDIT_GRANT === "string" &&
  process.env.NEXT_PUBLIC_ALLOW_TEST_CREDIT_GRANT === "true";

export function CreditDisplay() {
  const t = useTranslations('toasts');
  const balance = useAuthQuery(api.credits.getBalance);
  const grantTestCredits = useMutation(api.credits.grantTestCredits);

  if (balance === undefined) {
    return (
      <div className="flex items-center gap-2 rounded-lg bg-muted/50 px-3 py-1.5 animate-pulse">
        <Coins className="h-4 w-4 text-muted-foreground" />
        <div className="h-4 w-16 rounded bg-muted" />
      </div>
    );
  }

  const available = balance.balance - balance.reserved;

  const isLow = available < 10;
  const isEmpty = available <= 0;

  return (
    <div className="flex items-center gap-2">
      <div
        className={`flex items-center gap-2 rounded-lg px-3 py-1.5 transition-colors ${
          isEmpty
            ? "bg-destructive/10"
            : isLow
              ? "bg-amber-500/10"
              : "bg-muted/50"
        }`}
      >
        <Coins
          className={`h-4 w-4 ${
            isEmpty
              ? "text-destructive"
              : isLow
                ? "text-amber-500"
                : "text-muted-foreground"
          }`}
        />
        <span
          className={`text-sm font-medium tabular-nums ${
            isEmpty ? "text-destructive" : isLow ? "text-amber-500" : "text-foreground"
          }`}
        >
          {available.toLocaleString("de-DE")} Cr
        </span>
        {balance.reserved > 0 && (
          <span className="text-xs text-muted-foreground/70">
            ({balance.reserved} reserved)
          </span>
        )}
      </div>
      {showTestCreditGrant && (
        <button
          type="button"
          title="Testphase: +2000 Cr"
          className="rounded-md border border-dashed border-border px-2 py-1 text-[10px] font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
          onClick={() => {
            void grantTestCredits({ amount: 2000 })
              .then((r) => {
                toast.success(
                  t('billing.creditsAddedTitle'),
                  `${t('billing.creditsAddedDesc', { credits: 2000 })} — Stand: ${r.newBalance.toLocaleString("de-DE")}`,
                );
              })
              .catch((e: unknown) => {
                toast.error(
                  t('billing.testGrantFailedTitle'),
                  e instanceof Error ? e.message : undefined,
                );
              });
          }}
        >
          Test +2000
        </button>
      )}
    </div>
  );
}