import { useState } from "react";
import { IconChevron, IconQuote } from "../lib/icons";
import { highlightMatch } from "../lib/highlight";
import { EmptyState, LoadingState } from "./ui/States";

function EvidenceItem({ citation, rank, defaultOpen }) {
  const [open, setOpen] = useState(defaultOpen);
  const meta = [
    citation.page != null ? `page ${citation.page}` : null,
    `chunk #${citation.chunk_index}`,
  ]
    .filter(Boolean)
    .join(" · ");

  return (
    <div className="evidence-item">
      <button
        className="evidence-item-head"
        onClick={() => setOpen((o) => !o)}
        aria-expanded={open}
        aria-label={`Evidence ${rank} from ${citation.document_name}`}
      >
        <span className="evidence-rank">{rank}</span>
        <span style={{ flex: 1, minWidth: 0 }}>
          <span className="evidence-doc">{citation.document_name}</span>
          <div className="evidence-meta">{meta}</div>
        </span>
        <span className={`chevron ${open ? "open" : ""}`}>
          <IconChevron />
        </span>
      </button>
      {open && (
        <div className="evidence-body">
          {highlightMatch(citation.excerpt, citation.match_text)}
          {citation.score != null && (
            <span className="evidence-score">relevance {citation.score}</span>
          )}
        </div>
      )}
    </div>
  );
}

export default function EvidencePanel({ citations, loading }) {
  return (
    <div className="evidence-panel">
      <div className="evidence-top">
        <h3>Evidence</h3>
        {citations?.length > 0 && (
          <span className="evidence-meta">{citations.length} sources</span>
        )}
      </div>
      <div className="evidence-list">
        {loading ? (
          <div style={{ padding: 8 }}>
            <LoadingState lines={4} />
          </div>
        ) : citations && citations.length > 0 ? (
          citations.map((c, i) => (
            <EvidenceItem
              key={i}
              citation={c}
              rank={i + 1}
              defaultOpen={i === 0}
            />
          ))
        ) : (
          <EmptyState title="No evidence yet" icon={<IconQuote />}>
            Ask a question — the source passages behind each answer appear here.
          </EmptyState>
        )}
      </div>
    </div>
  );
}