'use client'

import { Mitigation } from './types'
import { StatusBadge } from './StatusBadge'

const OP_STATE_LABELS: Record<string, string> = {
  startup: 'Hochfahren', homing: 'Referenzfahrt', automatic_operation: 'Automatik',
  manual_operation: 'Handbetrieb', teach_mode: 'Einrichten', maintenance: 'Wartung',
  cleaning: 'Reinigung', emergency_stop: 'Not-Halt', recovery_mode: 'Wiederanlauf',
}

export function MitigationCard({
  mitigation,
  onVerify,
  onDelete,
}: {
  mitigation: Mitigation
  onVerify: (id: string) => void
  onDelete: (id: string) => void
}) {
  return (
    <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
      <div className="flex items-start justify-between mb-2">
        <div className="flex items-center gap-2">
          <h4 className="text-sm font-medium text-gray-900 dark:text-white">{mitigation.title || ''}</h4>
          {(mitigation.title || '').startsWith('Auto:') && (
            <span className="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-green-100 text-green-700">
              Auto
            </span>
          )}
        </div>
        <StatusBadge status={mitigation.status} />
      </div>
      {mitigation.description && (
        <p className="text-xs text-gray-500 mb-2">{mitigation.description}</p>
      )}
      {mitigation.operational_states && mitigation.operational_states.length > 0 && (
        <div className="flex flex-wrap gap-1 mb-2">
          {mitigation.operational_states.map((s) => (
            <span key={s} className="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-indigo-50 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-300 border border-indigo-200 dark:border-indigo-800">
              {OP_STATE_LABELS[s] || s}
            </span>
          ))}
        </div>
      )}
      {(mitigation.linked_hazard_names || []).length > 0 && (
        <div className="mb-3">
          <div className="flex flex-wrap gap-1">
            {mitigation.linked_hazard_names.map((name, i) => (
              <span key={i} className="inline-flex items-center px-1.5 py-0.5 rounded text-xs bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400">
                {name}
              </span>
            ))}
          </div>
        </div>
      )}
      <div className="flex items-center gap-2">
        {mitigation.status !== 'verified' && (
          <button
            onClick={() => onVerify(mitigation.id)}
            className="text-xs px-2.5 py-1 bg-green-50 text-green-700 border border-green-200 rounded-lg hover:bg-green-100 transition-colors"
          >
            Verifizieren
          </button>
        )}
        <button
          onClick={() => onDelete(mitigation.id)}
          className="text-xs px-2.5 py-1 text-red-600 hover:bg-red-50 rounded-lg transition-colors"
        >
          Loeschen
        </button>
      </div>
    </div>
  )
}
