aerbim-ht-monitor/frontend/components/alerts/AlertsList.tsx

import React, { useState, useMemo } from 'react'

interface AlertItem {
  id: number
  type: string
  message: string
  timestamp: string
  acknowledged: boolean
  priority: string
  detector_id?: string
  detector_name?: string
  location?: string
  object?: string
}

interface AlertsListProps {
  alerts: AlertItem[]
  onAcknowledgeToggle: (alertId: number) => void
  initialSearchTerm?: string
}

const AlertsList: React.FC<AlertsListProps> = ({ alerts, onAcknowledgeToggle, initialSearchTerm = '' }) => {
  const [searchTerm, setSearchTerm] = useState(initialSearchTerm)

  const filteredAlerts = useMemo(() => {
    return alerts.filter(alert => { 
      const matchesSearch = searchTerm === '' || alert.detector_id?.toString() === searchTerm
      return matchesSearch 
    })
  }, [alerts, searchTerm])

  const getStatusColor = (type: string) => {
    switch (type) {
      case 'critical': return '#b3261e'
      case 'warning': return '#fd7c22'
      case 'info': return '#00ff00'
      default: return '#666'
    }
  }
  
  return (
    <div className="space-y-6">
      {/* Поиск */}
      <div className="flex items-center justify-end gap-4 mb-6">
        <div className="relative">
          <input
            type="text"
            placeholder="Поиск по ID детектора..."
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
            className="bg-[#161824] text-white placeholder-gray-400 px-4 py-2 rounded-lg border border-gray-600 focus:border-blue-500 focus:outline-none w-64"
          />
          <svg className="absolute right-3 top-2.5 w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
          </svg>
        </div>
      </div>

      {/* Таблица алертов */}
      <div className="bg-[#161824] rounded-[20px] p-6">
        <div className="mb-4 flex items-center justify-between">
          <h2 className="text-xl font-semibold text-white">История тревог</h2>
          <span className="text-sm text-gray-400">Всего: {filteredAlerts.length}</span>
        </div>
        <div className="overflow-x-auto">
          <table className="w-full">
            <thead>
              <tr className="border-b border-gray-700">
                <th className="text-left text-white font-medium py-3">Детектор</th>
                <th className="text-left text-white font-medium py-3">Статус</th>
                <th className="text-left text-white font-medium py-3">Сообщение</th>
                <th className="text-left text-white font-medium py-3">Местоположение</th>
                <th className="text-left text-white font-medium py-3">Приоритет</th>
                <th className="text-left text-white font-medium py-3">Подтверждено</th>
                <th className="text-left text-white font-medium py-3">Время</th>
              </tr>
            </thead>
            <tbody>
              {filteredAlerts.map((item) => (
                <tr key={item.id} className="border-b border-gray-700 hover:bg-gray-800/50 transition-colors">
                  <td className="py-4">
                    <div className="text-sm font-medium text-white">{item.detector_name || 'Детектор'}</div>
                    {item.detector_id ? (
                      <div className="text-sm text-gray-400">ID: {item.detector_id}</div>
                    ) : null}
                  </td>
                  <td className="py-4">
                    <div className="flex items-center gap-2">
                      <div 
                        className="w-3 h-3 rounded-full"
                        style={{ backgroundColor: getStatusColor(item.type) }}
                      ></div>
                      <span className="text-sm text-gray-300">
                        {item.type === 'critical' ? 'Критический' : item.type === 'warning' ? 'Предупреждение' : 'Информация'}
                      </span>
                    </div>
                  </td>
                  <td className="py-4">
                    <div className="text-sm text-white">{item.message}</div>
                  </td>
                  <td className="py-4">
                    <div className="text-sm text-white">{item.location || '-'}</div>
                  </td>
                  <td className="py-4">
                    <span 
                      className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium text-white"
                      style={{ backgroundColor: item.priority === 'high' ? '#b3261e' : item.priority === 'medium' ? '#fd7c22' : '#00ff00' }}
                    >
                      {item.priority === 'high' ? 'Высокий' : item.priority === 'medium' ? 'Средний' : 'Низкий'}
                    </span>
                  </td>
                  <td className="py-4">
                    <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
                      item.acknowledged ? 'bg-green-600/20 text-green-300 ring-1 ring-green-600/40' : 'bg-red-600/20 text-red-300 ring-1 ring-red-600/40'
                    }`}>
                      {item.acknowledged ? 'Да' : 'Нет'}
                    </span>
                    <button
                      onClick={() => onAcknowledgeToggle(item.id)}
                      className="ml-2 inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-[#2a2e3e] text-white hover:bg-[#353a4d]"
                    >
                      {item.acknowledged ? 'Снять' : 'Подтвердить'}
                    </button>
                  </td>
                  <td className="py-4">
                    <div className="text-sm text-gray-300">{new Date(item.timestamp).toLocaleString('ru-RU')}</div>
                  </td>
                </tr>
              ))}
              {filteredAlerts.length === 0 && (
                <tr>
                  <td colSpan={7} className="py-8 text-center text-gray-400">
                    Записей не найдено
                  </td>
                </tr>
              )}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  )
}

export default AlertsList