'use client';

import { clvBadge } from '@/lib/clvBadge';

/**
 * Per-read directional-CLV badge (Session 64). Analyst + Desk only — the data
 * itself is withheld server-side for Free, so this component simply never
 * receives a state to render.
 *
 * ABSENCE IS HONEST: unknown / flat / no-receipt return null — no element, no
 * placeholder, no "pending". A mixed board (some reads badged, most not) is the
 * real state as closes land game-by-game, and a badge-less card must not read
 * as worse or broken.
 *
 * NEGATIVE IS NEUTRAL INFORMATION, NOT A DEMOTION. It never touches the locked
 * grade — the grade is locked at first capture and CLV is a separate signal.
 *
 * No aggregate, count or rollup exists here by construction.
 */
type ClvRead = { dclv_state?: string | null; locked_odds?: string | number | null; closing_odds?: string | number | null } | null | undefined;
type Badge = { tone: string; label: string; receipt: string } | null;

export default function ClvBadge({ read }: { read: ClvRead }) {
  // clvBadge is CommonJS (allowJs) so it has no TS types — cast at the call
  // site, exactly as gradeAdapter is handled elsewhere.
  const badge = clvBadge(read || {}) as Badge;
  if (!badge) return null;                       // the honest non-element

  const confirm = badge.tone === 'confirm';
  return (
    <span
      className="mono"
      title={confirm
        ? 'The market moved toward the side we graded, between our lock and the close.'
        : 'The market moved away from the side we graded. The grade is unchanged — this is context, not a downgrade.'}
      style={{
        display: 'inline-flex', alignItems: 'center', gap: 6,
        fontSize: 10, letterSpacing: '.06em', textTransform: 'uppercase',
        padding: '2px 7px', borderRadius: 3, whiteSpace: 'nowrap',
        color: confirm ? 'var(--g-a, #00D4A0)' : 'var(--amber, #FFB347)',
        background: confirm ? 'rgba(0,212,160,.10)' : 'rgba(255,179,71,.10)',
        border: `1px solid ${confirm ? 'rgba(0,212,160,.30)' : 'rgba(255,179,71,.30)'}`,
      }}
    >
      <span>{badge.label}</span>
      {/* The RECEIPT is the persuasive part — the label alone is just a claim. */}
      <span style={{ opacity: 0.75, textTransform: 'none', letterSpacing: 0 }}>
        {badge.receipt}
      </span>
    </span>
  );
}
