import React, { useState } from 'react'
import {
  FaUser,
  FaEnvelope,
  FaPhone,
  FaCalendar,
  FaCertificate,
  FaEdit,
  FaEye,
  FaTrash,
  FaPlus,
} from 'react-icons/fa'
import { EmployeeDto, EmployeeStatusEnum } from '../../../types/hr'
import { mockEmployees } from '../../../mocks/mockEmployees'
import { getEmployeeStatusColor, getEmployeeStatusText } from '../../../utils/erp'
import { Container } from '@/components/shared'

const EmployeeCards: React.FC = () => {
  const [employees] = useState<EmployeeDto[]>(mockEmployees)
  const [selectedDepartment, setSelectedDepartment] = useState<string>('all')
  const [selectedStatus, setSelectedStatus] = useState<string>('all')

  const handleEdit = (employee: EmployeeDto) => {
    console.log('Edit employee:', employee)
    // Implement edit functionality
  }

  const handleView = (employee: EmployeeDto) => {
    console.log('View employee:', employee)
    // Implement view functionality
  }

  const handleDelete = (id: string) => {
    console.log('Delete employee:', id)
    // Implement delete functionality
  }

  const handleAdd = () => {
    console.log('Add new employee')
    // Implement add functionality
  }

  const filteredEmployees = employees.filter((employee) => {
    if (selectedDepartment !== 'all' && employee.department?.id !== selectedDepartment) {
      return false
    }
    if (selectedStatus !== 'all' && employee.employeeStatus !== selectedStatus) {
      return false
    }
    return true
  })

  return (
    <Container>
      <div className="space-y-2">
        {/* Header with Add Button */}
        <div className="flex justify-between items-center">
          <h2 className="text-xl font-bold text-gray-900">Personel Kartları</h2>
          <button
            onClick={handleAdd}
            className="px-2 py-1.5 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors flex items-center gap-2"
          >
            <FaPlus className="w-4 h-4" />
            Yeni Personel
          </button>
        </div>

        {/* Filters */}
        <div className="flex gap-3 mb-4">
          <select
            value={selectedDepartment}
            onChange={(e) => setSelectedDepartment(e.target.value)}
            className="px-2 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
          >
            <option value="all">Tüm Departmanlar</option>
            {/* Department options would be populated from departments list */}
          </select>

          <select
            value={selectedStatus}
            onChange={(e) => setSelectedStatus(e.target.value)}
            className="px-2 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
          >
            <option value="all">Tüm Durumlar</option>
            {Object.values(EmployeeStatusEnum).map((status) => (
              <option key={status} value={status}>
                {getEmployeeStatusText(status)}
              </option>
            ))}
          </select>
        </div>

        {/* Employee Cards Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
          {filteredEmployees.map((employee) => (
            <div
              key={employee.id}
              className="bg-white rounded-lg shadow-sm p-3 hover:shadow-md transition-shadow border"
            >
              {/* Header */}
              <div className="flex items-center justify-between mb-3">
                <div className="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center">
                  <FaUser className="w-6 h-6 text-blue-600" />
                </div>
                <span
                  className={`px-2 py-1 text-xs font-medium rounded-full ${getEmployeeStatusColor(
                    employee.employeeStatus,
                  )}`}
                >
                  {getEmployeeStatusText(employee.employeeStatus)}
                </span>
              </div>

              {/* Employee Info */}
              <div className="space-y-1 mb-3">
                <h3 className="font-semibold text-sm text-gray-900">{employee.fullName}</h3>
                <p className="text-xs text-gray-600">{employee.jobPosition?.name}</p>
                <p className="text-sm text-gray-500">{employee.department?.name}</p>
              </div>

              {/* Contact Info */}
              <div className="space-y-1.5 mb-3">
                <div className="flex items-center text-xs text-gray-600">
                  <FaEnvelope className="w-4 h-4 mr-2" />
                  <span className="truncate">{employee.email}</span>
                </div>
                {employee.phone && (
                  <div className="flex items-center text-xs text-gray-600">
                    <FaPhone className="w-4 h-4 mr-2" />
                    <span>{employee.phone}</span>
                  </div>
                )}
                <div className="flex items-center text-xs text-gray-600">
                  <FaCalendar className="w-4 h-4 mr-2" />
                  <span>{new Date(employee.hireDate).toLocaleDateString('tr-TR')}</span>
                </div>
                <div className="flex items-center text-xs text-gray-600">
                  <FaCertificate className="w-4 h-4 mr-2" />
                  <span>{employee.code}</span>
                </div>
              </div>

              {/* Actions */}
              <div className="flex gap-2 pt-3 border-t">
                <button
                  onClick={() => handleView(employee)}
                  className="flex-1 px-2 py-1 text-xs bg-blue-50 text-blue-600 rounded-md hover:bg-blue-100 transition-colors flex items-center justify-center gap-1"
                >
                  <FaEye className="w-4 h-4" />
                  Görüntüle
                </button>
                <button
                  onClick={() => handleEdit(employee)}
                  className="flex-1 px-2 py-1 text-xs bg-green-50 text-green-600 rounded-md hover:bg-green-100 transition-colors flex items-center justify-center gap-1"
                >
                  <FaEdit className="w-4 h-4" />
                  Düzenle
                </button>
                <button
                  onClick={() => handleDelete(employee.id)}
                  className="px-2 py-1 text-xs bg-red-50 text-red-600 rounded-md hover:bg-red-100 transition-colors flex items-center justify-center"
                >
                  <FaTrash className="w-4 h-4" />
                </button>
              </div>
            </div>
          ))}
        </div>

        {filteredEmployees.length === 0 && (
          <div className="text-center py-12">
            <FaUser className="w-10 h-10 text-gray-400 mx-auto mb-3" />
            <h3 className="text-base font-medium text-gray-900 mb-2">Personel bulunamadı</h3>
            <p className="text-gray-500">Seçilen kriterlere uygun personel bulunmamaktadır.</p>
          </div>
        )}
      </div>
    </Container>
  )
}

export default EmployeeCards