import { ExternalLink } from 'lucide-react'
import { PermBadge } from './UsageBadge'

interface SourceInfo {
  source_id: string
  title: string
  publisher: string
  url: string | null
  version_label: string | null
  language: string
  license_id: string
  license_name: string
  commercial_use: string
  allowed_analysis: boolean
  allowed_store_excerpt: boolean
  allowed_ship_embeddings: boolean
  allowed_ship_in_product: boolean
  vault_retention_days: number
  vault_access_tier: string
}

export function SourceRegistry({ sources, loading }: { sources: SourceInfo[]; loading: boolean }) {
  return (
    <div>
      <h2 className="text-xl font-bold text-gray-900 mb-4">Quellenregister</h2>
      <p className="text-sm text-gray-600 mb-4">Alle registrierten Quellen mit ihren Berechtigungen.</p>
      {loading ? (
        <div className="animate-pulse h-32 bg-gray-100 rounded" />
      ) : (
        <div className="space-y-3">
          {sources.map(src => (
            <div key={src.source_id} className="bg-white border border-gray-200 rounded-lg p-4">
              <div className="flex items-start justify-between mb-2">
                <div>
                  <h3 className="text-sm font-medium text-gray-900">{src.title}</h3>
                  <p className="text-xs text-gray-500">{src.publisher} — {src.license_name}</p>
                </div>
                {src.url && (
                  <a href={src.url} target="_blank" rel="noopener noreferrer" className="flex items-center gap-1 text-xs text-blue-600 hover:text-blue-800">
                    <ExternalLink className="w-3 h-3" />
                    Quelle
                  </a>
                )}
              </div>
              <div className="flex items-center gap-3 mt-2">
                <PermBadge label="Analyse" allowed={src.allowed_analysis} />
                <PermBadge label="Excerpt" allowed={src.allowed_store_excerpt} />
                <PermBadge label="Embeddings" allowed={src.allowed_ship_embeddings} />
                <PermBadge label="Produkt" allowed={src.allowed_ship_in_product} />
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  )
}