import { cn } from '@/lib/utils';
import { toneClasses } from './tone';
import type { ProductStockStatus, ProductVerification } from '@/types';

const stockLabels: Record<ProductStockStatus, string> = {
    ok: 'In stock',
    low: 'Low stock',
    out: 'Out of stock',
};

const stockTones: Record<ProductStockStatus, string> = {
    ok: 'success',
    low: 'warning',
    out: 'danger',
};

/**
 * The one place "in stock / low / out" is written and coloured. A quantity of
 * zero is a hard stop for picking, so it reads as danger rather than as a
 * quieter warning.
 */
export function StockStatusBadge({
    status,
    className,
}: {
    status: ProductStockStatus;
    className?: string;
}) {
    const tones = toneClasses(stockTones[status]);

    return (
        <span
            className={cn(
                'inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-[11px] font-medium whitespace-nowrap ring-1 ring-inset',
                tones.pill,
                className,
            )}
        >
            <span
                aria-hidden
                className={cn('size-1.5 rounded-full', tones.dot)}
            />
            {stockLabels[status]}
        </span>
    );
}

/**
 * How much is known about a catalogue line. Generic and verified stock are not
 * the same claim, and the badge is what stops one being read as the other.
 */
export function VerificationBadge({
    verification,
    className,
}: {
    verification: ProductVerification;
    className?: string;
}) {
    const tones = toneClasses(verification.tone);

    return (
        <span
            title={verification.label}
            className={cn(
                'inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-medium whitespace-nowrap ring-1 ring-inset',
                tones.pill,
                className,
            )}
        >
            {verification.label}
        </span>
    );
}

/**
 * A quantity with its unit, kept together so a table cell reads "40 m" rather
 * than "40" beside a unit column somebody has to remember.
 */
export function Quantity({
    value,
    unit,
    className,
}: {
    value: number;
    unit: string;
    className?: string;
}) {
    return (
        <span className={cn('whitespace-nowrap crm-num', className)}>
            {value.toLocaleString('en-AU')}
            {unit === 'each' ? '' : ` ${unit}`}
        </span>
    );
}