import { cn } from '@/lib/cn';
import { IMPORTANCE_LABELS, OPENNESS_LABELS, STATUS_LABELS, TIER_LABELS, TYPE_COLOR_KEY, typeLabel } from '@/lib/site';

const base = 'inline-flex items-center gap-1 whitespace-nowrap rounded-[3px] px-1.5 py-[1px] text-[11px] font-medium leading-4 tracking-wide';

/** Entity-type badge: coloured text + faint tint, letter-spaced. `small` variant for dense feeds. */
export function EntityBadge({ type, className, small = false }: { type: string; className?: string; small?: boolean }) {
  const key = TYPE_COLOR_KEY[type] ?? 'tool';
  return (
    <span className={cn(base, small && 'px-1 text-[10px]', 'uppercase', className)} style={{ color: `var(--type-${key})`, background: `color-mix(in srgb, var(--type-${key}) 10%, transparent)` }}>
      {typeLabel(type)}
    </span>
  );
}

/** Source tier 1–4 (official → unverified). */
export function TierBadge({ tier, className, withLabel = false }: { tier: number | null | undefined; className?: string; withLabel?: boolean }) {
  if (tier === null || tier === undefined) return <span className={cn(base, 'text-ink-3', className)}>tier —</span>;
  const t = Math.min(4, Math.max(1, Math.round(tier)));
  return (
    <span className={cn(base, 'mono', className)} style={{ color: `var(--tier-${t})`, background: `color-mix(in srgb, var(--tier-${t}) 12%, transparent)` }} title={TIER_LABELS[t]}>
      T{t}
      {withLabel && <span className="font-sans normal-case tracking-normal">· {TIER_LABELS[t]}</span>}
    </span>
  );
}

const CONF: Record<string, string> = { verified: 'text-positive bg-positive-soft', high: 'text-positive bg-positive-soft', medium: 'text-accent bg-accent-soft', low: 'text-warning bg-warning-soft', conflicted: 'text-danger bg-danger-soft' };
export function ConfidenceBadge({ confidence, className }: { confidence: string | null | undefined; className?: string }) {
  if (!confidence) return null;
  return <span className={cn(base, CONF[confidence] ?? 'text-ink-3 bg-surface-2', className)}>{confidence}</span>;
}

const STATUS: Record<string, string> = {
  active: 'text-positive bg-positive-soft',
  preview: 'text-accent bg-accent-soft',
  announced: 'text-accent bg-accent-soft',
  'limited-availability': 'text-warning bg-warning-soft',
  deprecated: 'text-warning bg-warning-soft',
  retired: 'text-danger bg-danger-soft',
};
export function StatusBadge({ status, className }: { status: string | null | undefined; className?: string }) {
  if (!status || status === 'unknown') return null;
  return <span className={cn(base, STATUS[status] ?? 'text-ink-2 bg-surface-2', className)}>{STATUS_LABELS[status] ?? status}</span>;
}

const OPEN: Record<string, string> = { 'open-weights': 'text-positive bg-positive-soft', 'open-source': 'text-positive bg-positive-soft', proprietary: 'text-ink-2 bg-surface-2', restricted: 'text-warning bg-warning-soft' };
export function OpennessBadge({ openness, className }: { openness: string | null | undefined; className?: string }) {
  if (!openness) return null;
  return <span className={cn(base, OPEN[openness] ?? 'text-ink-2 bg-surface-2', className)}>{OPENNESS_LABELS[openness] ?? openness}</span>;
}

/** Importance 0–3 as a small stepped meter (■■■□). */
export function ImportanceMark({ importance, className }: { importance: number; className?: string }) {
  const n = Math.min(3, Math.max(0, importance));
  return (
    <span className={cn('inline-flex items-center gap-[2px]', className)} title={`${IMPORTANCE_LABELS[n]} (importance ${n})`} aria-label={`Importance ${n} of 3`}>
      {[1, 2, 3].map((i) => (
        <span key={i} className={cn('block h-2 w-[3px] rounded-[1px]', i <= n ? (n === 3 ? 'bg-accent-2' : 'bg-ink-2') : 'bg-rule-strong')} />
      ))}
    </span>
  );
}

/** Generic neutral chip (tags, families, modalities). */
export function Chip({ children, className, tone = 'neutral' }: { children: React.ReactNode; className?: string; tone?: 'neutral' | 'accent' | 'estimated' }) {
  return (
    <span className={cn(base, tone === 'neutral' && 'bg-surface-2 text-ink-2', tone === 'accent' && 'bg-accent-soft text-accent', tone === 'estimated' && 'border border-dashed border-warning/60 text-warning', className)}>{children}</span>
  );
}

/** Derived/estimated label linking to methodology. */
export function Estimated({ className }: { className?: string }) {
  return (
    <a href="/methodology#estimates" className={cn(base, 'border border-dashed border-warning/60 uppercase text-warning hover:bg-warning-soft', className)}>
      Estimated
    </a>
  );
}