import React from 'react'
import { render, screen, fireEvent } from '@testing-library/react'
import '@testing-library/jest-dom'
// 测试是否可以导入共享的测试工具
// 使用本地测试工具
import { setupTestEnv, renderTaroComponent } from './__helpers__/local-test-utils'
import OrderList from '../src/pages/OrderList/OrderList'

// 测试设置共享测试环境
setupTestEnv()

// Mock Taro组件
jest.mock('@tarojs/components', () => ({
  View: ({ children, className, ...props }: any) => (
    <div className={className} {...props}>{children}</div>
  ),
  Text: ({ children, className, ...props }: any) => (
    <span className={className} {...props}>{children}</span>
  ),
  ScrollView: ({ children, className, scrollY, ...props }: any) => (
    <div className={className} data-scroll-y={scrollY} {...props}>{children}</div>
  ),
  Input: ({ className, placeholder, value, onInput, ...props }: any) => (
    <input
      className={className}
      placeholder={placeholder}
      value={value}
      onChange={(e) => onInput?.({ detail: { value: e.target.value } })}
      {...props}
    />
  ),
  Button: ({ children, className, onClick, ...props }: any) => (
    <button className={className} onClick={onClick} {...props}>
      {children}
    </button>
  ),
}))

// Mock UI组件
jest.mock('@d8d/yongren-shared-ui/components/YongrenTabBarLayout', () => ({
  YongrenTabBarLayout: ({ children, activeKey }: any) => (
    <div data-testid="yongren-tab-bar-layout" data-active-key={activeKey}>
      {children}
    </div>
  ),
}))

jest.mock('@d8d/mini-shared-ui-components/components/navbar', () => ({
  Navbar: ({ title, leftIcon, leftText, onClickLeft }: any) => (
    <div data-testid="navbar" data-title={title} data-left-icon={leftIcon} data-left-text={leftText}>
      <button onClick={onClickLeft}>Navbar Left</button>
    </div>
  ),
}))

describe('OrderList 组件测试', () => {
  test('渲染订单列表页面', () => {
    render(<OrderList />)

    // 验证Navbar存在
    expect(screen.getByTestId('navbar')).toBeInTheDocument()
    expect(screen.getByTestId('navbar')).toHaveAttribute('data-title', '订单列表')

    // 验证筛选标签
    expect(screen.getAllByText('全部订单').length).toBeGreaterThan(0)
    expect(screen.getAllByText('进行中').length).toBeGreaterThan(0)
    expect(screen.getAllByText('已完成').length).toBeGreaterThan(0)
    expect(screen.getAllByText('已取消').length).toBeGreaterThan(0)

    // 验证搜索框
    expect(screen.getByPlaceholderText('按订单号、人才姓名搜索')).toBeInTheDocument()

    // 验证订单卡片
    expect(screen.getByText('阿里巴巴2023-11')).toBeInTheDocument()
    expect(screen.getByText('腾讯科技2023-08')).toBeInTheDocument()
    expect(screen.getByText('字节跳动2023-12')).toBeInTheDocument()

    // 验证统计卡片
    expect(screen.getByText('本月打卡')).toBeInTheDocument()
    expect(screen.getByText('工资视频')).toBeInTheDocument()
    expect(screen.getByText('个税视频')).toBeInTheDocument()
  })

  test('状态筛选功能', () => {
    render(<OrderList />)

    // 初始状态为"全部订单"
    const allOrdersTab = screen.getByText('全部订单')
    expect(allOrdersTab).toHaveClass('bg-blue-100')

    // 点击"进行中"筛选 - 使用更具体的选择器
    const filterTabs = screen.getAllByText('进行中')
    const inProgressTab = filterTabs[0] // 第一个是筛选标签
    fireEvent.click(inProgressTab)

    // 验证样式变化（通过类名检查）
    expect(inProgressTab).toHaveClass('bg-green-100')
  })

  test('搜索功能', () => {
    render(<OrderList />)

    const searchInput = screen.getByPlaceholderText('按订单号、人才姓名搜索')
    const searchButton = screen.getByText('搜索')

    // 输入搜索关键词
    fireEvent.change(searchInput, { target: { value: '阿里巴巴' } })
    expect(searchInput).toHaveValue('阿里巴巴')

    // 点击搜索按钮（主要验证没有错误）
    fireEvent.click(searchButton)
  })

  test('查看详情按钮点击', () => {
    render(<OrderList />)

    const viewDetailButtons = screen.getAllByText('查看详情')
    expect(viewDetailButtons.length).toBeGreaterThan(0)

    // 点击第一个查看详情按钮
    fireEvent.click(viewDetailButtons[0])
  })

  test('分页控件渲染', () => {
    render(<OrderList />)

    expect(screen.getByText('1 / 3')).toBeInTheDocument()
    expect(screen.getByText('上一页')).toBeInTheDocument()
    expect(screen.getByText('下一页')).toBeInTheDocument()
  })
})