"use client";

import type { QuarantineReason } from "./constants";
import { reasonLabels } from "./constants";

interface QuarantineMetricsProps {
  totalCount: number;
  assertions: Array<{ reason: string }>;
}

export function QuarantineMetrics({ totalCount, assertions }: QuarantineMetricsProps) {
  // Count by reason
  const reasonCounts = assertions.reduce<Record<string, number>>((acc, item) => {
    const reason = item.reason.toLowerCase().replace(/-/g, "_");
    acc[reason] = (acc[reason] ?? 0) + 1;
    return acc;
  }, {});

  // Get top 3 reasons
  const topReasons = Object.entries(reasonCounts)
    .sort(([, a], [, b]) => b - a)
    .slice(0, 3);

  return (
    <div className="grid gap-4 grid-cols-2 sm:grid-cols-4">
      <MetricCard
        label="Total Quarantined"
        value={totalCount}
        variant="default"
      />
      <MetricCard
        label="Visible Items"
        value={assertions.length}
        variant="muted"
      />
      {topReasons.slice(0, 2).map(([reason, count]) => (
        <MetricCard
          key={reason}
          label={reasonLabels[reason as QuarantineReason] ?? reason}
          value={count}
          variant="muted"
        />
      ))}
    </div>
  );
}

interface MetricCardProps {
  label: string;
  value: number;
  variant: "default" | "muted";
}

function MetricCard({ label, value, variant }: MetricCardProps) {
  return (
    <div className="rounded-lg border border-border bg-card p-4">
      <p className="text-xs text-muted-foreground">{label}</p>
      <p
        className={`text-2xl font-semibold mt-1 ${
          variant === "default" ? "text-foreground" : "text-muted-foreground"
        }`}
      >
        {value}
      </p>
    </div>
  );
}
