'use client'

import { useState } from 'react'
import {
  RefreshCw,
  ChevronDown,
  ChevronUp,
  ExternalLink,
} from 'lucide-react'
import { DSFASource, DSFASourceStats } from '@/lib/sdk/types'
import { LicenseBadge, DocumentTypeBadge } from './DSFABadges'

interface SourceCardProps {
  source: DSFASource
  stats?: DSFASourceStats
  onIngest: () => void
  isIngesting: boolean
}

export function SourceCard({ source, stats, onIngest, isIngesting }: SourceCardProps) {
  const [isExpanded, setIsExpanded] = useState(false)

  return (
    <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
      <div className="p-4">
        <div className="flex items-start justify-between">
          <div className="flex-1 min-w-0">
            <div className="flex items-center gap-2 mb-1">
              <span className="font-mono text-xs bg-gray-100 dark:bg-gray-700 px-2 py-0.5 rounded">
                {source.sourceCode}
              </span>
              <DocumentTypeBadge type={source.documentType} />
            </div>
            <h3 className="font-semibold text-gray-900 dark:text-white truncate">
              {source.name}
            </h3>
            {source.organization && (
              <p className="text-sm text-gray-500 dark:text-gray-400">
                {source.organization}
              </p>
            )}
          </div>
          <button
            onClick={() => setIsExpanded(!isExpanded)}
            className="p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded"
          >
            {isExpanded ? (
              <ChevronUp className="w-5 h-5 text-gray-400" />
            ) : (
              <ChevronDown className="w-5 h-5 text-gray-400" />
            )}
          </button>
        </div>

        <div className="flex items-center gap-4 mt-3">
          <LicenseBadge licenseCode={source.licenseCode} />
          {stats && (
            <>
              <span className="text-sm text-gray-500">
                {stats.documentCount} Dok.
              </span>
              <span className="text-sm text-gray-500">
                {stats.chunkCount} Chunks
              </span>
            </>
          )}
        </div>

        {source.attributionRequired && (
          <div className="mt-3 p-2 bg-amber-50 dark:bg-amber-900/20 rounded text-xs text-amber-700 dark:text-amber-300">
            <strong>Attribution:</strong> {source.attributionText}
          </div>
        )}
      </div>

      {isExpanded && (
        <div className="border-t border-gray-200 dark:border-gray-700 p-4 bg-gray-50 dark:bg-gray-900">
          <dl className="grid grid-cols-2 gap-3 text-sm">
            {source.sourceUrl && (
              <>
                <dt className="text-gray-500">Quelle:</dt>
                <dd>
                  <a
                    href={source.sourceUrl}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="text-blue-600 hover:underline flex items-center gap-1"
                  >
                    Link <ExternalLink className="w-3 h-3" />
                  </a>
                </dd>
              </>
            )}
            {source.licenseUrl && (
              <>
                <dt className="text-gray-500">Lizenz-URL:</dt>
                <dd>
                  <a
                    href={source.licenseUrl}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="text-blue-600 hover:underline flex items-center gap-1"
                  >
                    {source.licenseName} <ExternalLink className="w-3 h-3" />
                  </a>
                </dd>
              </>
            )}
            <dt className="text-gray-500">Sprache:</dt>
            <dd className="uppercase">{source.language}</dd>
            {stats?.lastIndexedAt && (
              <>
                <dt className="text-gray-500">Zuletzt indexiert:</dt>
                <dd>{new Date(stats.lastIndexedAt).toLocaleString('de-DE')}</dd>
              </>
            )}
          </dl>

          <div className="mt-4 flex gap-2">
            <button
              onClick={onIngest}
              disabled={isIngesting}
              className="px-3 py-1.5 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 flex items-center gap-1"
            >
              {isIngesting ? (
                <RefreshCw className="w-4 h-4 animate-spin" />
              ) : (
                <RefreshCw className="w-4 h-4" />
              )}
              Neu indexieren
            </button>
          </div>
        </div>
      )}
    </div>
  )
}
