import React from 'react'
import { render, screen, fireEvent } from '@testing-library/react'
import '@testing-library/jest-dom'
import OrderDetail from '../src/pages/OrderDetail/OrderDetail'
import { setupTestEnv } from './__helpers__/local-test-utils'

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>
  ),
  Button: ({ children, className, onClick, ...props }: any) => (
    <button className={className} onClick={onClick} {...props}>
      {children}
    </button>
  ),
  Input: ({ className, placeholder, value, onInput, ...props }: any) => (
    <input
      className={className}
      placeholder={placeholder}
      value={value}
      onChange={(e) => onInput?.({ detail: { value: e.target.value } })}
      {...props}
    />
  ),
  Textarea: ({ className, placeholder, value, onInput, ...props }: any) => (
    <textarea
      className={className}
      placeholder={placeholder}
      value={value}
      onChange={(e) => onInput?.({ detail: { value: e.target.value } })}
      {...props}
    />
  ),
}))

// Mock UI组件
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('OrderDetail 组件测试', () => {
  test('渲染订单详情页面', () => {
    render(<OrderDetail />)

    // 验证Navbar存在
    expect(screen.getByTestId('navbar')).toBeInTheDocument()
    expect(screen.getByTestId('navbar')).toHaveAttribute('data-title', '订单详情')
    expect(screen.getByTestId('navbar')).toHaveAttribute('data-left-text', '返回')

    // 验证订单信息
    expect(screen.getByText('阿里巴巴2023-11')).toBeInTheDocument()
    expect(screen.getByText('订单编号: ALIBABA-2023-11')).toBeInTheDocument()
    expect(screen.getAllByText('进行中').length).toBeGreaterThan(0)

    // 验证基本信息卡片
    expect(screen.getByText('基本信息')).toBeInTheDocument()
    expect(screen.getByText('预计人数')).toBeInTheDocument()
    expect(screen.getByText('30人')).toBeInTheDocument()
    expect(screen.getByText('实际人数')).toBeInTheDocument()
    expect(screen.getByText('24人')).toBeInTheDocument()

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

    // 验证关联人才卡片
    expect(screen.getByText('关联人才')).toBeInTheDocument()
    expect(screen.getByText('张三')).toBeInTheDocument()
    expect(screen.getByText('李四')).toBeInTheDocument()
    expect(screen.getByText('王五')).toBeInTheDocument()

    // 验证视频资料卡片
    expect(screen.getByText('视频资料')).toBeInTheDocument()
    expect(screen.getByText('打卡视频_2023-12-01.mp4')).toBeInTheDocument()
    expect(screen.getByText('工资视频_2023-11-30.mp4')).toBeInTheDocument()

    // 验证状态管理卡片
    expect(screen.getByText('状态管理')).toBeInTheDocument()
    expect(screen.getByText('草稿')).toBeInTheDocument()
    expect(screen.getByText('已确认')).toBeInTheDocument()
    expect(screen.getAllByText('进行中').length).toBeGreaterThan(0)
    expect(screen.getByText('已完成')).toBeInTheDocument()
    expect(screen.getByText('已取消')).toBeInTheDocument()

    // 验证操作按钮
    expect(screen.getByText('编辑订单')).toBeInTheDocument()
    expect(screen.getByText('下载订单报告')).toBeInTheDocument()
    expect(screen.getByText('分享订单')).toBeInTheDocument()
  })

  test('状态变更功能', () => {
    render(<OrderDetail />)

    // 初始状态为"进行中"
    const inProgressButton = screen.getByRole('button', { name: '进行中' })
    expect(inProgressButton).toHaveClass('bg-green-100')

    // 点击"已完成"状态
    const completedButton = screen.getByText('已完成')
    fireEvent.click(completedButton)

    // 验证状态变更（通过控制台日志验证）
  })

  test('添加备注功能', () => {
    render(<OrderDetail />)

    const textarea = screen.getByPlaceholderText('请输入备注内容...')
    const saveButton = screen.getByText('保存备注')

    // 输入备注内容
    fireEvent.change(textarea, { target: { value: '这是一个测试备注' } })
    expect(textarea).toHaveValue('这是一个测试备注')

    // 点击保存按钮
    fireEvent.click(saveButton)
  })

  test('查看详细打卡记录', () => {
    render(<OrderDetail />)

    const viewDetailButton = screen.getByText('查看详细打卡记录')
    fireEvent.click(viewDetailButton)
  })

  test('视频播放和下载按钮', () => {
    render(<OrderDetail />)

    const playButtons = screen.getAllByText('播放')
    const downloadButtons = screen.getAllByText('下载')

    expect(playButtons.length).toBeGreaterThan(0)
    expect(downloadButtons.length).toBeGreaterThan(0)

    // 点击第一个播放按钮
    fireEvent.click(playButtons[0])
    // 点击第一个下载按钮
    fireEvent.click(downloadButtons[0])
  })
})