import { TopicBadge, TOPICS } from "./TopicBadge";

interface Props {
  activeStage: string;
}

const STAGES = [
  { id: "chunking", label: "Chunker", sub: "File -> Chunks (generator)" },
  { id: "queued", label: "ChunkQueue", sub: "Bounded queue (backpressure)" },
  { id: "processing", label: "WorkerPool", sub: "ThreadPoolExecutor" },
  { id: "collecting", label: "ResultCollector", sub: "heapq reassembly" },
  { id: "completed", label: "PipelineResult", sub: "Aggregate stats" },
];

/**
 * Visual flow diagram of pipeline stages.
 * Highlights the currently active stage.
 * Interview Topic 4: OOP design — shows class hierarchy.
 */
export function PipelineDiagram({ activeStage }: Props) {
  return (
    <div className="pipeline-diagram">
      <div className="panel-header">
        <h2>Pipeline Flow</h2>
        <TopicBadge topic={TOPICS.oop} />
      </div>
      <div className="stage-flow">
        {STAGES.map((stage, i) => (
          <div key={stage.id} className="stage-wrapper">
            <div
              className={`stage ${activeStage === stage.id ? "active" : ""}`}
            >
              <div className="stage-label">{stage.label}</div>
              <div className="stage-sub">{stage.sub}</div>
            </div>
            {i < STAGES.length - 1 && <div className="stage-arrow" />}
          </div>
        ))}
      </div>
      <div className="processor-hierarchy">
        <div className="hierarchy-title">Processor ABC</div>
        <div className="hierarchy-children">
          <span className="hierarchy-node">ChecksumProcessor</span>
          <span className="hierarchy-node">SimulatedDecodeProcessor</span>
          <span className="hierarchy-node">CompositeProcessor</span>
        </div>
      </div>
    </div>
  );
}