'use client'

/**
 * AgentResultTab — Inhalt eines Themen-Ergebnis-Tabs im Compliance-Check.
 * Themen-Header (Label + Konfidenz + Severity-Ampel) + der geteilte
 * AgentResultView. Standardisierter Rahmen, den jeder Themen-Agent
 * (Impressum, später Cookie/Vendor/Savings) füllt.
 */

import React from 'react'

import type { SlotOutput } from './_agentTypes'
import { isOutputSkipped } from './_agentTypes'
import { AgentResultView } from './AgentResultView'

export function AgentResultTab({
  topicLabel, output,
}: {
  topicLabel: string
  output: SlotOutput
}) {
  const wasSkipped = isOutputSkipped(output)
  const allGreen = !wasSkipped && output.findings.length === 0
  const high = output.findings.filter(f => f.severity === 'HIGH').length
  const medium = output.findings.filter(f => f.severity === 'MEDIUM').length
  const low = output.findings.filter(f => f.severity === 'LOW').length

  return (
    <div className="rounded-lg border bg-white p-4 space-y-3 shadow-sm">
      <div className="flex items-baseline gap-3 flex-wrap">
        <h3 className="font-semibold text-gray-900">{topicLabel}</h3>
        <span className="text-xs text-gray-500">
          Konfidenz {(output.confidence * 100).toFixed(0)}%
        </span>
        {high > 0 && (
          <span className="text-xs bg-red-100 text-red-700 px-2 py-0.5 rounded font-semibold">
            {high} HIGH
          </span>
        )}
        {medium > 0 && (
          <span className="text-xs bg-amber-100 text-amber-800 px-2 py-0.5 rounded">
            {medium} MEDIUM
          </span>
        )}
        {low > 0 && (
          <span className="text-xs bg-blue-100 text-blue-700 px-2 py-0.5 rounded">
            {low} LOW
          </span>
        )}
        {allGreen && (
          <span className="text-xs bg-emerald-100 text-emerald-800 px-2 py-0.5 rounded">
            Alle anwendbaren MCs erfüllt
          </span>
        )}
        {wasSkipped && (
          <span className="text-xs bg-amber-100 text-amber-800 px-2 py-0.5 rounded">
            Dokument nicht geladen
          </span>
        )}
      </div>

      <AgentResultView output={output} />
    </div>
  )
}