import { useState, type ReactNode } from "react";
import { Check, Copy, LoaderCircle, CircleAlert } from "lucide-react";
import { MessageAction, MessageActions } from "@/shared/ai-elements/message";
import { getAnswerPartsTranscript } from "../answer-ui/answer-presentation";
import type { AnswerUiPart } from "../answer-ui/contract";

export function AgentChatMessageHeader({ running }: { running: boolean }) {
  if (!running) return null;
  return (
    <div className="agent-chat-message-header justify-start text-left">
      <span
        role="status"
        className="inline-flex items-center gap-1.5 text-sm leading-5 text-muted-foreground"
      >
        <LoaderCircle size={14} className="motion-safe:animate-spin" aria-hidden="true" />
        正在回复
      </span>
    </div>
  );
}

export const AGENT_MESSAGE_ACTION_CLASS_NAME =
  "h-8 min-w-8 gap-1.5 px-2 text-sm font-normal text-muted-foreground shadow-none after:inset-0";
export const AGENT_MESSAGE_ACTION_LABEL_CLASS_NAME = "hidden @[320px]/agent-message-actions:inline";

export function AgentChatMessageToolbar({
  speech,
  copy,
  children
}: {
  speech?: ReactNode;
  copy?: ReactNode;
  children?: ReactNode;
}) {
  return (
    <div
      data-agent-message-footer
      className="@container/agent-message-actions mt-2 border-t border-border/70 pt-1"
    >
      <div data-agent-message-toolbar className="flex min-h-8 min-w-0 items-center gap-1">
        {children}
        <div className="ml-auto flex shrink-0 items-center gap-1">
          {speech}
          {copy}
        </div>
      </div>
    </div>
  );
}

export function AgentChatMessageActions({ parts }: { parts: AnswerUiPart[] }) {
  const [copied, setCopied] = useState(false);
  const [error, setError] = useState(false);
  const text = getAnswerPartsTranscript(parts);
  if (!text.trim()) return null;

  return (
    <MessageActions className="agent-chat-message-actions">
      <MessageAction
        tooltip={error ? "复制失败，点击重试" : copied ? "回复已复制" : "复制回复"}
        label={copied ? "回复已复制" : "复制回复"}
        size="sm"
        className={AGENT_MESSAGE_ACTION_CLASS_NAME}
        aria-label={copied ? "回复已复制" : "复制回复"}
        onClick={async () => {
          try {
            await navigator.clipboard.writeText(text);
            setCopied(true);
            setError(false);
          } catch {
            setCopied(false);
            setError(true);
          }
        }}
      >
        {error ? (
          <CircleAlert size={16} className="text-destructive" aria-hidden="true" />
        ) : copied ? (
          <Check size={16} aria-hidden="true" />
        ) : (
          <Copy size={16} aria-hidden="true" />
        )}
        <span className={AGENT_MESSAGE_ACTION_LABEL_CLASS_NAME}>
          {error ? "重试复制" : copied ? "已复制" : "复制"}
        </span>
      </MessageAction>
      <span role="status" className="sr-only">
        {error ? "复制失败，请选择文字复制" : copied ? "已复制回复文字与交互内容摘要" : ""}
      </span>
    </MessageActions>
  );
}