import {
  Check,
  Clock,
  Copy,
  FileText,
  PencilSimple,
  SpinnerGap,
  Star,
  User,
  Wrench,
  XCircle,
} from "@phosphor-icons/react";
import {
  isValidElement,
  useEffect,
  useRef,
  useState,
  type MouseEvent as ReactMouseEvent,
  type PointerEvent as ReactPointerEvent,
  type ReactNode,
} from "react";
import digitwhaleMarkSrc from "../../assets/dw.png";
import { cn } from "../../lib/cn";
import { Button } from "../button";
import { Modal } from "../overlay";
import { useOverlay } from "../overlay/use-overlay";
import { Markdown } from "../typography/markdown";
import type { AIInputMention } from "./ai-input";
import { UploadPreviewChip, type UploadPreviewItem } from "./shared";
import { TextArea } from "./text-area";

export type AIMessageRole = "assistant" | "system" | "tool" | "user";
export type AIMessageStatus =
  | "awaiting-confirmation"
  | "complete"
  | "error"
  | "pending"
  | "queued"
  | "rejected"
  | "running"
  | "streaming";

export type AIMessageAction = {
  disabled?: boolean;
  icon?: ReactNode;
  id: string;
  iconOnly?: boolean;
  label: string;
  onClick?: () => void;
};

export type AIToolAction = {
  disabled?: boolean;
  href?: string;
  id: string;
  label: string;
  tone?: "destructive" | "primary" | "secondary";
};

export type AIToolPresentation =
  | { kind: "default" }
  | {
      description?: string;
      kind: "status";
      label: string;
      tone?: "danger" | "info" | "neutral" | "success" | "warning";
    }
  | {
      fields: Array<{ label: string; value: unknown }>;
      kind: "key-value";
      title?: string;
    }
  | {
      items: Array<{
        badge?: string;
        description?: string;
        id?: string;
        label: string;
        value?: unknown;
      }>;
      kind: "list";
      title?: string;
    }
  | {
      columns: Array<{ key: string; label: string }>;
      kind: "table";
      rows: Array<Record<string, unknown>>;
      title?: string;
    }
  | {
      description?: string;
      href?: string;
      kind: "resource";
      metadata?: Array<{ label: string; value: unknown }>;
      resourceId: string;
      resourceType: string;
      title: string;
    }
  | {
      description?: string;
      kind: "progress";
      label: string;
      max?: number;
      value?: number;
    }
  | { after: unknown; before: unknown; kind: "diff"; title?: string }
  | { data: unknown; kind: "custom"; rendererKey: string };

export type AIToolCall = {
  actions?: AIToolAction[];
  args?: ReactNode | string;
  defaultExpanded?: boolean;
  error?: ReactNode | string;
  id: string;
  input?: unknown;
  name: string;
  output?: ReactNode | string | unknown;
  presentation?: AIToolPresentation;
  progress?: { label?: string; max?: number; value?: number };
  status?: AIMessageStatus;
  summary?: ReactNode;
};

export type AIMessagePart =
  | { id?: string; text: ReactNode; type: "text" }
  | { id?: string; toolCall: AIToolCall; type: "tool-call" };

export type AIMessageThought = {
  id?: string;
  text: ReactNode;
};

export type AIToolCallRenderContext = {
  defaultExpanded: boolean;
  message: AIMessage;
  onAction?: (action: AIToolAction, toolCall: AIToolCall, message: AIMessage) => void;
};

export type AIToolCallRenderer = (
  toolCall: AIToolCall,
  context: AIToolCallRenderContext,
) => ReactNode;

export type AIMessage = {
  actions?: AIMessageAction[];
  attachments?: UploadPreviewItem[];
  avatar?: ReactNode;
  avatarClassName?: string;
  content?: ReactNode;
  createdAt?: Date | number | string;
  defaultToolCallsExpanded?: boolean;
  feedbackDisabled?: boolean;
  id: string;
  metadata?: ReactNode;
  parts?: AIMessagePart[];
  role: AIMessageRole;
  showAvatar?: boolean;
  status?: AIMessageStatus;
  thoughts?: AIMessageThought[];
  title?: ReactNode;
  toolCalls?: AIToolCall[];
};

export type AIMessageContentRenderContext = {
  message: AIMessage;
  streaming: boolean;
};

export type AIMessageEditContext = {
  onCancel: () => void;
  onChange: (value: string) => void;
  onSubmit: () => void;
  value: string;
};

export type AIMessageListProps = {
  className?: string;
  defaultToolCallsExpanded?: boolean;
  groupToolCalls?: boolean;
  editOnDoubleTap?: boolean;
  emptyState?: ReactNode;
  feedbackDialogDescription?: ReactNode;
  feedbackDialogTitle?: ReactNode;
  onFeedbackSubmit?: (
    message: AIMessage,
    feedback: { rating: number; review: string },
  ) => Promise<void> | void;
  messages: AIMessage[];
  onCopy?: (message: AIMessage) => void;
  onEdit?: (message: AIMessage) => void;
  onEditSubmit?: (message: AIMessage, content: string) => void;
  onToolAction?: (
    action: AIToolAction,
    toolCall: AIToolCall,
    message: AIMessage,
  ) => void;
  mentionHighlightClassName?: string;
  mentions?: AIInputMention[];
  renderMention?: (mention: AIInputMention, token: string) => ReactNode;
  renderAction?: (action: AIMessageAction, message: AIMessage) => ReactNode;
  renderAvatar?: (message: AIMessage) => ReactNode;
  renderContent?: (
    content: ReactNode,
    context: AIMessageContentRenderContext,
  ) => ReactNode;
  renderEdit?: (message: AIMessage, context: AIMessageEditContext) => ReactNode;
  renderMessage?: (message: AIMessage, content: ReactNode) => ReactNode;
  renderToolCall?: (toolCall: AIToolCall, message: AIMessage) => ReactNode;
  showCopyAction?: boolean;
  showEditAction?: boolean;
  showFeedbackAction?: boolean;
  showAvatars?: boolean;
  showMessageActions?: boolean;
  showTimestamps?: boolean;
  showToolCalls?: boolean;
  toolRenderers?: Record<string, AIToolCallRenderer>;
  variant?: "default" | "bubbles";
};

