"use client";
import * as React from "react";
import { AlertTriangle, BookmarkPlus, Brain, Check, ChevronDown, ChevronRight, Columns3, Copy, ExternalLink, FileText, FileDown, GitBranch, Globe, Loader2, MoreHorizontal, Pencil, Quote, RefreshCw, Shuffle, StepForward, Trash2, Wrench, X } from "lucide-react";
import type { PublicMessage, StoredPart, PolyModel, StoredMessageError } from "@/lib/client/types";
import { Markdown } from "@/components/markdown/markdown";
import { ProviderIcon } from "@/components/brand/provider-icon";
import { Button } from "@/components/ui/button";
import { Textarea } from "@/components/ui/input";
import { Tooltip } from "@/components/ui/tooltip";
import { Badge } from "@/components/ui/badge";
import { ActionSheet, type ActionSheetItem } from "@/components/ui/sheet";
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
import { useIsMobile, useLongPress } from "@/lib/client/hooks";
import { deprecationNotice } from "@/lib/chat/deprecation";
import { MessageError } from "./message-error";
import { cn, formatMs, formatTokens, formatUsd } from "@/lib/utils";
import { PROVIDERS } from "@/lib/client/providers";

export interface LiveState {
  text: string;
  reasoning: string;
  tools: { id: string; name: string; args: string; result?: unknown; isError?: boolean; durationMs?: number }[];
  serverTools: { name: string; status: string }[];
  citations: { url?: string; title?: string; snippet?: string }[];
  startedAt: number;
  firstTokenAt?: number;
}

export interface MessageActions {
  onCopy?: (text: string) => void;
  onEdit?: (m: PublicMessage, text: string) => void;
  /** Retry with the same model. */
  onRegenerate?: (m: PublicMessage) => void;
  /** Opens the model picker, then regenerates with the chosen model. */
  onRegenerateWith?: (m: PublicMessage) => void;
  onRetry?: (m: PublicMessage) => void;
  onContinue?: (m: PublicMessage) => void;
  onBranch?: (m: PublicMessage) => void;
  onDelete?: (m: PublicMessage) => void;
  onCompare?: (m: PublicMessage) => void;
  onQuote?: (m: PublicMessage) => void;
  onSaveAsPrompt?: (m: PublicMessage) => void;
  onExport?: (m: PublicMessage) => void;
  /** "Switch to <replacement>" from the deprecated-model notice. */
  onSwitchModel?: (key: string) => void;
}

interface Props {
  message: PublicMessage;
  model?: PolyModel;
  /** Suggested replacement when `model` is deprecated / retiring (computed by the parent). */
  replacement?: PolyModel | null;
  live?: LiveState | null;
  isLast?: boolean;
  wrapCode?: boolean;
  showReasoning?: boolean;
  showCosts?: boolean;
  actions?: MessageActions;
  busy?: boolean;
  /** Request id of the turn that produced this message (for the error details sheet). */
  requestId?: string | null;
  /** Epoch ms when the error was received (drives the retry countdown). */
  errorAt?: number;
}

type Item = { key: string; label: string; icon: React.ReactNode; onSelect: () => void; destructive?: boolean; hidden?: boolean };

