'use client';

/* AnalyzerStagePips — phase 06 (ANL-02).
 * Purpose: 3-dot stage indicator (Triage → Analyze → Deep Review) with caret separators.
 *          Filled when stage was used, muted when not. Per D-13/D-14 (no animation).
 * Props: see AnalyzerStagePipsProps. */

export interface AnalyzerStagePipsProps {
  haikuUsed: boolean;
  sonnetUsed: boolean;
  opusUsed: boolean;
}

const STAGE_LABELS = ['Triage', 'Analyze', 'Deep Review'];

export function AnalyzerStagePips({ haikuUsed, sonnetUsed, opusUsed }: AnalyzerStagePipsProps) {
  const used = [haikuUsed, sonnetUsed, opusUsed];
  const completed = STAGE_LABELS.filter((_, i) => used[i]);
  const srLabel = completed.length === 0
    ? 'No stages completed'
    : `Stages completed: ${completed.join(', ')}`;
  return (
    <div className="flex items-center gap-1.5" aria-hidden="false">
      <span className="sr-only">{srLabel}</span>
      {used.map((isUsed, i) => (
        <span key={i} className="flex items-center gap-1.5">
          <span
            className={`h-1.5 w-1.5 rounded-full ${isUsed ? 'bg-primary' : 'bg-muted-foreground/30'}`}
            aria-hidden="true"
          />
          {i < 2 && <span className="text-[10px] text-muted-foreground" aria-hidden="true">›</span>}
        </span>
      ))}
    </div>
  );
}
