import type { HTMLAttributes, ReactNode, ReactElement } from "react";

export type BadgeVariant =
  | "priority-high"
  | "priority-medium"
  | "priority-low"
  | "status-success"
  | "status-warning"
  | "status-error"
  | "status-info"
  | "status-neutral"
  | "badge-teal"
  | "badge-amber"
  | "badge-red"
  | "badge-blue"
  | "badge-muted"
  | "badge-purple"
  | "badge-pulse";

export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
  variant?: BadgeVariant;
  children: ReactNode;
}

interface BadgeStyleDef {
  style: React.CSSProperties;
  pulse?: boolean;
}

const variantDefs: Record<BadgeVariant, BadgeStyleDef> = {
  "priority-high": {
    style: {
      background: "rgba(229,72,77,0.12)",
      color: "var(--ms-red-400)",
      border: "1px solid rgba(229,72,77,0.2)",
    },
  },
  "priority-medium": {
    style: {
      background: "rgba(245,158,11,0.12)",
      color: "var(--ms-amber-400)",
      border: "1px solid rgba(245,158,11,0.2)",
    },
  },
  "priority-low": {
    style: {
      background: "rgba(20,184,166,0.12)",
      color: "var(--ms-teal-400)",
      border: "1px solid rgba(20,184,166,0.2)",
    },
  },
  "status-success": {
    style: {
      background: "rgba(20,184,166,0.12)",
      color: "var(--ms-teal-400)",
      border: "1px solid rgba(20,184,166,0.2)",
    },
  },
  "status-warning": {
    style: {
      background: "rgba(245,158,11,0.12)",
      color: "var(--ms-amber-400)",
      border: "1px solid rgba(245,158,11,0.2)",
    },
  },
  "status-error": {
    style: {
      background: "rgba(229,72,77,0.12)",
      color: "var(--ms-red-400)",
      border: "1px solid rgba(229,72,77,0.2)",
    },
  },
  "status-info": {
    style: {
      background: "rgba(47,128,255,0.12)",
      color: "var(--ms-blue-400)",
      border: "1px solid rgba(47,128,255,0.2)",
    },
  },
  "status-neutral": {
    style: {
      background: "var(--surface)",
      color: "var(--muted)",
      border: "1px solid var(--border)",
    },
  },
  "badge-teal": {
    style: {
      background: "rgba(20,184,166,0.12)",
      color: "var(--ms-teal-400)",
      border: "1px solid rgba(20,184,166,0.2)",
    },
  },
  "badge-amber": {
    style: {
      background: "rgba(245,158,11,0.12)",
      color: "var(--ms-amber-400)",
      border: "1px solid rgba(245,158,11,0.2)",
    },
  },
  "badge-red": {
    style: {
      background: "rgba(229,72,77,0.12)",
      color: "var(--ms-red-400)",
      border: "1px solid rgba(229,72,77,0.2)",
    },
  },
  "badge-blue": {
    style: {
      background: "rgba(47,128,255,0.12)",
      color: "var(--ms-blue-400)",
      border: "1px solid rgba(47,128,255,0.2)",
    },
  },
  "badge-muted": {
    style: {
      background: "var(--surface)",
      color: "var(--muted)",
      border: "1px solid var(--border)",
    },
  },
  "badge-purple": {
    style: {
      background: "rgba(139,92,246,0.12)",
      color: "var(--ms-purple-400)",
      border: "1px solid rgba(139,92,246,0.2)",
    },
  },
  "badge-pulse": {
    style: {
      background: "rgba(47,128,255,0.12)",
      color: "var(--ms-blue-400)",
      border: "1px solid rgba(47,128,255,0.2)",
    },
    pulse: true,
  },
};

const pulseKeyframes = `
@keyframes ms-badge-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
`;

let pulseStyleInjected = false;

function ensurePulseStyle(): void {
  if (pulseStyleInjected || typeof document === "undefined") return;
  const styleEl = document.createElement("style");
  styleEl.textContent = pulseKeyframes;
  document.head.appendChild(styleEl);
  pulseStyleInjected = true;
}

export function Badge({
  variant = "status-neutral",
  children,
  className = "",
  style,
  ...props
}: BadgeProps): ReactElement {
  const def = variantDefs[variant];

  if (def.pulse) {
    ensurePulseStyle();
  }

  const baseStyle: React.CSSProperties = {
    fontSize: "0.7rem",
    fontWeight: 600,
    fontFamily: "var(--mono)",
    padding: "2px 8px",
    borderRadius: "20px",
    display: "inline-flex",
    alignItems: "center",
    gap: "5px",
    ...def.style,
    ...style,
  };

  return (
    <span
      className={className}
      style={baseStyle}
      role="status"
      aria-label={children as string}
      {...props}
    >
      {def.pulse && (
        <span
          aria-hidden="true"
          style={{
            display: "inline-block",
            width: 6,
            height: 6,
            borderRadius: "50%",
            background: "var(--ms-blue-400)",
            flexShrink: 0,
            animation: "ms-badge-pulse 1.4s ease-in-out infinite",
          }}
        />
      )}
      {children}
    </span>
  );
}
