import type { ChunkDetail, TraceabilityResult } from './types'

interface TraceabilityPanelProps {
  selectedChunk: ChunkDetail | null
  loadingTrace: boolean
  traceability: TraceabilityResult | null
}

export function TraceabilityPanel({ selectedChunk, loadingTrace, traceability }: TraceabilityPanelProps) {
  return (
    <div className="bg-white dark:bg-slate-800 rounded-lg shadow p-4">
      <h3 className="text-md font-semibold text-gray-900 dark:text-white mb-4">
        Traceability
      </h3>

      {!selectedChunk ? (
        <div className="text-center py-12 text-gray-500 dark:text-gray-400">
          <svg className="w-12 h-12 mx-auto mb-4 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
          <p>Waehlen Sie einen Chunk aus der Liste, um die Traceability zu sehen.</p>
        </div>
      ) : loadingTrace ? (
        <div className="text-center py-12">
          <div className="animate-spin w-8 h-8 border-2 border-blue-500 border-t-transparent rounded-full mx-auto mb-4"></div>
          <p className="text-gray-500 dark:text-gray-400">Lade Traceability...</p>
        </div>
      ) : traceability ? (
        <div className="space-y-6">
          {/* Selected Chunk Detail */}
          <ChunkDetailSection chunk={traceability.chunk} />

          <ArrowDown />

          {/* Requirements */}
          <RequirementsSection requirements={traceability.requirements} />

          <ArrowDown />

          {/* Controls */}
          <ControlsSection controls={traceability.controls} />
        </div>
      ) : null}
    </div>
  )
}

function ChunkDetailSection({ chunk }: { chunk: ChunkDetail }) {
  return (
    <div className="border-l-4 border-blue-500 pl-4">
      <h4 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
        Ausgewaehlter Chunk
      </h4>
      <div className="bg-gray-50 dark:bg-slate-700 rounded p-3">
        <div className="flex items-center gap-2 mb-2">
          <span className="text-xs font-medium px-2 py-0.5 bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400 rounded">
            {chunk.regulation_code}
          </span>
          {chunk.article && (
            <span className="text-xs text-gray-500 dark:text-gray-400">
              Art. {chunk.article}
              {chunk.paragraph && ` Abs. ${chunk.paragraph}`}
            </span>
          )}
        </div>
        <p className="text-sm text-gray-600 dark:text-gray-300 whitespace-pre-wrap">
          {chunk.text}
        </p>
        {chunk.source_url && (
          <a
            href={chunk.source_url}
            target="_blank"
            rel="noopener noreferrer"
            className="mt-2 inline-flex items-center gap-1 text-xs text-blue-600 hover:underline"
          >
            Quelle oeffnen
          </a>
        )}
      </div>
    </div>
  )
}

function RequirementsSection({ requirements }: { requirements: TraceabilityResult['requirements'] }) {
  return (
    <div className="border-l-4 border-orange-500 pl-4">
      <h4 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
        Extrahierte Anforderungen ({requirements.length})
      </h4>
      {requirements.length > 0 ? (
        <div className="space-y-2">
          {requirements.map((req, idx) => (
            <div key={idx} className="bg-orange-50 dark:bg-orange-900/20 rounded p-3">
              <div className="flex items-center gap-2 mb-1">
                <span className="text-xs font-medium text-orange-700 dark:text-orange-400">
                  {req.category || 'Anforderung'}
                </span>
              </div>
              <p className="text-sm text-gray-600 dark:text-gray-300">{req.text}</p>
            </div>
          ))}
        </div>
      ) : (
        <p className="text-sm text-gray-500 dark:text-gray-400 italic">
          Keine Anforderungen aus diesem Chunk extrahiert.
          <br />
          <span className="text-xs">(Requirements-Extraktion ist noch nicht implementiert)</span>
        </p>
      )}
    </div>
  )
}

function ControlsSection({ controls }: { controls: TraceabilityResult['controls'] }) {
  return (
    <div className="border-l-4 border-green-500 pl-4">
      <h4 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
        Abgeleitete Controls ({controls.length})
      </h4>
      {controls.length > 0 ? (
        <div className="space-y-2">
          {controls.map((ctrl, idx) => (
            <div key={idx} className="bg-green-50 dark:bg-green-900/20 rounded p-3">
              <div className="font-medium text-sm text-green-700 dark:text-green-400 mb-1">
                {ctrl.name}
              </div>
              <p className="text-sm text-gray-600 dark:text-gray-300">{ctrl.description}</p>
            </div>
          ))}
        </div>
      ) : (
        <p className="text-sm text-gray-500 dark:text-gray-400 italic">
          Keine Controls aus diesem Chunk abgeleitet.
          <br />
          <span className="text-xs">(Control-Ableitung ist noch nicht implementiert)</span>
        </p>
      )}
    </div>
  )
}

function ArrowDown() {
  return (
    <div className="flex justify-center">
      <svg className="w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 14l-7 7m0 0l-7-7m7 7V3" />
      </svg>
    </div>
  )
}
