/**
 * DashboardMultiStatCardMini
 *
 * A compact card that displays multiple stats vertically, styled to match
 * DashboardStatCardMini's typography and layout. Use for panels like
 * Operations Today or Inventory Snapshot where several related metrics
 * live inside a single gradient card.
 */

import React from "react";
import { Card, CardContent } from "@/components/ui/card";
import type { LucideIcon } from "lucide-react";
import { cn } from "@/lib/utils";
import { type GradientVariant } from "./DashboardStatCardMini";

// =============================================================================
// TYPES
// =============================================================================

export interface MultiStatEntry {
  /** Lucide icon component */
  icon: LucideIcon;
  /** Tailwind bg class for the icon circle (e.g. "bg-emerald-400") */
  iconBg: string;
  /** Short uppercase label */
  label: string;
  /** Main display value */
  value: string | number;
  /** Optional secondary line below value (string or JSX for trend indicators) */
  sub?: React.ReactNode;
}

export interface DashboardMultiStatCardMiniProps {
  /** Optional card title shown above stats */
  title?: string;
  /** Array of stats to display vertically */
  entries: MultiStatEntry[];
  /** Gradient preset */
  gradient?: GradientVariant;
  /** Additional className */
  className?: string;
  /** Loading state — shows skeletons for this many rows */
  loading?: boolean;
  /** Number of skeleton rows to show when loading (defaults to entries length or 3) */
  skeletonRows?: number;
}

// =============================================================================
// GRADIENT PRESETS (mirrors DashboardStatCardMini)
// =============================================================================

const GRADIENT_PRESETS: Record<GradientVariant, string> = {
  slate: "bg-gradient-to-br from-slate-800/80 to-slate-700/60",
  emerald: "bg-gradient-to-br from-emerald-900/80 to-emerald-700/40",
  blue: "bg-gradient-to-br from-blue-900/80 to-blue-700/40",
  purple: "bg-gradient-to-br from-purple-900/80 to-purple-700/40",
  violet: "bg-gradient-to-br from-violet-900/80 to-violet-700/40",
  amber: "bg-gradient-to-br from-amber-800/80 to-amber-600/40",
  orange: "bg-gradient-to-br from-orange-900/80 to-orange-700/40",
  rose: "bg-gradient-to-br from-rose-900/80 to-rose-700/40",
  cyan: "bg-gradient-to-br from-cyan-900/80 to-cyan-700/40",
  sky: "bg-gradient-to-br from-sky-900/80 to-sky-700/40",
  custom: "",
};

// =============================================================================
// INTERNAL COMPONENTS
// =============================================================================

const StatRow: React.FC<MultiStatEntry> = ({ icon: Icon, iconBg, label, value, sub }) => (
  <div className="flex-1 flex items-center justify-between min-h-0">
    <div className="flex flex-col justify-center">
      <span className="text-xs font-medium text-gray-100 uppercase tracking-wide mb-0.5">
        {label}
      </span>
      <div className="text-2xl font-extrabold text-white leading-tight">
        {typeof value === "number" ? value.toLocaleString() : value}
      </div>
      {sub && (
        <div className="text-sm font-semibold text-gray-200 mt-0.5">{sub}</div>
      )}
    </div>
    <div className="relative p-2">
      <div className={cn("absolute inset-0 rounded-full", iconBg)} />
      <Icon className="h-4 w-4 text-white relative" />
    </div>
  </div>
);

const SkeletonRow: React.FC = () => (
  <div className="flex-1 flex items-center justify-between min-h-0">
    <div className="flex flex-col justify-center">
      <div className="h-3 w-16 bg-white/20 animate-pulse rounded mb-1" />
      <div className="h-7 w-14 bg-white/20 animate-pulse rounded mb-0.5" />
      <div className="h-4 w-20 bg-white/10 animate-pulse rounded" />
    </div>
    <div className="h-8 w-8 bg-white/20 animate-pulse rounded-full" />
  </div>
);

// =============================================================================
// MAIN COMPONENT
// =============================================================================

export const DashboardMultiStatCardMini: React.FC<DashboardMultiStatCardMiniProps> = ({
  title,
  entries,
  gradient = "slate",
  className,
  loading = false,
  skeletonRows,
}) => {
  const gradientClass = gradient === "custom" ? "" : GRADIENT_PRESETS[gradient];
  const rowCount = skeletonRows ?? (entries.length || 3);

  return (
    <Card
      className={cn(
        gradientClass,
        "backdrop-blur-xl border-white/[0.08] ring-1 ring-white/[0.05] shadow-lg shadow-black/20 h-full",
        className
      )}
    >
      <CardContent className="p-4 h-full flex flex-col gap-1">
        {title && (
          <span className="text-xs font-medium text-gray-100 uppercase tracking-wide mb-1 border-b">
            {title}
          </span>
        )}
        {loading ? (
          <>
            {Array.from({ length: rowCount }, (_, i) => (
              <SkeletonRow key={i} />
            ))}
          </>
        ) : (
          entries.map((entry, i) => <StatRow key={i} {...entry} />)
        )}
      </CardContent>
    </Card>
  );
};

export default DashboardMultiStatCardMini;