export const MessageItem = React.memo(function MessageItem({ message: m, model, replacement, live, isLast, wrapCode, showReasoning = true, showCosts = true, actions, busy, requestId, errorAt }: Props) {
  const isUser = m.role === "user";
  const streaming = m.status === "streaming" && Boolean(live);
  const isMobile = useIsMobile();
  const [editing, setEditing] = React.useState(false);
  const [draft, setDraft] = React.useState(m.content);
  const [copied, setCopied] = React.useState(false);
  const [sheetOpen, setSheetOpen] = React.useState(false);
  const [detailsOpen, setDetailsOpen] = React.useState(false);
  const [now] = React.useState(() => Date.now());

  const text = streaming ? live!.text : m.content;
  const parts = m.parts as StoredPart[];
  const reasoningParts = parts.filter((p): p is Extract<StoredPart, { type: "reasoning" }> => p.type === "reasoning");
  const reasoning = streaming ? live!.reasoning : reasoningParts.map((p) => p.text).join("\n\n");
  const attachments = parts.filter((p): p is Extract<StoredPart, { type: "attachment" }> => p.type === "attachment");
  const toolCalls = streaming ? live!.tools : parts.filter((p): p is Extract<StoredPart, { type: "tool-call" }> => p.type === "tool-call").map((p) => ({ id: p.id, name: p.name, args: p.argumentsText ?? JSON.stringify(p.arguments), result: p.result, isError: p.isError, durationMs: p.durationMs }));
  const citations = streaming ? live!.citations : parts.filter((p): p is Extract<StoredPart, { type: "citation" }> => p.type === "citation");
  const serverTools = streaming ? live!.serverTools : parts.filter((p): p is Extract<StoredPart, { type: "server-tool" }> => p.type === "server-tool");
  const refusal = parts.find((p): p is Extract<StoredPart, { type: "refusal" }> => p.type === "refusal");
  const usage = m.usage as { inputTokens?: number; outputTokens?: number; reasoningTokens?: number; cachedInputTokens?: number } | null;
  const settings = (m as { settings?: Record<string, unknown> | null }).settings ?? null;
  const tps = m.latencyMs && usage?.outputTokens ? Math.round((usage.outputTokens / Math.max(1, m.latencyMs - (m.ttftMs ?? 0))) * 1000) : null;
  const notice = deprecationNotice(model, now);

  const copy = React.useCallback(async () => {
    await navigator.clipboard.writeText(text).catch(() => {});
    actions?.onCopy?.(text);
    setCopied(true);
    setTimeout(() => setCopied(false), 1400);
  }, [text, actions]);

  // --- action list (shared by the hover toolbar, the "more" menu and the long-press sheet) ----------
  const items: Item[] = isUser
    ? [
        { key: "copy", label: copied ? "Copied" : "Copy", icon: copied ? <Check className="text-success" /> : <Copy />, onSelect: copy },
        { key: "edit", label: "Edit & resend", icon: <Pencil />, onSelect: () => setEditing(true), hidden: !actions?.onEdit || busy },
        { key: "quote", label: "Quote", icon: <Quote />, onSelect: () => actions?.onQuote?.(m), hidden: !actions?.onQuote },
        { key: "branch", label: "Branch from here", icon: <GitBranch />, onSelect: () => actions?.onBranch?.(m), hidden: !actions?.onBranch },
        { key: "prompt", label: "Save as prompt", icon: <BookmarkPlus />, onSelect: () => actions?.onSaveAsPrompt?.(m), hidden: !actions?.onSaveAsPrompt },
        { key: "export", label: "Export message", icon: <FileDown />, onSelect: () => actions?.onExport?.(m), hidden: !actions?.onExport },
        { key: "delete", label: "Delete", icon: <Trash2 />, onSelect: () => actions?.onDelete?.(m), destructive: true, hidden: !actions?.onDelete || busy },
      ]
    : [
        { key: "copy", label: copied ? "Copied" : "Copy", icon: copied ? <Check className="text-success" /> : <Copy />, onSelect: copy },
        { key: "retry", label: "Retry", icon: <RefreshCw />, onSelect: () => actions?.onRegenerate?.(m), hidden: !actions?.onRegenerate || busy },
        { key: "retry-with", label: "Retry with another model", icon: <Shuffle />, onSelect: () => actions?.onRegenerateWith?.(m), hidden: !actions?.onRegenerateWith || busy },
        { key: "continue", label: "Continue", icon: <StepForward />, onSelect: () => actions?.onContinue?.(m), hidden: !actions?.onContinue || !isLast || busy || !(m.finishReason === "length" || m.status === "stopped") },
        { key: "compare", label: "Compare this response", icon: <Columns3 />, onSelect: () => actions?.onCompare?.(m), hidden: !actions?.onCompare || busy },
        { key: "branch", label: "Branch from here", icon: <GitBranch />, onSelect: () => actions?.onBranch?.(m), hidden: !actions?.onBranch },
        { key: "quote", label: "Quote", icon: <Quote />, onSelect: () => actions?.onQuote?.(m), hidden: !actions?.onQuote },
        { key: "prompt", label: "Save as prompt", icon: <BookmarkPlus />, onSelect: () => actions?.onSaveAsPrompt?.(m), hidden: !actions?.onSaveAsPrompt },
        { key: "export", label: "Export message", icon: <FileDown />, onSelect: () => actions?.onExport?.(m), hidden: !actions?.onExport },
        { key: "delete", label: "Delete", icon: <Trash2 />, onSelect: () => actions?.onDelete?.(m), destructive: true, hidden: !actions?.onDelete || busy },
      ];
  const visible = items.filter((i) => !i.hidden);
  const primaryKeys = isUser ? ["copy", "edit", "branch"] : ["copy", "retry", "continue", "compare", "branch"];
  const primary = visible.filter((i) => primaryKeys.includes(i.key));
  const more = visible.filter((i) => !primaryKeys.includes(i.key));

  const longPress = useLongPress({ onLongPress: () => setSheetOpen(true), disabled: !isMobile || streaming || editing || visible.length === 0 });

  const toolbar = !streaming ? (
    <div className={cn("flex items-center gap-0.5", isMobile ? "" : "hover-reveal")}>
      {primary.map((i) => (
        <IconBtn key={i.key} label={i.label} onClick={i.onSelect}>
          {i.icon}
        </IconBtn>
      ))}
      {more.length ? (
        isMobile ? (
          <IconBtn label="More actions" onClick={() => setSheetOpen(true)}>
            <MoreHorizontal />
          </IconBtn>
        ) : (
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <button className="rounded p-1 text-fg-subtle transition-colors hover:bg-bg-muted hover:text-fg [&_svg]:size-3.5" aria-label="More actions">
                <MoreHorizontal />
              </button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align={isUser ? "end" : "start"} className="min-w-[220px]">
              {more.map((i, idx) => (
                <React.Fragment key={i.key}>
                  {i.destructive && idx > 0 ? <DropdownMenuSeparator /> : null}
                  <DropdownMenuItem destructive={i.destructive} onSelect={() => setTimeout(i.onSelect, 10)}>
                    {i.icon} {i.label}
                  </DropdownMenuItem>
                </React.Fragment>
              ))}
            </DropdownMenuContent>
          </DropdownMenu>
        )
      ) : null}
    </div>
  ) : null;

  const sheet = isMobile ? (
    <ActionSheet open={sheetOpen} onOpenChange={setSheetOpen} items={toSheetItems(visible)} title={isUser ? "Your message" : model?.displayName ?? "Response"}>
      <p className="line-clamp-3 rounded-xl bg-bg-subtle px-3 py-2 text-[13px] text-fg-muted">{text || "(no text)"}</p>
    </ActionSheet>
  ) : null;

  if (isUser) {
    return (
      <div id={m.id} className="group flex w-full justify-end px-3 sm:px-0">
        <div className="flex max-w-[92%] flex-col items-end gap-1.5 sm:max-w-[78%]">
          {attachments.length ? (
            <div className="flex flex-wrap justify-end gap-1.5">
              {attachments.map((a) => (
                <AttachmentChip key={a.attachmentId} a={a} />
              ))}
            </div>
          ) : null}
          {editing ? (
            <div className="w-full min-w-[min(280px,80vw)] space-y-2 rounded-2xl border border-border bg-bg-elevated p-2">
              <Textarea value={draft} onChange={(e) => setDraft(e.target.value)} className="min-h-[80px] border-0 shadow-none focus:ring-0" autoFocus />
              <div className="flex justify-end gap-2">
                <Button variant="ghost" size="xs" onClick={() => setEditing(false)}>
                  Cancel
                </Button>
                <Button
                  size="xs"
                  onClick={() => {
                    setEditing(false);
                    if (draft.trim() && draft !== m.content) actions?.onEdit?.(m, draft);
                  }}
                >
                  Save &amp; resend
                </Button>
              </div>
            </div>
          ) : (
            <div {...longPress} className="select-text whitespace-pre-wrap break-words rounded-2xl rounded-br-md bg-bg-muted px-4 py-2.5 text-[15px] leading-relaxed [-webkit-touch-callout:none]">
              {m.content}
            </div>
          )}
          <div className="flex items-center gap-0.5 text-[11px] text-fg-subtle">
            {toolbar}
            <span className="ml-1">{new Date(m.createdAt).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}</span>
          </div>
        </div>
        {sheet}
      </div>
    );
  }

  const provider = m.provider ?? model?.provider;
  const modelName = model?.displayName ?? m.modelKey?.split("/").slice(1).join("/") ?? "model";
  const waiting = streaming && !live!.text && !live!.reasoning && live!.tools.length === 0 && live!.serverTools.length === 0;
  const err = m.error as StoredMessageError | null;

  return (
    <div id={m.id} className="group flex w-full gap-3 px-3 sm:px-0">
      <div className="mt-1 hidden size-7 shrink-0 items-center justify-center rounded-lg border border-border bg-bg-elevated sm:flex">
        <ProviderIcon provider={provider} size={15} />
      </div>
      <div className="min-w-0 flex-1 space-y-2">
        <div className="flex flex-wrap items-center gap-1.5 text-[12px] text-fg-muted">
          <ProviderIcon provider={provider} size={13} className="sm:hidden" />
          <span className="font-medium text-fg">{modelName}</span>
          {provider ? <span className="text-fg-subtle">· {PROVIDERS[provider as keyof typeof PROVIDERS]?.shortName ?? provider}</span> : null}
          {m.status === "stopped" ? <Badge variant="warning">Stopped</Badge> : null}
          {m.status === "error" ? <Badge variant="danger">Failed</Badge> : null}
          {m.finishReason === "length" ? <Badge variant="warning">Cut off (max tokens)</Badge> : null}
          {notice ? <Badge variant={notice.kind === "deprecated" ? "danger" : "warning"}>{notice.kind === "deprecated" ? "Deprecated" : `Retires ${notice.shutdownDate}`}</Badge> : null}
        </div>

        {notice && isLast && !streaming && replacement && actions?.onSwitchModel ? (
          <div className="flex flex-wrap items-center gap-2 rounded-xl bg-warning-soft px-3 py-2 text-[12.5px] text-warning">
            <AlertTriangle className="size-3.5 shrink-0" />
            <span className="min-w-0 flex-1">
              {modelName} is {notice.kind === "deprecated" ? "deprecated" : `retiring on ${notice.shutdownDate}`}.
            </span>
            <Button size="xs" variant="outline" className="bg-bg-elevated" onClick={() => actions.onSwitchModel?.(replacement.key)}>
              Switch to {replacement.displayName}
            </Button>
          </div>
        ) : null}

        {(reasoning || (streaming && live!.reasoning)) && showReasoning ? <ReasoningBlock text={reasoning} streaming={streaming && !live!.text} durationMs={reasoningParts[0]?.durationMs} /> : null}

        {serverTools.length ? (
          <div className="flex flex-wrap gap-1.5">
            {dedupeServerTools(serverTools).map((t, i) => (
              <Badge key={i} variant="info" className="gap-1">
                {t.name === "web_search" ? <Globe /> : <Wrench />} {t.name.replace(/_/g, " ")} {t.status === "started" ? <Loader2 className="animate-spin" /> : null}
              </Badge>
            ))}
          </div>
        ) : null}

        {toolCalls.map((t) => (
          <ToolCallCard key={t.id} call={t} />
        ))}

        {waiting ? (
          <div className="flex items-center gap-2 py-1 text-[13px] text-fg-muted">
            <span className="inline-flex gap-1">
              <i className="size-1.5 animate-pulse-soft rounded-full bg-fg-subtle" />
              <i className="size-1.5 animate-pulse-soft rounded-full bg-fg-subtle [animation-delay:200ms]" />
              <i className="size-1.5 animate-pulse-soft rounded-full bg-fg-subtle [animation-delay:400ms]" />
            </span>
            {model?.capabilities.reasoning ? "Thinking…" : "Waiting for the model…"}
          </div>
        ) : null}

        {text ? (
          <div {...longPress} className="select-text [-webkit-touch-callout:none]">
            <Markdown content={text} wrap={wrapCode} streaming={streaming} />
          </div>
        ) : null}

        {refusal ? (
          <div className="flex items-start gap-2 rounded-lg border border-warning/30 bg-warning-soft px-3 py-2 text-[13px] text-warning">
            <AlertTriangle className="mt-0.5 size-4 shrink-0" />
            <div>
              The provider declined this request{refusal.category ? ` (${refusal.category})` : ""}.{refusal.explanation ? ` ${refusal.explanation}` : ""}
            </div>
          </div>
        ) : null}

        {err && (m.status === "error" || (m.status === "stopped" && err.code !== "CANCELLED")) ? (
          <MessageError error={err} provider={err.provider ?? provider} requestId={requestId} since={errorAt} onRetry={actions?.onRetry && !busy ? () => actions.onRetry?.(m) : undefined} onSwitchModel={actions?.onRegenerateWith && !busy ? () => actions.onRegenerateWith?.(m) : undefined} />
        ) : null}

        {citations.length ? <Citations items={citations} /> : null}

        {!streaming ? (
          <div className="flex flex-wrap items-center gap-x-1 gap-y-1 pt-0.5 text-[11.5px] text-fg-subtle">
            {toolbar}
            <span className="ml-1 tabular-nums">{new Date(m.createdAt).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}</span>
            {usage ? (
              <>
                <Dot />
                <span className="tabular-nums">
                  {formatTokens(usage.inputTokens ?? 0)} in · {formatTokens(usage.outputTokens ?? 0)} out
                </span>
              </>
            ) : null}
            {showCosts && m.costUsd !== null && m.costUsd !== undefined ? (
              <>
                <Dot />
                <span className="tabular-nums">≈ {formatUsd(m.costUsd, { precise: m.costUsd < 0.01 })}</span>
              </>
            ) : null}
            {usage || m.latencyMs ? (
              <button type="button" onClick={() => setDetailsOpen((o) => !o)} className="tap ml-1 inline-flex items-center gap-0.5 rounded px-1 py-0.5 text-fg-subtle hover:bg-bg-muted hover:text-fg" aria-expanded={detailsOpen} aria-label="Toggle message details">
                Details {detailsOpen ? <ChevronDown className="size-3" /> : <ChevronRight className="size-3" />}
              </button>
            ) : null}
          </div>
        ) : null}

        {detailsOpen && !streaming ? (
          <dl className="grid grid-cols-2 gap-x-4 gap-y-1.5 rounded-xl bg-bg-subtle/70 px-3 py-2.5 text-[12px] sm:grid-cols-3 md:grid-cols-4">
            <Meta k="Model" v={m.modelKey?.split("/").slice(1).join("/") ?? modelName} mono />
            <Meta k="Provider" v={provider ? PROVIDERS[provider as keyof typeof PROVIDERS]?.name ?? provider : "—"} />
            <Meta k="Input tokens" v={usage?.inputTokens !== undefined ? formatTokens(usage.inputTokens) : "—"} />
            <Meta k="Output tokens" v={usage?.outputTokens !== undefined ? formatTokens(usage.outputTokens) : "—"} />
            <Meta k="Reasoning tokens" v={usage?.reasoningTokens ? formatTokens(usage.reasoningTokens) : "—"} />
            <Meta k="Cached tokens" v={usage?.cachedInputTokens ? formatTokens(usage.cachedInputTokens) : "—"} />
            <Meta k="Cost" v={m.costUsd !== null && m.costUsd !== undefined ? `≈ ${formatUsd(m.costUsd, { precise: m.costUsd < 0.01 })}` : "—"} />
            <Meta k="Time to first token" v={formatMs(m.ttftMs)} />
            <Meta k="Total latency" v={formatMs(m.latencyMs)} />
            <Meta k="Speed" v={tps ? `${tps} tok/s` : "—"} />
            <Meta k="Reasoning effort" v={typeof settings?.reasoningEffort === "string" ? String(settings.reasoningEffort) : settings?.thinkingBudget ? `${formatTokens(settings.thinkingBudget as number)} budget` : "—"} />
            <Meta k="Finish reason" v={m.finishReason ?? "—"} mono />
          </dl>
        ) : null}
      </div>
      {sheet}
    </div>
  );
});

