'use client'

/**
 * Strukturierte Finding-Anzeige.
 * Layout:
 *   [Severity-Badge]  [Methodik-Badge(s)]
 *   [Titel]
 *   ┌ Gesetzliche Basis / Norm ─────────┐
 *   │ § 5 Abs. 1 Nr. 1 TMG               │
 *   └────────────────────────────────────┘
 *   ┌ Befund / Wörtlich ───────────────┐
 *   │ "Vorstand: …"                     │
 *   └────────────────────────────────────┘
 *   ┌ Empfehlung / Best Practice ──────┐
 *   │ → Konkrete Maßnahme               │
 *   └────────────────────────────────────┘
 */

import React from 'react'

import type { Finding, SourceType } from './_agentTypes'
import {
  METHODIK_COLOR,
  METHODIK_LABEL,
  METHODIK_SHORT,
  SEVERITY_BG,
  SEVERITY_COLOR,
} from './_agentTypes'

export function AgentFindingCard({ f }: { f: Finding }) {
  const sev = f.severity
  const color = SEVERITY_COLOR[sev]
  const bg = SEVERITY_BG[sev]
  const sources = f.sources || []
  return (
    <div
      className="rounded border-l-4 p-3 space-y-2"
      style={{ borderLeftColor: color, background: bg }}
    >
      <div className="flex items-center flex-wrap gap-2">
        <span
          className="text-xs font-bold px-2 py-0.5 rounded text-white"
          style={{ background: color }}
        >
          {sev}
        </span>
        <code className="text-[11px] text-gray-500">{f.check_id}</code>
        {sources.map((s, i) => (
          <MethodikBadge key={i} src={s.source_type} sourceId={s.source_id} />
        ))}
        {f.confidence !== undefined && (
          <span className="text-[10px] text-gray-500 ml-auto">
            Konfidenz {(f.confidence * 100).toFixed(0)}%
          </span>
        )}
      </div>

      <div className="text-sm font-medium text-gray-900">{f.title}</div>

      {f.norm && (
        <Block label="Gesetzliche Basis" tone="purple">
          {f.norm}
        </Block>
      )}

      {f.evidence && (
        <Block label="Befund" tone="amber">
          <span className="italic">„{f.evidence}"</span>
        </Block>
      )}

      {f.action && (
        <Block
          label={
            sources.some(s =>
              s.source_type === 'llm_local' ||
              s.source_type === 'llm_local_big' ||
              s.source_type === 'llm_cloud'
            )
              ? 'Empfehlung (LLM-Vorschlag)'
              : sev === 'HIGH'
                ? 'Pflicht-Maßnahme'
                : 'Best-Practice-Empfehlung'
          }
          tone="green"
        >
          {f.action}
        </Block>
      )}
    </div>
  )
}

function MethodikBadge({
  src, sourceId,
}: { src: SourceType; sourceId?: string }) {
  const { bg, fg } = METHODIK_COLOR[src] || { bg: '#e5e7eb', fg: '#374151' }
  const title = `${METHODIK_LABEL[src]}${sourceId ? ` · ${sourceId}` : ''}`
  return (
    <span
      title={title}
      className="text-[10px] px-1.5 py-0.5 rounded font-mono"
      style={{ background: bg, color: fg }}
    >
      {METHODIK_SHORT[src]}
    </span>
  )
}

function Block({
  label, tone, children,
}: {
  label: string
  tone: 'purple' | 'amber' | 'green'
  children: React.ReactNode
}) {
  const toneMap = {
    purple: { border: '#a78bfa', bg: '#f5f3ff', label: '#5b21b6' },
    amber: { border: '#fbbf24', bg: '#fffbeb', label: '#92400e' },
    green: { border: '#34d399', bg: '#ecfdf5', label: '#065f46' },
  } as const
  const t = toneMap[tone]
  return (
    <div
      className="rounded px-2 py-1.5 text-xs"
      style={{ background: t.bg, borderLeft: `3px solid ${t.border}` }}
    >
      <div className="font-semibold mb-0.5" style={{ color: t.label }}>
        {label}
      </div>
      <div className="text-gray-800">{children}</div>
    </div>
  )
}