import type { Component } from '../types'
import { getCategoryColor, getLicenseColor } from './utils'

interface ComponentsTableProps {
  components: Component[]
  loading: boolean
}

export function ComponentsTable({ components, loading }: ComponentsTableProps) {
  if (loading) {
    return (
      <div className="flex items-center justify-center py-12">
        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-orange-600"></div>
        <span className="ml-3 text-gray-600">Lade SBOM...</span>
      </div>
    )
  }

  return (
    <div className="bg-white rounded-lg shadow overflow-hidden">
      <table className="min-w-full divide-y divide-gray-200">
        <thead className="bg-gray-50">
          <tr>
            <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Komponente</th>
            <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Version</th>
            <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Kategorie</th>
            <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider min-w-[300px]">Verwendungszweck</th>
            <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Port</th>
            <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Lizenz</th>
            <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Source</th>
          </tr>
        </thead>
        <tbody className="bg-white divide-y divide-gray-200">
          {components.map((component, idx) => {
            const licenseId = component.license || component.licenses?.[0]?.license?.id

            return (
              <tr key={idx} className="hover:bg-gray-50">
                <td className="px-4 py-4">
                  <div className="text-sm font-medium text-gray-900">{component.name}</div>
                </td>
                <td className="px-4 py-4 whitespace-nowrap">
                  <span className="text-sm font-mono text-gray-900">{component.version}</span>
                </td>
                <td className="px-4 py-4 whitespace-nowrap">
                  <span className={`px-2 py-1 text-xs font-medium rounded ${getCategoryColor(component.category)}`}>
                    {component.category || component.type}
                  </span>
                </td>
                <td className="px-4 py-4">
                  {component.description ? (
                    <div className="text-sm text-gray-600 leading-relaxed">{component.description}</div>
                  ) : (
                    <span className="text-sm text-gray-400 italic">Keine Beschreibung</span>
                  )}
                </td>
                <td className="px-4 py-4 whitespace-nowrap">
                  {component.port ? (
                    <span className="text-sm font-mono text-gray-600">{component.port}</span>
                  ) : (
                    <span className="text-sm text-gray-400">-</span>
                  )}
                </td>
                <td className="px-4 py-4 whitespace-nowrap">
                  {licenseId ? (
                    <span className={`px-2 py-1 text-xs font-medium rounded ${getLicenseColor(licenseId)}`}>
                      {licenseId}
                    </span>
                  ) : (
                    <span className="text-sm text-gray-400">-</span>
                  )}
                </td>
                <td className="px-4 py-4 whitespace-nowrap">
                  {component.sourceUrl && component.sourceUrl !== '-' ? (
                    <a
                      href={component.sourceUrl}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="text-orange-600 hover:text-orange-800 text-sm flex items-center gap-1"
                    >
                      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
                      </svg>
                      GitHub
                    </a>
                  ) : (
                    <span className="text-sm text-gray-400">-</span>
                  )}
                </td>
              </tr>
            )
          })}
        </tbody>
      </table>

      {components.length === 0 && (
        <div className="p-8 text-center text-gray-500">
          Keine Komponenten gefunden.
        </div>
      )}
    </div>
  )
}