import { cn } from '@/lib/utils';

export function StatusBadge({
    children,
    className,
}: {
    children: React.ReactNode;
    className?: string;
}) {
    return (
        <span
            className={cn(
                'inline-flex h-[18px] items-center justify-center rounded px-2 text-[9px] leading-none font-bold uppercase',
                className,
            )}
        >
            {children}
        </span>
    );
}

export function PublishedBadge() {
    return (
        <StatusBadge className="bg-green-50 text-green-700">
            Published
        </StatusBadge>
    );
}

export function CategoryChip({ children }: { children: React.ReactNode }) {
    return (
        <span className="inline-flex h-[18px] items-center justify-center rounded border border-slate-200 bg-slate-100 px-2 text-[9px] leading-none font-bold text-slate-600 uppercase">
            {children}
        </span>
    );
}

/*
 * Brand chip for AG Grid cells (IA: brand = the only chip-filtered
 * dimension). Fixed height + leading-none so it stays centered and never
 * stretches to the row height.
 */
export function BrandChip({ label }: { label: string }) {
    return (
        <span className="inline-flex h-[18px] items-center justify-center rounded bg-slate-100 px-2 text-[9px] leading-none font-bold tracking-widest text-slate-600 uppercase">
            {label}
        </span>
    );
}

/*
 * Catalog lifecycle status badge (IA §5.2): Current green, Draft yellow
 * accent, Past slate, Archived gray — values passed through verbatim, no
 * interpretation (design §11 #1).
 */
const STATUS_BADGE_STYLES: Record<string, string> = {
    Current: 'bg-green-50 text-green-700',
    Draft: 'bg-yellow-50 text-amber-700',
    Past: 'bg-slate-100 text-slate-600',
    Archived: 'bg-slate-100 text-slate-400',
};

export function CatalogStatusBadge({ status }: { status: string }) {
    return (
        <StatusBadge
            className={
                STATUS_BADGE_STYLES[status] ?? 'bg-slate-100 text-slate-600'
            }
        >
            {status}
        </StatusBadge>
    );
}

/*
 * Feature availability badge (IA §4.5): Standard green, NotAvailable gray,
 * Optional orange, NULL rendered as an honest '—' (128 rows carry no
 * availability, kept as data).
 */
const AVAILABILITY_BADGE_STYLES: Record<string, string> = {
    Standard: 'bg-green-50 text-green-700',
    NotAvailable: 'bg-slate-100 text-slate-500',
    Optional: 'bg-orange-50 text-amber-700',
};

export function AvailabilityBadge({
    availability,
}: {
    availability: string | null;
}) {
    if (availability === null) {
        return (
            <StatusBadge className="bg-slate-100 text-slate-500">—</StatusBadge>
        );
    }

    return (
        <StatusBadge
            className={
                AVAILABILITY_BADGE_STYLES[availability] ??
                'bg-slate-100 text-slate-600'
            }
        >
            {availability}
        </StatusBadge>
    );
}