breakpilot-compliance/admin-compliance/components/sdk/advisor/EvidenceSummary.tsx

'use client'

import { BookMarked, FileText, Hash, Image as ImageIcon, Library, Scale } from 'lucide-react'
import type { AdvisorResponse } from '@/lib/sdk/advisor/contract'
import {
  provisionSummary,
  summarizeEvidence,
  type FamilyGroup,
} from '@/lib/sdk/advisor/evidence-grouping'

const plural = (n: number, one: string, many: string) => (n === 1 ? one : many)

function Count({
  icon,
  value,
  label,
  dim,
}: {
  icon: React.ReactNode
  value: number
  label: string
  dim?: boolean
}) {
  return (
    <div
      className={`flex items-center gap-2 rounded-lg border px-2.5 py-1.5 ${
        dim ? 'border-gray-100 bg-gray-50' : 'border-gray-200 bg-white'
      }`}
    >
      <span className={dim ? 'text-gray-300' : 'text-indigo-500'}>{icon}</span>
      <span>
        <span className={`text-sm font-bold ${dim ? 'text-gray-400' : 'text-gray-900'}`}>{value}</span>{' '}
        <span className="text-[11px] text-gray-500">{label}</span>
      </span>
    </div>
  )
}

function GroupRow({ group, icon }: { group: FamilyGroup; icon: React.ReactNode }) {
  // A single-unit guidance doc needs no "1 Fundstelle" noise; norms always show their provisions.
  const detail = group.sections.length === 0 && group.units <= 1 ? '' : provisionSummary(group)
  return (
    <div className="flex items-start gap-2 py-0.5">
      <span className="mt-0.5 shrink-0 text-gray-400">{icon}</span>
      <span className="min-w-0 flex-1 text-[12px] leading-snug text-gray-700">{group.label}</span>
      {detail && <span className="shrink-0 text-[11px] font-medium text-gray-500">{detail}</span>}
    </div>
  )
}

function Section({
  title,
  groups,
  icon,
}: {
  title: string
  groups: FamilyGroup[]
  icon: React.ReactNode
}) {
  if (groups.length === 0) return null
  return (
    <div className="mt-2 first:mt-0">
      <div className="mb-0.5 text-[10px] font-semibold uppercase tracking-wide text-gray-400">{title}</div>
      {groups.map((g) => (
        <GroupRow key={g.key} group={g} icon={icon} />
      ))}
    </div>
  )
}

/**
 * "Diese Antwort stützt sich auf" — describes the EVIDENCE (not the documents), objective counts
 * only (no fabricated trust score). When the Legal-KG ships `bindingness`, binding Rechtsgrundlagen
 * are split from Leitlinien (soft-law guidance); until then it shows a neutral evidence breakdown.
 */
export function EvidenceSummary({ response }: { response: AdvisorResponse }) {
  const m = summarizeEvidence(response.evidence)
  const figures = response.visual_evidence.length
  const notes = response.footnotes.length
  const cls = 'h-4 w-4'
  const smallIcon = 'h-3.5 w-3.5'

  return (
    <div>
      <div className="mb-1.5 text-[10px] font-semibold uppercase tracking-wide text-gray-400">
        Diese Antwort stützt sich auf
      </div>

      <div className="grid grid-cols-2 gap-1.5">
        {m.hasBindingness && (
          <>
            <Count
              icon={<Scale className={cls} />}
              value={m.normProvisions}
              label={plural(m.normProvisions, 'Rechtsgrundlage', 'Rechtsgrundlagen')}
            />
            <Count
              icon={<BookMarked className={cls} />}
              value={m.guidanceCount}
              label={plural(m.guidanceCount, 'Leitlinie', 'Leitlinien')}
              dim={m.guidanceCount === 0}
            />
          </>
        )}
        <Count
          icon={<ImageIcon className={cls} />}
          value={figures}
          label={plural(figures, 'Abbildung', 'Abbildungen')}
          dim={figures === 0}
        />
        <Count
          icon={<Hash className={cls} />}
          value={notes}
          label={plural(notes, 'Fußnote', 'Fußnoten')}
          dim={notes === 0}
        />
        <Count icon={<FileText className={cls} />} value={m.unitCount} label="Evidence Units" />
      </div>

      {m.groups.length > 0 && (
        <div className="mt-2.5 rounded-lg border border-gray-100 bg-gray-50/60 px-2.5 py-1.5">
          {m.hasBindingness ? (
            <>
              <Section title="Rechtsgrundlagen" groups={m.norms} icon={<Scale className={smallIcon} />} />
              <Section title="Leitlinien" groups={m.guidance} icon={<BookMarked className={smallIcon} />} />
              <Section title="Weitere" groups={m.other} icon={<FileText className={smallIcon} />} />
            </>
          ) : (
            m.groups.map((g) => <GroupRow key={g.key} group={g} icon={<Library className={smallIcon} />} />)
          )}
        </div>
      )}
    </div>
  )
}