import type { PlanInfo } from "../types/plan";
import { viralySsoUrl } from "../utils/sso";

interface Props {
  plan: PlanInfo;
}

export default function QuotaBar({ plan }: Props) {
  const pct = plan.channelsLimit > 0
    ? Math.min(Math.round((plan.channelsUsed / plan.channelsLimit) * 100), 100)
    : 0;

  const barColor = pct >= 100 ? "#ef4444" : pct >= 67 ? "#f59e0b" : "#25e2b8";
  const atLimit = plan.channelsUsed >= plan.channelsLimit;

  return (
    <div className="vr-bg-white vr-border vr-border-gray-200 vr-rounded-lg vr-p-5 vr-mb-5">
      <div className="vr-flex vr-justify-between vr-items-center vr-mb-3 vr-flex-wrap vr-gap-2">
        <span className="vr-text-sm vr-text-gray-700">
          <strong className="vr-font-bold">{plan.channelsUsed}</strong> of{" "}
          <strong className="vr-font-bold">{plan.channelsLimit}</strong> social profiles
          {plan.channelsLocked > 0 && (
            <span className="vr-text-gray-400 vr-text-xs vr-ml-1">
              ({plan.channelsLocked} locked)
            </span>
          )}
        </span>
        <span className="vr-text-xs vr-font-semibold vr-text-gray-400 vr-uppercase vr-tracking-wider vr-bg-gray-100 vr-px-3 vr-py-1 vr-rounded-full">
          {plan.plan} Plan
        </span>
      </div>

      {/* Progress bar */}
      <div className="vr-w-full vr-h-2 vr-bg-gray-100 vr-rounded-full vr-overflow-hidden">
        <div
          className="vr-h-full vr-rounded-full vr-transition-all vr-duration-500"
          style={{ width: `${pct}%`, backgroundColor: barColor }}
        />
      </div>

      {/* Upgrade prompt */}
      {atLimit && (
        <div className="vr-flex vr-items-center vr-justify-between vr-mt-4 vr-pt-4 vr-border-t vr-border-gray-100 vr-flex-wrap vr-gap-2">
          <span className="vr-text-xs vr-text-gray-500">
            You've reached your plan's profile limit.
          </span>
          <a
            href={viralySsoUrl("/settings/subscription")}
            target="_blank"
            className="vr-inline-flex vr-items-center vr-gap-1.5 vr-px-4 vr-py-2 vr-bg-primary-600 vr-text-white vr-rounded-md vr-text-xs vr-font-semibold hover:vr-bg-primary-700 vr-transition-colors"
          >
            <i className="fa-solid fa-bolt" style={{ fontSize: "10px" }} />
            Upgrade
          </a>
        </div>
      )}
    </div>
  );
}