"use client";

import { cn } from "@/lib/cn";
import {
  ESTADO_PEDIDO_LABELS,
  ESTADO_CORTES_LABELS,
  type EstadoPedido,
  type EstadoCortes,
} from "@/lib/types/pedido";

const PEDIDO_STYLES: Record<EstadoPedido, string> = {
  cargado:       "bg-blue-50 text-blue-700 border-blue-200",
  en_produccion: "bg-amber-50 text-amber-700 border-amber-200",
  terminado:     "bg-emerald-50 text-emerald-700 border-emerald-200",
  entregado:     "bg-zinc-100 text-zinc-700 border-zinc-200",
  cancelado:     "bg-red-50 text-red-700 border-red-200",
};

const CORTES_STYLES: Record<EstadoCortes, string> = {
  pendiente: "bg-orange-50 text-orange-700 border-orange-200",
  en_corte:  "bg-amber-50 text-amber-700 border-amber-200",
  cortados:  "bg-emerald-50 text-emerald-700 border-emerald-200",
  no_necesita: "bg-zinc-100 text-zinc-700 border-zinc-200",
};

export function EstadoPedidoBadge({ value, size = "md" }: { value: EstadoPedido; size?: "sm" | "md" }) {
  return (
    <span
      className={cn(
        "inline-flex items-center font-semibold rounded-full border",
        size === "sm" ? "px-2 py-0.5 text-[10px]" : "px-2.5 py-0.5 text-xs",
        PEDIDO_STYLES[value],
      )}
    >
      {ESTADO_PEDIDO_LABELS[value]}
    </span>
  );
}

export function EstadoCortesBadge({ value, size = "md" }: { value: EstadoCortes; size?: "sm" | "md" }) {
  return (
    <span
      className={cn(
        "inline-flex items-center font-semibold rounded-full border",
        size === "sm" ? "px-2 py-0.5 text-[10px]" : "px-2.5 py-0.5 text-xs",
        CORTES_STYLES[value],
      )}
    >
      {ESTADO_CORTES_LABELS[value]}
    </span>
  );
}

import {
  PIPELINE_COLORS,
  PIPELINE_LABELS,
  normalizeEtapaProduccion,
} from "@/lib/pedidos/pipeline";

export function PipelineBadge({ value, size = "md" }: { value?: string | null; size?: "sm" | "md" }) {
  const stage = normalizeEtapaProduccion(value);
  const label = PIPELINE_LABELS[stage];
  const styles = PIPELINE_COLORS[stage]?.labelClass || "bg-slate-100 text-slate-800 border-slate-200";
  return (
    <span
      className={cn(
        "inline-flex items-center font-semibold rounded-full border",
        size === "sm" ? "px-2 py-0.5 text-[10px]" : "px-2.5 py-0.5 text-xs",
        styles,
      )}
    >
      {label}
    </span>
  );
}