'use client'

import { UsageBadge } from './ProvenanceHelpers'

interface LicenseInfo {
  license_id: string
  name: string
  terms_url: string | null
  commercial_use: string
  ai_training_restriction: string | null
  tdm_allowed_under_44b: string | null
  deletion_required: boolean
  notes: string | null
}

export function LicenseMatrix({ licenses, loading }: { licenses: LicenseInfo[]; loading: boolean }) {
  return (
    <div>
      <h2 className="text-xl font-bold text-gray-900 mb-4">Lizenz-Matrix</h2>
      <p className="text-sm text-gray-600 mb-4">Uebersicht aller Lizenzen mit ihren erlaubten Nutzungsarten.</p>
      {loading ? (
        <div className="animate-pulse h-32 bg-gray-100 rounded" />
      ) : (
        <div className="overflow-x-auto">
          <table className="w-full text-sm border-collapse">
            <thead>
              <tr className="bg-gray-50">
                <th className="text-left px-3 py-2 border-b font-medium text-gray-600">Lizenz</th>
                <th className="text-left px-3 py-2 border-b font-medium text-gray-600">Kommerziell</th>
                <th className="text-left px-3 py-2 border-b font-medium text-gray-600">AI-Training</th>
                <th className="text-left px-3 py-2 border-b font-medium text-gray-600">TDM (§44b)</th>
                <th className="text-left px-3 py-2 border-b font-medium text-gray-600">Loeschpflicht</th>
              </tr>
            </thead>
            <tbody>
              {licenses.map(lic => (
                <tr key={lic.license_id} className="hover:bg-gray-50">
                  <td className="px-3 py-2 border-b">
                    <div className="font-medium text-gray-900">{lic.license_id}</div>
                    <div className="text-xs text-gray-500">{lic.name}</div>
                  </td>
                  <td className="px-3 py-2 border-b"><UsageBadge value={lic.commercial_use} /></td>
                  <td className="px-3 py-2 border-b"><UsageBadge value={lic.ai_training_restriction || 'n/a'} /></td>
                  <td className="px-3 py-2 border-b"><UsageBadge value={lic.tdm_allowed_under_44b || 'unclear'} /></td>
                  <td className="px-3 py-2 border-b">
                    {lic.deletion_required
                      ? <span className="text-red-600 text-xs font-medium">Ja</span>
                      : <span className="text-green-600 text-xs font-medium">Nein</span>}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </div>
  )
}