import type { ReactNode } from "react";
import { cn } from "@/shared/utils";

type MetricTone = "primary" | "success" | "warning" | "danger" | "info" | "neutral";

const toneStyles: Record<MetricTone, { icon: string; accent: string }> = {
  primary: { icon: "text-primary bg-primary/10", accent: "text-primary" },
  success: { icon: "text-success bg-success/10", accent: "text-success" },
  warning: { icon: "text-warning bg-warning/10", accent: "text-warning" },
  danger: { icon: "text-danger bg-danger/10", accent: "text-danger" },
  info: { icon: "text-info bg-info/10", accent: "text-info" },
  neutral: { icon: "text-muted-foreground bg-muted", accent: "text-muted-foreground" },
};

export interface MetricCardProps {
  icon?: ReactNode;
  label: string;
  value: string | number;
  subtitle?: string;
  tone?: MetricTone;
  trend?: { value: string; positive?: boolean };
  className?: string;
}

export function MetricCard({
  icon,
  label,
  value,
  subtitle,
  tone = "primary",
  trend,
  className,
}: MetricCardProps) {
  const styles = toneStyles[tone];

  return (
    <div
      className={cn(
        "flex items-start gap-3.5 p-4 rounded-xl bg-card border border-border/60",
        "transition-all duration-200 hover:border-border hover:shadow-[var(--cp-shadow-1)]",
        className
      )}
    >
      {icon && (
        <div
          className={cn(
            "flex-shrink-0 h-10 w-10 rounded-lg flex items-center justify-center",
            styles.icon
          )}
        >
          {icon}
        </div>
      )}
      <div className="min-w-0 flex-1">
        <p className="text-xs font-medium text-muted-foreground">{label}</p>
        <div className="flex items-baseline gap-2 mt-0.5">
          <p className="text-2xl font-bold text-foreground tabular-nums font-heading tracking-tight">
            {value}
          </p>
          {trend && (
            <span
              className={cn("text-xs font-medium", trend.positive ? "text-success" : "text-danger")}
            >
              {trend.value}
            </span>
          )}
        </div>
        {subtitle && <p className="text-xs text-muted-foreground mt-0.5">{subtitle}</p>}
      </div>
    </div>
  );
}

export function MetricCardSkeleton({ className }: { className?: string }) {
  return (
    <div
      className={cn(
        "flex items-start gap-3.5 p-4 rounded-xl bg-card border border-border/60",
        className
      )}
    >
      <div className="flex-shrink-0 h-10 w-10 rounded-lg cp-skeleton-shimmer" />
      <div className="min-w-0 flex-1 space-y-2">
        <div className="h-3 cp-skeleton-shimmer rounded w-16" />
        <div className="h-7 cp-skeleton-shimmer rounded w-12" />
      </div>
    </div>
  );
}
