export function cx(...classes: Array<string | false | null | undefined>): string {
  return classes.filter(Boolean).join(" ");
}

export type ButtonVariant =
  | "primary"
  | "secondary"
  | "danger"
  | "dangerSoft"
  | "dangerGhost"
  | "neutralDark"
  | "success"
  | "ghost";

export type ButtonSize = "xs" | "sm" | "md" | "icon";

interface ButtonClassOptions {
  variant?: ButtonVariant;
  size?: ButtonSize;
  fullWidth?: boolean;
}

const buttonVariantClasses: Record<ButtonVariant, string> = {
  primary: "bg-blue-600 text-white hover:bg-blue-700",
  secondary: "bg-gray-200 text-gray-700 hover:bg-gray-300",
  danger: "bg-red-600 text-white hover:bg-red-700",
  dangerSoft: "bg-red-100 text-red-700 hover:bg-red-200",
  dangerGhost: "bg-transparent text-red-600 hover:underline",
  neutralDark: "bg-gray-900 text-white hover:bg-black",
  success: "bg-green-600 text-white hover:bg-green-700",
  ghost: "bg-transparent text-blue-600 hover:underline",
};

const buttonSizeClasses: Record<ButtonSize, string> = {
  xs: "px-3 py-1 text-xs",
  sm: "px-3 py-1.5 text-sm",
  md: "px-4 py-2 text-sm",
  icon: "h-7 w-7 px-0 text-xs",
};

export function buttonClass({
  variant = "secondary",
  size = "md",
  fullWidth = false,
}: ButtonClassOptions = {}): string {
  return cx(
    "inline-flex items-center justify-center rounded font-medium transition-colors disabled:opacity-50",
    buttonVariantClasses[variant],
    buttonSizeClasses[size],
    fullWidth && "w-full"
  );
}

export const pageClass = "p-8";
export const pageStackClass = "space-y-6 p-8";
export const pageTitleClass = "text-xl font-bold";
export const backLinkClass = "mb-1 inline-flex text-sm text-blue-600 hover:underline";

export const cardClass = "rounded-lg border border-gray-200 bg-white";
export const cardContentClass = `${cardClass} p-4`;

export const labelClass = "mb-1 block text-sm font-medium text-gray-700";
export const inputClass =
  "w-full rounded border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500";
export const textAreaClass =
  "w-full rounded border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500";

export type NoticeTone = "error" | "success" | "warning" | "info";

const noticeToneClasses: Record<NoticeTone, string> = {
  error: "border-red-200 bg-red-50 text-red-700",
  success: "border-green-200 bg-green-50 text-green-700",
  warning: "border-amber-200 bg-amber-50 text-amber-700",
  info: "border-blue-200 bg-blue-50 text-blue-700",
};

export function noticeClass(tone: NoticeTone, compact = false): string {
  return cx(
    "rounded border text-sm",
    compact ? "p-2" : "p-3",
    noticeToneClasses[tone]
  );
}

export function pillClass(active: boolean): string {
  return active
    ? "rounded px-3 py-1 text-sm bg-gray-900 text-white"
    : "rounded px-3 py-1 text-sm bg-gray-100 text-gray-700 hover:bg-gray-200";
}
