/* global React, window */
// ─────────────────────────────────────────────────────────────
// VerdictBar
// Lifted from ref/mastermind-v2/components/chat.jsx:483–519
//
// The one-line footer to a Mastermind turn: "Mastermind's verdict: X — 78% — 1 dissent".
// It's the TL;DR. The thing you scan when re-reading a thread.
//
// Departures from v2 source:
//   • `tone` prop: default | quiet | emphatic. Quiet drops the gradient background
//     for archive/thread views; emphatic thickens and adds a subtle glow for key decisions.
//   • `onDissent` + `onOpenVerdict`: click handlers so the bar can be live
//     (open the dissenting voice, re-open the decision).
//   • dissent is optional AND can be a number OR an array of voice ids
//     (when the caller knows WHO dissented, the bar can hint which chips).
//   • confidence can be 0..1 OR 0..100 (auto-normalized).
//   • size: "sm" | "md" — sm used in threads/archives.
// ─────────────────────────────────────────────────────────────

const VB_FONT = '"Inter", -apple-system, BlinkMacSystemFont, sans-serif';
const VB_GRAD = 'linear-gradient(135deg, #FF2DB4 0%, #9B5CFF 50%, #00D4FF 100%)';

function VerdictBar({
  verdict,
  voices,          // optional — used for future dissenter-chip rendering
  tone = 'default',
  size = 'md',
  onOpenVerdict,
  onDissent,
  style,
}) {
  if (!verdict) return null;

  const pick = verdict.pick;
  const confRaw = typeof verdict.confidence === 'number' ? verdict.confidence : 0;
  const conf = confRaw > 1 ? confRaw / 100 : confRaw;              // normalize
  const confPct = Math.round(conf * 100);
  const dissent = verdict.dissent;
  const dissentCount = Array.isArray(dissent) ? dissent.length : (dissent || 0);

  const isSm = size === 'sm';
  const pad = isSm ? '6px 10px' : '10px 14px';
  const fontSize = isSm ? 11.5 : 12;
  const gap = isSm ? 8 : 10;
  const barWidth = isSm ? 40 : 48;

  const backgrounds = {
    default:  'linear-gradient(135deg, rgba(255, 45, 180, 0.06), rgba(0, 212, 255, 0.06))',
    quiet:    'rgba(0,0,0,0.03)',
    emphatic: 'linear-gradient(135deg, rgba(255, 45, 180, 0.12), rgba(155, 92, 255, 0.10), rgba(0, 212, 255, 0.12))',
  };
  const borders = {
    default:  '1px solid rgba(255, 45, 180, 0.15)',
    quiet:    '1px solid rgba(0,0,0,0.06)',
    emphatic: '1px solid rgba(255, 45, 180, 0.25)',
  };
  const shadows = {
    default:  'none',
    quiet:    'none',
    emphatic: '0 1px 8px rgba(255, 45, 180, 0.08)',
  };

  const clickable = !!onOpenVerdict;

  return (
    <div
      onClick={onOpenVerdict}
      role={clickable ? 'button' : undefined}
      tabIndex={clickable ? 0 : undefined}
      style={{
        display: 'flex', alignItems: 'center', gap,
        padding: pad, borderRadius: 10, marginTop: 8,
        background: backgrounds[tone],
        border: borders[tone],
        boxShadow: shadows[tone],
        fontFamily: VB_FONT, fontSize,
        cursor: clickable ? 'pointer' : 'default',
        transition: 'transform 120ms, box-shadow 120ms',
        ...style,
      }}
    >
      {/* Checkmark glyph */}
      <svg width={isSm ? 12 : 14} height={isSm ? 12 : 14} viewBox="0 0 24 24"
           fill="none" stroke={tone === 'quiet' ? 'rgba(0,0,0,0.5)' : '#E86CC7'}
           strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"
           style={{ flexShrink: 0 }}>
        <path d="M9 12l2 2 4-4" /><circle cx="12" cy="12" r="10" />
      </svg>

      <span style={{ fontWeight: 600, color: '#1A1A1A', flexShrink: 0 }}>
        Mastermind's verdict:
      </span>
      <span style={{
        color: 'rgba(0,0,0,0.75)',
        whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
        minWidth: 0,
      }}>{pick}</span>

      <span style={{ flex: 1, minWidth: 8 }} />

      <span style={{ color: 'rgba(0,0,0,0.5)', flexShrink: 0 }}>
        {isSm ? 'Conf.' : 'Confidence'}
      </span>
      <div style={{
        width: barWidth, height: isSm ? 3 : 4, borderRadius: 2,
        background: 'rgba(0,0,0,0.06)', overflow: 'hidden', flexShrink: 0,
      }}>
        <div style={{
          width: `${confPct}%`, height: '100%',
          background: VB_GRAD,
        }} />
      </div>
      <span style={{ fontWeight: 600, color: '#1A1A1A', flexShrink: 0 }}>
        {confPct}%
      </span>

      {dissentCount > 0 && (
        <span
          onClick={onDissent ? (e) => { e.stopPropagation(); onDissent(dissent); } : undefined}
          style={{
            padding: isSm ? '1px 6px' : '2px 8px', borderRadius: 999,
            background: 'rgba(0,0,0,0.05)', color: 'rgba(0,0,0,0.55)',
            fontSize: isSm ? 10 : 11,
            flexShrink: 0,
            cursor: onDissent ? 'pointer' : 'default',
          }}
        >{dissentCount} dissent</span>
      )}
    </div>
  );
}

Object.assign(window, { VerdictBar });