function toSheetItems(items: Item[]): ActionSheetItem[] {
  return items.map((i) => ({ key: i.key, label: i.label, icon: i.icon, onSelect: i.onSelect, destructive: i.destructive }));
}

function Dot() {
  return <span className="text-border-strong">·</span>;
}

function Meta({ k, v, mono }: { k: string; v: string; mono?: boolean }) {
  return (
    <div className="min-w-0">
      <dt className="text-[10.5px] uppercase tracking-wide text-fg-subtle">{k}</dt>
      <dd className={cn("truncate tabular-nums text-fg", mono && "font-mono text-[11.5px]")} title={v}>
        {v}
      </dd>
    </div>
  );
}

function IconBtn({ label, onClick, children }: { label: string; onClick: () => void; children: React.ReactNode }) {
  return (
    <Tooltip content={label}>
      <button onClick={onClick} className="tap rounded p-1 text-fg-subtle transition-colors hover:bg-bg-muted hover:text-fg [&_svg]:size-3.5" aria-label={label}>
        {children}
      </button>
    </Tooltip>
  );
}

function ReasoningBlock({ text, streaming, durationMs }: { text: string; streaming: boolean; durationMs?: number }) {
  const [open, setOpen] = React.useState(streaming);
  React.useEffect(() => {
    if (!streaming) {
      // collapse automatically once the answer starts
      // eslint-disable-next-line react-hooks/set-state-in-effect
      setOpen(false);
    }
  }, [streaming]);
  const ref = React.useRef<HTMLDivElement>(null);
  React.useEffect(() => {
    if (open && streaming && ref.current) ref.current.scrollTop = ref.current.scrollHeight;
  }, [text, open, streaming]);
  return (
    <div className="rounded-lg border border-border bg-bg-subtle/60">
      <button onClick={() => setOpen((o) => !o)} className="flex min-h-[36px] w-full items-center gap-2 px-3 py-1.5 text-left text-[12.5px] text-fg-muted hover:text-fg">
        <Brain className={cn("size-3.5", streaming && "animate-pulse-soft text-accent")} />
        <span className="font-medium">{streaming ? "Thinking…" : "Reasoning"}</span>
        {durationMs ? <span className="text-fg-subtle">· {formatMs(durationMs)}</span> : null}
        <span className="ml-auto">{open ? <ChevronDown className="size-3.5" /> : <ChevronRight className="size-3.5" />}</span>
      </button>
      {open ? (
        <div ref={ref} className="max-h-72 overflow-y-auto border-t border-border px-3 py-2 text-[13px] leading-relaxed text-fg-muted scrollbar-thin">
          <Markdown content={text} streaming={streaming} className="text-[13px] text-fg-muted [&_p]:text-fg-muted" />
        </div>
      ) : null}
    </div>
  );
}

