import React from 'react'
import { FaCalendarAlt, FaPlus } from 'react-icons/fa'
import dayjs from 'dayjs'
import { LeaveStatusEnum, LeaveTypeEnum } from '../../../types/hr'
import { mockEmployeeLeaves } from '@/mocks/mockEmployeeLeaves'

interface LeaveManagementProps {
  onNewLeave: () => void
}

const LeaveManagement: React.FC<LeaveManagementProps> = ({ onNewLeave }) => {
  return (
    <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
      <div className="p-6 border-b border-gray-200 dark:border-gray-700">
        <h2 className="text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2">
          <FaCalendarAlt className="w-5 h-5" />
          İzin Yönetimi
        </h2>
      </div>
      <div className="p-4 space-y-3">
        {/* İzin bakiye özeti */}
        <div className="grid grid-cols-2 gap-2 mb-4">
          <div className="p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
            <p className="text-xs text-gray-600 dark:text-gray-400">Yıllık İzin</p>
            <p className="text-lg font-bold text-blue-600 dark:text-blue-400">12 gün</p>
          </div>
          <div className="p-3 bg-green-50 dark:bg-green-900/20 rounded-lg border border-green-200 dark:border-green-800">
            <p className="text-xs text-gray-600 dark:text-gray-400">Hastalık İzni</p>
            <p className="text-lg font-bold text-green-600 dark:text-green-400">8 gün</p>
          </div>
        </div>

        {/* Son izin talepleri */}
        <div className="space-y-2">
          {mockEmployeeLeaves.slice(0, 3).map((leave) => (
            <div
              key={leave.id}
              className="p-3 rounded-lg bg-gray-50 dark:bg-gray-900/20 border border-gray-200 dark:border-gray-700"
            >
              <div className="flex items-start justify-between mb-1">
                <h4 className="text-sm font-medium text-gray-900 dark:text-white">
                  {leave.leaveType === LeaveTypeEnum.Annual ? '🏖️ Yıllık' : 
                   leave.leaveType === LeaveTypeEnum.Sick ? '🏥 Hastalık' : 
                   leave.leaveType === LeaveTypeEnum.Unpaid ? '💼 Ücretsiz' : '📋 Diğer'} İzin
                </h4>
                <span
                  className={`text-xs px-2 py-1 rounded-full ${
                    leave.status === LeaveStatusEnum.Approved
                      ? 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300'
                      : leave.status === LeaveStatusEnum.Pending
                        ? 'bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-300'
                        : 'bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-300'
                  }`}
                >
                  {leave.status === LeaveStatusEnum.Approved ? 'Onaylandı' : 
                   leave.status === LeaveStatusEnum.Pending ? 'Bekliyor' : 'Reddedildi'}
                </span>
              </div>
              <p className="text-xs text-gray-600 dark:text-gray-400">
                {dayjs(leave.startDate).format('DD MMM')} - {dayjs(leave.endDate).format('DD MMM')} ({leave.totalDays} gün)
              </p>
            </div>
          ))}
        </div>

        <button
          onClick={onNewLeave}
          className="w-full mt-3 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm rounded-lg transition-colors flex items-center justify-center gap-2"
        >
          <FaPlus className="w-4 h-4" />
          Yeni İzin Talebi
        </button>
      </div>
    </div>
  )
}

export default LeaveManagement