import React, { useState } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faEdit, faTrash, faPlus } from '@fortawesome/free-solid-svg-icons';
import Swal from 'sweetalert2';

function Equipment({ equipment, onAdd, onEdit, onDelete }) {
  const [filters, setFilters] = useState({
    status: '',
    type: '',
    search: ''
  });

  const filteredEquipment = equipment.filter(item => {
    return (
      (!filters.status || item.status === filters.status) &&
      (!filters.type || item.type === filters.type) &&
      (!filters.search || 
        item.name.toLowerCase().includes(filters.search.toLowerCase()) ||
        item.serial.toLowerCase().includes(filters.search.toLowerCase()) ||
        item.inventory.toLowerCase().includes(filters.search.toLowerCase())
      )
    );
  });

  const handleDelete = (id) => {
    Swal.fire({
      title: 'Подтверждение',
      text: 'Вы уверены, что хотите удалить это оборудование?',
      icon: 'warning',
      showCancelButton: true,
      confirmButtonText: 'Да, удалить',
      cancelButtonText: 'Отмена'
    }).then((result) => {
      if (result.isConfirmed) {
        onDelete(id);
      }
    });
  };

  return (
    <div>
      <div className="mb-4 flex justify-between items-center">
        <h2 className="text-2xl font-bold">Оборудование</h2>
        <button
          onClick={onAdd}
          className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center"
        >
          <FontAwesomeIcon icon={faPlus} className="mr-2" />
          Добавить оборудование
        </button>
      </div>

      <div className="mb-4 flex space-x-4">
        <select
          value={filters.status}
          onChange={(e) => setFilters({ ...filters, status: e.target.value })}
          className="border rounded-lg px-4 py-2"
        >
          <option value="">Все статусы</option>
          <option value="active">Активно</option>
          <option value="maintenance">ТО</option>
          <option value="repair">Ремонт</option>
        </select>

        <select
          value={filters.type}
          onChange={(e) => setFilters({ ...filters, type: e.target.value })}
          className="border rounded-lg px-4 py-2"
        >
          <option value="">Все типы</option>
          <option value="Станок">Станок</option>
          <option value="Конвейер">Конвейер</option>
          <option value="Компрессор">Компрессор</option>
          <option value="Генератор">Генератор</option>
          <option value="Насос">Насос</option>
        </select>

        <input
          type="text"
          value={filters.search}
          onChange={(e) => setFilters({ ...filters, search: e.target.value })}
          placeholder="Поиск..."
          className="border rounded-lg px-4 py-2 flex-1"
        />
      </div>

      <div className="bg-white rounded-lg shadow overflow-hidden">
        <table className="min-w-full divide-y divide-gray-200">
          <thead className="bg-gray-50">
            <tr>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Название</th>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Тип</th>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Статус</th>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Инв. номер</th>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Действия</th>
            </tr>
          </thead>
          <tbody className="bg-white divide-y divide-gray-200">
            {filteredEquipment.map((item) => (
              <tr key={item.id}>
                <td className="px-6 py-4 whitespace-nowrap">{item.name}</td>
                <td className="px-6 py-4 whitespace-nowrap">{item.type}</td>
                <td className="px-6 py-4 whitespace-nowrap">
                  <span className={`px-2 py-1 rounded-full text-xs font-semibold ${
                    item.status === 'active' ? 'bg-green-100 text-green-800' :
                    item.status === 'maintenance' ? 'bg-yellow-100 text-yellow-800' :
                    'bg-red-100 text-red-800'
                  }`}>
                    {item.status === 'active' ? 'Активно' :
                     item.status === 'maintenance' ? 'ТО' : 'Ремонт'}
                  </span>
                </td>
                <td className="px-6 py-4 whitespace-nowrap">{item.inventory}</td>
                <td className="px-6 py-4 whitespace-nowrap">
                  <button
                    onClick={() => onEdit(item)}
                    className="text-blue-600 hover:text-blue-800 mr-3"
                  >
                    <FontAwesomeIcon icon={faEdit} />
                  </button>
                  <button
                    onClick={() => handleDelete(item.id)}
                    className="text-red-600 hover:text-red-800"
                  >
                    <FontAwesomeIcon icon={faTrash} />
                  </button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

export default Equipment;