/* eslint-disable @next/next/no-img-element */
import React from "react";
import { render, screen } from "@testing-library/react";
import { ThemeProvider, createTheme } from "@mui/material/styles";

import { AgentComposer } from "./AgentComposer";

jest.mock("next/image", () => ({
  __esModule: true,
  default: (props: React.ImgHTMLAttributes<HTMLImageElement>) => (
    <img {...props} alt={props.alt ?? ""} />
  ),
}));

jest.mock("framer-motion", () => ({
  AnimatePresence: ({ children }: { children: React.ReactNode }) => <>{children}</>,
  motion: {
    div: ({
      children,
      animate: _animate,
      exit: _exit,
      initial: _initial,
      transition: _transition,
      ...props
    }: React.HTMLAttributes<HTMLDivElement> & Record<string, unknown>) => (
      <div {...props}>{children}</div>
    ),
  },
}));

describe("AgentComposer", () => {
  it("places voice input immediately before send without an attachment action", () => {
    render(
      <ThemeProvider theme={createTheme()}>
        <AgentComposer
          isStreaming={false}
          isListening={false}
          isSttSupported
          presets={[]}
          onSend={jest.fn()}
          onAbort={jest.fn()}
          onStartListening={jest.fn()}
          onStopListening={jest.fn()}
          modelOptions={[{ id: "test-model", label: "测试模型" }]}
          selectedModel="test-model"
          onModelChange={jest.fn()}
          approvalMode="request"
          onApprovalModeChange={jest.fn()}
        />
      </ThemeProvider>,
    );

    const voiceButton = screen.getByRole("button", { name: "语音输入" });
    const sendButton = screen.getByRole("button", { name: "发送" });

    expect(screen.queryByRole("button", { name: "上传附件" })).not.toBeInTheDocument();
    expect(screen.getByTitle("快捷指令图标")).toBeInTheDocument();
    expect(screen.queryByAltText("TJWater Agent")).not.toBeInTheDocument();
    expect(voiceButton.nextElementSibling?.contains(sendButton)).toBe(true);
  });
});