import { cn } from '@/lib/utils';
import { cva, type VariantProps } from 'class-variance-authority';
import * as React from 'react';

/*
 * Insignia compacta para etiquetas de estado, conteos y metadatos cortos.
 * `estado` es la única variante donde el color carga significado real (ver
 * `colors.estado.*` en tailwind.config.ts) — el resto son neutrales o
 * semánticos genéricos (éxito/aviso/error) sin atarse al dominio de la OT.
 *
 * El fondo va siempre "suave" (color de estado con opacidad baja) y el texto
 * lleva el color de estado sólido encima, nunca al revés: un chip sólido de
 * color fuerte por cada uno de los 6 estados habría vuelto a la paleta de
 * cinco temas que el rediseño de dashboard-page.tsx acaba de eliminar.
 */
const badgeVariants = cva(
    'inline-flex w-fit shrink-0 items-center gap-1 whitespace-nowrap rounded-full px-2.5 py-1 text-xs font-medium leading-none',
    {
        variants: {
            variant: {
                neutral: 'bg-muted text-muted-foreground',
                primary: 'bg-primary-soft text-primary',
                success: 'bg-success-soft text-success',
                warning: 'bg-warning-soft text-warning',
                destructive: 'bg-destructive-soft text-destructive',
                outline: 'border border-border-strong bg-transparent text-foreground',
                estado: '',
            },
        },
        defaultVariants: {
            variant: 'neutral',
        },
    }
);

export type EstadoOT =
    | 'borrador'
    | 'en_proceso'
    | 'cotizada'
    | 'aprobada'
    | 'terminada'
    | 'facturada'
    | 'entregada';

/*
 * Clases fijas por estado, una por una: Tailwind no puede componer clases con
 * opacidad (`bg-estado-x/15`) a partir de un valor interpolado en runtime, así
 * que un `estado-${string}` dinámico no se generaría en el build. Además esto
 * documenta explícitamente cuáles son los 7 estados válidos ("facturada" es un
 * paso automático entre terminada y entregada, no manual, pero sí visible).
 */
const estadoBadgeClasses: Record<EstadoOT, string> = {
    borrador: 'bg-estado-borrador/15 text-estado-borrador',
    en_proceso: 'bg-estado-en_proceso/15 text-estado-en_proceso',
    cotizada: 'bg-estado-cotizada/15 text-estado-cotizada',
    aprobada: 'bg-estado-aprobada/15 text-estado-aprobada',
    terminada: 'bg-estado-terminada/15 text-estado-terminada',
    facturada: 'bg-estado-facturada/15 text-estado-facturada',
    entregada: 'bg-estado-entregada/15 text-estado-entregada',
};

type BadgeBaseProps = React.HTMLAttributes<HTMLSpanElement> &
    VariantProps<typeof badgeVariants>;

export type BadgeProps =
    | (Omit<BadgeBaseProps, 'variant'> & { variant?: Exclude<BadgeBaseProps['variant'], 'estado'> })
    | (Omit<BadgeBaseProps, 'variant'> & { variant: 'estado'; estado: EstadoOT });

function Badge({ className, ...props }: BadgeProps) {
    if (props.variant === 'estado') {
        const { estado, ...rest } = props;
        return (
            <span
                className={cn(badgeVariants({ variant: 'estado' }), estadoBadgeClasses[estado], className)}
                {...rest}
            />
        );
    }

    const { variant, ...rest } = props;
    return <span className={cn(badgeVariants({ variant }), className)} {...rest} />;
}

export { Badge, badgeVariants };