/**
 * The shell's small typographic parts, in one place.
 *
 * Spec §1 has two rules that every panel in this directory has to obey: data
 * is mono, sentences are sans; and every "thing we are telling you about the
 * data" (RECORDED RUN, EDITED, THINKING OFF, VERIFIED IN YOUR BROWSER…) is the
 * same chip shape so a visitor learns after the second one what the shape
 * means. Fourteen panels each writing `font-mono text-label uppercase` by hand
 * is how those two rules drift, so they are written here once.
 */

import type { ComponentProps, ReactNode } from 'react';

import { Badge } from '@/components/ui/badge';
import { cn } from '@/lib/utils';

/** Mono 11 / 500 / uppercase / +0.04em. The section-label style of §3. */
export const LABEL = 'font-mono text-label uppercase tracking-label text-muted';

/** Mono 13 / 400, tabular (body sets tabular-nums). Every compared number. */
export const MONO_DATA = 'font-mono text-mono-data';

/** A mono section label. `as` lets it be a heading when the panel needs one. */
export function Label({
  as: Tag = 'p',
  className,
  children,
  ...rest
}: {
  as?: 'p' | 'h2' | 'h3' | 'h4' | 'span' | 'dt';
  className?: string;
  children: ReactNode;
} & Omit<ComponentProps<'p'>, 'className' | 'children'>) {
  return (
    <Tag className={cn(LABEL, className)} {...rest}>
      {children}
    </Tag>
  );
}

export type ChipProps = ComponentProps<typeof Badge>;

/**
 * The honesty chip: the Badge under the name the spec uses for it (§9). The
 * variant names are the spec's — `muted` for RECORDED RUN / PACING
 * APPROXIMATE / THINKING OFF / GATE, `warning` for EDITED / COUNTERWEIGHT,
 * `positive` for VERIFIED, `danger` for a mismatch, `default` for the
 * intervention, `outline` for OBJECTIVE, `solid` for LIVE.
 */
export function Chip(props: ChipProps) {
  return <Badge {...props} />;
}

/**
 * Marks a number the visitor caused rather than one we recorded. Amber, not
 * green: an edited ranking is a caution, not a brand moment, and without this
 * chip it screenshots identically to a measured one.
 */
export function EditedChip({ className }: { className?: string }) {
  return (
    <Chip variant="warning" className={className}>
      edited
    </Chip>
  );
}

/**
 * The intervention, on an intervened run. The contract requires the text and
 * it is a SENTENCE ("Told the model the rules before the first guess"), so it
 * keeps the chip's ground and edge but sets in sans, mixed case, and wraps —
 * an 80-character sentence in uppercase mono is unreadable and at 390px is
 * the one thing on the page that makes the body scroll sideways.
 */
export function InterventionChip({ children, className }: { children: ReactNode; className?: string }) {
  return (
    <Chip
      variant="default"
      className={cn('max-w-full whitespace-normal text-left font-sans text-caption normal-case tracking-normal', className)}
    >
      {children}
    </Chip>
  );
}

/** `THINKING OFF`: the run was captured without reasoning. A chip, never a blank. */
export function ThinkingOffChip({ className }: { className?: string }) {
  return (
    <Chip variant="muted" className={className} title="This run was recorded with thinking disabled">
      thinking off
    </Chip>
  );
}

/** A trailing ↗ for an external link. Text, so it inherits the link's colour. */
export function External() {
  return (
    <span aria-hidden="true" className="ml-0.5">
      ↗
    </span>
  );
}

/** The status pill beside a title: LIVE (green fill) or SPEC (outline). */
export function StatusPill({ status, className }: { status: 'live' | 'spec'; className?: string }) {
  return status === 'live' ? (
    <Chip variant="solid" className={cn('rounded-full border-accent-edge', className)}>
      live
    </Chip>
  ) : (
    <Chip variant="outline" className={cn('rounded-full', className)}>
      spec
    </Chip>
  );
}
