import React, { lazy, Suspense } from "react";
import {
  Article,
  BookmarkSimple,
  BookOpenText,
  DownloadSimple,
  List,
  PencilSimple,
  Trash,
  NotePencil,
  Columns,
  ArrowsOutSimple,
  ArrowsInSimple,
} from "@phosphor-icons/react";
import { IconButton, Spinner } from "./ui.jsx";
import { ActionMenu } from "./ActionMenu.jsx";
import { Markdown } from "./Markdown.jsx";
import { LibraryOverview } from "./LibraryOverview.jsx";

const PdfReader = lazy(() =>
  import("./PdfReader.jsx").then((module) => ({ default: module.PdfReader })),
);

export function ReaderPane({
  inactive = false,
  narrow,
  sidePanelsOpen,
  loading,
  material,
  kind,
  materials,
  onAddMaterial,
  onOpenMaterial,
  onOpenOutline,
  onOpenHighlights,
  onStartEdit,
  onDeleteMaterial,
  onNotes,
  onCompare,
  onGenerate,
  onRewrite,
  onRevisions,
  readingMode,
  onReadingMode,
  readerRef,
  articleRef,
  onArticleScroll,
  onMarkPositionReady,
  onArticleSelection,
  onDiagramChange,
  page,
  onPage,
  onVisiblePage,
  navigationToken,
  highlights,
  onSelection,
  onContext,
  onOutline,
  screenshotRef,
  notify,
}) {
  return (
    <main
      className="reader"
      inert={inactive || (narrow && sidePanelsOpen) ? "" : undefined}
    >
      {loading ? (
        <Spinner label="Opening your library…" />
      ) : !material ? (
        <LibraryOverview
          kind={kind}
          materials={materials}
          onAdd={onAddMaterial}
          onOpenMaterial={onOpenMaterial}
        />
      ) : (
        <>
          <div className="reader-toolbar">
            <div className="reader-title">
              {material.kind === "book" ? (
                <BookOpenText size={18} />
              ) : (
                <Article size={18} />
              )}
              <span>{material.title}</span>
            </div>
            <div className="reader-actions">
              {material.kind === "article" && (
                <IconButton
                  label={
                    readingMode ? "Exit reading view" : "Enter reading view"
                  }
                  aria-pressed={readingMode}
                  tooltip
                  onClick={onReadingMode}
                >
                  {readingMode ? (
                    <ArrowsInSimple size={18} />
                  ) : (
                    <ArrowsOutSimple size={18} />
                  )}
                </IconButton>
              )}
              <IconButton
                className="reader-action-button"
                label="Table of contents"
                tooltip
                onClick={onOpenOutline}
              >
                <List size={19} />
                <span>Contents</span>
              </IconButton>
              <IconButton
                className="reader-action-button"
                label="Show saved highlights"
                tooltip
                onClick={onOpenHighlights}
              >
                <BookmarkSimple size={19} />
                <span>Highlights</span>
              </IconButton>
              <ActionMenu
                label="Material actions"
                tooltip
                items={[
                  ...(material.kind === "article" ? [
                    { label: "Improve article", icon: PencilSimple, onSelect: onRewrite },
                    { label: "Article history", icon: BookOpenText, onSelect: onRevisions },
                    { label: "Generate new article", icon: Article, onSelect: onGenerate },
                  ] : []),
                  { label: "Notes", icon: NotePencil, onSelect: onNotes },
                  {
                    label: "Compare with…",
                    icon: Columns,
                    onSelect: onCompare,
                  },
                  {
                    label:
                      material.kind === "article"
                        ? "Edit article"
                        : "Edit book details",
                    icon: PencilSimple,
                    onSelect: onStartEdit,
                  },
                  {
                    label: "Export material",
                    icon: DownloadSimple,
                    href: `/api/reader/materials/${material.id}/export`,
                  },
                  {
                    label:
                      material.kind === "book"
                        ? "Delete book"
                        : "Delete article",
                    icon: Trash,
                    onSelect: onDeleteMaterial,
                    danger: true,
                  },
                ]}
              />
            </div>
          </div>
          {material.kind === "article" ? (
            <div
              className="reader-scroll"
              ref={readerRef}
              onScroll={onArticleScroll}
              onWheel={onMarkPositionReady}
              onTouchStart={onMarkPositionReady}
              onPointerDown={onMarkPositionReady}
              onKeyDown={onMarkPositionReady}
              onPointerUp={onArticleSelection}
              onKeyUp={onArticleSelection}
            >
              <article className="article">
                <span className="eyebrow">{material.subject || "Article"}</span>
                <h1>{material.title}</h1>
                <div className="title-rule" />
                <div ref={articleRef} className="article-prose">
                  <Markdown
                    content={material.body}
                    materialId={material.id}
                    sources={material.sources}
                    onDiagramChange={onDiagramChange}
                  />
                </div>
              </article>
            </div>
          ) : (
            <Suspense fallback={<Spinner label="Opening PDF reader…" />}>
              <PdfReader
                key={material.id}
                material={material}
                page={page}
                onPage={onPage}
                onVisiblePage={onVisiblePage}
                navigationToken={navigationToken}
                highlights={highlights}
                onSelection={onSelection}
                onContext={onContext}
                onOutline={onOutline}
                screenshotRef={screenshotRef}
                notify={notify}
              />
            </Suspense>
          )}
        </>
      )}
    </main>
  );
}