'use client'

import React from 'react'
import { Scale, CheckCircle, Clock, AlertCircle } from 'lucide-react'
import {
  DSFALicenseCode,
  DSFA_LICENSE_LABELS,
  DSFA_DOCUMENT_TYPE_LABELS,
} from '@/lib/sdk/types'

export function LicenseBadge({ licenseCode }: { licenseCode: DSFALicenseCode }) {
  const colorMap: Record<DSFALicenseCode, string> = {
    'DL-DE-BY-2.0': 'bg-blue-100 text-blue-700 border-blue-200',
    'DL-DE-ZERO-2.0': 'bg-gray-100 text-gray-700 border-gray-200',
    'CC-BY-4.0': 'bg-green-100 text-green-700 border-green-200',
    'EDPB-LICENSE': 'bg-purple-100 text-purple-700 border-purple-200',
    'PUBLIC_DOMAIN': 'bg-gray-100 text-gray-600 border-gray-200',
    'PROPRIETARY': 'bg-amber-100 text-amber-700 border-amber-200',
  }

  return (
    <span className={`inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs border ${colorMap[licenseCode] || 'bg-gray-100 text-gray-700 border-gray-200'}`}>
      <Scale className="w-3 h-3" />
      {DSFA_LICENSE_LABELS[licenseCode] || licenseCode}
    </span>
  )
}

export function DocumentTypeBadge({ type }: { type?: string }) {
  if (!type) return null

  const colorMap: Record<string, string> = {
    guideline: 'bg-indigo-100 text-indigo-700',
    checklist: 'bg-emerald-100 text-emerald-700',
    regulation: 'bg-red-100 text-red-700',
    template: 'bg-orange-100 text-orange-700',
  }

  return (
    <span className={`inline-flex items-center px-2 py-0.5 rounded text-xs ${colorMap[type] || 'bg-gray-100 text-gray-700'}`}>
      {DSFA_DOCUMENT_TYPE_LABELS[type as keyof typeof DSFA_DOCUMENT_TYPE_LABELS] || type}
    </span>
  )
}

export function StatusIndicator({ status }: { status: string }) {
  const statusConfig: Record<string, { color: string; icon: React.ReactNode; label: string }> = {
    green: { color: 'text-green-500', icon: <CheckCircle className="w-4 h-4" />, label: 'Aktiv' },
    yellow: { color: 'text-yellow-500', icon: <Clock className="w-4 h-4" />, label: 'Ausstehend' },
    red: { color: 'text-red-500', icon: <AlertCircle className="w-4 h-4" />, label: 'Fehler' },
  }

  const config = statusConfig[status] || statusConfig.yellow

  return (
    <span className={`inline-flex items-center gap-1 ${config.color}`}>
      {config.icon}
      <span className="text-sm">{config.label}</span>
    </span>
  )
}