function formatTime(value?: Date | number | string) {
  if (!value) return "";
  const date = value instanceof Date ? value : new Date(value);
  return Number.isNaN(date.getTime())
    ? ""
    : date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
}

function renderMentionText(
  value: string,
  mentions: AIInputMention[],
  className: string,
  renderMention?: (mention: AIInputMention, token: string) => ReactNode,
) {
  const parts = value.split(/([@#/][\w-]+)/g);
  return parts.map((part, index) => {
    const match = part.match(/^([@#/])([\w-]+)$/);
    const mention = match
      ? mentions.find(
          (item) =>
            (item.trigger ?? match[1]) === match[1] &&
            (item.value ?? item.label).toLowerCase() === match[2].toLowerCase(),
        )
      : undefined;
    if (!mention || !match) return part;
    return (
      renderMention?.(mention, part) ?? (
        <span
          className={cn(
            "rounded border border-[var(--uhuru-border-accent)] px-1 py-0.5",
            className,
          )}
          key={`${mention.id}-${index}`}
          style={{
            backgroundColor:
              "color-mix(in srgb, var(--uhuru-accent-solid) 16%, transparent)",
            color: "var(--uhuru-accent-strong)",
          }}
        >
          {part}
        </span>
      )
    );
  });
}

function renderInlineMarkdown(
  value: string,
  mentions: AIInputMention[],
  mentionClassName: string,
  renderMention?: (mention: AIInputMention, token: string) => ReactNode,
) {
  const parts = value.split(/(`[^`]+`|\*\*[^*]+\*\*|\[[^\]]+\]\([^\)]+\))/g);
  return parts.map((part, index) => {
    if (part.startsWith("`") && part.endsWith("`")) {
      return (
        <code
          className="rounded bg-[var(--uhuru-surface-muted)] px-1.5 py-0.5 text-[0.9em]"
          key={index}
        >
          {renderMentionText(
            part.slice(1, -1),
            mentions,
            mentionClassName,
            renderMention,
          )}
        </code>
      );
    }
    if (part.startsWith("**") && part.endsWith("**")) {
      return (
        <strong key={index}>
          {renderMentionText(
            part.slice(2, -2),
            mentions,
            mentionClassName,
            renderMention,
          )}
        </strong>
      );
    }
    const link = part.match(/^\[([^\]]+)\]\(([^\)]+)\)$/);
    if (link) {
      return (
        <a
          className="text-[var(--uhuru-accent)] underline underline-offset-2"
          href={link[2]}
          key={index}
          rel="noreferrer"
          target="_blank"
        >
          {link[1]}
        </a>
      );
    }
    return renderMentionText(part, mentions, mentionClassName, renderMention);
  });
}

function DefaultMarkdown({
  className,
  value,
  mentions,
  mentionHighlightClassName,
  renderMention,
}: {
  className?: string;
  value: string;
  mentions: AIInputMention[];
  mentionHighlightClassName: string;
  renderMention?: (mention: AIInputMention, token: string) => ReactNode;
}) {
  return (
    <Markdown
      className={className}
      mentionHighlightClassName={mentionHighlightClassName}
      mentions={mentions}
      renderMention={renderMention}
      value={value}
    />
  );
}

function StatusIcon({ status }: { status?: AIMessageStatus }) {
  if (
    status === "streaming" ||
    status === "pending" ||
    status === "queued" ||
    status === "running"
  )
    return <SpinnerGap className="animate-spin" size={15} />;
  if (status === "error" || status === "rejected")
    return <XCircle size={15} />;
  if (status === "awaiting-confirmation") return <Clock size={15} />;
  return <Check size={15} />;
}

function safeToolValue(value: unknown): ReactNode {
  if (value === undefined || value === null) return null;
  if (isValidElement(value)) return value;
  if (typeof value === "string" || typeof value === "number") return value;
  if (typeof value === "boolean") return value ? "Yes" : "No";
  try {
    return JSON.stringify(value, null, 2);
  } catch {
    return String(value);
  }
}

function toolActionClassName(tone: AIToolAction["tone"]) {
  return cn(
    "inline-flex min-h-8 items-center rounded-[var(--uhuru-radius-sm)] border px-3 py-1.5 font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50",
    tone === "primary"
      ? "border-[var(--uhuru-border-accent)] bg-[var(--uhuru-accent-solid)] text-[var(--uhuru-text-inverse)] hover:opacity-90"
      : tone === "destructive"
        ? "border-[var(--uhuru-error-border)] bg-[var(--uhuru-error-bg)] text-[var(--uhuru-error-text)] hover:bg-[var(--uhuru-error-border)]/20"
        : "border-[var(--uhuru-border-default)] text-[var(--uhuru-text-primary)] hover:bg-[var(--uhuru-surface-muted)]",
  );
}

function ToolPresentation({ presentation }: { presentation: AIToolPresentation }) {
  if (presentation.kind === "default" || presentation.kind === "custom") {
    return null;
  }
  if (presentation.kind === "status") {
    const toneClassName = {
      danger: "border-[var(--uhuru-error-border)] bg-[var(--uhuru-error-bg)] text-[var(--uhuru-error-text)]",
      info: "border-[var(--uhuru-info-border)] bg-[var(--uhuru-info-bg)] text-[var(--uhuru-info-text)]",
      neutral: "border-[var(--uhuru-border-subtle)] bg-[var(--uhuru-surface-default)] text-[var(--uhuru-text-secondary)]",
      success: "border-[var(--uhuru-success-border)] bg-[var(--uhuru-success-bg)] text-[var(--uhuru-success-text)]",
      warning: "border-[var(--uhuru-warning-border)] bg-[var(--uhuru-warning-bg)] text-[var(--uhuru-warning-text)]",
    }[presentation.tone ?? "neutral"];
    return (
      <div className={cn("rounded-[var(--uhuru-radius-md)] border p-3", toneClassName)}>
        <div className="font-medium">{presentation.label}</div>
        {presentation.description ? (
          <div className="mt-1 opacity-80">{presentation.description}</div>
        ) : null}
      </div>
    );
  }
  if (presentation.kind === "key-value") {
    return (
      <div className="space-y-2">
        {presentation.title ? <div className="font-medium">{presentation.title}</div> : null}
        <dl className="grid gap-2 sm:grid-cols-2">
          {presentation.fields.map((field, index) => (
            <div className="rounded-[var(--uhuru-radius-sm)] bg-[var(--uhuru-surface-default)] p-2" key={`${field.label}-${index}`}>
              <dt className="text-[var(--uhuru-text-tertiary)]">{field.label}</dt>
              <dd className="mt-0.5 break-words text-[var(--uhuru-text-primary)]">{safeToolValue(field.value)}</dd>
            </div>
          ))}
        </dl>
      </div>
    );
  }
  if (presentation.kind === "list") {
    return (
      <div className="space-y-2">
        {presentation.title ? <div className="font-medium">{presentation.title}</div> : null}
        <div className="divide-y divide-[var(--uhuru-border-subtle)] overflow-hidden rounded-[var(--uhuru-radius-md)] border border-[var(--uhuru-border-subtle)] bg-[var(--uhuru-surface-default)]">
          {presentation.items.map((item, index) => (
            <div className="flex min-w-0 items-start justify-between gap-3 p-2.5" key={item.id ?? `${item.label}-${index}`}>
              <div className="min-w-0">
                <div className="truncate font-medium text-[var(--uhuru-text-primary)]">{item.label}</div>
                {item.description ? <div className="mt-0.5 text-[var(--uhuru-text-tertiary)]">{item.description}</div> : null}
                {item.value !== undefined ? <div className="mt-1 break-words text-[var(--uhuru-text-secondary)]">{safeToolValue(item.value)}</div> : null}
              </div>
              {item.badge ? <span className="shrink-0 rounded-full border border-[var(--uhuru-border-subtle)] px-2 py-0.5 text-[0.7rem]">{item.badge}</span> : null}
            </div>
          ))}
        </div>
      </div>
    );
  }
  if (presentation.kind === "table") {
    return (
      <div className="space-y-2">
        {presentation.title ? <div className="font-medium">{presentation.title}</div> : null}
        <div className="max-w-full overflow-x-auto rounded-[var(--uhuru-radius-md)] border border-[var(--uhuru-border-subtle)] bg-[var(--uhuru-surface-default)]">
          <table className="min-w-full border-collapse text-left">
            <thead className="bg-[var(--uhuru-surface-muted)] text-[var(--uhuru-text-tertiary)]">
              <tr>{presentation.columns.map((column) => <th className="whitespace-nowrap px-3 py-2 font-medium" key={column.key}>{column.label}</th>)}</tr>
            </thead>
            <tbody className="divide-y divide-[var(--uhuru-border-subtle)]">
              {presentation.rows.map((row, rowIndex) => (
                <tr key={rowIndex}>{presentation.columns.map((column) => <td className="max-w-64 break-words px-3 py-2 text-[var(--uhuru-text-secondary)]" key={column.key}>{safeToolValue(row[column.key])}</td>)}</tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    );
  }
  if (presentation.kind === "resource") {
    const body = (
      <div className="rounded-[var(--uhuru-radius-md)] border border-[var(--uhuru-border-subtle)] bg-[var(--uhuru-surface-default)] p-3">
        <div className="text-[0.7rem] uppercase tracking-[0.12em] text-[var(--uhuru-text-tertiary)]">{presentation.resourceType}</div>
        <div className="mt-1 font-medium text-[var(--uhuru-text-primary)]">{presentation.title}</div>
        {presentation.description ? <div className="mt-1 text-[var(--uhuru-text-secondary)]">{presentation.description}</div> : null}
        {presentation.metadata?.length ? <dl className="mt-3 grid gap-2 sm:grid-cols-2">{presentation.metadata.map((item, index) => <div key={`${item.label}-${index}`}><dt className="text-[var(--uhuru-text-tertiary)]">{item.label}</dt><dd className="break-words text-[var(--uhuru-text-secondary)]">{safeToolValue(item.value)}</dd></div>)}</dl> : null}
      </div>
    );
    return presentation.href ? <a className="block hover:opacity-90" href={presentation.href}>{body}</a> : body;
  }
  if (presentation.kind === "progress") {
    const max = presentation.max && presentation.max > 0 ? presentation.max : 100;
    const value = Math.min(max, Math.max(0, presentation.value ?? 0));
    const percentage = Math.round((value / max) * 100);
    return (
      <div className="rounded-[var(--uhuru-radius-md)] bg-[var(--uhuru-surface-default)] p-3">
        <div className="flex items-center justify-between gap-3"><span className="font-medium">{presentation.label}</span><span className="text-[var(--uhuru-text-tertiary)]">{percentage}%</span></div>
        <div className="mt-2 h-1.5 overflow-hidden rounded-full bg-[var(--uhuru-border-subtle)]"><div className="h-full rounded-full bg-[var(--uhuru-accent-solid)] transition-[width] duration-300" style={{ width: `${percentage}%` }} /></div>
        {presentation.description ? <div className="mt-2 text-[var(--uhuru-text-tertiary)]">{presentation.description}</div> : null}
      </div>
    );
  }
  return (
    <div className="space-y-2">
      {presentation.title ? <div className="font-medium">{presentation.title}</div> : null}
      <div className="grid gap-2 sm:grid-cols-2">
        <pre className="max-h-64 overflow-auto whitespace-pre-wrap rounded-[var(--uhuru-radius-md)] bg-[var(--uhuru-surface-default)] p-2 text-[var(--uhuru-text-secondary)]">{safeToolValue(presentation.before)}</pre>
        <pre className="max-h-64 overflow-auto whitespace-pre-wrap rounded-[var(--uhuru-radius-md)] bg-[var(--uhuru-surface-default)] p-2 text-[var(--uhuru-text-secondary)]">{safeToolValue(presentation.after)}</pre>
      </div>
    </div>
  );
}

function PendingResponse() {
  return (
    <span
      aria-label="Assistant is responding"
      className="inline-flex h-7 items-center gap-1.5 px-1 text-[var(--uhuru-text-tertiary)]"
      role="status"
    >
      <span className="sr-only">Assistant is responding</span>
      {[0, 1, 2].map((index) => (
        <span
          aria-hidden="true"
          className="h-1.5 w-1.5 animate-pulse rounded-full bg-current motion-reduce:animate-none"
          key={index}
          style={{ animationDelay: `${index * 140}ms` }}
        />
      ))}
    </span>
  );
}

function Thoughts({ thoughts }: { thoughts: AIMessageThought[] }) {
  const [expanded, setExpanded] = useState(false);

  if (!thoughts.length) return null;

  return (
    <details
      className="mb-2 min-w-0 max-w-full rounded-[var(--uhuru-radius-sm)] border border-[var(--uhuru-border-subtle)] bg-[var(--uhuru-surface-muted)] text-sm"
      open={expanded}
    >
      <summary
        className="cursor-pointer list-none px-3 py-2 text-[var(--uhuru-text-tertiary)]"
        onClick={(event) => {
          event.preventDefault();
          setExpanded((current) => !current);
        }}
      >
        Thought process ({thoughts.length})
      </summary>
      {expanded ? (
        <div className="space-y-2 border-t border-[var(--uhuru-border-subtle)] px-3 py-2 text-[var(--uhuru-text-secondary)]">
          {thoughts.map((thought, index) => (
            <div key={thought.id ?? `thought-${index}`}>{thought.text}</div>
          ))}
        </div>
      ) : null}
    </details>
  );
}

function DefaultToolCall({
  defaultExpanded = false,
  message,
  onAction,
  toolCall,
}: {
  defaultExpanded?: boolean;
  message: AIMessage;
  onAction?: AIToolCallRenderContext["onAction"];
  toolCall: AIToolCall;
}) {
  const [open, setOpen] = useState(
    toolCall.defaultExpanded ?? defaultExpanded,
  );
  return (
    <details
      className="rounded-[var(--uhuru-radius-md)] border border-[var(--uhuru-border-subtle)] bg-[var(--uhuru-surface-muted)]"
      open={open}
    >
      <summary
        className="flex cursor-pointer list-none items-center gap-2 px-3 py-2 text-sm text-[var(--uhuru-text-secondary)]"
        onClick={(event) => {
          event.preventDefault();
          setOpen((current) => !current);
        }}
      >
        <Wrench size={15} />
        <span className="min-w-0 flex-1 truncate">
          {toolCall.summary ?? toolCall.name}
        </span>
        <StatusIcon status={toolCall.status} />
      </summary>
      {open ? (
        <div className="space-y-2 border-t border-[var(--uhuru-border-subtle)] px-3 py-2 text-xs">
          {toolCall.presentation ? <ToolPresentation presentation={toolCall.presentation} /> : null}
          {toolCall.args || toolCall.input !== undefined ? (
            <pre className="overflow-x-auto whitespace-pre-wrap text-[var(--uhuru-text-tertiary)]">
              {safeToolValue(toolCall.input ?? toolCall.args)}
            </pre>
          ) : null}
          {(!toolCall.presentation || toolCall.presentation.kind === "default" || toolCall.presentation.kind === "custom") && toolCall.output !== undefined ? (
            <div className="rounded bg-[var(--uhuru-surface-default)] p-2 text-[var(--uhuru-text-secondary)]">
              {safeToolValue(toolCall.output)}
            </div>
          ) : null}
          {toolCall.error ? <div className="rounded bg-[var(--uhuru-error-bg)] p-2 text-[var(--uhuru-error-text)]">{safeToolValue(toolCall.error)}</div> : null}
          {toolCall.progress ? <ToolPresentation presentation={{ kind: "progress", label: toolCall.progress.label ?? "Working", max: toolCall.progress.max, value: toolCall.progress.value }} /> : null}
          {toolCall.actions?.length ? (
            <div className="flex flex-wrap gap-2 pt-1">
              {toolCall.actions.map((action) => action.href ? (
                <a className={toolActionClassName(action.tone)} href={action.href} key={action.id}>{action.label}</a>
              ) : (
                <button className={toolActionClassName(action.tone)} disabled={action.disabled} key={action.id} onClick={() => onAction?.(action, toolCall, message)} type="button">{action.label}</button>
              ))}
            </div>
          ) : null}
        </div>
      ) : null}
    </details>
  );
}

function toolGroupLabel(toolCalls: AIToolCall[]) {
  const names = toolCalls.map((toolCall) => toolCall.name.replace(/[-_]+/g, " ").trim());
  if (names.some((name) => /search|scrap|read|fetch|browse|research/i.test(name))) return "Research";
  if (names.some((name) => /edit|write|update|create|delete|file/i.test(name))) return "Workspace changes";
  if (names.some((name) => /command|shell|terminal|process/i.test(name))) return "Commands";
  return "Tool activity";
}

function ToolCallGroup({
  defaultExpanded = false,
  renderTool,
  toolCalls,
}: {
  defaultExpanded?: boolean;
  renderTool: (toolCall: AIToolCall) => ReactNode;
  toolCalls: AIToolCall[];
}) {
  const [expanded, setExpanded] = useState(defaultExpanded);

  useEffect(() => {
    if (toolCalls.length <= 1) setExpanded(defaultExpanded);
  }, [defaultExpanded, toolCalls.length]);

  if (toolCalls.length === 0) return null;
  if (toolCalls.length === 1) return <>{renderTool(toolCalls[0])}</>;

  return (
    <div className="my-1 min-w-0 max-w-full">
      <button
        aria-expanded={expanded}
        className="group flex min-w-0 max-w-full items-center gap-1 text-left text-[11px] text-[var(--uhuru-text-tertiary)] transition-colors hover:text-[var(--uhuru-text-primary)]"
        onClick={() => setExpanded((current) => !current)}
        type="button"
      >
        <span
          aria-hidden="true"
          className={cn(
            "shrink-0 transition-transform duration-150",
            expanded ? "rotate-90" : "",
          )}
        >
          <Wrench size={13} />
        </span>
        <span className="min-w-0 truncate underline decoration-dotted underline-offset-2">
          {expanded ? "Hide" : "Show"} {toolGroupLabel(toolCalls)}
        </span>
        <span className="shrink-0">({toolCalls.length})</span>
      </button>
      <div
        className={cn(
          "grid min-w-0 max-w-full transition-[grid-template-rows] duration-200 ease-out",
          expanded ? "mt-1.5 grid-rows-[1fr]" : "grid-rows-[0fr]",
        )}
      >
        <div className="min-h-0 min-w-0 max-w-full overflow-hidden space-y-2">
          {toolCalls.map((toolCall) => (
            <div className="min-w-0 max-w-full" key={toolCall.id}>
              {renderTool(toolCall)}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function roleIcon(role: AIMessageRole) {
  if (role === "assistant")
    return (
      <img alt="" className="h-4 w-4 object-contain" src={digitwhaleMarkSrc} />
    );
  if (role === "tool") return <Wrench size={16} />;
  if (role === "system") return <FileText size={16} />;
  return <User size={16} />;
}

export function AIMessageList({
  className,
  defaultToolCallsExpanded = false,
  editOnDoubleTap = true,
  emptyState = (
    <p className="py-10 text-center text-sm text-[var(--uhuru-text-tertiary)]">
      No messages yet.
    </p>
  ),
  feedbackDialogDescription = "Rate this response and leave an optional note for the team.",
  feedbackDialogTitle = "Share feedback",
  groupToolCalls = false,
  messages,
  mentionHighlightClassName = "",
  mentions = [],
  onFeedbackSubmit,
  onCopy,
  onEdit,
  onEditSubmit,
  onToolAction,
  renderMention,
  renderAction,
  renderAvatar,
  renderContent,
  renderEdit,
  renderMessage,
  renderToolCall,
  showCopyAction = true,
  showEditAction = false,
  showFeedbackAction = true,
  showAvatars = true,
  showMessageActions = true,
  showTimestamps = true,
  showToolCalls = true,
  toolRenderers = {},
  variant = "default",
}: AIMessageListProps) {
  const [copiedMessageId, setCopiedMessageId] = useState<string | null>(null);
  const [editingMessageId, setEditingMessageId] = useState<string | null>(null);
  const [editValue, setEditValue] = useState("");
  const [editedContent, setEditedContent] = useState<Record<string, string>>(
    {},
  );
  const [feedbackMessage, setFeedbackMessage] = useState<AIMessage | null>(
    null,
  );
  const [feedbackRating, setFeedbackRating] = useState(0);
  const [feedbackHoverRating, setFeedbackHoverRating] = useState(0);
  const [feedbackReview, setFeedbackReview] = useState("");
  const [feedbackError, setFeedbackError] = useState("");
  const [feedbackSubmitting, setFeedbackSubmitting] = useState(false);
  const lastTouchRef = useRef<{
    id: string;
    time: number;
    x: number;
    y: number;
  } | null>(null);
  const feedbackModal = useOverlay();

  const isInteractiveTarget = (target: EventTarget | null) =>
    target instanceof Element &&
    Boolean(
      target.closest("a, button, input, select, textarea, [role='button']"),
    );

  const toggleMessageEdit = (message: AIMessage) => {
    if (message.role !== "user" || typeof message.content !== "string") return;

    if (editingMessageId === message.id) {
      setEditingMessageId(null);
      return;
    }

    setEditValue(String(editedContent[message.id] ?? message.content ?? ""));
    setEditingMessageId(message.id);
    onEdit?.(message);
  };

  const handleMessageDoubleClick = (
    event: ReactMouseEvent,
    message: AIMessage,
  ) => {
    if (!editOnDoubleTap || isInteractiveTarget(event.target)) return;
    event.preventDefault();
    toggleMessageEdit(message);
  };

  const handleMessagePointerUp = (
    event: ReactPointerEvent,
    message: AIMessage,
  ) => {
    if (
      !editOnDoubleTap ||
      event.pointerType !== "touch" ||
      isInteractiveTarget(event.target)
    )
      return;

    const currentTouch = {
      id: message.id,
      time: performance.now(),
      x: event.clientX,
      y: event.clientY,
    };
    const previousTouch = lastTouchRef.current;
    const isDoubleTap =
      previousTouch?.id === message.id &&
      currentTouch.time - previousTouch.time < 350 &&
      Math.hypot(
        currentTouch.x - previousTouch.x,
        currentTouch.y - previousTouch.y,
      ) < 24;

    if (isDoubleTap) {
      event.preventDefault();
      lastTouchRef.current = null;
      toggleMessageEdit(message);
      return;
    }

    lastTouchRef.current = currentTouch;
  };

  const feedbackEnabled =
    showFeedbackAction && typeof onFeedbackSubmit === "function";
  const feedbackModalContent =
    feedbackEnabled && feedbackMessage ? (
      <Modal
        description={
          typeof feedbackDialogDescription === "string"
            ? feedbackDialogDescription
            : undefined
        }
        isOpen={feedbackModal.isOpen}
        title={
          typeof feedbackDialogTitle === "string"
            ? feedbackDialogTitle
            : "Share feedback"
        }
      >
        <div className="space-y-7 py-2">
          <div className="flex flex-wrap justify-center gap-3 py-5">
            {Array.from({ length: 5 }, (_, index) => {
              const rating = index + 1;
              const highlightedRating = feedbackHoverRating || feedbackRating;
              const selected = rating <= highlightedRating;
              return (
                <button
                  aria-label={`${rating} star${rating === 1 ? "" : "s"}`}
                  aria-pressed={selected}
                  className={cn(
                    "inline-flex h-11 w-11 items-center justify-center rounded-none border-0 bg-transparent p-0 text-[var(--uhuru-text-secondary)] transition-colors hover:text-[var(--uhuru-text-primary)]",
                    selected ? "text-[var(--uhuru-accent-solid)]" : "",
                  )}
                  key={rating}
                  onClick={() => setFeedbackRating(rating)}
                  onFocus={() => setFeedbackHoverRating(rating)}
                  onBlur={() => setFeedbackHoverRating(0)}
                  onMouseEnter={() => setFeedbackHoverRating(rating)}
                  onMouseLeave={() => setFeedbackHoverRating(0)}
                  type="button"
                >
                  <Star
                    aria-hidden="true"
                    size={35}
                    weight={selected ? "fill" : "regular"}
                  />
                </button>
              );
            })}
          </div>
          <TextArea
            label="Optional review"
            onChange={(event) => setFeedbackReview(event.target.value)}
            placeholder="Tell us what worked well or what should improve."
            rows={4}
            className="mb-4"
            value={feedbackReview}
          />
          {feedbackError ? (
            <p className="text-sm text-[var(--uhuru-error-text)]" role="alert">
              {feedbackError}
            </p>
          ) : null}
          <div className="mt-10 flex flex-wrap justify-end gap-3 pt-6">
            <Button
              disabled={feedbackSubmitting}
              onClick={() => {
                feedbackModal.close();
                setFeedbackMessage(null);
                setFeedbackRating(0);
                setFeedbackHoverRating(0);
                setFeedbackReview("");
                setFeedbackError("");
              }}
              tone="secondary"
            >
              Cancel
            </Button>
            <Button
              disabled={feedbackRating === 0 || feedbackSubmitting}
              onClick={async () => {
                if (!feedbackMessage) return;
                setFeedbackError("");
                setFeedbackSubmitting(true);
                try {
                  await onFeedbackSubmit?.(feedbackMessage, {
                    rating: feedbackRating,
                    review: feedbackReview,
                  });
                  feedbackModal.close();
                  setFeedbackMessage(null);
                  setFeedbackRating(0);
                  setFeedbackHoverRating(0);
                  setFeedbackReview("");
                } catch (error) {
                  setFeedbackError(
                    error instanceof Error
                      ? error.message
                      : "Feedback could not be submitted.",
                  );
                } finally {
                  setFeedbackSubmitting(false);
                }
              }}
              tone="primary"
            >
              {feedbackSubmitting ? "Submitting..." : "Submit feedback"}
            </Button>
          </div>
        </div>
      </Modal>
    ) : null;

  if (messages.length === 0)
    return <div className={className}>{emptyState}</div>;

  return (
    <>
      <div
        aria-live="polite"
        className={cn("flex min-w-0 flex-col gap-5", className)}
      >
        {messages.map((message) => {
          const isUserMessage = message.role === "user";
          const isActiveResponse =
            message.role === "assistant" &&
            (message.status === "pending" ||
              message.status === "running" ||
              message.status === "streaming");
          const isCompactUserMessage =
            isUserMessage &&
            typeof message.content === "string" &&
            message.content.trim().length > 0 &&
            !/\s/.test(message.content.trim()) &&
            message.content.trim().length <= 16;
          const bubbleTextClassName =
            variant === "bubbles"
              ? isUserMessage
                ? "text-[var(--uhuru-surface-muted)]"
                : "text-[var(--uhuru-accent-solid)]"
              : "";
          const messageContent = editedContent[message.id] ?? message.content;
          const hasVisibleContent =
            typeof messageContent === "string"
              ? messageContent.trim().length > 0
              : messageContent !== undefined && messageContent !== null;
          const isWaitingForContent =
            isActiveResponse &&
            !hasVisibleContent &&
            !message.toolCalls?.length;
          const content =
            isWaitingForContent ? (
              <PendingResponse />
            ) : messageContent === undefined ? null : renderContent ? (
              renderContent(messageContent, {
                message,
                streaming: message.status === "streaming",
              })
            ) : typeof messageContent === "string" ? (
              <DefaultMarkdown
                className={bubbleTextClassName}
                mentionHighlightClassName={mentionHighlightClassName}
                mentions={mentions}
                renderMention={renderMention}
                value={messageContent}
              />
            ) : (
              messageContent
            );
          const renderTool = (toolCall: AIToolCall) => {
            const defaultExpanded =
              toolCall.defaultExpanded ??
              message.defaultToolCallsExpanded ??
              defaultToolCallsExpanded;
            const renderer =
              toolRenderers[toolCall.name] ??
              (toolCall.presentation?.kind === "custom"
                ? toolRenderers[toolCall.presentation.rendererKey]
                : undefined);
            if (renderer) {
              return renderer(toolCall, {
                defaultExpanded,
                message,
                onAction: onToolAction,
              });
            }
            if (renderToolCall) return renderToolCall(toolCall, message);
            return (
              <DefaultToolCall
                defaultExpanded={defaultExpanded}
                message={message}
                onAction={onToolAction}
                toolCall={toolCall}
              />
            );
          };
          const renderToolRun = (toolCalls: AIToolCall[], key: string) => {
            if (groupToolCalls) {
              return (
                <ToolCallGroup
                  defaultExpanded={defaultToolCallsExpanded}
                  key={key}
                  renderTool={renderTool}
                  toolCalls={toolCalls}
                />
              );
            }
            return toolCalls.map((toolCall) => (
              <div className="min-w-0" key={toolCall.id}>
                {renderTool(toolCall)}
              </div>
            ));
          };
          const timelineContent = message.parts?.length ? (
            <div className="min-w-0 max-w-full space-y-2">
              {(() => {
                const nodes: ReactNode[] = [];
                let index = 0;
                while (index < message.parts.length) {
                  const part = message.parts[index];
                  if (part.type === "text") {
                    nodes.push(
                      <div key={part.id ?? `text-${index}`}>
                        {typeof part.text === "string" ? (
                          <DefaultMarkdown
                            className={bubbleTextClassName}
                            mentionHighlightClassName={mentionHighlightClassName}
                            mentions={mentions}
                            renderMention={renderMention}
                            value={part.text}
                          />
                        ) : part.text}
                      </div>,
                    );
                    index += 1;
                    continue;
                  }
                  const run: AIToolCall[] = [];
                  while (index < message.parts.length && message.parts[index].type === "tool-call") {
                    const toolPart = message.parts[index];
                    if (toolPart.type === "tool-call") run.push(toolPart.toolCall);
                    index += 1;
                  }
                  nodes.push(
                    renderToolRun(
                      run,
                      `tool-run-${run[0]?.id ?? `index-${index}`}`,
                    ),
                  );
                }
                if (!nodes.length && content) nodes.push(<div key="pending">{content}</div>);
                return nodes;
              })()}
            </div>
          ) : (
            <>
              {content}
              {showToolCalls && message.toolCalls?.length ? (
                <div className="mt-3 min-w-0 max-w-full space-y-2">
                  {renderToolRun(message.toolCalls, "tool-run-fallback")}
                </div>
              ) : null}
            </>
          );
          const messageContentWithThoughts = message.thoughts?.length ? (
            <>
              <Thoughts thoughts={message.thoughts} />
              {timelineContent}
            </>
          ) : (
            timelineContent
          );
          const messageActions = isActiveResponse
            ? []
            : [...(message.actions ?? [])];
          if (
            showCopyAction &&
            typeof message.content === "string" &&
            !messageActions.some(
              (action) => action.label.toLowerCase() === "copy",
            )
          ) {
            messageActions.push({ iconOnly: true, id: "copy", label: "Copy" });
          }
          if (
            feedbackEnabled &&
            message.role === "assistant" &&
            !message.feedbackDisabled &&
            !messageActions.some(
              (action) => action.label.toLowerCase() === "feedback",
            )
          ) {
            messageActions.push({
              id: "feedback",
              label: "Feedback",
              onClick: () => {
                setFeedbackMessage(message);
                setFeedbackRating(0);
                setFeedbackHoverRating(0);
                setFeedbackReview("");
                feedbackModal.open();
              },
            });
          }
          if (
            showEditAction &&
            isUserMessage &&
            typeof message.content === "string" &&
            !messageActions.some(
              (action) => action.label.toLowerCase() === "edit",
            )
          ) {
            messageActions.push({
              icon: <PencilSimple aria-hidden="true" size={14} />,
              iconOnly: true,
              id: "edit",
              label: "Edit",
              onClick: () => {
                toggleMessageEdit(message);
              },
            });
          }
          const body = (
            <article
              className={cn(
                "group flex min-w-0 gap-3",
                message.role === "user" ? "flex-row-reverse" : "",
              )}
              key={message.id}
            >
              {showAvatars && message.showAvatar !== false ? (
                <span
                  className={cn(
                    "grid h-8 w-8 shrink-0 place-items-center rounded-full border border-[var(--uhuru-border-default)] bg-[var(--uhuru-surface-muted)] text-[var(--uhuru-text-secondary)]",
                    message.avatarClassName,
                  )}
                >
                  {renderAvatar?.(message) ??
                    message.avatar ??
                    roleIcon(message.role)}
                </span>
              ) : null}
              <div
                className={cn(
                  "flex min-w-0 flex-col gap-2",
                  editingMessageId === message.id
                    ? "w-full max-w-[min(46rem,96%)]"
                    : "max-w-[min(46rem,88%)]",
                  "transition-[width,max-width] duration-200 ease-out motion-reduce:transition-none",
                  message.role === "user" ? "items-end" : "items-start",
                )}
              >
                {message.title ? (
                  <span className="text-xs font-medium text-[var(--uhuru-text-tertiary)]">
                    {message.title}
                  </span>
                ) : null}
                {editingMessageId === message.id ? (
                  renderEdit ? (
                    <div
                      className="uhuru-ai-message-edit-transition w-full"
                      onDoubleClick={(event) =>
                        handleMessageDoubleClick(event, message)
                      }
                      onPointerUp={(event) =>
                        handleMessagePointerUp(event, message)
                      }
                    >
                      {renderEdit(message, {
                        onCancel: () => setEditingMessageId(null),
                        onChange: setEditValue,
                        onSubmit: () => {
                          onEditSubmit?.(message, editValue);
                          if (!onEditSubmit)
                            setEditedContent((current) => ({
                              ...current,
                              [message.id]: editValue,
                            }));
                          setEditingMessageId(null);
                        },
                        value: editValue,
                      })}
                    </div>
                  ) : (
                    <div
                      className="uhuru-ai-message-edit-transition w-full rounded-[var(--uhuru-radius-lg)] border border-[var(--uhuru-border-accent)] bg-[var(--uhuru-surface-default)] p-2 shadow-[var(--uhuru-shadow-sm)]"
                      onDoubleClick={(event) =>
                        handleMessageDoubleClick(event, message)
                      }
                      onPointerUp={(event) =>
                        handleMessagePointerUp(event, message)
                      }
                    >
                      <textarea
                        aria-label="Edit message"
                        className="min-h-24 w-full resize-none border-0 bg-transparent px-2 py-1 text-sm leading-6 text-[var(--uhuru-text-primary)] outline-none"
                        onChange={(event) => setEditValue(event.target.value)}
                        value={editValue}
                      />
                      <div className="flex justify-end gap-2 border-t border-[var(--uhuru-border-subtle)] pt-2">
                        <button
                          className="rounded-[var(--uhuru-radius-sm)] px-2.5 py-1.5 text-xs text-[var(--uhuru-text-secondary)] hover:bg-[var(--uhuru-surface-muted)]"
                          onClick={() => setEditingMessageId(null)}
                          type="button"
                        >
                          Cancel
                        </button>
                        <button
                          className="rounded-[var(--uhuru-radius-sm)] bg-[var(--uhuru-action-primary)] px-2.5 py-1.5 text-xs text-[var(--uhuru-text-inverse)] hover:bg-[var(--uhuru-action-primary-hover)]"
                          onClick={() => {
                            onEditSubmit?.(message, editValue);
                            if (!onEditSubmit)
                              setEditedContent((current) => ({
                                ...current,
                                [message.id]: editValue,
                              }));
                            setEditingMessageId(null);
                          }}
                          type="button"
                        >
                          Save
                        </button>
                      </div>
                    </div>
                  )
                ) : (
                  <div
                    className={cn(
                      isUserMessage && typeof message.content === "string"
                        ? "uhuru-ai-message-edit-transition"
                        : "",
                      "min-w-0 max-w-full break-words text-sm [overflow-wrap:anywhere] [&_a]:break-words [&_code]:whitespace-pre-wrap [&_pre]:max-w-full [&_pre]:overflow-x-auto",
                      isUserMessage
                        ? "border border-[var(--uhuru-border-subtle)] bg-[var(--uhuru-surface-muted)] px-2 py-1"
                        : "bg-transparent px-2 py-1",
                      isCompactUserMessage
                        ? "rounded-[var(--uhuru-radius-full)] px-3 py-1.5"
                        : "rounded-[var(--uhuru-radius-lg)]",
                      variant === "bubbles"
                        ? isUserMessage
                          ? isCompactUserMessage
                            ? "rounded-[var(--uhuru-radius-full)] bg-[color-mix(in_srgb,var(--uhuru-accent-solid)_84%,transparent)] px-3 py-1.5 text-[var(--uhuru-surface-muted)]"
                            : "rounded-[1.35rem] rounded-br-sm bg-[color-mix(in_srgb,var(--uhuru-accent-solid)_84%,transparent)] px-4 py-2.5 text-[var(--uhuru-surface-muted)]"
                          : "rounded-[1.35rem] rounded-bl-sm border border-[var(--uhuru-border-subtle)] bg-[var(--uhuru-surface-muted)] px-4 py-2.5 text-[var(--uhuru-accent-solid)]"
                        : "",
                    )}
                    onDoubleClick={(event) =>
                      handleMessageDoubleClick(event, message)
                    }
                    onPointerUp={(event) =>
                      handleMessagePointerUp(event, message)
                    }
                  >
                    {message.attachments?.length ? (
                      <div className="mb-2 flex max-w-full flex-wrap gap-1.5">
                        {message.attachments.map((attachment, index) => (
                          <UploadPreviewChip
                            file={attachment}
                            index={index}
                            key={`${attachment.name}-${index}`}
                          />
                        ))}
                      </div>
                    ) : null}
                  {showToolCalls ? messageContentWithThoughts : message.thoughts?.length ? (
                    <>
                      <Thoughts thoughts={message.thoughts} />
                      {content}
                    </>
                  ) : content}
                  </div>
                )}
                <div className="flex items-center gap-2 text-xs text-[var(--uhuru-text-tertiary)] opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100">
                  {showTimestamps && message.createdAt ? (
                    <span className="inline-flex items-center gap-1">
                      <Clock size={13} />
                      {formatTime(message.createdAt)}
                    </span>
                  ) : null}
                  {message.metadata}
                  {showMessageActions
                    ? messageActions.map((action) =>
                        renderAction ? (
                          renderAction(action, message)
                        ) : (
                          <button
                            aria-label={action.label}
                            className={cn(
                              "inline-flex h-7 items-center gap-1 rounded-[var(--uhuru-radius-sm)] px-2 hover:bg-[var(--uhuru-surface-muted)] hover:text-[var(--uhuru-text-primary)]",
                              action.iconOnly ? "w-7 justify-center px-0" : "",
                              action.label.toLowerCase() === "copy" &&
                                copiedMessageId === message.id
                                ? "text-[var(--uhuru-success-text)]"
                                : "",
                            )}
                            disabled={action.disabled}
                            key={action.id}
                            onClick={() => {
                              if (action.onClick) {
                                action.onClick();
                                return;
                              }
                              if (
                                action.label.toLowerCase() === "copy" &&
                                typeof message.content === "string"
                              ) {
                                void navigator.clipboard?.writeText(
                                  message.content,
                                );
                                onCopy?.(message);
                                setCopiedMessageId(message.id);
                                window.setTimeout(
                                  () =>
                                    setCopiedMessageId((current) =>
                                      current === message.id ? null : current,
                                    ),
                                  1400,
                                );
                              }
                            }}
                            title={
                              copiedMessageId === message.id &&
                              action.label.toLowerCase() === "copy"
                                ? "Copied"
                                : action.label
                            }
                            type="button"
                          >
                            {action.label.toLowerCase() === "copy" &&
                            copiedMessageId === message.id ? (
                              <Check size={14} weight="bold" />
                            ) : (
                              (action.icon ??
                              (action.label.toLowerCase() === "copy" ? (
                                <Copy size={14} />
                              ) : null))
                            )}
                            {action.iconOnly
                              ? null
                              : copiedMessageId === message.id &&
                                  action.label.toLowerCase() === "copy"
                                ? "Done"
                                : action.label}
                          </button>
                        ),
                      )
                    : null}
                </div>
              </div>
            </article>
          );
          return renderMessage ? (
            <div key={message.id}>{renderMessage(message, body)}</div>
          ) : (
            body
          );
        })}
      </div>
      {feedbackModalContent}
    </>
  );
}