function ToolCallCard({ call }: { call: { id: string; name: string; args: string; result?: unknown; isError?: boolean; durationMs?: number } }) {
  const [open, setOpen] = React.useState(false);
  const pending = call.result === undefined;
  return (
    <div className="rounded-lg border border-border bg-bg-subtle/60 text-[12.5px]">
      <button onClick={() => setOpen((o) => !o)} className="flex min-h-[36px] w-full items-center gap-2 px-3 py-1.5 text-left text-fg-muted hover:text-fg">
        <Wrench className={cn("size-3.5", pending && "animate-pulse-soft text-accent")} />
        <span className="font-medium font-mono">{call.name}</span>
        {pending ? <span className="text-fg-subtle">running…</span> : call.isError ? <Badge variant="danger">error</Badge> : <Badge variant="success">done</Badge>}
        {call.durationMs !== undefined ? <span className="text-fg-subtle">· {formatMs(call.durationMs)}</span> : null}
        <span className="ml-auto">{open ? <ChevronDown className="size-3.5" /> : <ChevronRight className="size-3.5" />}</span>
      </button>
      {open ? (
        <div className="grid gap-2 border-t border-border p-3 sm:grid-cols-2">
          <div>
            <div className="mb-1 text-[11px] uppercase tracking-wide text-fg-subtle">Arguments</div>
            <pre className="overflow-x-auto rounded-md bg-bg-muted p-2 font-mono text-[11.5px] scrollbar-thin">{pretty(call.args)}</pre>
          </div>
          <div>
            <div className="mb-1 text-[11px] uppercase tracking-wide text-fg-subtle">Result</div>
            <pre className="overflow-x-auto rounded-md bg-bg-muted p-2 font-mono text-[11.5px] scrollbar-thin">{pending ? "…" : pretty(JSON.stringify(call.result))}</pre>
          </div>
        </div>
      ) : null}
    </div>
  );
}

