import type { ReactNode } from 'react';
import { cn } from '@/lib/format';

/** Operator labels for health statuses (SPEC §12): UP · DEGRADED · BROKEN · DISABLED · MAINTENANCE. */
const LABELS: Record<string, { label: string; cls: string }> = {
  healthy: { label: 'UP', cls: 'bg-gain-bg text-gain' },
  degraded: { label: 'DEGRADED', cls: 'bg-alert-bg text-alert' },
  failing: { label: 'BROKEN', cls: 'bg-loss-bg text-loss' },
  paused: { label: 'DISABLED', cls: 'bg-inset text-muted' },
  disabled: { label: 'DISABLED', cls: 'bg-inset text-muted' },
  maintenance: { label: 'MAINTENANCE', cls: 'bg-index-bg text-index' },
  unknown: { label: 'UNKNOWN', cls: 'bg-inset text-subtle' },
};

export function HealthLabel({ status, small = true }: { status: string | null | undefined; small?: boolean }) {
  const l = LABELS[status ?? 'unknown'] ?? LABELS.unknown!;
  return <span className={cn('inline-flex rounded-sm font-semibold tracking-wide', small ? 'px-1.5 py-0.5 text-[10px]' : 'px-2 py-1 text-xs', l.cls)}>{l.label}</span>;
}

/** Source favicon (Google s2 service, falls back to an initial). */
export function SourceLogo({ domain, name, logoUrl, size = 18 }: { domain: string | null | undefined; name: string; logoUrl?: string | null; size?: number }) {
  const src = logoUrl ?? (domain ? `https://www.google.com/s2/favicons?domain=${encodeURIComponent(domain)}&sz=${size * 2}` : null);
  if (!src) return <span className="inline-flex h-[18px] w-[18px] items-center justify-center rounded-sm bg-inset text-[10px] font-semibold text-muted">{name.slice(0, 1).toUpperCase()}</span>;
  // eslint-disable-next-line @next/next/no-img-element
  return <img src={src} alt="" width={size} height={size} loading="lazy" className="inline-block rounded-sm bg-white/5" />;
}

export function Pct({ value, digits = 0 }: { value: unknown; digits?: number }) {
  const x = Number(value);
  return <>{Number.isFinite(x) ? `${(x * 100).toFixed(digits)}%` : '—'}</>;
}

/** Thin progress bar for backfill campaigns. */
export function Progress({ percent, status }: { percent: number | null | undefined; status?: string | null }) {
  const p = percent === null || percent === undefined ? null : Math.max(0, Math.min(100, Number(percent)));
  return (
    <div className="min-w-[72px]">
      <div className="h-1.5 w-full overflow-hidden rounded-full bg-inset">
        <div className={cn('h-full rounded-full', status === 'completed' ? 'bg-gain' : status === 'failed' ? 'bg-loss' : status === 'paused' ? 'bg-alert' : 'bg-index')} style={{ width: `${p ?? (status === 'running' ? 8 : 0)}%` }} />
      </div>
      <div className="mt-0.5 text-[10px] text-subtle">{p === null ? (status ?? '—') : `${p.toFixed(0)}% · ${status ?? ''}`}</div>
    </div>
  );
}

export function Json({ value, className }: { value: unknown; className?: string }) {
  return <pre className={cn('max-h-[70vh] overflow-auto rounded-md border border-border bg-sunken p-3 font-mono text-[11px] leading-relaxed', className)}>{typeof value === 'string' ? value : JSON.stringify(value, null, 2)}</pre>;
}

export function Chip({ children, tone = 'neutral' }: { children: ReactNode; tone?: 'neutral' | 'index' | 'alert' }) {
  return <span className={cn('inline-flex rounded-sm px-1.5 py-0.5 text-[10px]', tone === 'index' ? 'bg-index-bg text-index' : tone === 'alert' ? 'bg-alert-bg text-alert' : 'bg-inset text-muted')}>{children}</span>;
}