'use client'

import { MonitoringEvent } from '../_hooks/useMonitoring'
import { EventTypeBadge, SeverityBadge, StatusBadge, EVENT_TYPE_CONFIG } from './Badges'

export function TimelineEvent({
  event,
  onResolve,
}: {
  event: MonitoringEvent
  onResolve: (event: MonitoringEvent) => void
}) {
  const typeConfig = EVENT_TYPE_CONFIG[event.event_type] || EVENT_TYPE_CONFIG.incident
  const lineColor = event.status === 'resolved' || event.status === 'closed' ? 'bg-green-300' : 'bg-gray-300'

  return (
    <div className="relative flex gap-4 pb-8 last:pb-0">
      {/* Timeline line */}
      <div className="flex flex-col items-center">
        <div className={`w-10 h-10 rounded-full flex items-center justify-center text-lg ${typeConfig.bgColor} flex-shrink-0`}>
          {typeConfig.icon}
        </div>
        <div className={`w-0.5 flex-1 ${lineColor} mt-2`} />
      </div>

      {/* Content */}
      <div className="flex-1 bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-4 -mt-1">
        <div className="flex items-start justify-between mb-2">
          <div>
            <h4 className="text-sm font-semibold text-gray-900 dark:text-white">{event.title}</h4>
            <div className="flex items-center gap-2 mt-1">
              <EventTypeBadge type={event.event_type} />
              <SeverityBadge severity={event.severity} />
              <StatusBadge status={event.status} />
            </div>
          </div>
          <span className="text-xs text-gray-400 flex-shrink-0">
            {new Date(event.created_at).toLocaleDateString('de-DE', {
              day: '2-digit',
              month: '2-digit',
              year: 'numeric',
              hour: '2-digit',
              minute: '2-digit',
            })}
          </span>
        </div>

        {event.description && (
          <p className="text-sm text-gray-600 dark:text-gray-400 mt-2">{event.description}</p>
        )}

        {event.resolution_notes && (
          <div className="mt-3 p-3 bg-green-50 dark:bg-green-900/20 rounded-lg border border-green-200 dark:border-green-800">
            <div className="text-xs font-medium text-green-700 dark:text-green-400 mb-1">Loesung:</div>
            <p className="text-sm text-green-800 dark:text-green-300">{event.resolution_notes}</p>
            {event.resolved_at && (
              <div className="text-xs text-green-600 mt-1">
                Geloest am {new Date(event.resolved_at).toLocaleDateString('de-DE')}
              </div>
            )}
          </div>
        )}

        {(event.status === 'open' || event.status === 'investigating') && (
          <div className="mt-3">
            <button
              onClick={() => onResolve(event)}
              className="text-sm px-3 py-1.5 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors"
            >
              Loesen
            </button>
          </div>
        )}
      </div>
    </div>
  )
}
