/**
 * 薪资记录卡片组件
 * 显示薪资记录列表
 */
import React from 'react'
import Taro from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import { SalaryRecord } from '../types/employment'
import { SalaryRecordItem } from './SalaryRecordItem'

interface SalaryRecordsProps {
  records: SalaryRecord[]
  loading?: boolean
  onViewAll?: () => void
  showViewAll?: boolean
}

export const SalaryRecords: React.FC<SalaryRecordsProps> = ({
  records,
  loading,
  onViewAll,
  showViewAll = true
}) => {
  const handleViewAll = () => {
    if (onViewAll) {
      onViewAll()
    } else {
      // 默认行为：显示提示
      Taro.showToast({
        title: '查看全部功能开发中',
        icon: 'none'
      })
    }
  }

  if (loading) {
    return (
      <View className="bg-white rounded-lg p-4 mb-4">
        <View className="flex justify-between items-center mb-3">
          <Text className="font-semibold text-gray-700">薪资记录</Text>
        </View>
        <View className="flex items-center justify-center py-8">
          <Text className="text-gray-400">加载中...</Text>
        </View>
      </View>
    )
  }

  if (!records || records.length === 0) {
    return (
      <View className="bg-white rounded-lg p-4 mb-4">
        <View className="flex justify-between items-center mb-3">
          <Text className="font-semibold text-gray-700">薪资记录</Text>
        </View>
        <View className="flex flex-col items-center justify-center py-8">
          {/* 暂无薪资记录图标 - Heroicons currency-dollar */}
          <View className="i-heroicons-currency-dollar-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>
    )
  }

  // 默认显示最近3条
  const displayRecords = records.slice(0, 3)

  return (
    <View className="bg-white rounded-lg p-4 mb-4">
      <View className="flex justify-between items-center mb-3">
        <Text className="font-semibold text-gray-700">薪资记录</Text>
        {showViewAll && records.length > 0 && (
          <Text className="text-blue-500 text-sm" onClick={handleViewAll}>
            查看全部
          </Text>
        )}
      </View>

      <View className="flex flex-col space-y-3">
        {displayRecords.map((record, index) => (
          <SalaryRecordItem key={`${record.orderId}-${record.month}-${index}`} record={record} />
        ))}
      </View>
    </View>
  )
}
