"use client";

import { useId, useState } from "react";
import { CheckIcon, CopyIcon, PencilIcon, RotateCwIcon } from "lucide-react";
import { Markdown } from "yt-dlp-transcript-common/components/Markdown";
import type { UiMessage } from "../lib/askConversation";
import { CitationSources, linkifyCitations, makeCitationLink } from "./citations";
import { PipelineStatus } from "./PipelineStatus";

function CopyButton({ text }: { text: string }) {
  const [state, setState] = useState<"idle" | "copied" | "failed">("idle");
  const copy = async () => {
    try {
      // navigator.clipboard is undefined on insecure origins — surface a failure
      // instead of silently no-op'ing (the old optional-chain swallowed it).
      if (!navigator.clipboard) throw new Error("clipboard unavailable");
      await navigator.clipboard.writeText(text);
      setState("copied");
    } catch {
      setState("failed");
    }
    setTimeout(() => setState("idle"), 1500);
  };
  return (
    <button
      type="button"
      onClick={() => void copy()}
      className="inline-flex min-h-9 items-center gap-1 rounded px-1.5 py-0.5 text-xs text-muted-foreground transition-colors hover:text-foreground"
      aria-label="Copy answer"
    >
      {state === "copied" ? (
        <>
          <CheckIcon className="size-3.5 text-brand" /> Copied
        </>
      ) : state === "failed" ? (
        <>
          <CopyIcon className="size-3.5 text-warning" /> Copy failed
        </>
      ) : (
        <>
          <CopyIcon className="size-3.5" /> Copy
        </>
      )}
    </button>
  );
}

// One chat message. Assistant turns show the live pipeline while gathering,
// stream as plain text with a caret (so partial Markdown never flickers), then
// re-render as Markdown once complete. Sources cite the videos the answer drew
// from, with the searches that found them.
export function MessageBubble({
  message,
  markdownOn,
  onRetry,
  onEdit,
  onOpenCitation,
}: {
  message: UiMessage;
  markdownOn: boolean;
  onRetry?: () => void;
  onEdit?: () => void;
  // Open the transcript modal seeked to a cited line. Undefined in hub /ask
  // (no PlayerProvider), where citations fall back to scroll-to-source.
  onOpenCitation?: (slug: string, seconds?: number) => void;
}) {
  const isUser = message.role === "user";
  // Only true streaming shows the caret bubble; the pre-token "answering" state is
  // covered solely by PipelineStatus so there aren't two "it's coming" indicators.
  const streaming = message.phase === "streaming";
  const settled = message.phase === "done" || message.phase === "stopped";
  const emptyAnswer = !isUser && message.phase === "done" && !message.error && !message.content;
  const renderMarkdown = !isUser && markdownOn && !message.error && settled && !!message.content;
  const nonFetchSteps = message.searchSteps?.filter((s) => s.kind !== "fetch") ?? [];
  // Keep the "Searched:" recap on stopped/errored turns too, so stopping or a
  // failure after searching doesn't erase what was looked up.
  const showSearched = !isUser && (settled || message.error) && nonFetchSteps.length > 0;
  // A completed answer can be regenerated; a failed/stopped/empty one retried.
  const canRerun =
    !isUser &&
    !!onRetry &&
    (message.error ||
      message.phase === "stopped" ||
      emptyAnswer ||
      (message.phase === "done" && !!message.content));
  const rerunLabel =
    message.phase === "done" && message.content ? "Regenerate" : "Retry";
  // Stable per-message id so citation anchors don't collide across messages.
  const cid = useId().replace(/:/g, "");
  const sources = message.sources ?? [];
  const sourceCount = sources.length;
  const CitationLink = makeCitationLink(cid, sources, onOpenCitation);

  return (
    <div className="flex flex-col gap-2 animate-in fade-in slide-in-from-bottom-2 motion-reduce:animate-none">
      {!isUser && <PipelineStatus phase={message.phase} steps={message.searchSteps ?? []} />}

      {(message.content || streaming) && (
        <div
          role={streaming ? "status" : undefined}
          aria-live={streaming ? "polite" : undefined}
          className={
            isUser
              ? "self-end rounded-lg bg-primary/10 px-3 py-2 text-sm text-foreground"
              : `rounded-lg border border-border bg-card/40 px-3 py-2 text-sm ${
                  message.error ? "text-warning" : "text-foreground"
                }`
          }
        >
          {renderMarkdown ? (
            <Markdown className="leading-relaxed" linkComponent={CitationLink}>
              {linkifyCitations(message.content, sourceCount, cid)}
            </Markdown>
          ) : (
            <span className="whitespace-pre-wrap leading-relaxed">
              {message.content}
              {streaming && <span className="ai-caret h-[1em] align-text-bottom" aria-hidden />}
            </span>
          )}
        </div>
      )}

      {emptyAnswer &&
        (message.finishReason === "safety" || message.blockReason ? (
          <p className="text-sm text-warning">
            The model returned no answer — blocked
            {message.blockReason ? ` (${message.blockReason})` : " for safety"}.
            Try rephrasing.
          </p>
        ) : (
          <p className="text-sm italic text-muted-foreground/80">
            No answer was returned — retry, or rephrase your question.
          </p>
        ))}

      {!isUser && !!message.content && message.finishReason === "length" && (
        <p className="text-xs text-warning/90">
          ⚠ Cut off at the model&apos;s output limit. Raise{" "}
          <span className="font-medium">Max answer length</span> in settings, or
          turn on <span className="font-medium">Report mode</span> for long
          reports.
        </p>
      )}

      {showSearched && (
        <p className="font-mono text-xs text-muted-foreground/70">
          Searched: {nonFetchSteps.map((s) => s.query).join(" · ")}
        </p>
      )}

      {isUser && onEdit && (
        <button
          type="button"
          onClick={onEdit}
          className="inline-flex items-center gap-1 self-end rounded px-1.5 py-0.5 text-xs text-muted-foreground/70 transition-colors hover:text-foreground"
        >
          <PencilIcon className="size-3" /> Edit
        </button>
      )}

      {!isUser && settled && message.content && (
        <div className="flex items-center gap-2">
          <CopyButton text={message.content} />
          {message.model && (
            <span className="font-mono text-xs text-muted-foreground/50">
              {message.model}
            </span>
          )}
        </div>
      )}

      {canRerun && (
        <div className="flex items-center gap-2 text-xs">
          <button
            type="button"
            onClick={onRetry}
            className="inline-flex items-center gap-1 rounded-md border border-border px-2 py-1 text-muted-foreground transition-colors hover:text-foreground"
          >
            <RotateCwIcon className="size-3.5" /> {rerunLabel}
          </button>
          {rerunLabel === "Retry" && (message.sources?.length ?? 0) > 0 && (
            <span className="text-muted-foreground/70">
              reuses the excerpts already found
            </span>
          )}
        </div>
      )}

      {!isUser && message.sources && message.sources.length > 0 && (
        <CitationSources
          cid={cid}
          sources={message.sources}
          onOpenCitation={onOpenCitation}
          truncated={message.truncated}
        />
      )}
    </div>
  );
}