'use client'

import { ZoneBadge } from './ZoneBadge'

interface ZoneInfo {
  dimension: string
  current_value: string
  zone: 'FORBIDDEN' | 'RESTRICTED' | 'SAFE'
  allowed_values?: string[]
  forbidden_values?: string[]
  safeguards?: string[]
  reason: string
  obligation_refs: string[]
}

const DIMENSION_LABELS: Record<string, string> = {
  automation_level: 'Automatisierungsgrad',
  decision_binding: 'Entscheidungsbindung',
  decision_impact: 'Entscheidungswirkung',
  domain: 'Branche',
  data_type: 'Datensensitivitaet',
  human_in_loop: 'Menschliche Kontrolle',
  explainability: 'Erklaerbarkeit',
  risk_classification: 'Risikoklasse',
  legal_basis: 'Rechtsgrundlage',
  transparency_required: 'Transparenzpflicht',
  logging_required: 'Protokollierung',
  model_type: 'Modelltyp',
  deployment_scope: 'Einsatzbereich',
}

export function DimensionZoneTable({ zoneMap }: { zoneMap: Record<string, ZoneInfo> }) {
  const dimensions = Object.entries(zoneMap).sort(([, a], [, b]) => {
    const order = { FORBIDDEN: 0, RESTRICTED: 1, SAFE: 2 }
    return (order[a.zone] ?? 2) - (order[b.zone] ?? 2)
  })

  return (
    <div className="overflow-x-auto">
      <table className="min-w-full divide-y divide-gray-200">
        <thead className="bg-gray-50">
          <tr>
            <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Dimension</th>
            <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Aktueller Wert</th>
            <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Zone</th>
            <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Regelgrund</th>
            <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Rechtsgrundlage</th>
          </tr>
        </thead>
        <tbody className="bg-white divide-y divide-gray-200">
          {dimensions.map(([dim, info]) => (
            <tr key={dim} className={info.zone === 'FORBIDDEN' ? 'bg-red-50' : info.zone === 'RESTRICTED' ? 'bg-yellow-50' : ''}>
              <td className="px-4 py-2 text-sm font-medium text-gray-900">
                {DIMENSION_LABELS[dim] || dim}
              </td>
              <td className="px-4 py-2 text-sm text-gray-600 font-mono">
                {info.current_value}
              </td>
              <td className="px-4 py-2">
                <ZoneBadge zone={info.zone} />
              </td>
              <td className="px-4 py-2 text-sm text-gray-600">
                {info.reason || '-'}
              </td>
              <td className="px-4 py-2 text-sm text-gray-500">
                {info.obligation_refs?.join(', ') || '-'}
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  )
}