'use client'

import { Source, regulationTypeBadge, sourceTypeBadge } from './types'

export default function SourceCard({
  source,
  onScrape,
  scraping,
}: {
  source: Source
  onScrape: (code: string, force: boolean) => void
  scraping: boolean
}) {
  const regType = regulationTypeBadge[source.regulation_type] || regulationTypeBadge.industry_standard
  const srcType = sourceTypeBadge[source.source_type] || sourceTypeBadge.manual

  return (
    <div className="bg-white border border-slate-200 rounded-lg p-4 hover:shadow-sm transition-shadow">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-3">
          <span className="text-2xl">{regType.icon}</span>
          <div>
            <div className="flex items-center gap-2">
              <span className="font-semibold text-slate-900">{source.code}</span>
              <span className={`px-2 py-0.5 rounded text-xs font-medium ${regType.color}`}>
                {regType.label}
              </span>
              <span className={`px-2 py-0.5 rounded text-xs font-medium ${srcType.color}`}>
                {srcType.label}
              </span>
            </div>
            <div className="text-sm text-slate-500 truncate max-w-md" title={source.url}>
              {source.url.length > 60 ? source.url.substring(0, 60) + '...' : source.url}
            </div>
          </div>
        </div>

        <div className="flex items-center gap-3">
          {source.has_data ? (
            <span className="px-3 py-1 bg-green-100 text-green-700 rounded-full text-sm font-medium">
              {source.requirement_count} Anforderungen
            </span>
          ) : (
            <span className="px-3 py-1 bg-gray-100 text-gray-500 rounded-full text-sm">
              Keine Daten
            </span>
          )}

          <div className="flex gap-1">
            <button
              onClick={() => onScrape(source.code, false)}
              disabled={scraping}
              className="px-3 py-1.5 text-sm bg-slate-100 text-slate-700 rounded hover:bg-slate-200 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
              title="Scrapen (ueberspringt vorhandene)"
            >
              Scrapen
            </button>
            {source.has_data && (
              <button
                onClick={() => onScrape(source.code, true)}
                disabled={scraping}
                className="px-3 py-1.5 text-sm bg-orange-100 text-orange-700 rounded hover:bg-orange-200 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                title="Force: Loescht vorhandene Daten und scraped neu"
              >
                Force
              </button>
            )}
          </div>
        </div>
      </div>
    </div>
  )
}