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

type OrderStatus = 'draft' | 'confirmed' | 'in_progress' | 'completed' | 'cancelled'

const OrderDetail: React.FC = () => {
  const [orderStatus, setOrderStatus] = useState<OrderStatus>('in_progress')
  const [note, setNote] = useState('')

  // 模拟订单数据
  const order = {
    id: 1,
    orderNumber: 'ALIBABA-2023-11',
    name: '阿里巴巴2023-11',
    createdAt: '2023-11-01',
    updatedAt: '2023-12-15',
    status: 'in_progress' as OrderStatus,
    statusLabel: '进行中',
    statusClass: 'bg-green-100 text-green-800',
    company: '阿里巴巴集团',
    platform: '残疾人就业平台',
    channel: '官方渠道',
    expectedPeople: 30,
    actualPeople: 24,
    expectedStartDate: '2023-11-01',
    actualStartDate: '2023-11-01',
    expectedEndDate: '2024-10-31',
    actualEndDate: null,
    checkinStats: { current: 24, total: 30, percentage: 80 },
    salaryVideoStats: { current: 22, total: 24, percentage: 92 },
    taxVideoStats: { current: 20, total: 24, percentage: 83 },
  }

  const statusOptions = [
    { value: 'draft', label: '草稿', class: 'bg-gray-100 text-gray-800' },
    { value: 'confirmed', label: '已确认', class: 'bg-blue-100 text-blue-800' },
    { value: 'in_progress', label: '进行中', class: 'bg-green-100 text-green-800' },
    { value: 'completed', label: '已完成', class: 'bg-purple-100 text-purple-800' },
    { value: 'cancelled', label: '已取消', class: 'bg-red-100 text-red-800' },
  ]

  const handleStatusChange = (newStatus: OrderStatus) => {
    setOrderStatus(newStatus)
    console.log('更新订单状态:', newStatus)
    // TODO: 调用API更新订单状态
  }

  const handleSaveNote = () => {
    console.log('保存备注:', note)
    // TODO: 调用API保存备注
  }

  const handleEditOrder = () => {
    console.log('编辑订单')
    // TODO: 跳转到编辑页面
  }

  const handleDownloadReport = () => {
    console.log('下载报告')
    // TODO: 下载订单报告
  }

  const mockPersons = [
    { id: 1, name: '张三', gender: '男', disabilityType: '肢体残疾', joinDate: '2023-11-01', workStatus: 'working' },
    { id: 2, name: '李四', gender: '女', disabilityType: '听力残疾', joinDate: '2023-11-05', workStatus: 'working' },
    { id: 3, name: '王五', gender: '男', disabilityType: '视力残疾', joinDate: '2023-11-10', workStatus: 'pre_working' },
  ]

  const mockVideos = [
    { id: 1, type: 'checkin_video', name: '打卡视频_2023-12-01.mp4', size: '15.2MB', uploadTime: '2023-12-01 09:30' },
    { id: 2, type: 'salary_video', name: '工资视频_2023-11-30.mp4', size: '22.5MB', uploadTime: '2023-11-30 16:45' },
    { id: 3, type: 'tax_video', name: '个税视频_2023-11-29.mp4', size: '18.7MB', uploadTime: '2023-11-29 14:20' },
  ]

  return (
    <>
      {/* 导航栏 */}
      <Navbar
        title="订单详情"
        leftIcon="i-heroicons-chevron-left-20-solid"
        leftText="返回"
        backgroundColor="bg-white"
        border={true}
        fixed={true}
        placeholder={true}
        onClickLeft={() => console.log('返回')}
      />
      <ScrollView
        className="h-screen overflow-y-auto px-4 pb-4 pt-0"
        scrollY
      >
        {/* 顶部信息卡片 */}
        <View className="card bg-white p-4 mb-4 mt-4">
          <View className="flex justify-between items-start mb-3">
            <View>
              <Text className="text-xl font-bold text-gray-800">{order.name}</Text>
              <Text className="text-sm text-gray-500 mt-1">订单编号: {order.orderNumber}</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">
            <View>
              <Text className="text-gray-500">创建时间</Text>
              <Text className="text-gray-800">{order.createdAt}</Text>
            </View>
            <View>
              <Text className="text-gray-500">更新时间</Text>
              <Text className="text-gray-800">{order.updatedAt}</Text>
            </View>
            <View>
              <Text className="text-gray-500">企业名称</Text>
              <Text className="text-gray-800">{order.company}</Text>
            </View>
            <View>
              <Text className="text-gray-500">平台</Text>
              <Text className="text-gray-800">{order.platform}</Text>
            </View>
          </View>
        </View>

        {/* 基本信息卡片 */}
        <View className="card bg-white p-4 mb-4">
          <Text className="font-semibold text-gray-700 mb-3">基本信息</Text>
          <View className="grid grid-cols-2 gap-3 text-sm">
            <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.expectedStartDate}</Text>
            </View>
            <View>
              <Text className="text-gray-500">实际开始</Text>
              <Text className="text-gray-800">{order.actualStartDate}</Text>
            </View>
            <View>
              <Text className="text-gray-500">预计结束</Text>
              <Text className="text-gray-800">{order.expectedEndDate}</Text>
            </View>
            <View>
              <Text className="text-gray-500">实际结束</Text>
              <Text className="text-gray-800">{order.actualEndDate || '未结束'}</Text>
            </View>
            <View>
              <Text className="text-gray-500">渠道</Text>
              <Text className="text-gray-800">{order.channel}</Text>
            </View>
          </View>
        </View>

        {/* 打卡统计卡片 */}
        <View className="card bg-white p-4 mb-4">
          <Text className="font-semibold text-gray-700 mb-3">打卡数据统计</Text>
          <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>
          <Button className="text-blue-500 text-sm">查看详细打卡记录</Button>
        </View>

        {/* 关联人才卡片 */}
        <View className="card bg-white p-4 mb-4">
          <View className="flex justify-between items-center mb-3">
            <Text className="font-semibold text-gray-700">关联人才</Text>
            <Button className="text-blue-500 text-xs">添加人才</Button>
          </View>
          <View className="space-y-3">
            {mockPersons.map((person) => (
              <View key={person.id} className="flex justify-between items-center border-b border-gray-100 pb-2">
                <View>
                  <Text className="font-medium text-gray-800">{person.name}</Text>
                  <Text className="text-xs text-gray-500">
                    {person.gender} · {person.disabilityType} · 入职: {person.joinDate}
                  </Text>
                </View>
                <Text className={`text-xs px-2 py-1 rounded-full ${
                  person.workStatus === 'working' ? 'bg-green-100 text-green-800' :
                  person.workStatus === 'pre_working' ? 'bg-yellow-100 text-yellow-800' :
                  'bg-gray-100 text-gray-800'
                }`}>
                  {person.workStatus === 'working' ? '已就业' :
                   person.workStatus === 'pre_working' ? '待就业' : '未就业'}
                </Text>
              </View>
            ))}
          </View>
        </View>

        {/* 视频资料卡片 */}
        <View className="card bg-white p-4 mb-4">
          <View className="flex justify-between items-center mb-3">
            <Text className="font-semibold text-gray-700">视频资料</Text>
            <Button className="text-blue-500 text-xs">批量下载</Button>
          </View>
          <View className="space-y-3">
            {mockVideos.map((video) => (
              <View key={video.id} className="flex justify-between items-center border-b border-gray-100 pb-2">
                <View>
                  <Text className="font-medium text-gray-800">{video.name}</Text>
                  <Text className="text-xs text-gray-500">
                    {video.type === 'checkin_video' ? '打卡视频' :
                     video.type === 'salary_video' ? '工资视频' : '个税视频'} · {video.size} · {video.uploadTime}
                  </Text>
                </View>
                <View className="flex space-x-2">
                  <Button className="text-blue-500 text-xs">播放</Button>
                  <Button className="text-gray-500 text-xs">下载</Button>
                </View>
              </View>
            ))}
          </View>
        </View>

        {/* 状态管理卡片 */}
        <View className="card bg-white p-4 mb-4">
          <Text className="font-semibold text-gray-700 mb-3">状态管理</Text>
          <View className="flex space-x-2 mb-3">
            {statusOptions.map((option) => (
              <Button
                key={option.value}
                className={`text-xs px-3 py-1 rounded-full ${option.value === orderStatus ? option.class : 'bg-gray-100 text-gray-800'}`}
                onClick={() => handleStatusChange(option.value as OrderStatus)}
              >
                {option.label}
              </Button>
            ))}
          </View>
          <Text className="text-xs text-gray-500 mb-3">当前状态: {statusOptions.find(opt => opt.value === orderStatus)?.label}</Text>
        </View>

        {/* 备注和操作日志卡片 */}
        <View className="card bg-white p-4 mb-4">
          <Text className="font-semibold text-gray-700 mb-3">添加备注</Text>
          <Textarea
            className="border border-gray-300 rounded-lg px-3 py-2 text-sm mb-3"
            placeholder="请输入备注内容..."
            value={note}
            onInput={(e) => setNote(e.detail.value)}
          />
          <Button
            className="bg-blue-500 text-white text-xs px-3 py-1 rounded-lg"
            onClick={handleSaveNote}
          >
            保存备注
          </Button>

          <Text className="font-semibold text-gray-700 mt-4 mb-3">操作日志</Text>
          <View className="space-y-2 text-sm">
            <View className="flex justify-between">
              <Text className="text-gray-600">状态变更为进行中</Text>
              <Text className="text-gray-500">2023-12-15 10:30</Text>
            </View>
            <View className="flex justify-between">
              <Text className="text-gray-600">添加了5名人才</Text>
              <Text className="text-gray-500">2023-12-10 14:20</Text>
            </View>
            <View className="flex justify-between">
              <Text className="text-gray-600">订单创建</Text>
              <Text className="text-gray-500">2023-11-01 09:00</Text>
            </View>
          </View>
        </View>

        {/* 操作按钮区域 */}
        <View className="card bg-white p-4 mb-4">
          <View className="flex flex-col space-y-2">
            <Button
              className="bg-blue-500 text-white text-sm px-4 py-2 rounded-lg"
              onClick={handleEditOrder}
            >
              编辑订单
            </Button>
            <Button
              className="bg-green-500 text-white text-sm px-4 py-2 rounded-lg"
              onClick={handleDownloadReport}
            >
              下载订单报告
            </Button>
            <Button className="border border-gray-300 text-gray-700 text-sm px-4 py-2 rounded-lg">
              分享订单
            </Button>
          </View>
        </View>
      </ScrollView>
    </>
  )
}

export default OrderDetail