import type { CatalogLocale } from '@/lib/catalog';
import { CATALOG_LOCALES } from '@/lib/catalog';
import { cn } from '@/lib/utils';
import type { LocalizedNameFields } from '@/types/catalog';

/*
 * Per-entity locale coverage (IA §6): DE ✓ / FR — / IT ✓ built from the
 * nullability of the served name_de/name_fr/name_it fields — data-driven,
 * never assumed.
 */
export function LocaleCoverageChips({ names }: { names: LocalizedNameFields }) {
    return (
        <div className="flex items-center gap-1">
            {CATALOG_LOCALES.map((code) => {
                const value = names[`name_${code}`];
                const present =
                    value !== null && value !== undefined && value !== '';

                return (
                    <span
                        key={code}
                        className={cn(
                            'inline-flex h-[16px] items-center rounded px-1.5 text-[8px] font-bold tracking-wider uppercase',
                            present
                                ? 'bg-green-50 text-green-700'
                                : 'bg-slate-100 text-slate-400',
                        )}
                    >
                        {code} {present ? '✓' : '—'}
                    </span>
                );
            })}
        </div>
    );
}

/*
 * Honest fallback indicator (IA §6): shown next to a name only when the
 * active locale is missing and the text actually came from elsewhere.
 * `used === null` means no localized name exists at all (§8 data-absent).
 */
export function LocaleFallbackChip({
    requested,
    used,
}: {
    requested: CatalogLocale;
    used: CatalogLocale | null;
}) {
    const label =
        used !== null
            ? `${requested.toUpperCase()}: not available — showing ${used.toUpperCase()}`
            : 'no localized name';

    return (
        <span
            className={cn(
                'inline-flex h-[16px] shrink-0 items-center rounded px-1.5 text-[8px] font-bold tracking-wider uppercase',
                used !== null
                    ? 'bg-orange-50 text-amber-700'
                    : 'bg-gray-100 text-gray-400',
            )}
        >
            {label}
        </span>
    );
}