import React from "react"
import { describe, expect, it, vi } from "vitest"
import { render } from "@testing-library/react"
import { MemoryRouter } from "react-router-dom"

vi.mock("@/components/layout/PageHead", () => ({
  default: ({ title }: { title: string }) => <div data-testid="page-head">{title}</div>,
}))

vi.mock("@tanstack/react-query", () => ({
  useQuery: () => ({ data: [], isLoading: false, isError: false, refetch: vi.fn() }),
  useMutation: () => ({ mutate: vi.fn(), mutateAsync: vi.fn(), isLoading: false }),
  useQueryClient: () => ({ invalidateQueries: vi.fn(), setQueryData: vi.fn() }),
  useInfiniteQuery: () => ({
    data: { pages: [] },
    isLoading: false,
    fetchNextPage: vi.fn(),
    hasNextPage: false,
  }),
}))

vi.mock("@/components/ui", () => ({
  Button: ({ children, onClick }: any) => <button onClick={onClick}>{children}</button>,
  Input: ({ placeholder }: any) => <input placeholder={placeholder} />,
  Select: ({ options }: any) => (
    <select>
      {options?.map((o: any) => (
        <option key={o.value}>{o.label}</option>
      ))}
    </select>
  ),
  Modal: ({ open, children }: any) => (open ? <div role="dialog">{children}</div> : null),
  Empty: () => <div>Empty</div>,
  Card: ({ children }: any) => <div>{children}</div>,
  Tag: ({ children }: any) => <span>{children}</span>,
  Tooltip: ({ children }: any) => <span>{children}</span>,
  Upload: ({ children }: any) => <div>{children}</div>,
  Progress: () => <div />,
}))

vi.mock("antd", () => ({
  Table: () => <div />,
  Pagination: () => <div />,
  Tabs: () => <div />,
  Modal: ({ open, children }: any) => (open ? <div role="dialog">{children}</div> : null),
  message: { success: vi.fn(), error: vi.fn(), warning: vi.fn(), info: vi.fn() },
  Popconfirm: ({ children }: any) => <span>{children}</span>,
  Form: ({ children }: any) => <form>{children}</form>,
  Input: ({ placeholder }: any) => <input placeholder={placeholder} />,
  InputNumber: () => <input type="number" />,
  Select: () => <select />,
  Empty: () => <div>Empty</div>,
  Space: ({ children }: any) => <div>{children}</div>,
  Tag: ({ children }: any) => <span>{children}</span>,
  Badge: ({ children }: any) => <span>{children}</span>,
  Tooltip: ({ children }: any) => <span>{children}</span>,
  Upload: ({ children }: any) => <div>{children}</div>,
  Progress: () => <div />,
  Switch: () => <input type="checkbox" />,
  Radio: ({ children }: any) => <span>{children}</span>,
  RadioGroup: ({ children }: any) => <div>{children}</div>,
  Checkbox: ({ children }: any) => (
    <label>
      <input type="checkbox" />
      {children}
    </label>
  ),
  DatePicker: () => <input type="date" />,
  Col: ({ children }: any) => <div>{children}</div>,
  Row: ({ children }: any) => <div>{children}</div>,
  Card: ({ children }: any) => <div>{children}</div>,
  List: () => <ul />,
  Grid: { useBreakpoint: () => ({ xs: true, sm: true, md: true, lg: true }) },
  Descriptions: ({ children }: any) => <div>{children}</div>,
  Divider: () => <hr />,
  Avatar: () => <span />,
  Dropdown: ({ children }: any) => <span>{children}</span>,
  Menu: ({ children }: any) => <ul>{children}</ul>,
  Drawer: ({ open, children }: any) => (open ? <div>{children}</div> : null),
  Typography: {
    Title: ({ children }: any) => <h2>{children}</h2>,
    Text: ({ children }: any) => <span>{children}</span>,
    Paragraph: ({ children }: any) => <p>{children}</p>,
  },
  Spin: ({ spinning }: any) => (spinning ? <div>Loading...</div> : <></>),
  Slider: () => <input type="range" />,
  Rate: () => <div />,
  Collapse: ({ children }: any) => <div>{children}</div>,
  Steps: ({ children }: any) => <div>{children}</div>,
  Button: ({ children }: any) => <button>{children}</button>,
}))

vi.mock("@ant-design/icons", () => ({
  AudioOutlined: () => <span />,
  CloseCircleOutlined: () => <span />,
  DeleteOutlined: () => <span />,
  HeartOutlined: () => <span />,
  PauseCircleOutlined: () => <span />,
  PlayCircleOutlined: () => <span />,
  PlusOutlined: () => <span />,
  ReloadOutlined: () => <span />,
  RobotOutlined: () => <span />,
  SearchOutlined: () => <span />,
  SoundOutlined: () => <span />,
  UploadOutlined: () => <span />,
  UserOutlined: () => <span />,
}))

vi.mock("@/store/authStore", () => ({
  useAuthStore: (sel: any) => sel({ user: { id: "1" }, isAuthenticated: true }),
}))
vi.mock("@/api/voice-clone", () => ({
  createVoiceClone: vi.fn().mockResolvedValue({ success: true }),
  deleteVoiceClone: vi.fn().mockResolvedValue({ success: true }),
  retryVoiceClone: vi.fn().mockResolvedValue({ success: true }),
}))

vi.mock("@/api/voices", () => ({
  fetchVoices: vi.fn().mockResolvedValue({ items: [], total: 0, success: true }),
  fetchPresetVoices: vi.fn().mockResolvedValue({ items: [], total: 0, success: true }),
  getVoices: vi.fn().mockResolvedValue({ items: [], total: 0, success: true }),
  createVoice: vi.fn().mockResolvedValue({ items: [], total: 0, success: true }),
  updateVoice: vi.fn().mockResolvedValue({ items: [], total: 0, success: true }),
  deleteVoice: vi.fn().mockResolvedValue({ items: [], total: 0, success: true }),
  generateAIVoice: vi.fn().mockResolvedValue({ items: [], total: 0, success: true }),
}))

vi.mock("@/pages/voices/VoiceLibrary.css", () => ({}))

import VoiceLibrary from "@/pages/voices/VoiceLibrary"

describe("VoiceLibrary Page", () => {
  it("should render without crashing", () => {
    const { container } = render(
      <MemoryRouter>
        <VoiceLibrary />
      </MemoryRouter>,
    )
    expect(container.firstChild).toBeTruthy()
  })
})