'use client'

import React from 'react'

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

interface AlertMenuProps {
  alert: AlertType
  isOpen: boolean
  onClose: () => void
  getStatusText: (status: string) => string
  compact?: boolean
  anchor?: { left: number; top: number } | null
}

const AlertMenu: React.FC<AlertMenuProps> = ({ alert, isOpen, onClose, getStatusText, compact = false, anchor = null }) => {
  if (!isOpen) return null

  const formatDate = (dateString: string) => {
    const date = new Date(dateString)
    return date.toLocaleString('ru-RU', {
      day: '2-digit',
      month: '2-digit',
      year: 'numeric',
      hour: '2-digit',
      minute: '2-digit'
    })
  }

  const getPriorityColor = (priority: string) => {
    switch (priority.toLowerCase()) {
      case 'high': return 'text-red-400'
      case 'medium': return 'text-orange-400'
      case 'low': return 'text-green-400'
      default: return 'text-gray-400'
    }
  }

  const getPriorityText = (priority: string) => {
    switch (priority.toLowerCase()) {
      case 'high': return 'Высокий'
      case 'medium': return 'Средний'
      case 'low': return 'Низкий'
      default: return priority
    }
  }

  if (compact && anchor) {
    return (
      <div className="absolute z-40" style={{ left: anchor.left, top: anchor.top }}>
        <div className="rounded-[10px] bg-black/80 text-white text-xs px-3 py-2 shadow-xl min-w-[240px] max-w-[300px]">
          <div className="flex items-start justify-between gap-3">
            <div className="flex-1">
              <div className="font-semibold truncate">Датч.{alert.detector_name}</div>
              <div className="opacity-80">{getStatusText(alert.status)}</div>
            </div>
            <button onClick={onClose} className="text-gray-300 hover:text-white transition-colors">
              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
              </svg>
            </button>
          </div>
          
          <div className="mt-2 space-y-1">
            <div className="grid grid-cols-2 gap-2">
              <div>
                <div className="text-[rgb(113,113,122)] text-[11px]">Приоритет</div>
                <div className={`text-xs font-medium ${getPriorityColor(alert.priority)}`}>
                  {getPriorityText(alert.priority)}
                </div>
              </div>
              <div>
                <div className="text-[rgb(113,113,122)] text-[11px]">Время</div>
                <div className="text-white text-xs truncate">{formatDate(alert.timestamp)}</div>
              </div>
            </div>
            
            <div>
              <div className="text-[rgb(113,113,122)] text-[11px]">Сообщение</div>
              <div className="text-white text-xs">{alert.message}</div>
            </div>
            
            <div>
              <div className="text-[rgb(113,113,122)] text-[11px]">Местоположение</div>
              <div className="text-white text-xs">{alert.location}</div>
            </div>
          </div>
          
          <div className="mt-2 grid grid-cols-2 gap-2">
            <button className="bg-[rgb(27,29,41)] hover:bg-[rgb(37,39,51)] text-white px-2 py-1 rounded-[8px] text-xs font-medium transition-colors flex items-center gap-1">
              <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
              </svg>
              Отчет
            </button>
            <button className="bg-[rgb(27,29,41)] hover:bg-[rgb(37,39,51)] text-white px-2 py-1 rounded-[8px] text-xs font-medium transition-colors flex items-center gap-1">
              <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
              </svg>
              История
            </button>
          </div>
        </div>
      </div>
    )
  }

  return (
    <div className="absolute left-[500px] top-0 bg-[#161824] border-r border-gray-700 z-30 w-[454px]" style={{height: 'calc(100% - 73px)', top: '73px'}}>
      <div className="h-full overflow-auto p-5">
        <div className="flex items-center justify-between mb-4">
          <h3 className="text-white text-lg font-medium">
            Датч.{alert.detector_name}
          </h3>
          <div className="flex items-center gap-2">
            <button className="bg-[rgb(27,29,41)] hover:bg-[rgb(37,39,51)] text-white px-3 py-2 rounded-[10px] text-sm font-medium transition-colors flex items-center gap-2">
              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
              </svg>
              Отчет
            </button>
            <button className="bg-[rgb(27,29,41)] hover:bg-[rgb(37,39,51)] text-white px-3 py-2 rounded-[10px] text-sm font-medium transition-colors flex items-center gap-2">
              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
              </svg>
              История
            </button>
          </div>
        </div>
        
        {/* Табличка с информацией об алерте */}
        <div className="space-y-0 border border-[rgb(30,31,36)] rounded-lg overflow-hidden">
          <div className="flex">
            <div className="flex-1 p-4 border-r border-[rgb(30,31,36)]">
              <div className="text-[rgb(113,113,122)] text-sm font-medium mb-1">Маркировка по проекту</div>
              <div className="text-white text-sm">{alert.detector_name}</div>
            </div>
            <div className="flex-1 p-4">
              <div className="text-[rgb(113,113,122)] text-sm font-medium mb-1">Приоритет</div>
              <div className={`text-sm font-medium ${getPriorityColor(alert.priority)}`}>
                {getPriorityText(alert.priority)}
              </div>
            </div>
          </div>
          
          <div className="flex border-t border-[rgb(30,31,36)]">
            <div className="flex-1 p-4 border-r border-[rgb(30,31,36)]">
              <div className="text-[rgb(113,113,122)] text-sm font-medium mb-1">Местоположение</div>
              <div className="text-white text-sm">{alert.location}</div>
            </div>
            <div className="flex-1 p-4">
              <div className="text-[rgb(113,113,122)] text-sm font-medium mb-1">Статус</div>
              <div className="text-white text-sm">{getStatusText(alert.status)}</div>
            </div>
          </div>
          
          <div className="flex border-t border-[rgb(30,31,36)]">
            <div className="flex-1 p-4 border-r border-[rgb(30,31,36)]">
              <div className="text-[rgb(113,113,122)] text-sm font-medium mb-1">Время события</div>
              <div className="text-white text-sm">{formatDate(alert.timestamp)}</div>
            </div>
            <div className="flex-1 p-4">
              <div className="text-[rgb(113,113,122)] text-sm font-medium mb-1">Тип алерта</div>
              <div className="text-white text-sm">{alert.type}</div>
            </div>
          </div>
          
          <div className="border-t border-[rgb(30,31,36)] p-4">
            <div className="text-[rgb(113,113,122)] text-sm font-medium mb-1">Сообщение</div>
            <div className="text-white text-sm">{alert.message}</div>
          </div>
        </div>
        
        <button 
          onClick={onClose}
          className="absolute top-4 right-4 text-gray-400 hover:text-white transition-colors"
        >
          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>
    </div>
  )
}

export default AlertMenu