import type { ReactNode } from 'react';
import { cn } from '@/lib/cn';
import { eventStyle, subtypeLabel } from '@/lib/event-styles';
import { importanceSteps, significanceBand } from '@/lib/format';
import { CONFIDENCE_LABELS, SENSOR_TIER_LABELS } 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';

/** Event type chip with its fixed hue; `sub` appends the careful subtype label. */
export function EventTypeBadge({ type, subtype, className, small = false }: { type: string; subtype?: string | null; className?: string; small?: boolean }) {
  const s = eventStyle(type);
  return (
    <span className={cn(base, 'uppercase', small && 'px-1 text-[10px]', className)} style={{ color: s.color, background: s.soft }} data-event-type={s.key}>
      {s.label}
      {subtype && <span className="normal-case tracking-normal opacity-80">· {subtypeLabel(subtype)}</span>}
    </span>
  );
}

const CONF: Record<string, string> = {
  VERIFIED: 'text-positive bg-positive-soft',
  HIGH_CONFIDENCE: 'text-positive bg-positive-soft',
  LIKELY: 'text-accent bg-accent-soft',
  INFERRED: 'text-warning bg-warning-soft',
  LOW_CONFIDENCE: 'text-danger bg-danger-soft',
};
/** Confidence label chip (spec §50). Renders nothing when missing — never invents a status. */
export function ConfidenceBadge({ label, value, className, withValue = false }: { label: string | null | undefined; value?: number | null; className?: string; withValue?: boolean }) {
  if (!label) return null;
  const k = label.toUpperCase();
  return (
    <span className={cn(base, CONF[k] ?? 'text-ink-2 bg-surface-2', className)} title={value !== null && value !== undefined ? `confidence ${(value * 100).toFixed(0)} %` : undefined}>
      {CONFIDENCE_LABELS[k] ?? label}
      {withValue && value !== null && value !== undefined && <span className="tnum opacity-75">{Math.round(value * 100)} %</span>}
    </span>
  );
}

/** Importance as a stepped meter (▮▮▮▯). */
export function ImportanceMeter({ importance, className }: { importance: number | null | undefined; className?: string }) {
  const n = importanceSteps(importance);
  const pct = importance === null || importance === undefined ? null : Math.round((importance > 1 ? importance : importance * 100));
  return (
    <span className={cn('inline-flex items-center gap-[2px]', className)} title={pct === null ? 'importance unknown' : `importance ${pct} / 100`} aria-label={pct === null ? 'importance unknown' : `Importance ${pct} of 100`}>
      {[1, 2, 3].map((i) => (
        <span key={i} className={cn('block h-2.5 w-[3px] rounded-[1px]', i <= n ? (n === 3 ? 'bg-warning' : 'bg-ink-2') : 'bg-rule-strong')} />
      ))}
    </span>
  );
}

const SIG: Record<string, string> = { noise: 'text-ink-3 bg-surface-2', minor: 'text-ink-2 bg-surface-2', meaningful: 'text-accent bg-accent-soft', major: 'text-warning bg-warning-soft', critical: 'text-danger bg-danger-soft' };
export function SignificanceBadge({ value, className }: { value: number | null | undefined; className?: string }) {
  const band = significanceBand(value);
  if (!band) return null;
  return (
    <span className={cn(base, SIG[band], className)}>
      {band} <span className="tnum opacity-75">{(value as number).toFixed(2)}</span>
    </span>
  );
}

/** Sensor tier A–E (crawl cadence). */
export function SensorTierBadge({ tier, className, withLabel = false }: { tier: string | null | undefined; className?: string; withLabel?: boolean }) {
  if (!tier) return null;
  const t = tier.toLowerCase();
  return (
    <span className={cn(base, 'mono', className)} style={{ color: `var(--tier-${t})`, background: `color-mix(in srgb, var(--tier-${t}) 12%, transparent)` }} title={`Tier ${tier} · ${SENSOR_TIER_LABELS[tier] ?? ''}`}>
      {tier}
      {withLabel && <span className="font-sans tracking-normal">· {SENSOR_TIER_LABELS[tier]}</span>}
    </span>
  );
}

