'use client'

import { FileText, Library, Image as ImageIcon, Hash } from 'lucide-react'
import type { AdvisorStats } from '@/lib/sdk/advisor/evidence'

function Chip({
  icon,
  label,
  value,
  dim,
}: {
  icon: React.ReactNode
  label: string
  value: number
  dim?: boolean
}) {
  return (
    <div
      className={`flex items-center gap-1 rounded-md border px-1.5 py-0.5 text-[11px] ${
        dim ? 'border-gray-100 bg-gray-50 text-gray-400' : 'border-gray-200 bg-white text-gray-600'
      }`}
      title={`${label}: ${value}`}
    >
      {icon}
      <span className="font-semibold text-gray-900">{value}</span>
      <span>{label}</span>
    </div>
  )
}

/** Compact evidence summary: "Diese Antwort basiert auf N Quellen / M Regelwerken ...". */
export function StatsBar({ stats }: { stats: AdvisorStats }) {
  const cls = 'h-3 w-3'
  return (
    <div className="flex flex-wrap items-center gap-1.5">
      <Chip icon={<FileText className={cls} />} label="Quellen" value={stats.sources} />
      <Chip icon={<Library className={cls} />} label="Regelwerke" value={stats.regulations} />
      <Chip
        icon={<ImageIcon className={cls} />}
        label="Diagramme"
        value={stats.figures}
        dim={stats.figures === 0}
      />
      <Chip
        icon={<Hash className={cls} />}
        label="Fußnoten"
        value={stats.footnotes}
        dim={stats.footnotes === 0}
      />
    </div>
  )
}