"use client";

import { STEP_META, type ProcessStep } from "@/lib/mortgage/gates";

export function ProcessStepper({
  step,
  missing,
  blocked,
}: {
  step: ProcessStep;
  missing: string[];
  blocked?: boolean;
}) {
  const steps = [0, 1, 2, 3, 4, 5, 6, 7, 8] as ProcessStep[];
  const meta = STEP_META[step];
  return (
    <aside className="h-full overflow-y-auto border-r border-slate-700 bg-[#152033] p-4">
      <h2 className="mb-3 text-sm font-semibold text-sky-300">Progress (0–8)</h2>
      <ol className="space-y-1">
        {steps.map((s) => (
          <li
            key={s}
            className={`rounded-md px-2 py-1 text-xs ${
              s === step ? "bg-sky-400/20 text-sky-200" : s < step ? "text-emerald-400/80" : "text-slate-500"
            }`}
          >
            {s}. {STEP_META[s].label}
          </li>
        ))}
      </ol>
      <div className="mt-4 rounded-lg border border-slate-700 p-3 text-xs text-slate-300">
        <p data-testid="process-current" className="font-medium text-sky-200">
          {blocked ? "Stopped" : meta.label}
        </p>
        <p data-testid="process-exit-gate" className="mt-1">
          Goal / exit: {meta.exitGate}
        </p>
        {step === 8 && <p className="mt-1">Licensed-agent handoff. e-app / issue stay human (not in this app).</p>}
        {missing.length > 0 && (
          <p className="mt-2 text-amber-300">Missing: {missing.join(", ")}</p>
        )}
      </div>
    </aside>
  );
}