frontend/src/components/PipelineSteps.tsx

export function PipelineSteps({
  status,
  error,
  candidateCount,
}: {
  status: string;
  error: string | null;
  candidateCount: number;
}) {
  const steps = ["Input", "Standardize", "Patent constraints", "Generate", "Filter", "Predict", "Rank", "Export"];
  const activeIndex = status === "idle" ? 0 : status === "running" ? 4 : status === "completed" ? steps.length : 2;

  return (
    <section className="panel">
      <div className="panel-heading">
        <span className="eyebrow">Transparent computation chain</span>
        <h2>Pipeline</h2>
      </div>
      <ol className="steps">
        {steps.map((step, index) => (
          <li className={index < activeIndex ? "step-complete" : index === activeIndex ? "step-active" : ""} key={step}>
            {step}
          </li>
        ))}
      </ol>
      <div className="status-grid">
        <p>
          <span>Status</span>
          <strong className={`status-pill status-${status}`}>{status}</strong>
        </p>
        <p>
          <span>Ranked candidates</span>
          <strong>{candidateCount}</strong>
        </p>
      </div>
      {error && <p className="error">{error}</p>}
    </section>
  );
}