/**
 * 当前就业状态卡片组件
 * 显示企业信息、工作状态、入职日期等
 */
import React from 'react'
import { View, Text } from '@tarojs/components'
import { CurrentEmploymentStatus as CurrentEmploymentStatusType, WorkStatus, WorkStatusLabels } from '../types/employment'

interface CurrentEmploymentStatusProps {
  status: CurrentEmploymentStatusType | null
  loading?: boolean
}

export const CurrentEmploymentStatus: React.FC<CurrentEmploymentStatusProps> = ({ status, loading }) => {
  if (loading) {
    return (
      <View className="bg-white rounded-lg p-4 mb-4">
        <Text className="font-semibold text-gray-700">当前就业状态</Text>
        <View className="flex items-center justify-center py-8">
          <Text className="text-gray-400">加载中...</Text>
        </View>
      </View>
    )
  }

  if (!status) {
    return (
      <View className="bg-white rounded-lg p-4 mb-4">
        <Text className="font-semibold text-gray-700 mb-3">当前就业状态</Text>
        <View className="flex flex-col items-center justify-center py-8">
          {/* 未就业图标 - Heroicons briefcase */}
          <View className="i-heroicons-briefcase-20-solid text-gray-300 w-12 h-12 mb-3" />
          <Text className="text-gray-500 font-medium mb-1">暂无就业信息</Text>
          <Text className="text-gray-400 text-sm">您还没有被分配到任何订单</Text>
        </View>
      </View>
    )
  }

  const isCurrentWorking = status.workStatus === WorkStatus.WORKING
  const statusBgColor = isCurrentWorking ? 'bg-green-100' : 'bg-gray-100'
  const statusTextColor = isCurrentWorking ? 'text-green-800' : 'text-gray-800'

  return (
    <View className="bg-white rounded-lg p-4 mb-4">
      <Text className="font-semibold text-gray-700 mb-3">当前就业状态</Text>

      {/* 企业图标和名称 */}
      <View className="flex items-center mb-4">
        {/* 企业图标 - Heroicons building */}
        <View className="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mr-3">
          <View className="i-heroicons-building-office-2-20-solid text-blue-500 w-6 h-6" />
        </View>
        <View className="flex flex-col">
          <Text className="font-medium text-gray-800">{status.companyName}</Text>
          <Text className="text-sm text-gray-500">{status.orderName || status.positionName || '未知岗位'}</Text>
        </View>
      </View>

      {/* 2列网格信息 */}
      <View className="grid grid-cols-2 gap-3 text-sm">
        {/* 入职日期 */}
        <View className="flex flex-col">
          <Text className="text-gray-500">入职日期</Text>
          <Text className="text-gray-800">{status.joinDate}</Text>
        </View>

        {/* 工作状态 */}
        <View className="flex flex-col">
          <Text className="text-gray-500">工作状态</Text>
          <View className={`${statusBgColor} ${statusTextColor} text-xs px-2 py-1 rounded-self-start`}>
            <Text>{WorkStatusLabels[status.workStatus]}</Text>
          </View>
        </View>

        {/* 订单编号 */}
        <View className="flex flex-col">
          <Text className="text-gray-500">订单编号</Text>
          <Text className="text-gray-800">#{status.orderId}</Text>
        </View>

        {/* 薪资水平 */}
        <View className="flex flex-col">
          <Text className="text-gray-500">薪资水平</Text>
          <Text className="text-gray-800">¥{status.salaryLevel.toLocaleString()}/月</Text>
        </View>
      </View>
    </View>
  )
}
