import React, { useState } from 'react'
import { View, Text, ScrollView, Input, Button } from '@tarojs/components'
import { YongrenTabBarLayout } from '@d8d/yongren-shared-ui/components/YongrenTabBarLayout'
import { Navbar } from '@d8d/mini-shared-ui-components/components/navbar'

type OrderStatus = 'all' | 'in_progress' | 'completed' | 'cancelled'

const OrderList: React.FC = () => {
  const [activeStatus, setActiveStatus] = useState<OrderStatus>('all')
  const [searchKeyword, setSearchKeyword] = useState('')

  const statusFilters = [
    { key: 'all', label: '全部订单', activeClass: 'bg-blue-100 text-blue-800', inactiveClass: 'bg-gray-100 text-gray-800' },
    { key: 'in_progress', label: '进行中', activeClass: 'bg-green-100 text-green-800', inactiveClass: 'bg-gray-100 text-gray-800' },
    { key: 'completed', label: '已完成', activeClass: 'bg-blue-100 text-blue-800', inactiveClass: 'bg-gray-100 text-gray-800' },
    { key: 'cancelled', label: '已取消', activeClass: 'bg-gray-100 text-gray-800', inactiveClass: 'bg-gray-100 text-gray-800' },
  ]

  // 模拟订单数据
  const mockOrders = [
    {
      id: 1,
      orderNumber: 'ALIBABA-2023-11',
      name: '阿里巴巴2023-11',
      createdAt: '2023-11-01',
      status: 'in_progress',
      statusLabel: '进行中',
      statusClass: 'bg-green-100 text-green-800',
      expectedPeople: 30,
      actualPeople: 24,
      startDate: '2023-11-01',
      endDate: '2024-10-31',
      checkinStats: { current: 24, total: 30, percentage: 80 },
      salaryVideoStats: { current: 22, total: 24, percentage: 92 },
      taxVideoStats: { current: 20, total: 24, percentage: 83 },
    },
    {
      id: 2,
      orderNumber: 'TENCENT-2023-08',
      name: '腾讯科技2023-08',
      createdAt: '2023-08-15',
      status: 'completed',
      statusLabel: '已完成',
      statusClass: 'bg-blue-100 text-blue-800',
      expectedPeople: 20,
      actualPeople: 18,
      startDate: '2023-08-15',
      endDate: '2023-10-31',
      checkinStats: { current: 18, total: 18, percentage: 100 },
      salaryVideoStats: { current: 18, total: 18, percentage: 100 },
      taxVideoStats: { current: 18, total: 18, percentage: 100 },
    },
    {
      id: 3,
      orderNumber: 'BYTEDANCE-2023-12',
      name: '字节跳动2023-12',
      createdAt: '2023-11-20',
      status: 'pending',
      statusLabel: '待开始',
      statusClass: 'bg-yellow-100 text-yellow-800',
      expectedPeople: 25,
      actualPeople: 5,
      startDate: '2023-12-01',
      endDate: '2024-11-30',
      checkinStats: { current: 0, total: 5, percentage: 0 },
      salaryVideoStats: { current: 0, total: 5, percentage: 0 },
      taxVideoStats: { current: 0, total: 5, percentage: 0 },
    },
  ]

  const handleSearch = () => {
    console.log('搜索关键词:', searchKeyword)
    // TODO: 调用API搜索订单
  }

  const handleStatusFilter = (status: OrderStatus) => {
    setActiveStatus(status)
    // TODO: 根据状态筛选订单
  }

  const handleViewDetail = (orderId: number) => {
    console.log('查看订单详情:', orderId)
    // TODO: 跳转到订单详情页
  }

  const handleDownloadVideo = (orderId: number) => {
    console.log('下载订单视频:', orderId)
    // TODO: 下载视频功能
  }

  const handleCreateOrder = () => {
    console.log('创建新订单')
    // TODO: 跳转到创建订单页
  }

  return (
    <YongrenTabBarLayout activeKey="order">
      <ScrollView
        className="h-[calc(100%-60px)] overflow-y-auto px-4 pb-4 pt-0"
        scrollY
      >
        {/* 导航栏 */}
        <Navbar
          title="订单列表"
          leftIcon=""
          leftText=""
          onClickLeft={() => {}}
          backgroundColor="bg-white"
          border={true}
          fixed={true}
          placeholder={true}
        />

        {/* 订单筛选 */}
        <View className="p-4 border-b border-gray-200">
          <View className="flex space-x-2 overflow-x-auto pb-2">
            {statusFilters.map((filter) => (
              <Text
                key={filter.key}
                className={`text-xs px-3 py-1 rounded-full whitespace-nowrap ${
                  activeStatus === filter.key ? filter.activeClass : filter.inactiveClass
                }`}
                onClick={() => handleStatusFilter(filter.key as OrderStatus)}
              >
                {filter.label}
              </Text>
            ))}
          </View>
        </View>

        {/* 订单列表区域 */}
        <View className="p-4">
          {/* 标题和新建订单按钮 */}
          <View className="flex justify-between items-center mb-4">
            <Text className="font-semibold text-gray-700">订单列表</Text>
            <Button
              className="bg-blue-500 text-white text-xs px-3 py-1 rounded-lg"
              onClick={handleCreateOrder}
            >
              <Text className="fas fa-plus mr-1">+</Text>
              <Text>新建订单</Text>
            </Button>
          </View>

          {/* 搜索栏 */}
          <View className="mb-4">
            <Input
              className="border border-gray-300 rounded-lg px-3 py-2 text-sm"
              placeholder="按订单号、人才姓名搜索"
              value={searchKeyword}
              onInput={(e) => setSearchKeyword(e.detail.value)}
            />
            <Button
              className="bg-gray-100 text-gray-800 text-xs px-3 py-2 rounded-lg mt-2"
              onClick={handleSearch}
            >
              搜索
            </Button>
          </View>

          {/* 订单卡片列表 */}
          <View className="space-y-4">
            {mockOrders.map((order) => (
              <View key={order.id} className="card bg-white p-4">
                {/* 订单头部 */}
                <View className="flex justify-between items-start mb-3">
                  <View>
                    <Text className="font-semibold text-gray-800">{order.name}</Text>
                    <Text className="text-xs text-gray-500">{order.createdAt} 创建</Text>
                  </View>
                  <Text className={`text-xs px-2 py-1 rounded-full ${order.statusClass}`}>
                    {order.statusLabel}
                  </Text>
                </View>

                {/* 订单信息网格 */}
                <View className="grid grid-cols-2 gap-3 text-sm mb-3">
                  <View>
                    <Text className="text-gray-500">预计人数</Text>
                    <Text className="text-gray-800">{order.expectedPeople}人</Text>
                  </View>
                  <View>
                    <Text className="text-gray-500">实际人数</Text>
                    <Text className="text-gray-800">{order.actualPeople}人</Text>
                  </View>
                  <View>
                    <Text className="text-gray-500">开始日期</Text>
                    <Text className="text-gray-800">{order.startDate}</Text>
                  </View>
                  <View>
                    <Text className="text-gray-500">预计结束</Text>
                    <Text className="text-gray-800">{order.endDate}</Text>
                  </View>
                </View>

                {/* 打卡数据统计网格 */}
                <View className="grid grid-cols-3 gap-2 mb-3">
                  <View className="bg-blue-50 rounded-lg p-2 text-center">
                    <Text className="text-xs text-gray-600">本月打卡</Text>
                    <Text className="text-sm font-bold text-gray-800">
                      {order.checkinStats.current}/{order.checkinStats.total}
                    </Text>
                    <Text className="text-xs text-gray-500">{order.checkinStats.percentage}%</Text>
                  </View>
                  <View className="bg-green-50 rounded-lg p-2 text-center">
                    <Text className="text-xs text-gray-600">工资视频</Text>
                    <Text className="text-sm font-bold text-gray-800">
                      {order.salaryVideoStats.current}/{order.salaryVideoStats.total}
                    </Text>
                    <Text className="text-xs text-gray-500">{order.salaryVideoStats.percentage}%</Text>
                  </View>
                  <View className="bg-purple-50 rounded-lg p-2 text-center">
                    <Text className="text-xs text-gray-600">个税视频</Text>
                    <Text className="text-sm font-bold text-gray-800">
                      {order.taxVideoStats.current}/{order.taxVideoStats.total}
                    </Text>
                    <Text className="text-xs text-gray-500">{order.taxVideoStats.percentage}%</Text>
                  </View>
                </View>

                {/* 操作按钮区域 */}
                <View className="flex justify-between text-sm">
                  <Button
                    className="text-blue-500"
                    onClick={() => handleViewDetail(order.id)}
                  >
                    <Text className="fas fa-eye mr-1">👁️</Text>
                    <Text>查看详情</Text>
                  </Button>
                  <Button
                    className="text-gray-500"
                    onClick={() => handleDownloadVideo(order.id)}
                  >
                    <Text className="fas fa-download mr-1">⬇️</Text>
                    <Text>下载视频</Text>
                  </Button>
                </View>
              </View>
            ))}
          </View>

          {/* 分页控件 */}
          <View className="flex justify-center items-center mt-6">
            <Button className="text-gray-500 text-sm px-3 py-1">上一页</Button>
            <Text className="mx-4 text-sm">1 / 3</Text>
            <Button className="text-gray-500 text-sm px-3 py-1">下一页</Button>
          </View>
        </View>
      </ScrollView>
    </YongrenTabBarLayout>
  )
}

export default OrderList