/** Company tier 1–4 (importance band). */
export function CompanyTierBadge({ tier, className }: { tier: number | null | undefined; className?: string }) {
  if (!tier) return null;
  return (
    <span className={cn(base, 'mono bg-surface-2 text-ink-2', className)} title={`Company tier ${tier} (importance band, affects crawl priority only)`}>
      T{tier}
    </span>
  );
}

const STATUS: Record<string, string> = {
  active: 'text-positive bg-positive-soft',
  ok: 'text-positive bg-positive-soft',
  healthy: 'text-positive bg-positive-soft',
  open: 'text-positive bg-positive-soft',
  listed: 'text-positive bg-positive-soft',
  current: 'text-positive bg-positive-soft',
  pending: 'text-accent bg-accent-soft',
  running: 'text-accent bg-accent-soft',
  review: 'text-warning bg-warning-soft',
  paused: 'text-warning bg-warning-soft',
  stale: 'text-warning bg-warning-soft',
  possibly_inactive: 'text-warning bg-warning-soft',
  failing: 'text-danger bg-danger-soft',
  failed: 'text-danger bg-danger-soft',
  dead: 'text-danger bg-danger-soft',
  blocked: 'text-danger bg-danger-soft',
  website_unavailable: 'text-danger bg-danger-soft',
  retracted: 'text-danger bg-danger-soft',
  retired: 'text-ink-3 bg-surface-2',
  duplicate: 'text-ink-3 bg-surface-2',
  no_longer_listed: 'text-ink-3 bg-surface-2',
  removed: 'text-ink-3 bg-surface-2',
  superseded: 'text-ink-3 bg-surface-2',
  done: 'text-ink-2 bg-surface-2',
};
const STATUS_LABEL: Record<string, string> = { no_longer_listed: 'no longer listed', removed: 'no longer listed', possibly_inactive: 'possibly inactive', website_unavailable: 'website unavailable' };
export function StatusBadge({ status, className }: { status: string | null | undefined; className?: string }) {
  if (!status) return null;
  const k = status.toLowerCase();
  return <span className={cn(base, STATUS[k] ?? 'text-ink-2 bg-surface-2', className)}>{STATUS_LABEL[k] ?? k.replace(/_/g, ' ')}</span>;
}

/** ISO country chip (no flag emoji — consistent across platforms). */
export function CountryChip({ code, name, className, link = true }: { code: string | null | undefined; name?: string | null; className?: string; link?: boolean }) {
  if (!code) return null;
  const inner = (
    <span className={cn(base, 'mono bg-surface-2 text-ink-2', className)} title={name ?? undefined}>
      {code.toUpperCase()}
    </span>
  );
  if (!link) return inner;
  return (
    <a href={`/country/${code.toLowerCase()}`} className="hover:opacity-80" aria-label={`Country ${name ?? code}`}>
      {inner}
    </a>
  );
}

export function Chip({ children, className, tone = 'neutral', title }: { children: ReactNode; className?: string; tone?: 'neutral' | 'accent' | 'positive' | 'warning' | 'danger' | 'outline'; title?: string }) {
  return (
    <span
      title={title}
      className={cn(
        base,
        tone === 'neutral' && 'bg-surface-2 text-ink-2',
        tone === 'accent' && 'bg-accent-soft text-accent',
        tone === 'positive' && 'bg-positive-soft text-positive',
        tone === 'warning' && 'bg-warning-soft text-warning',
        tone === 'danger' && 'bg-danger-soft text-danger',
        tone === 'outline' && 'border border-rule text-ink-3',
        className,
      )}
    >
      {children}
    </span>
  );
}

export function OriginBadge({ origin, model, prompt }: { origin: string | null | undefined; model?: string | null; prompt?: string | null }) {
  if (!origin) return null;
  const llm = origin === 'llm' || origin === 'hybrid';
  return (
    <span className={cn(base, llm ? 'bg-warning-soft text-warning' : origin === 'backfill' ? 'bg-surface-2 text-ink-3' : 'bg-surface-2 text-ink-2')} title={llm && model ? `${model}${prompt ? ` · prompt ${prompt}` : ''}` : undefined}>
      {origin}
      {llm && model && <span className="mono font-normal opacity-80">· {model}</span>}
    </span>
  );
}