'use client'

/**
 * AgentSlotCard — ein Slot im Agent-Test: Slot-Header (Name, Dauer,
 * Konfidenz, Status-Badges, Artefakt-Link) + der geteilte
 * AgentResultView (Coverage/Speedometer/Findings/Maßnahmen).
 */

import React from 'react'

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

export function AgentSlotCard({
  slot, output, runId,
}: {
  slot: string
  output: SlotOutput
  runId: string
}) {
  const wasSkipped = isOutputSkipped(output)
  const allGreen = !wasSkipped && output.findings.length === 0
  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">Slot: {slot}</h3>
        <span className="text-xs text-gray-500">
          {output.duration_ms} ms · Konfidenz {(output.confidence * 100).toFixed(0)}%
        </span>
        {wasSkipped && (
          <span className="text-xs bg-amber-100 text-amber-800 px-2 py-0.5 rounded">
            Dokument konnte nicht geladen werden
          </span>
        )}
        {allGreen && (
          <span className="text-xs bg-emerald-100 text-emerald-800 px-2 py-0.5 rounded">
            Alle anwendbaren MCs erfüllt
          </span>
        )}
        <a
          className="text-xs text-blue-600 hover:underline ml-auto"
          href={`/api/sdk/v1/specialist-agent/run/${runId}/artifacts`}
          target="_blank"
          rel="noreferrer"
        >
          Artefakte ↗
        </a>
      </div>

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