"use client";
import { useRef, useState } from "react";
import type { AxiosProgressEvent } from "axios";
import {
AlertCircle,
FileCheck,
Loader2,
RotateCcw,
Upload,
} from "lucide-react";
import { toast } from "sonner";
import { reviewApi } from "@/lib/api/client";
import { cn } from "@/lib/utils/cn";
import type { AnnotationUploadResult } from "@/types";
/**
* Annotated-PDF re-upload for a reviewer. Contract per Phase 2B-iii
* §3.1 (canonical source) with the {@code matchesOriginal} toast
* condition corrected per 2026-04-12 reconciliation (warn on match,
* not inform on mismatch — matches the §2.12 intent of catching the
* "uploaded the original unchanged" foot-gun).
*
*
Gated by the parent's {@code visible} prop. Before the reviewer
* has downloaded the paper, this component renders nothing at all —
* not a placeholder, not a disabled shell.
*
*
Native HTML5 drag-and-drop only. No {@code react-dropzone}.
* Progress is driven by axios's native {@code onUploadProgress}.
* Replace flow is immediate: click Replace, drop a new file, upload —
* the backend handles save-new / update-DB / delete-old ordering.
*/
export interface AnnotatedPaperUploadProps {
reviewId: string;
paperReferenceNo: string;
/** When false, the component renders null. Controlled by the parent's hasDownloaded flag. */
visible: boolean;
}
type UploadState =
| { kind: "idle" }
| { kind: "uploading"; progress: number; fileName: string }
| { kind: "success"; result: AnnotationUploadResult }
| { kind: "error"; message: string };
function formatSize(bytes: number): string {
if (bytes < 1024) return `${bytes} B`;
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
return `${(bytes / (1024 * 1024)).toFixed(2)} MB`;
}
function formatTimestamp(iso: string): string {
try {
return new Date(iso).toLocaleString("en-IN", {
dateStyle: "medium",
timeStyle: "short",
});
} catch {
return iso;
}
}
export function AnnotatedPaperUpload({
reviewId,
paperReferenceNo,
visible,
}: AnnotatedPaperUploadProps) {
const [state, setState] = useState({ kind: "idle" });
const [dragActive, setDragActive] = useState(false);
const dragCounter = useRef(0);
const inputRef = useRef(null);
if (!visible) {
return null;
}
function validateAndUpload(file: File) {
const isPdfMime = file.type === "application/pdf";
const isPdfExt = file.name.toLowerCase().endsWith(".pdf");
if (!isPdfMime || !isPdfExt) {
setState({ kind: "error", message: "Only PDF files are accepted" });
return;
}
uploadFile(file);
}
async function uploadFile(file: File) {
setState({ kind: "uploading", progress: 0, fileName: file.name });
try {
const res = await reviewApi.uploadAnnotation(
reviewId,
file,
(event: AxiosProgressEvent) => {
if (event.total && event.total > 0) {
const pct = Math.round((event.loaded / event.total) * 100);
setState({ kind: "uploading", progress: pct, fileName: file.name });
}
}
);
const result = res.data;
setState({ kind: "success", result });
toast.success("Annotated paper uploaded");
// Warn when the uploaded file is byte-identical to the original
// manuscript. Catches the reviewer-uploaded-the-wrong-file
// foot-gun (e.g. they grabbed the downloaded PDF instead of
// their annotated copy). The match is computed server-side via
// SHA-256 comparison (Phase 2B-iii §2.12).
if (result.matchesOriginal) {
toast.warning(
"The file you uploaded appears identical to the original manuscript. Did you mean to upload your annotated version?"
);
}
} catch (e) {
const msg =
(e as { response?: { data?: { message?: string } } })?.response?.data
?.message ?? "Upload failed. Please try again.";
setState({ kind: "error", message: msg });
}
}
function handleDragEnter(e: React.DragEvent) {
e.preventDefault();
e.stopPropagation();
dragCounter.current += 1;
if (e.dataTransfer.items && e.dataTransfer.items.length > 0) {
setDragActive(true);
}
}
function handleDragLeave(e: React.DragEvent) {
e.preventDefault();
e.stopPropagation();
dragCounter.current -= 1;
if (dragCounter.current <= 0) {
dragCounter.current = 0;
setDragActive(false);
}
}
function handleDragOver(e: React.DragEvent) {
e.preventDefault();
e.stopPropagation();
}
function handleDrop(e: React.DragEvent) {
e.preventDefault();
e.stopPropagation();
dragCounter.current = 0;
setDragActive(false);
const files = e.dataTransfer.files;
if (files && files.length > 0) {
validateAndUpload(files[0]);
}
}
function handleBrowseClick() {
inputRef.current?.click();
}
function handleInputChange(e: React.ChangeEvent) {
const files = e.target.files;
if (files && files.length > 0) {
validateAndUpload(files[0]);
}
// Allow re-selecting the same file after a reset.
e.target.value = "";
}
function handleReset() {
setState({ kind: "idle" });
}
return (
Upload annotated PDF
Upload your annotated copy of {paperReferenceNo}. Replacing an existing upload
is immediate — no confirmation.