import { BookOpenCheck, FileText, X } from 'lucide-react'

import { Button } from '../../components/ui/button'
import type { Source } from '../../lib/types'
import { cn } from '../../lib/utils'

type Props = { sources: Source[]; selected: Source | null; onSelect: (source: Source) => void; onClose?: () => void }

export function EvidencePanel({ sources, selected, onSelect, onClose }: Props) {
  return (
    <aside className="evidence-panel">
      <header className="evidence-header"><div><p className="eyebrow">EVIDENCE</p><h2>本轮证据</h2></div><span>{sources.length} 条来源</span>{onClose && <Button variant="ghost" size="icon" onClick={onClose}><X size={17} /></Button>}</header>
      {sources.length === 0 ? <div className="evidence-empty"><BookOpenCheck size={23} /><strong>等待研究结果</strong><span>检索到的原文片段会在这里出现。</span></div> : <><div className="source-list">{sources.map((source) => <button key={source.chunk_id} className={cn('source-card', selected?.chunk_id === source.chunk_id && 'source-card--active')} onClick={() => onSelect(source)}><FileText size={14} /><span><strong>{source.label} · {source.filename}</strong><small>第 {source.order_index + 1} 段 · {(source.score * 100).toFixed(0)}%</small></span></button>)}</div>{selected && <article className="source-detail"><header><strong>{selected.label} · 来源详情</strong><span>{selected.page_number ? `第 ${selected.page_number} 页` : `第 ${selected.order_index + 1} 段`}</span></header><p>{selected.content}</p></article>}</>}
    </aside>
  )
}