function pretty(s: string): string {
  try {
    return JSON.stringify(JSON.parse(s), null, 2);
  } catch {
    return s;
  }
}

function Citations({ items }: { items: { url?: string; title?: string; snippet?: string }[] }) {
  const unique = React.useMemo(() => {
    const seen = new Set<string>();
    return items.filter((c) => {
      const k = c.url ?? c.title ?? "";
      if (!k || seen.has(k)) return false;
      seen.add(k);
      return true;
    });
  }, [items]);
  if (!unique.length) return null;
  return (
    <div className="flex flex-wrap gap-1.5 pt-1">
      {unique.slice(0, 12).map((c, i) => (
        <a key={i} href={c.url} target="_blank" rel="noopener noreferrer nofollow" className="inline-flex max-w-[260px] items-center gap-1 rounded-md border border-border bg-bg-subtle px-2 py-1 text-[11.5px] text-fg-muted hover:border-border-strong hover:text-fg" title={c.snippet}>
          <ExternalLink className="size-3 shrink-0" />
          <span className="truncate">{c.title || safeHost(c.url)}</span>
        </a>
      ))}
    </div>
  );
}

function safeHost(url?: string): string {
  try {
    return url ? new URL(url).hostname : "source";
  } catch {
    return "source";
  }
}

function dedupeServerTools(list: { name: string; status: string }[]) {
  const map = new Map<string, { name: string; status: string }>();
  for (const t of list) map.set(t.name, t);
  return [...map.values()];
}

