"use client";

import type { CSSProperties, ReactNode } from "react";

/**
 * Visual variants for `AdminBadge`. Kept for backward compatibility —
 * existing callers (status pills, add-on flags, etc.) continue to pass
 * one of these values and are routed onto the new tone palette below.
 */
type BadgeVariant = "default" | "success" | "warning" | "danger" | "info";

/**
 * New tone palette. Matches the spec in
 * `docs/superpowers/specs/2026-06-17-admin-redesign.md` §3. The previous
 * `--admin-warning-light` / `--admin-danger-light` references have been
 * replaced with the new `--admin-warning-soft` / `--admin-danger-soft`
 * tokens. No hardcoded hex values remain in this file.
 */
type BadgeTone =
  | "neutral"
  | "primary"
  | "accent"
  | "warning"
  | "danger"
  | "success"
  | "info";

type AdminBadgeProps = {
  children: ReactNode;
  /** Legacy variant name. Falls back to "default". Mapped onto `tone` internally. */
  variant?: BadgeVariant;
  /** New tone name. Takes precedence over `variant` when both are provided. */
  tone?: BadgeTone;
  /** Optional leading dot indicator. */
  dot?: boolean;
  /** Extra classes — typically size overrides like `"text-xs px-2 py-0.5"`. */
  className?: string;
};

type ToneStyle = {
  bg: string;
  text: string;
  /** Optional border color; falls back to the background when unset. */
  border?: string;
  dot: string;
};

// New tone palette. Every value references a `--admin-*` design token
// declared in `admin-design-system.css`.
const toneStyles: Record<BadgeTone, ToneStyle> = {
  neutral: {
    bg: "var(--admin-bg-subtle)",
    text: "var(--admin-text-secondary)",
    border: "var(--admin-border)",
    dot: "var(--admin-text-muted)",
  },
  primary: {
    bg: "var(--admin-primary-soft)",
    text: "var(--admin-primary)",
    border: "var(--admin-primary)",
    dot: "var(--admin-primary)",
  },
  accent: {
    bg: "var(--admin-accent-soft)",
    text: "var(--admin-accent)",
    border: "var(--admin-accent)",
    dot: "var(--admin-accent)",
  },
  success: {
    // "success" shares the primary botanical green per the unified palette.
    bg: "var(--admin-primary-soft)",
    text: "var(--admin-primary)",
    border: "var(--admin-primary)",
    dot: "var(--admin-primary)",
  },
  warning: {
    bg: "var(--admin-warning-soft)",
    text: "var(--admin-warning)",
    border: "var(--admin-warning)",
    dot: "var(--admin-warning)",
  },
  danger: {
    bg: "var(--admin-danger-soft)",
    text: "var(--admin-danger)",
    border: "var(--admin-danger)",
    dot: "var(--admin-danger)",
  },
  info: {
    bg: "var(--admin-bg-subtle)",
    text: "var(--admin-text-secondary)",
    border: "var(--admin-border)",
    dot: "var(--admin-text-secondary)",
  },
};

// Map the legacy `variant` prop onto the new `tone` palette. The mapping
// preserves the visual intent of pre-refactor call sites.
const variantToTone: Record<BadgeVariant, BadgeTone> = {
  default: "neutral",
  success: "success",
  warning: "warning",
  danger: "danger",
  info: "info",
};

export default function AdminBadge({
  children,
  variant = "default",
  tone,
  dot = false,
  className = "",
}: AdminBadgeProps) {
  // `tone` wins when provided; otherwise translate the legacy variant.
  const resolvedTone: BadgeTone = tone ?? variantToTone[variant];
  const { bg, text, border, dot: dotColor } = toneStyles[resolvedTone];

  // Border color tracks tone when the tone is one of the chromatic ones;
  // otherwise it falls back to the neutral hairline so the pill keeps a
  // subtle outline against the cream canvas.
  const style: CSSProperties = {
    backgroundColor: bg,
    color: text,
    borderColor: border ?? "var(--admin-border)",
  };

  return (
    <span
      className={`inline-flex items-center gap-1.5 rounded-full border px-2.5 py-0.5 text-[10px] font-bold ${className}`}
      style={style}
    >
      {dot && (
        <span
          className="h-1.5 w-1.5 rounded-full"
          style={{ backgroundColor: dotColor }}
        />
      )}
      {children}
    </span>
  );
}

// Status badge with predefined statuses
type AdminStatusBadgeProps = {
  status: "active" | "inactive" | "pending" | "draft" | "completed" | "cancelled";
  className?: string;
};

// Reuse the new `tone` prop directly so the status pill text style always
// matches the active AdminBadge palette.
const statusConfig: Record<string, { tone: BadgeTone; dot: boolean; label: string }> = {
  active: { tone: "success", dot: true, label: "Active" },
  inactive: { tone: "neutral", dot: true, label: "Inactive" },
  pending: { tone: "warning", dot: true, label: "Pending" },
  draft: { tone: "neutral", dot: true, label: "Draft" },
  completed: { tone: "success", dot: true, label: "Completed" },
  cancelled: { tone: "danger", dot: true, label: "Cancelled" },
};

export function AdminStatusBadge({ status, className = "" }: AdminStatusBadgeProps) {
  const config = statusConfig[status] || statusConfig.inactive;
  return (
    <AdminBadge tone={config.tone} dot={config.dot} className={className}>
      {config.label}
    </AdminBadge>
  );
}

// Count badge (circular)
type AdminCountBadgeProps = {
  count: number;
  tone?: BadgeTone;
  /** @deprecated Use `tone` instead. */
  variant?: BadgeVariant;
  className?: string;
};

export function AdminCountBadge({
  count,
  tone,
  variant = "default",
  className = "",
}: AdminCountBadgeProps) {
  const resolvedTone: BadgeTone = tone ?? variantToTone[variant];
  const { bg, text } = toneStyles[resolvedTone];
  return (
    <span
      className={`inline-flex h-5 min-w-[1.25rem] items-center justify-center rounded-full px-1.5 text-xs font-bold ${className}`}
      style={{ backgroundColor: bg, color: text }}
    >
      {count}
    </span>
  );
}
