// ─── Streaming.jsx ────────────────────────────────────────────
// Editorial flow indicator with three italic roman numerals (i, ii,
// iii) that progress as the analysis runs. Each step has three
// states: idle (grey), active (pulsing gold ring), done (filled gold
// + check tag). Replaces the single-spinner pattern.

function Streaming({ step = 0, doctrine, strength, sourceCount, done }) {
  const steps = [
    { label: 'מנתב לדוקטרינה', meta: doctrine ? `→ ${doctrine}` : 'בתהליך…' },
    { label: 'מחפש בקורפוס',   meta: sourceCount != null ? `${sourceCount} מקורות` : '732K+ פס״ד' },
    { label: 'אורז ציטוטים',   meta: 'מילה במילה' },
  ];
  const numerals = ['i', 'ii', 'iii'];

  return (
    <div className="le-flow-shell">
      {!done && (
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16 }}>
          <EyeGlyph size={30} theme="light" />
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: 1, color: 'var(--fg-3)' }}>קורא פסיקה…</span>
        </div>
      )}
      <div className="le-flow">
        {steps.map((s, i) => {
          const isDone = done || step > i;
          const isActive = !done && step === i;
          const stateClass = isDone ? 'done' : isActive ? 'active' : '';
          return (
            <div className={`le-flow-step ${stateClass}`} key={i}>
              <div className="le-flow-step-circle">{numerals[i]}</div>
              <div className="le-flow-step-text">
                <div className="le-flow-step-label">{s.label}</div>
                <div className="le-flow-step-meta">{s.meta}</div>
              </div>
            </div>
          );
        })}
      </div>

      {done && (
        <div className="le-flow-banner">
          <span className="le-flow-banner-tick">✓</span>
          <span>
            <b>הושלם · 0 הזיות</b> &nbsp;·&nbsp; אין LLM חיצוני בלולאה · כל ציטוט מילה במילה
            {strength != null && <> &nbsp;·&nbsp; חוזק טיעון <b>{strength}</b>/100</>}
          </span>
        </div>
      )}
    </div>
  );
}

window.Streaming = Streaming;