'use client'

import type { Risk } from './types'
import { RISK_COLORS, CATEGORY_OPTIONS } from './types'

interface RiskListProps {
  risks: Risk[]
  onEditRisk: (risk: Risk) => void
}

export default function RiskList({ risks, onEditRisk }: RiskListProps) {
  return (
    <div className="bg-white rounded-xl shadow-sm border overflow-hidden">
      <table className="w-full">
        <thead className="bg-slate-50">
          <tr>
            <th className="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">ID</th>
            <th className="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Titel</th>
            <th className="px-4 py-3 text-center text-xs font-medium text-slate-500 uppercase">Kategorie</th>
            <th className="px-4 py-3 text-center text-xs font-medium text-slate-500 uppercase">L x I</th>
            <th className="px-4 py-3 text-center text-xs font-medium text-slate-500 uppercase">Risiko</th>
            <th className="px-4 py-3 text-center text-xs font-medium text-slate-500 uppercase">Status</th>
            <th className="px-4 py-3 text-right text-xs font-medium text-slate-500 uppercase">Aktionen</th>
          </tr>
        </thead>
        <tbody className="divide-y divide-slate-200">
          {risks.map((risk) => (
            <tr key={risk.id} className="hover:bg-slate-50">
              <td className="px-4 py-3">
                <span className="font-mono font-medium text-primary-600">{risk.risk_id}</span>
              </td>
              <td className="px-4 py-3">
                <div>
                  <p className="font-medium text-slate-900">{risk.title}</p>
                  {risk.description && (
                    <p className="text-sm text-slate-500 truncate max-w-md">{risk.description}</p>
                  )}
                </div>
              </td>
              <td className="px-4 py-3 text-center">
                <span className="text-sm text-slate-600">
                  {CATEGORY_OPTIONS.find((c) => c.value === risk.category)?.label || risk.category}
                </span>
              </td>
              <td className="px-4 py-3 text-center">
                <span className="font-mono">{risk.likelihood} x {risk.impact}</span>
              </td>
              <td className="px-4 py-3 text-center">
                <span className={`px-2 py-1 text-xs font-medium rounded-full text-white ${RISK_COLORS[risk.inherent_risk] || 'bg-slate-500'}`}>
                  {risk.inherent_risk}
                </span>
              </td>
              <td className="px-4 py-3 text-center">
                <span className={`px-2 py-1 text-xs rounded-full ${
                  risk.status === 'mitigated' ? 'bg-green-100 text-green-700' :
                  risk.status === 'accepted' ? 'bg-blue-100 text-blue-700' :
                  'bg-slate-100 text-slate-700'
                }`}>
                  {risk.status}
                </span>
              </td>
              <td className="px-4 py-3 text-right">
                <button
                  onClick={() => onEditRisk(risk)}
                  className="text-sm text-primary-600 hover:text-primary-700 font-medium"
                >
                  Bearbeiten
                </button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  )
}
