import { Sparkles } from "lucide-react";
import { useCredits } from "@/hooks/useCredits";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";

/** Small AI-credit pill shown beside the user avatar. */
export function CreditsBadge() {
  const { credits, isLoading } = useCredits();
  if (isLoading || !credits) {
    return (
      <div className="hidden h-9 items-center gap-1.5 rounded-full border bg-card/80 px-3 text-xs text-muted-foreground sm:inline-flex">
        <Sparkles className="h-3.5 w-3.5" /> …
      </div>
    );
  }
  const { balance, monthly_allowance } = credits;
  const pct = monthly_allowance > 0 ? balance / monthly_allowance : 0;
  const tone =
    pct < 0.1 ? "text-destructive" : pct < 0.25 ? "text-amber-600" : "text-foreground";
  return (
    <TooltipProvider delayDuration={150}>
      <Tooltip>
        <TooltipTrigger asChild>
          <div className="inline-flex h-9 items-center gap-1.5 rounded-full border bg-card/80 px-3 text-xs font-medium backdrop-blur-md">
            <Sparkles className="h-3.5 w-3.5 text-brand" />
            <span className={tone}>
              {balance}
              <span className="text-muted-foreground">/{monthly_allowance}</span>
            </span>
          </div>
        </TooltipTrigger>
        <TooltipContent side="bottom">
          <div className="text-xs">
            <div className="font-medium">AI credits — free tier</div>
            <div className="text-muted-foreground">
              {balance} of {monthly_allowance} left this month. Refills monthly.
            </div>
          </div>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}