"use client";

import { cn } from "@/lib/utils";
import { type ConflictStatus, conflictColors, conflictBgColors } from "./constants";

export type ConflictGaugeVariant = "overall" | "intra-tier" | "cross-tier";

const variantLabels: Record<ConflictGaugeVariant, { title: string; metric: string; low: string; high: string }> = {
  overall: {
    title: "Conflict Score",
    metric: "entropy",
    low: "Unanimous",
    high: "Contested",
  },
  "intra-tier": {
    title: "Within-Tier Conflict",
    metric: "internal disagreement",
    low: "Agreement",
    high: "Disagreement",
  },
  "cross-tier": {
    title: "Cross-Tier Conflict",
    metric: "tier disagreement",
    low: "Agreement",
    high: "Disagreement",
  },
};

interface ConflictGaugeProps {
  score: number;
  status: ConflictStatus;
  variant?: ConflictGaugeVariant;
  compact?: boolean;
}

export function ConflictGauge({ score, status, variant = "overall", compact = false }: ConflictGaugeProps) {
  const percent = Math.round(score * 100);
  const labels = variantLabels[variant];

  if (compact) {
    return (
      <div className="flex items-center gap-2">
        <div className="h-1.5 w-16 bg-muted rounded-full overflow-hidden">
          <div
            className={cn("h-full rounded-full transition-all", conflictBgColors[status])}
            style={{ width: `${percent}%` }}
          />
        </div>
        <span className={cn("text-xs font-medium", conflictColors[status])}>
          {percent}%
        </span>
      </div>
    );
  }

  return (
    <div className="space-y-1">
      <div className="flex items-center justify-between text-xs">
        <span className="text-muted-foreground">{labels.title}</span>
        <span className={cn("font-medium", conflictColors[status])}>
          {percent}% {labels.metric}
        </span>
      </div>
      <div className="h-2 bg-muted rounded-full overflow-hidden">
        <div
          className={cn("h-full rounded-full transition-all", conflictBgColors[status])}
          style={{ width: `${percent}%` }}
        />
      </div>
      <div className="flex justify-between text-[10px] text-muted-foreground">
        <span>{labels.low}</span>
        <span>{labels.high}</span>
      </div>
    </div>
  );
}
