import React from "react";
import {
  Article,
  BookmarkSimple,
  BookOpenText,
  CaretLeft,
  GearSix,
  Plus,
} from "@phosphor-icons/react";
import { handleTabListKeyDown, IconButton } from "./ui.jsx";

export function LibraryPanel({
  inactive = false,
  open,
  width,
  kind,
  materials,
  activeId,
  loading,
  search,
  highlightCount,
  onKindChange,
  onClose,
  onAdd,
  onOpenMaterial,
  onShowHighlights,
  onSettings,
  onResize,
}) {
  return (
    <aside
      className={"library-panel panel " + (!open ? "hidden-panel" : "")}
      style={{ width }}
      aria-label="Library"
      inert={inactive || !open ? "" : undefined}
    >
      <div className="panel-title">
        <span>Library</span>
        <IconButton label="Hide library panel" onClick={onClose}>
          <CaretLeft size={18} />
        </IconButton>
      </div>
      <div
        className="segmented mode-switch"
        role="tablist"
        aria-label="Material type"
        data-selected={kind === "book" ? "second" : "first"}
        onKeyDown={handleTabListKeyDown}
      >
        <button
          role="tab"
          aria-selected={kind === "article"}
          tabIndex={kind === "article" ? 0 : -1}
          type="button"
          className={kind === "article" ? "active" : ""}
          onClick={() => onKindChange("article")}
        >
          Articles
        </button>
        <button
          role="tab"
          aria-selected={kind === "book"}
          tabIndex={kind === "book" ? 0 : -1}
          type="button"
          className={kind === "book" ? "active" : ""}
          onClick={() => onKindChange("book")}
        >
          Books
        </button>
      </div>
      <button className="add-material" onClick={onAdd}>
        <span className="add-material-icon" aria-hidden="true">
          <Plus size={16} weight="bold" />
        </span>
        {kind === "article" ? "Add article" : "Add book"}
      </button>
      <div className="material-list">
        {materials.map((material) => (
          <button
            key={material.id}
            className={
              "material-row " + (activeId === material.id ? "active" : "")
            }
            onClick={() => onOpenMaterial(material)}
          >
            <span className="material-icon" aria-hidden="true">
              {material.kind === "book" ? (
                <BookOpenText size={18} />
              ) : (
                <Article size={18} />
              )}
            </span>
            <span className="material-details">
              <strong>{material.title}</strong>
              <span>
                {material.status === "indexing"
                  ? `Indexing · ${material.progress}/${material.page_count || "?"}`
                  : material.subject ||
                    (material.kind === "book"
                      ? `${material.page_count} pages`
                      : "Article")}
              </span>
            </span>
          </button>
        ))}
        {!materials.length && !loading && (
          <p className="library-empty">
            {search
              ? "No matching materials."
              : kind === "article"
                ? "Your articles will appear here."
                : "Import a PDF to start reading."}
          </p>
        )}
      </div>
      <div className="library-footer">
        <button onClick={onShowHighlights}>
          <BookmarkSimple size={19} />
          Highlights
          {highlightCount > 0 && (
            <span className="count">{highlightCount}</span>
          )}
        </button>
        <button onClick={onSettings}>
          <GearSix size={19} />
          Settings
        </button>
      </div>
      <div
        className="resize-handle right"
        role="separator"
        aria-orientation="vertical"
        aria-label="Resize library"
        onPointerDown={onResize}
      />
    </aside>
  );
}