"use client";

import { CheckIcon, Loader2Icon } from "lucide-react";
import type { AssistantPhase, SearchStep } from "../lib/askConversation";

// The retrieval→answer feedback, shown while a turn is in flight (before the
// first answer token). A restrained terminal-flavoured trace: each search the
// model runs appears as its own row — a spinner while running, a check with the
// match count when done — so multi-step "search, read, search again" is visible.
// Once the answer starts streaming this returns null and the text takes over.
export function PipelineStatus({
  phase,
  steps,
}: {
  phase?: AssistantPhase;
  steps: SearchStep[];
}) {
  if (phase !== "gathering" && phase !== "answering") return null;
  const thinking = phase === "gathering" && steps.length === 0;

  return (
    <div className="flex flex-col gap-1.5 font-mono text-xs text-muted-foreground">
      {thinking && (
        <div className="flex items-center gap-2">
          <span className="flex items-center gap-1" aria-hidden>
            <span className="ai-dot inline-block size-1.5 rounded-full bg-current" />
            <span className="ai-dot inline-block size-1.5 rounded-full bg-current" />
            <span className="ai-dot inline-block size-1.5 rounded-full bg-current" />
          </span>
          <span>Reading your question…</span>
        </div>
      )}

      {steps.map((s, i) => {
        const isFetch = s.kind === "fetch";
        return (
          <div
            key={i}
            className="flex items-center gap-2 animate-in fade-in slide-in-from-top-1 motion-reduce:animate-none"
          >
            {s.count === undefined ? (
              <Loader2Icon className="size-3.5 shrink-0 animate-spin text-brand motion-reduce:animate-none" />
            ) : (
              <CheckIcon className="size-3.5 shrink-0 text-brand" />
            )}
            <span className="shrink-0">{isFetch ? "reading" : "searching"}</span>
            <span className="truncate text-foreground">
              {isFetch ? s.query : `“${s.query}”`}
            </span>
            {s.count !== undefined && (
              <span className="shrink-0 text-muted-foreground/70">
                {isFetch
                  ? `· ${s.count} line${s.count === 1 ? "" : "s"}`
                  : `· ${s.count} result${s.count === 1 ? "" : "s"}`}
              </span>
            )}
          </div>
        );
      })}

      {phase === "answering" && (
        <div className="flex items-center gap-2 animate-in fade-in slide-in-from-top-1 motion-reduce:animate-none">
          <Loader2Icon className="size-3.5 shrink-0 animate-spin text-brand motion-reduce:animate-none" />
          <span>Writing answer…</span>
        </div>
      )}
    </div>
  );
}