'use client';

/**
 * NoMarketState (Session 79) — the honest empty state for a scanned prop the
 * board never priced.
 *
 * A manual scan is an arbitrary player + stat + free-typed line, so most scans
 * land on a prop no book line was captured for. The join correctly returns no
 * market and the read card's price triplet correctly self-hides — but a blank
 * space reads as "the product is empty." This says, truthfully, what happened
 * and points the user at what IS priced.
 *
 * TRUTH LAW: NO market numbers, no placeholder odds, no "coming soon." The only
 * numbers shown are REAL priced lines from the current snapshot (passed in),
 * each a one-tap route to a genuine triplet. If there are none, it degrades to
 * copy + a path to the live board. Everything renders from tokens.
 *
 * FRAMING: this is HELP ("here's what we price tonight"), not RESTRICTION — the
 * scanner still accepts any prop; this only appears once a scan came back
 * marketless.
 */

export interface PricedLine {
  line: number;
  direction: 'over' | 'under';
  book_odds: number;
}

const fmtOdds = (o: number) => (o > 0 ? `+${Math.round(o)}` : String(Math.round(o)));

export default function NoMarketState({
  player,
  stat,
  line,
  pricedLines = [],
  onPick,
}: {
  player: string;
  stat: string;
  line: number | string;
  /** REAL priced lines for this exact player+stat from the current snapshot. */
  pricedLines?: PricedLine[];
  /** Tap a real priced line → re-scan it (the market is re-validated server-side). */
  onPick?: (l: PricedLine) => void;
}) {
  const statLabel = String(stat || '').replace(/_/g, ' ');
  return (
    <div
      className="no-market-state"
      style={{
        border: '1px solid var(--border)',
        borderRadius: 12,
        padding: '16px 18px',
        background: 'var(--bg-deep)',
        marginTop: 12,
      }}
    >
      <div
        className="mono"
        style={{ fontSize: 10.5, fontWeight: 800, letterSpacing: '0.12em', color: 'var(--amber)', marginBottom: 6 }}
      >
        NO LIVE MARKET FOR THIS LINE
      </div>
      <p style={{ fontSize: 13, color: 'var(--text-1)', margin: '0 0 12px', lineHeight: 1.5 }}>
        The board hasn&rsquo;t priced <span className="mono" style={{ color: 'var(--text-0)' }}>{player}</span>{' '}
        {statLabel} at <span className="mono" style={{ color: 'var(--text-0)' }}>{String(line)}</span>. The grade
        above stands; there&rsquo;s just no book number to price it against.
      </p>

      {pricedLines.length > 0 ? (
        <>
          <div
            className="mono"
            style={{ fontSize: 9, fontWeight: 700, letterSpacing: '0.12em', color: 'var(--text-3)', marginBottom: 8 }}
          >
            PRICED TONIGHT · TAP TO READ THE TRIPLET
          </div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
            {pricedLines.map((l, i) => (
              <button
                key={`${l.direction}-${l.line}-${i}`}
                type="button"
                onClick={() => onPick && onPick(l)}
                className="mono"
                style={{
                  cursor: 'pointer',
                  fontSize: 12,
                  fontWeight: 700,
                  padding: '7px 12px',
                  borderRadius: 999,
                  border: '1px solid var(--fair-border)',
                  background: 'var(--fair-tint)',
                  color: 'var(--text-0)',
                  fontVariantNumeric: 'tabular-nums',
                }}
              >
                {l.direction === 'under' ? 'U' : 'O'} {l.line}{' '}
                <span style={{ color: 'var(--text-2)' }}>· {fmtOdds(l.book_odds)}</span>
              </button>
            ))}
          </div>
        </>
      ) : (
        <a
          href="/dashboard"
          className="mono"
          style={{
            display: 'inline-block',
            fontSize: 11,
            fontWeight: 800,
            letterSpacing: '0.08em',
            color: 'var(--g-a)',
            textDecoration: 'none',
          }}
        >
          SEE TONIGHT&rsquo;S PRICED BOARD ▸
        </a>
      )}
    </div>
  );
}
