'use client'

import { Hazard, LifecyclePhase, CATEGORY_LABELS, STATUS_LABELS } from './types'
import { RiskBadge, ReviewStatusBadge } from './RiskBadge'

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 HazardTable({ hazards, lifecyclePhases, onDelete }: {
  hazards: Hazard[]
  lifecyclePhases: LifecyclePhase[]
  onDelete: (id: string) => void
}) {
  return (
    <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
      <div className="overflow-x-auto">
        <table className="w-full">
          <thead>
            <tr className="bg-gray-50 dark:bg-gray-750 border-b border-gray-200 dark:border-gray-700">
              <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Bezeichnung</th>
              <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Kategorie</th>
              <th className="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">S</th>
              <th className="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">F</th>
              <th className="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">P</th>
              <th className="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">A</th>
              <th className="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">R</th>
              <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Risiko</th>
              <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Review</th>
              <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
              <th className="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Aktionen</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-gray-200 dark:divide-gray-700">
            {hazards
              .sort((a, b) => (b.r_inherent || 0) - (a.r_inherent || 0))
              .map((hazard) => (
                <tr key={hazard.id} className="hover:bg-gray-50 dark:hover:bg-gray-750 transition-colors">
                  <td className="px-4 py-3">
                    <div className="flex items-center gap-2 flex-wrap">
                      <div className="text-sm font-medium text-gray-900 dark:text-white">{hazard.name}</div>
                      {hazard.name.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>
                      )}
                      {(hazard as { pattern_id?: string }).pattern_id && (
                        <span
                          className="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-mono font-medium bg-slate-100 text-slate-700 border border-slate-200 cursor-help"
                          title={`Quelle: BreakPilot IACE Pattern-Engine (${(hazard as { pattern_id?: string }).pattern_id}). Lizenzregel R3 — Eigenwerk, kein externer Lizenz-Footer noetig. Pattern-Definition mit Norm-Referenzen siehe Library.`}
                        >
                          {(hazard as { pattern_id?: string }).pattern_id} · R3
                        </span>
                      )}
                    </div>
                    {hazard.description && (
                      <div className="text-xs text-gray-500 truncate max-w-[250px]">{hazard.description}</div>
                    )}
                    {hazard.lifecycle_phase && (
                      <div className="text-xs text-purple-500 mt-0.5">
                        {lifecyclePhases.find(p => p.id === hazard.lifecycle_phase)?.label_de || hazard.lifecycle_phase}
                      </div>
                    )}
                    {hazard.operational_states && hazard.operational_states.length > 0 && (
                      <div className="flex flex-wrap gap-1 mt-1">
                        {hazard.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>
                    )}
                  </td>
                  <td className="px-4 py-3 text-sm text-gray-600">{CATEGORY_LABELS[hazard.category] || hazard.category}</td>
                  <td className="px-4 py-3 text-sm text-gray-900 dark:text-white text-center font-medium">{hazard.severity}</td>
                  <td className="px-4 py-3 text-sm text-gray-900 dark:text-white text-center font-medium">{hazard.exposure}</td>
                  <td className="px-4 py-3 text-sm text-gray-900 dark:text-white text-center font-medium">{hazard.probability}</td>
                  <td className="px-4 py-3 text-sm text-gray-900 dark:text-white text-center font-medium">{hazard.avoidance || '-'}</td>
                  <td className="px-4 py-3 text-sm text-gray-900 dark:text-white text-center font-bold">{hazard.r_inherent}</td>
                  <td className="px-4 py-3"><RiskBadge level={hazard.risk_level} /></td>
                  <td className="px-4 py-3"><ReviewStatusBadge status={hazard.review_status || 'draft'} /></td>
                  <td className="px-4 py-3">
                    <span className="text-xs text-gray-500">{STATUS_LABELS[hazard.status] || hazard.status}</span>
                  </td>
                  <td className="px-4 py-3 text-right">
                    <button onClick={() => onDelete(hazard.id)}
                      className="p-1 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded transition-colors">
                      <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                      </svg>
                    </button>
                  </td>
                </tr>
              ))}
          </tbody>
        </table>
      </div>
    </div>
  )
}
