import React from "react";
import type { StatCardData } from "../scenarios/types";

interface StatCardsProps {
  stats: StatCardData[];
}

const COLOR_MAP: Record<
  NonNullable<StatCardData["color"]>,
  { card: string; text: string; badge: string }
> = {
  slate: {
    card: "border-slate-200 bg-slate-50/70",
    text: "text-slate-900",
    badge: "bg-slate-100 text-slate-700",
  },
  blue: {
    card: "border-blue-200 bg-blue-50/60",
    text: "text-blue-900",
    badge: "bg-blue-100 text-blue-700",
  },
  emerald: {
    card: "border-emerald-200 bg-emerald-50/60",
    text: "text-emerald-900",
    badge: "bg-emerald-100 text-emerald-700",
  },
  rose: {
    card: "border-rose-200 bg-rose-50/60",
    text: "text-rose-900",
    badge: "bg-rose-100 text-rose-700",
  },
  amber: {
    card: "border-amber-200 bg-amber-50/60",
    text: "text-amber-900",
    badge: "bg-amber-100 text-amber-700",
  },
  purple: {
    card: "border-purple-200 bg-purple-50/60",
    text: "text-purple-900",
    badge: "bg-purple-100 text-purple-700",
  },
};

export const StatCards: React.FC<StatCardsProps> = ({ stats }) => {
  if (!stats || stats.length === 0) return null;

  return (
    <div className="grid grid-cols-2 gap-3 lg:grid-cols-4">
      {stats.map((st) => {
        const colorStyle = COLOR_MAP[st.color ?? "slate"];

        return (
          <div
            key={st.id}
            className={`rounded-xl border p-3.5 shadow-xs transition-all ${colorStyle.card}`}
          >
            <div className="flex items-center justify-between text-xs">
              <span className="font-semibold text-slate-600 line-clamp-1">
                {st.label}
              </span>
              {st.delta && (
                <span
                  className={`rounded-md px-1.5 py-0.5 text-[11px] font-bold ${
                    st.delta.direction === "up"
                      ? "bg-emerald-100 text-emerald-800"
                      : st.delta.direction === "down"
                      ? "bg-rose-100 text-rose-800"
                      : "bg-slate-100 text-slate-700"
                  }`}
                >
                  {st.delta.direction === "up"
                    ? "↑ "
                    : st.delta.direction === "down"
                    ? "↓ "
                    : "• "}
                  {st.delta.value}
                </span>
              )}
            </div>

            <div className="mt-1.5 flex items-baseline gap-1">
              <span
                className={`text-xl font-bold font-mono tracking-tight ${colorStyle.text}`}
              >
                {st.value}
              </span>
              {st.unit && (
                <span className="text-xs font-medium text-slate-500">
                  {st.unit}
                </span>
              )}
            </div>

            {st.subtext && (
              <p className="mt-1 text-xs text-slate-500 line-clamp-1 font-medium">
                {st.subtext}
              </p>
            )}
          </div>
        );
      })}
    </div>
  );
};