frontend/components/ProcessingBar.tsx

"use client";

import { Check, Loader2 } from "lucide-react";
import type { DocumentDetail } from "@/lib/types";

/**
 * A slim live stepper that reflects pipeline progress by inspecting which
 * parts of the document detail have been populated. Renders only while the
 * document is still processing.
 */
export default function ProcessingBar({ detail }: { detail: DocumentDetail }) {
  if (detail.status === "ready" || detail.status === "failed") return null;

  const steps = [
    { label: "Parsing", done: (detail.pages?.length ?? 0) > 0 },
    { label: "Classifying", done: !!detail.classification },
    { label: "Extracting", done: !!detail.extraction },
    { label: "Summarizing", done: !!detail.summary },
  ];
  const activeIdx = steps.findIndex((s) => !s.done);

  return (
    <div className="border-b border-white/[0.06] bg-surface-900/50 px-4 py-2.5">
      <div className="flex items-center gap-2">
        {steps.map((s, i) => {
          const active = i === activeIdx;
          return (
            <div key={s.label} className="flex flex-1 items-center gap-2">
              <div className="flex items-center gap-1.5">
                <span
                  className={`flex h-4 w-4 items-center justify-center rounded-full text-[9px] ${
                    s.done
                      ? "bg-emerald-500/20 text-emerald-400"
                      : active
                        ? "bg-brand-500/20 text-brand-300"
                        : "bg-white/[0.05] text-white/30"
                  }`}
                >
                  {s.done ? (
                    <Check size={10} />
                  ) : active ? (
                    <Loader2 size={10} className="animate-spin" />
                  ) : (
                    i + 1
                  )}
                </span>
                <span
                  className={`text-[11px] font-medium ${
                    s.done
                      ? "text-white/60"
                      : active
                        ? "text-brand-200"
                        : "text-white/30"
                  }`}
                >
                  {s.label}
                </span>
              </div>
              {i < steps.length - 1 && (
                <div className="h-px flex-1 bg-white/[0.07]">
                  <div
                    className={`h-px transition-all duration-500 ${
                      s.done ? "w-full bg-emerald-500/40" : "w-0"
                    }`}
                  />
                </div>
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
}