import React from 'react';
import { Link } from 'react-router-dom';
import { FaArrowRight, FaCoins } from 'react-icons/fa';

interface CreditBalanceBannerProps {
  used: number;
  granted: number;
  /** Remaining balance; falls back to granted - used when absent. */
  balance?: number;
  historyTo?: string;
}

/**
 * Slim always-on credit indicator for the top of the dashboard: used / granted
 * with a usage bar and a link to the credit history. Always rendered — falls
 * back to "0 credits remaining" when the balance is empty or errored.
 *
 * @param {CreditBalanceBannerProps} props - Credit figures + history link.
 * @return {React.ReactElement} The banner.
 */
export function CreditBalanceBanner({
  used,
  granted,
  balance,
  historyTo = '/pricing#credit-history',
}: CreditBalanceBannerProps) {
  // Always rendered. With no allowance/balance it shows "0 credits remaining".
  const hasAllowance = granted > 0;
  const hasBalance = typeof balance === 'number';

  const safeUsed = Math.max(0, used);
  const remaining = hasBalance
    ? (balance as number)
    : Math.max(0, granted - safeUsed);
  const usageRatio = hasAllowance ? Math.min(1, safeUsed / granted) : 0;
  const remainingRatio = hasAllowance
    ? Math.min(1, Math.max(0, remaining / granted))
    : 1;

  const barClass =
    remainingRatio <= 0.2
      ? 'bg-gradient-to-r from-rose-500 to-red-400'
      : remainingRatio <= 0.5
        ? 'bg-gradient-to-r from-amber-500 to-yellow-400'
        : 'bg-gradient-to-r from-emerald-500 to-green-400';

  return (
    <div className="flex flex-wrap items-center gap-x-4 gap-y-2 rounded-2xl border border-gray-200 bg-white px-4 py-3">
      <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-amber-50 ring-1 ring-amber-100">
        <FaCoins className="h-4 w-4 text-amber-500" />
      </span>

      <div className="min-w-0 flex-1">
        {hasAllowance ? (
          <p className="text-sm font-medium text-gray-900">
            {safeUsed.toLocaleString()}{' '}
            <span className="text-gray-500">
              / {granted.toLocaleString()} credits used
            </span>
            <span className="ml-2 text-xs text-gray-500">
              · {remaining.toLocaleString()} remaining
            </span>
          </p>
        ) : (
          <p className="text-sm font-medium text-gray-900">
            {remaining.toLocaleString()}{' '}
            <span className="text-gray-500">credits remaining</span>
          </p>
        )}
        {hasAllowance && (
          <div className="mt-1.5 h-1 w-full max-w-md overflow-hidden rounded-full bg-gray-100">
            <div
              className={`h-full transition-all duration-700 ${barClass}`}
              style={{ width: `${Math.round(usageRatio * 100)}%` }}
            />
          </div>
        )}
      </div>

      <Link
        to={historyTo}
        className="group inline-flex shrink-0 items-center gap-1 rounded-full border border-gray-200 bg-white px-3 py-1.5 text-xs font-medium text-gray-600 transition-colors hover:border-[#B7007C]/30 hover:text-[#B7007C]"
      >
        Credit history
        <FaArrowRight className="h-3 w-3 transition-transform group-hover:translate-x-0.5" />
      </Link>
    </div>
  );
}