'use client'

import { ExternalLink, Image as ImageIcon } from 'lucide-react'
import type { VisualEvidence } from '@/lib/sdk/advisor/contract'
import { PaneHeader } from './PaneHeader'

function VisualCard({ v }: { v: VisualEvidence }) {
  const canOpen = !!v.image_ref && /^https?:\/\//i.test(v.image_ref)
  return (
    <div className="rounded-lg border border-gray-200 bg-white p-2.5">
      <div className="flex items-start justify-between gap-2">
        <div className="min-w-0">
          <div className="text-xs font-semibold text-gray-900">{v.caption || v.visual_type}</div>
          <div className="mt-0.5 flex flex-wrap items-center gap-1 text-[11px] text-gray-500">
            <span className="rounded bg-gray-100 px-1 text-[10px] uppercase tracking-wide text-gray-500">
              {v.visual_type}
            </span>
            <span>Quelle: {v.document}</span>
          </div>
        </div>
        {canOpen && (
          <a
            href={v.image_ref}
            target="_blank"
            rel="noopener noreferrer"
            className="flex flex-shrink-0 items-center gap-0.5 rounded px-1.5 py-0.5 text-[11px] font-medium text-indigo-600 hover:bg-indigo-50"
          >
            <ExternalLink className="h-3 w-3" />
            Original anzeigen
          </a>
        )}
      </div>
      {canOpen ? (
        <a href={v.image_ref} target="_blank" rel="noopener noreferrer" className="mt-1.5 block">
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img
            src={v.image_ref}
            alt={v.caption || v.visual_type}
            loading="lazy"
            className="max-h-44 w-full rounded border border-gray-100 object-contain"
          />
        </a>
      ) : (
        <div className="mt-1.5 flex items-center justify-center rounded border border-dashed border-gray-200 bg-gray-50 px-3 py-5 text-[11px] text-gray-400">
          Original-Darstellung folgt
        </div>
      )}
      {v.vision_summary && <p className="mt-1.5 text-[11px] italic text-gray-500">{v.vision_summary}</p>}
    </div>
  )
}

/** Visual evidence (C8) — diagrams/figures, rendered only when present. */
export function VisualEvidencePane({ items }: { items: VisualEvidence[] }) {
  if (items.length === 0) return null
  return (
    <section>
      <PaneHeader
        icon={<ImageIcon className="h-3.5 w-3.5 text-gray-500" />}
        title="Diagramme & Abbildungen"
        count={items.length}
      />
      <div className="space-y-1.5">
        {items.map((v) => (
          <VisualCard key={v.visual_id} v={v} />
        ))}
      </div>
    </section>
  )
}