export type PerformanceAnalyticsStatCardItem = {
  label: string;
  value: string;
  cardClassName: string;
};

export const formatCompactAnalyticsNumber = (value: number) => {
  const absoluteValue = Math.abs(value);

  if (absoluteValue >= 100000) {
    const compactValue = value / 1000000;
    return `${Number(compactValue.toFixed(compactValue >= 1 ? 1 : 2))}M`;
  }

  if (absoluteValue >= 1000) {
    const compactValue = value / 1000;
    return `${Number(compactValue.toFixed(compactValue >= 10 ? 0 : 1))}K`;
  }

  return value.toLocaleString();
};

type PerformanceAnalyticsStatCardProps = PerformanceAnalyticsStatCardItem;

type PerformanceAnalyticsStatCardTotals = {
  totalLikes: number;
  totalComments: number;
  totalValidClicks: number;
  totalNetRevenue: number;
};

export const getPerformanceAnalyticsStatCards = ({
  totalLikes,
  totalComments,
  totalValidClicks,
  totalNetRevenue,
}: PerformanceAnalyticsStatCardTotals): PerformanceAnalyticsStatCardItem[] => [
  {
    label: "Total Likes",
    value: formatCompactAnalyticsNumber(totalLikes),
    cardClassName: "bg-color-red-light",
  },
  {
    label: "Total Comments",
    value: formatCompactAnalyticsNumber(totalComments),
    cardClassName: "bg-color-yellow-light",
  },
  {
    label: "Valid Clicks",
    value: formatCompactAnalyticsNumber(totalValidClicks),
    cardClassName: "bg-color-purple-light",
  },
  {
    label: "Net Revenue",
    value: `$${totalNetRevenue.toFixed(2)}`,
    cardClassName: "bg-color-green-light",
  },
];

export default function PerformanceAnalyticsStatCard({
  label,
  value,
  cardClassName,
}: PerformanceAnalyticsStatCardProps) {
  return (
    <div className="col-md-3 col-6 d-lg-flex align-items-stretch">
      <div className={`card shadow-none border rounded-4 w-100 p-0 m-0 ${cardClassName}`}>
        <div className="card-body p-3">
          <h5 className="text-md color-content fw-normal mb-1">{label}</h5>
          <h3 className="text-xl fw-600 m-0">{value}</h3>
        </div>
      </div>
    </div>
  );
}