export function AttachmentChip({ a, onRemove }: { a: { attachmentId?: string; id?: string; kind: string; name: string; mimeType: string; sizeBytes: number }; onRemove?: () => void }) {
  const id = a.attachmentId ?? a.id;
  if (a.kind === "image" && id) {
    return (
      <div className="relative">
        {/* eslint-disable-next-line @next/next/no-img-element */}
        <img src={`/api/attachments?id=${id}`} alt={a.name} className="max-h-40 max-w-[240px] rounded-lg border border-border object-cover" />
        {onRemove ? (
          <button onClick={onRemove} className="tap absolute -right-1.5 -top-1.5 rounded-full border border-border bg-bg-elevated p-0.5 text-fg-muted hover:text-danger" aria-label="Remove attachment">
            <X className="size-3" />
          </button>
        ) : null}
      </div>
    );
  }
  return (
    <div className="inline-flex items-center gap-1.5 rounded-lg border border-border bg-bg-elevated px-2.5 py-1.5 text-[12px]">
      <FileText className="size-3.5 text-fg-subtle" />
      <span className="max-w-[180px] truncate">{a.name}</span>
      <span className="text-fg-subtle">{(a.sizeBytes / 1024).toFixed(0)} KB</span>
      {onRemove ? (
        <button onClick={onRemove} className="tap ml-0.5 rounded p-0.5 text-fg-subtle hover:text-danger" aria-label="Remove attachment">
          <X className="size-3" />
        </button>
      ) : null}
    </div>
  );
}