/**
 * StatusBadge — renders a technique coverage status pill with a
 * CSS-only hover tooltip explaining what the status means.
 */

import type { TechniqueStatus } from "../types/models";

const BADGE_COLORS: Record<TechniqueStatus, string> = {
  validated:      "bg-green-900/50 text-green-400 border-green-500/30",
  partial:        "bg-yellow-900/50 text-yellow-400 border-yellow-500/30",
  in_progress:    "bg-blue-900/50 text-blue-400 border-blue-500/30",
  not_covered:    "bg-red-900/50 text-red-400 border-red-500/30",
  not_evaluated:  "bg-gray-800/50 text-gray-400 border-gray-600/30",
  review_required:"bg-orange-900/50 text-orange-400 border-orange-500/30",
};

const BADGE_LABELS: Record<TechniqueStatus, string> = {
  validated:      "Validated",
  partial:        "Partial",
  in_progress:    "In Progress",
  not_covered:    "Not Covered",
  not_evaluated:  "Not Evaluated",
  review_required:"Review Required",
};

interface TooltipLine { label: string; text: string }

const TOOLTIPS: Record<TechniqueStatus, { heading: string; lines: TooltipLine[] }> = {
  validated: {
    heading: "✅ Validated",
    lines: [
      { label: "Meaning", text: "≥2 tests executed. Blue Team detected the attack in all of them." },
      { label: "Action",  text: "Maintain and re-test periodically." },
    ],
  },
  partial: {
    heading: "🟡 Partial",
    lines: [
      { label: "Meaning", text: "Only 1 validated test, some tests still pending, or detection was not 100%." },
      { label: "Action",  text: "Run more tests and ensure all are validated with 'detected'." },
    ],
  },
  in_progress: {
    heading: "🔵 In Progress",
    lines: [
      { label: "Meaning", text: "Tests exist but none have been validated yet (draft, executing, or in review)." },
      { label: "Action",  text: "Complete the Red/Blue validation workflow." },
    ],
  },
  not_covered: {
    heading: "🔴 Not Covered",
    lines: [
      { label: "Meaning", text: "Tests were run but Blue Team did NOT detect the attack — coverage gap." },
      { label: "Action",  text: "Improve detection rules and re-test." },
    ],
  },
  not_evaluated: {
    heading: "⚫ Not Evaluated",
    lines: [
      { label: "Meaning", text: "No tests have been created for this technique yet." },
      { label: "Action",  text: "Create a test from the available templates." },
    ],
  },
  review_required: {
    heading: "🟠 Review Required",
    lines: [
      { label: "Meaning", text: "MITRE updated this technique, or new intel / detection rules were added." },
      { label: "Action",  text: "A lead should review the changes and mark as reviewed." },
    ],
  },
};

interface StatusBadgeProps {
  status: TechniqueStatus;
  /** Extra classes on the outer wrapper (e.g. sizing) */
  className?: string;
  /** Size variant — defaults to 'md' */
  size?: "sm" | "md";
}

export default function StatusBadge({ status, className = "", size = "md" }: StatusBadgeProps) {
  const tip = TOOLTIPS[status];
  const pill = size === "sm"
    ? "px-2 py-0.5 text-[10px]"
    : "px-2.5 py-0.5 text-xs";

  return (
    <span className={`relative group inline-flex ${className}`}>
      {/* The badge itself */}
      <span
        className={`inline-flex cursor-help items-center rounded-full border font-medium ${pill} ${BADGE_COLORS[status]}`}
      >
        {BADGE_LABELS[status]}
      </span>

      {/* Tooltip — appears below the badge on hover */}
      <span
        className="
          pointer-events-none absolute top-full left-0 z-50 mt-2
          w-64
          rounded-xl border border-gray-700 bg-gray-900 p-3 shadow-xl
          opacity-0 transition-opacity duration-150
          group-hover:opacity-100
        "
      >
        {/* Arrow pointing up */}
        <span className="absolute bottom-full left-4 border-4 border-transparent border-b-gray-700" />
        <p className="mb-2 text-xs font-semibold text-white">{tip.heading}</p>
        {tip.lines.map(({ label, text }) => (
          <div key={label} className="mb-1 last:mb-0">
            <span className="text-[10px] font-medium uppercase tracking-wide text-gray-500">
              {label}
            </span>
            <p className="text-[11px] leading-snug text-gray-300">{text}</p>
          </div>
        ))}
      </span>
    </span>
  );
}