import React from "react";
import { DownloadSimple, Trash, Eraser } from "@phosphor-icons/react";
import { Modal, IconButton } from "./ui.jsx";
import { downloadText } from "./api.js";
import { Markdown } from "./Markdown.jsx";

export function HighlightsDialog({
  open,
  onOpenChange,
  material,
  highlights,
  onJump,
  onNoteChange,
  onNoteSave,
  onRemove,
  onClearNote,
  onEditNote,
  onCard,
}) {
  function exportHighlights() {
    const sections = highlights.map(
      (highlight) =>
        `> ${highlight.quote}\n\n${highlight.page ? "Page " + highlight.page + "\n\n" : ""}${highlight.note}\n`,
    );
    downloadText(
      "highlights.md",
      `# ${material.title} — Highlights\n\n${sections.join("\n---\n\n")}`,
    );
  }
  return (
    <Modal
      open={open}
      onOpenChange={onOpenChange}
      title="Saved highlights"
      description={material?.title}
    >
      <div className="highlights-list">
        {highlights.length ? (
          highlights.map((highlight) => (
            <div className="highlight-item" key={highlight.id}>
              <div className="entity-heading">
                <button
                  className="text-button"
                  onClick={() => onJump(highlight)}
                >
                  {highlight.page ? "Page " + highlight.page : "Open passage"}
                </button>
                <div className="entity-actions">
                  {highlight.note && (
                    <IconButton
                      label="Delete note"
                      onClick={() => onClearNote(highlight)}
                    >
                      <Eraser size={16} />
                    </IconButton>
                  )}
                  <IconButton
                    label="Delete highlight"
                    onClick={() => onRemove(highlight)}
                  >
                    <Trash size={16} />
                  </IconButton>
                </div>
              </div>
              <blockquote>{highlight.quote}</blockquote>
              {highlight.note && (
                <div className="article-prose note-prose">
                  <Markdown
                    content={highlight.note}
                    materialId={material?.id}
                  />
                </div>
              )}
              <div className="highlight-note-actions">
                <button onClick={() => onEditNote(highlight)}>
                  {highlight.note ? "Edit note" : "Add note"}
                </button>
                <button
                  onClick={() =>
                    onCard({
                      question:
                        highlight.note ||
                        "Explain this passage in your own words.",
                      answer: highlight.quote,
                      quote: highlight.quote,
                      page: highlight.page,
                    })
                  }
                >
                  Create review card
                </button>
              </div>
            </div>
          ))
        ) : (
          <p className="muted">
            Select text in the reader and choose Highlight.
          </p>
        )}
      </div>
      {highlights.length > 0 && (
        <div className="form-actions">
          <button onClick={exportHighlights}>
            <DownloadSimple size={17} />
            Export highlights
          </button>
        </div>
      )}
    </Modal>
  );
}