'use client';

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

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

interface DetectorType {
  detector_id: number
  name: string
  serial_number: string
  object: string
  status: string
  type: string
  location: string
  floor: number
  checked: boolean
  notifications: Array<{
    id: number
    type: string
    message: string
    timestamp: string
    acknowledged: boolean
    priority: string
  }>
}

interface DetectorsDataType {
  detectors: Record<string, DetectorType>
}

interface ReportsListProps {
  objectId?: string;
  detectorsData: DetectorsDataType;
}

const ReportsList: React.FC<ReportsListProps> = ({ detectorsData }) => {
  const [searchTerm, setSearchTerm] = useState('');
  const [statusFilter, setStatusFilter] = useState('all');
  const [priorityFilter] = useState('all');
  const [acknowledgedFilter] = useState('all');

  const allNotifications = useMemo(() => {
    const notifications: NotificationType[] = [];
    Object.values(detectorsData.detectors).forEach(detector => {
      if (detector.notifications && detector.notifications.length > 0) {
        detector.notifications.forEach(notification => {
          notifications.push({
            ...notification,
            detector_id: detector.detector_id,
            detector_name: detector.name,
            location: detector.location,
            object: detector.object
          });
        });
      }
    });
    return notifications;
  }, [detectorsData]);

  const filteredDetectors = useMemo(() => {
    return allNotifications.filter(notification => {
      const matchesSearch = notification.detector_name.toLowerCase().includes(searchTerm.toLowerCase()) ||
                           notification.location.toLowerCase().includes(searchTerm.toLowerCase()) ||
                           notification.message.toLowerCase().includes(searchTerm.toLowerCase());
      
      const matchesStatus = statusFilter === 'all' || notification.type === statusFilter;
      const matchesPriority = priorityFilter === 'all' || notification.priority === priorityFilter;
      const matchesAcknowledged = acknowledgedFilter === 'all' || 
                                 (acknowledgedFilter === 'acknowledged' && notification.acknowledged) ||
                                 (acknowledgedFilter === 'unacknowledged' && !notification.acknowledged);
      
      return matchesSearch && matchesStatus && matchesPriority && matchesAcknowledged;
    });
  }, [allNotifications, searchTerm, statusFilter, priorityFilter, acknowledgedFilter]);

  const getStatusColor = (type: string) => {
    switch (type) {
      case 'critical': return '#b3261e';
      case 'warning': return '#fd7c22';
      case 'info': return '#00ff00';
      default: return '#666';
    }
  };

  const getPriorityColor = (priority: string) => {
    switch (priority) {
      case 'high': return '#b3261e';
      case 'medium': return '#fd7c22';
      case 'low': return '#00ff00';
      default: return '#666';
    }
  };

  const getStatusCounts = () => {
    const counts = {
      total: allNotifications.length,
      critical: allNotifications.filter(d => d.type === 'critical').length,
      warning: allNotifications.filter(d => d.type === 'warning').length,
      info: allNotifications.filter(d => d.type === 'info').length,
      acknowledged: allNotifications.filter(d => d.acknowledged).length,
      unacknowledged: allNotifications.filter(d => !d.acknowledged).length
    };
    return counts;
  };

  const counts = getStatusCounts();

  return (
    <div className="space-y-6">
      {/* Поиск и сортировка*/}
      <div className="flex items-center justify-between gap-4">
        <div className="flex items-center gap-3">
          <button
            onClick={() => setStatusFilter('all')}
            className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
              statusFilter === 'all'
                ? 'bg-blue-600 text-white'
                : 'bg-[#161824] text-gray-300 hover:bg-[#1f2937]'
            }`}
          >
            Все ({allNotifications.length})
          </button>
          <button
            onClick={() => setStatusFilter('critical')}
            className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
              statusFilter === 'critical'
                ? 'bg-red-600 text-white'
                : 'bg-[#161824] text-gray-300 hover:bg-[#1f2937]'
            }`}
          >
            Критические ({allNotifications.filter(d => d.type === 'critical').length})
          </button>
          <button
            onClick={() => setStatusFilter('warning')}
            className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
              statusFilter === 'warning'
                ? 'bg-orange-600 text-white'
                : 'bg-[#161824] text-gray-300 hover:bg-[#1f2937]'
            }`}
          >
            Предупреждения ({allNotifications.filter(d => d.type === 'warning').length})
          </button>
          <button
            onClick={() => setStatusFilter('info')}
            className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
              statusFilter === 'info'
                ? 'bg-green-600 text-white'
                : 'bg-[#161824] text-gray-300 hover:bg-[#1f2937]'
            }`}
          >
            Информация ({allNotifications.filter(d => d.type === 'info').length})
          </button>
        </div>
        
        <div className="flex items-center gap-3">
          <div className="relative">
            <input
              type="text"
              placeholder="Поиск детекторов..."
              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>

      {/* Табличка с детекторами*/}
      <div className="bg-[#161824] rounded-[20px] p-6">
        <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>
              {filteredDetectors.map((detector) => (
                <tr key={detector.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">{detector.detector_name}</div>
                    <div className="text-sm text-gray-400">ID: {detector.detector_id}</div>
                  </td>
                  <td className="py-4">
                    <div className="flex items-center gap-2">
                      <div 
                        className="w-3 h-3 rounded-full"
                        style={{ backgroundColor: getStatusColor(detector.type) }}
                      ></div>
                      <span className="text-sm text-gray-300">
                        {detector.type === 'critical' ? 'Критический' : 
                         detector.type === 'warning' ? 'Предупреждение' : 'Информация'}
                      </span>
                    </div>
                  </td>
                  <td className="py-4">
                    <div className="text-sm text-white">{detector.message}</div>
                  </td>
                  <td className="py-4">
                    <div className="text-sm text-white">{detector.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: getPriorityColor(detector.priority) }}
                    >
                      {detector.priority === 'high' ? 'Высокий' : 
                       detector.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 ${
                      detector.acknowledged 
                        ? 'bg-green-100 text-green-800' 
                        : 'bg-red-100 text-red-800'
                    }`}>
                      {detector.acknowledged ? 'Да' : 'Нет'}
                    </span>
                  </td>
                  <td className="py-4">
                    <div className="text-sm text-gray-300">
                      {new Date(detector.timestamp).toLocaleString('ru-RU')}
                    </div>
                  </td>
                </tr>
              ))}
              {filteredDetectors.length === 0 && (
                <tr>
                  <td colSpan={7} className="py-8 text-center text-gray-400">
                    Детекторы не найдены
                  </td>
                </tr>
              )}
            </tbody>
          </table>
        </div>
      </div>
 
      <div className="mt-6 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
        <div className="bg-[#161824] p-4 rounded-lg">
          <div className="text-2xl font-bold text-white">{counts.total}</div>
          <div className="text-sm text-gray-400">Всего</div>
        </div>
        <div className="bg-[#161824] p-4 rounded-lg">
          <div className="text-2xl font-bold text-red-400">{counts.critical}</div>
          <div className="text-sm text-gray-400">Критические</div>
        </div>
        <div className="bg-[#161824] p-4 rounded-lg">
          <div className="text-2xl font-bold text-orange-400">{counts.warning}</div>
          <div className="text-sm text-gray-400">Предупреждения</div>
        </div>
        <div className="bg-[#161824] p-4 rounded-lg">
          <div className="text-2xl font-bold text-green-400">{counts.info}</div>
          <div className="text-sm text-gray-400">Информация</div>
        </div>
        <div className="bg-[#161824] p-4 rounded-lg">
          <div className="text-2xl font-bold text-blue-400">{counts.acknowledged}</div>
          <div className="text-sm text-gray-400">Подтверждено</div>
        </div>
        <div className="bg-[#161824] p-4 rounded-lg">
          <div className="text-2xl font-bold text-yellow-400">{counts.unacknowledged}</div>
          <div className="text-sm text-gray-400">Не подтверждено</div>
        </div>
      </div>
    </div>
  );
};

export default ReportsList;