import React from "react";
import {
  ArrowSquareOut,
  FilePdf,
  FileText,
  Trash,
} from "@phosphor-icons/react";
import { Empty, IconButton } from "./ui.jsx";

export function AssistantSources({
  material,
  onRemoveSource,
  onRemoveMaterial,
}) {
  return (
    <div className="source-list">
      {material?.kind === "book" ? (
        <>
          <div className="source-row">
            <FilePdf size={22} />
            <div>
              <h3>{material.title}</h3>
              <p>{material.page_count} pages · indexed on this device</p>
              <a
                href={`/api/reader/files/${material.id}/book.pdf`}
                target="_blank"
                rel="noreferrer"
              >
                Open original PDF <ArrowSquareOut size={14} />
              </a>
            </div>
            <IconButton
              label="Delete book"
              className="entity-delete"
              onClick={onRemoveMaterial}
            >
              <Trash size={16} />
            </IconButton>
          </div>
          <p className="muted source-note">
            Answers use the selected passage, neighboring pages and relevant
            sections retrieved from this book. Page citations jump back to the
            reader.
          </p>
        </>
      ) : material?.sources?.length ? (
        material.sources.map((source, index) => (
          <div className="source-row" key={index}>
            <FileText size={22} />
            <div>
              <span className="eyebrow">Source {index + 1}</span>
              <h3>{source.title}</h3>
              <a href={source.url} target="_blank" rel="noreferrer">
                Open source <ArrowSquareOut size={14} />
              </a>
              {source.excerpt && (
                <details>
                  <summary>Saved source excerpt</summary>
                  <p>{source.excerpt}</p>
                </details>
              )}
            </div>
            <IconButton
              label={`Delete source ${index + 1}`}
              className="entity-delete"
              onClick={() => onRemoveSource(index)}
            >
              <Trash size={16} />
            </IconButton>
          </div>
        ))
      ) : (
        <Empty icon={FileText} title="No sources yet">
          Add cited sources when authoring the lesson or in the article editor.
        </Empty>
      )}
    </div>
  );
}