'use client'

/**
 * Recommendation-Card: zeigt die gerollupten Maßnahmen.
 * Eine Recommendation bündelt 1..N Findings mit gleicher Maßnahme.
 */

import React from 'react'

import type { Recommendation } from './_agentTypes'
import { SEVERITY_COLOR } from './_agentTypes'

export function AgentRecommendationCard({ r }: { r: Recommendation }) {
  const color = SEVERITY_COLOR[r.severity]
  return (
    <div
      className="rounded p-3 space-y-1 text-sm bg-emerald-50"
      style={{ borderLeft: `3px solid ${color}` }}
    >
      <div className="flex items-baseline gap-2 flex-wrap">
        <span
          className="text-[10px] font-bold px-1.5 py-0.5 rounded text-white"
          style={{ background: color }}
        >
          {r.severity}
        </span>
        <span className="font-semibold text-gray-900">{r.title}</span>
        <span className="text-[10px] text-gray-500 ml-auto">
          {r.related_finding_ids.length} Finding(s)
          {' · '}
          {r.estimated_effort_hours.toFixed(1)}h geschätzt
        </span>
      </div>
      {r.body && r.body !== r.title && (
        <div className="text-xs text-gray-700 whitespace-pre-wrap">
          {r.body}
        </div>
      )}
      {r.related_finding_ids.length > 0 && (
        <details className="text-[10px] text-gray-500">
          <summary className="cursor-pointer">Aus diesen Findings abgeleitet</summary>
          <ul className="mt-1 list-disc ml-4 space-y-0.5">
            {r.related_finding_ids.map(id => (
              <li key={id}><code>{id}</code></li>
            ))}
          </ul>
        </details>
      )}
    </div>
  )
}