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

type StatTone = "neutral" | "primary" | "info" | "success" | "warning" | "muted";

interface StatItem {
  icon: ReactNode;
  label: string;
  value: string | number;
  tone?: StatTone;
  /** Whether to conditionally show this stat (defaults to true) */
  show?: boolean;
}

interface SummaryStatsProps {
  items: StatItem[];
  variant?: "cards" | "inline";
  className?: string;
}

const toneStyles: Record<StatTone, { iconBg: string; iconText: string; valueText: string }> = {
  neutral: {
    iconBg: "bg-muted/50",
    iconText: "text-muted-foreground",
    valueText: "text-foreground",
  },
  primary: {
    iconBg: "bg-primary/10",
    iconText: "text-primary",
    valueText: "text-primary",
  },
  info: {
    iconBg: "bg-info/10",
    iconText: "text-info",
    valueText: "text-info",
  },
  success: {
    iconBg: "bg-success/10",
    iconText: "text-success",
    valueText: "text-success",
  },
  warning: {
    iconBg: "bg-warning/10",
    iconText: "text-warning",
    valueText: "text-warning",
  },
  muted: {
    iconBg: "bg-muted",
    iconText: "text-muted-foreground",
    valueText: "text-foreground",
  },
};

function StatCardItem({ item }: { item: StatItem }) {
  const tone = item.tone ?? "neutral";
  const styles = toneStyles[tone];

  return (
    <div className="bg-card rounded-xl border border-border p-5 shadow-[var(--cp-shadow-1)]">
      <div className="flex items-center gap-4">
        <div
          className={cn(
            "h-10 w-10 rounded-lg flex items-center justify-center flex-shrink-0",
            styles.iconBg
          )}
        >
          <span className={cn("h-5 w-5", styles.iconText)}>{item.icon}</span>
        </div>
        <div className="min-w-0">
          <p className="text-sm font-medium text-muted-foreground">{item.label}</p>
          <p className={cn("text-2xl font-bold", styles.valueText)}>{item.value}</p>
        </div>
      </div>
    </div>
  );
}

function StatInlineItem({ item }: { item: StatItem }) {
  const tone = item.tone ?? "neutral";
  const styles = toneStyles[tone];

  return (
    <div className="flex items-center gap-2">
      <span className={cn("h-4 w-4", styles.iconText)}>{item.icon}</span>
      <span className="text-muted-foreground">{item.label}</span>
      <span className={cn("font-semibold", styles.valueText)}>{item.value}</span>
    </div>
  );
}

export function SummaryStats({ items, variant = "inline", className }: SummaryStatsProps) {
  // Filter out items where show is explicitly false
  const visibleItems = items.filter(item => item.show !== false);

  if (visibleItems.length === 0) return null;

  if (variant === "cards") {
    return (
      <div className={cn("grid grid-cols-1 md:grid-cols-3 gap-4", className)}>
        {visibleItems.map((item, index) => (
          <StatCardItem key={index} item={item} />
        ))}
      </div>
    );
  }

  return (
    <div className={cn("flex flex-wrap items-center gap-6 px-1 text-sm", className)}>
      {visibleItems.map((item, index) => (
        <StatInlineItem key={index} item={item} />
      ))}
    </div>
  );
}

export type { SummaryStatsProps, StatItem, StatTone };
