"use client";

import { cn } from "@/lib/utils";

type MarketingKpiCardProps = {
  title: string;
  value: string;
  hint?: string;
  className?: string;
  accent?: "indigo" | "teal" | "amber" | "rose" | "slate";
};

const accentMap = {
  indigo: "text-indigo-600",
  teal: "text-emerald-600",
  amber: "text-orange-600",
  rose: "text-rose-600",
  slate: "text-[#1d1d39]",
};

export function MarketingKpiCard({
  title,
  value,
  hint,
  className,
  accent = "slate",
}: MarketingKpiCardProps) {
  const hintId = hint ? `${title.replace(/\s+/g, "-").toLowerCase()}-hint` : undefined;

  return (
    <article
      aria-label={`${title}: ${value}`}
      aria-describedby={hintId}
      className={cn(
        "relative flex h-full min-h-[7rem] flex-col rounded-3xl border border-white/50 bg-white/40 p-4 backdrop-blur-xl transition-all duration-300 hover:-translate-y-0.5 motion-reduce:transition-none motion-reduce:hover:translate-y-0",
        className,
      )}
    >
      <span className="font-['Lexend_Deca'] text-xs font-bold uppercase tracking-wide text-gray-500">
        {title}
      </span>
      <span
        className={cn(
          "mt-auto pt-3 font-['Lexend'] text-2xl font-bold leading-none tracking-tight tabular-nums",
          accentMap[accent],
        )}
      >
        {value}
      </span>
      {hint ? (
        <p
          id={hintId}
          className="mt-2 font-['Lexend_Deca'] text-xs leading-relaxed text-gray-500"
        >
          {hint}
        </p>
      ) : null}
    </article>
  );
}

export function formatMarketingCurrency(value: number): string {
  return new Intl.NumberFormat("en-US", {
    style: "currency",
    currency: "USD",
    minimumFractionDigits: 2,
    maximumFractionDigits: 2,
  }).format(value);
}

export function formatMarketingPercent(value: number | null): string {
  if (value == null) return "—";
  return `${Math.round(value * 10) / 10}%`;
}

export function formatMarketingCount(value: number): string {
  return new Intl.NumberFormat("en-US").format(value);
}

export function formatMarketingRatio(value: number | null): string {
  if (value == null) return "—";
  return formatMarketingCurrency(value);
}