"use client";

import type * as React from "react";
import { cn } from "@/lib/utils";

type BdrMetricsKpiCardProps = {
  title: string;
  ratio: number | null;
  numerator: number;
  denominator: number;
  description: string;
  className?: string;
  accentColor?: "indigo" | "teal" | "amber";
  children?: React.ReactNode;
};

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

export function BdrMetricsKpiCard({
  title,
  ratio,
  numerator,
  denominator,
  description,
  className,
  accentColor = "indigo",
  children,
}: BdrMetricsKpiCardProps) {
  const colorMap = {
    indigo: {
      textAccent: "text-indigo-600",
      bgHover: "group-hover:bg-indigo-500/5",
    },
    teal: {
      textAccent: "text-emerald-600",
      bgHover: "group-hover:bg-teal-500/5",
    },
    amber: {
      textAccent: "text-orange-600",
      bgHover: "group-hover:bg-amber-500/5",
    },
  };

  const activeColor = colorMap[accentColor];

  return (
    <article
      className={cn(
        "relative flex h-full min-h-[7.5rem] flex-col rounded-3xl border border-white/50 bg-white/40 p-4 backdrop-blur-xl transition-all duration-300 hover:-translate-y-1 group overflow-hidden",
        className
      )}
    >
      <div
        className={cn(
          "absolute inset-0 -z-10 transition-colors duration-500 bg-transparent",
          activeColor.bgHover
        )}
      />

      <span className="font-['Lexend_Deca'] text-[9px] font-bold uppercase leading-snug tracking-[0.1em] text-gray-500">
        {title}
      </span>

      <div className="mt-auto flex min-w-0 flex-col pt-3">
        <span className="font-['Lexend'] text-2xl font-bold leading-none tracking-tight text-[#1d1d39] transition-colors duration-300 group-hover:text-black">
          {formatRatio(ratio)}
        </span>
        <div className="mt-1 flex flex-wrap items-baseline gap-x-1 gap-y-0 font-['Lexend_Deca'] text-[11px] font-semibold text-gray-600 tabular-nums">
          <span className={cn("text-[13px] font-bold", activeColor.textAccent)}>
            {numerator}
          </span>
          <span className="font-normal text-gray-400">/</span>
          <span className="text-[12px]">{denominator}</span>
          <span className="text-[10px] font-normal text-gray-400">leads</span>
        </div>
      </div>

      {description ? (
        <p className="mt-2 font-['Lexend_Deca'] text-[11px] leading-relaxed text-gray-500 group-hover:text-gray-600 transition-colors duration-300">
          {description}
        </p>
      ) : null}
      {children}
    </article>
  );
}