citation-work/src/work/UploadDropzone.tsx

/**
 * UploadDropzone — drag-drop + file-picker for uploading PDFs into the
 * active session.
 *
 * On every successful drop:
 *   1. read each File as bytes,
 *   2. run the source-layer `ingestPdfFromFile` (mints the blob URL
 *      via the session's `PdfByteStore`),
 *   3. register the resulting `{document, representation}` with the
 *      engine,
 *   4. activate the most-recently-uploaded document.
 *
 * Failures (non-PDFs, ingest errors) are surfaced inline above the
 * dropzone; the caller doesn't need a separate toast for them.
 *
 * ── Extraction decision (CWORK-WP-0001 T03) ──────────────────────────
 * This component lives in `citation-work` rather than the umbrella app.
 * Its only dependencies are `@source` (PDF ingestion) and the local
 * engine/session hooks — both inside the review-workspace boundary — so
 * hosting it here lets the package render a complete review shell,
 * including the upload affordance, without any umbrella-local imports.
 * `ReviewShell` still exposes an `upload` slot so a consumer may swap in
 * its own affordance; when the slot is omitted, this default is used.
 */

import { useCallback, useRef, useState } from "react";

import { ingestPdfFromFile } from "@source/index";
import {
  useActiveDocumentId,
  useEngine,
  usePdfByteStore,
} from "./EngineContext";

interface UploadEntry {
  readonly file: File;
  status: "queued" | "uploading" | "done" | "error";
  error?: string;
}

export interface UploadDropzoneProps {
  /** Optional callback fired after each successful upload. */
  readonly onUploaded?: (documentId: import("@shared/ids").DocumentId) => void;
}

export function UploadDropzone({ onUploaded }: UploadDropzoneProps) {
  const engine = useEngine();
  const byteStore = usePdfByteStore();
  const { setId } = useActiveDocumentId();
  const [entries, setEntries] = useState<readonly UploadEntry[]>([]);
  const [isOver, setIsOver] = useState(false);
  const fileInputRef = useRef<HTMLInputElement | null>(null);

  const processFiles = useCallback(
    async (files: readonly File[]) => {
      if (files.length === 0) return;
      const initial: UploadEntry[] = files.map((file) => {
        const isPdf =
          file.type === "application/pdf" || file.name.toLowerCase().endsWith(".pdf");
        if (isPdf) return { file, status: "queued" };
        return {
          file,
          status: "error",
          error: "Not a PDF (only application/pdf accepted)",
        };
      });
      setEntries((prev) => [...prev, ...initial]);

      let lastDocumentId: import("@shared/ids").DocumentId | null = null;
      for (const entry of initial) {
        if (entry.status === "error") continue;
        entry.status = "uploading";
        setEntries((prev) => [...prev]);
        try {
          const { document, representation } = await ingestPdfFromFile(
            entry.file,
            byteStore,
          );
          engine.documents.register({ document, representation });
          entry.status = "done";
          lastDocumentId = document.id;
          onUploaded?.(document.id);
        } catch (err) {
          entry.status = "error";
          entry.error = err instanceof Error ? err.message : String(err);
        }
        setEntries((prev) => [...prev]);
      }
      if (lastDocumentId) setId(lastDocumentId);
    },
    [byteStore, engine, onUploaded, setId],
  );

  const onDrop = useCallback(
    (e: React.DragEvent<HTMLDivElement>) => {
      e.preventDefault();
      setIsOver(false);
      const files = Array.from(e.dataTransfer.files);
      void processFiles(files);
    },
    [processFiles],
  );

  const onDragOver = useCallback((e: React.DragEvent<HTMLDivElement>) => {
    e.preventDefault();
    setIsOver(true);
  }, []);

  const onDragLeave = useCallback(() => {
    setIsOver(false);
  }, []);

  const openPicker = useCallback(() => {
    fileInputRef.current?.click();
  }, []);

  const onPicked = useCallback(
    (e: React.ChangeEvent<HTMLInputElement>) => {
      const files = e.target.files ? Array.from(e.target.files) : [];
      void processFiles(files);
      // Reset so the same filename can be picked again.
      e.target.value = "";
    },
    [processFiles],
  );

  return (
    <div data-testid="upload-dropzone">
      <div
        onDrop={onDrop}
        onDragOver={onDragOver}
        onDragLeave={onDragLeave}
        role="region"
        aria-label="PDF upload"
        style={{
          border: `2px dashed ${isOver ? "#0050b3" : "#bbb"}`,
          background: isOver ? "#e8f0ff" : "#fafafa",
          padding: 16,
          textAlign: "center",
          fontSize: 12,
          color: "#555",
          borderRadius: 4,
        }}
      >
        <div>Drop PDF files here</div>
        <div style={{ margin: "6px 0", color: "#888" }}>or</div>
        <button
          type="button"
          onClick={openPicker}
          data-testid="upload-pick-button"
          style={{
            fontSize: 12,
            padding: "4px 10px",
            border: "1px solid #888",
            background: "white",
            cursor: "pointer",
          }}
        >
          Choose PDF…
        </button>
        <input
          ref={fileInputRef}
          type="file"
          accept="application/pdf,.pdf"
          multiple
          onChange={onPicked}
          style={{ display: "none" }}
          data-testid="upload-file-input"
        />
      </div>
      {entries.length > 0 && (
        <ul
          data-testid="upload-progress"
          style={{ listStyle: "none", padding: 0, margin: "8px 0 0", fontSize: 11 }}
        >
          {entries.map((entry, i) => (
            <li
              key={`${entry.file.name}-${i}`}
              data-status={entry.status}
              style={{
                padding: "2px 4px",
                color:
                  entry.status === "error"
                    ? "#7a0000"
                    : entry.status === "done"
                      ? "#0a5a0a"
                      : "#333",
              }}
            >
              {entry.file.name} — {entry.status}
              {entry.error ? `: ${entry.error}` : ""}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}