src/app/upload/PDFProcessor.js

"use client";

import { useState, useEffect, useRef } from "react";
import axios from "axios";
import { FiUpload, FiX, FiFile, FiImage, FiCheck, FiLoader, FiCheckCircle, FiAlertTriangle } from "react-icons/fi";
import "./styles/PDFProcessor.css";

export default function PDFProcessor({ usn, subject, topic, onClose, onUploadSuccess, onUploadError }) {
  const [pdfFile, setPdfFile] = useState(null);
  const [originalFile, setOriginalFile] = useState(null);
  const [pages, setPages] = useState([]);
  const [isProcessing, setIsProcessing] = useState(false);
  const [uploading, setUploading] = useState(false);
  const [uploadedPages, setUploadedPages] = useState(new Set());
  const [message, setMessage] = useState("");
  const [messageType, setMessageType] = useState(""); // 'success', 'error', or ''
  const [progress, setProgress] = useState(0);
  const [uploadComplete, setUploadComplete] = useState(false);
  const [uploadStarted, setUploadStarted] = useState(false);
  const canvasRefs = useRef([]);

  const showMessage = (text, type = "") => {
    setMessage(text);
    setMessageType(type);
    setTimeout(() => {
      setMessage("");
      setMessageType("");
    }, 3000);
  };

  const handleFileSelect = async (event) => {
    const file = event.target.files[0];
    if (!file) {
      return;
    }
    
    const isPDF = file.type === "application/pdf";
    const isDOCX = file.type === "application/vnd.openxmlformats-officedocument.wordprocessingml.document" || file.name.toLowerCase().endsWith('.docx');
    
    if (!isPDF && !isDOCX) {
      showMessage("Please select a valid PDF or DOCX file.", "error");
      return;
    }

    // Reset states when new file is selected
    setPdfFile(null);
    setOriginalFile(null);
    setPages([]);
    setUploadedPages(new Set());
    setProgress(0);
    setUploadComplete(false);
    setUploadStarted(false);
    setMessage("");
    setMessageType("");
    
    setOriginalFile(file);
    
    try {
      if (isDOCX) {
        await convertDOCX(file);
      } else {
        setPdfFile(file);
        await processPDF(file);
      }
    } catch (error) {
      console.error("Error handling file:", error);
      showMessage("Error processing file. Please try again.", "error");
    }
  };

  const convertDOCX = async (docxFile) => {
    setIsProcessing(true);
    showMessage("Converting DOCX to PDF...", "");

    try {
      const fd = new FormData();
      fd.append("file", docxFile);
      const res = await axios.post("/api/convert-docx", fd, {
        responseType: "blob",
        timeout: 120000,
      });

      const ct = res.headers["content-type"] || "";
      if (ct.includes("application/json")) {
        const txt = await res.data.text();
        throw new Error("Conversion error: " + txt);
      }

      const blob = res.data;
      const pdfName = docxFile.name.replace(/\.docx$/i, ".pdf");
      const pdfFile = new File([blob], pdfName, { type: "application/pdf" });

      setPdfFile(pdfFile);
      showMessage("DOCX converted to PDF successfully. Extracting pages...", "success");
      await processPDF(pdfFile);
    } catch (error) {
      console.error("DOCX conversion error:", error);
      let errorMsg = error.message || "Conversion failed";
      showMessage(errorMsg, "error");
      setIsProcessing(false);
    }
  };

  const processPDF = async (file) => {
    setIsProcessing(true);
    showMessage("Processing PDF...", "");

    try {
      if (!window.pdfjsLib) {
        await loadPDFJS();
      }
      await processPDFWithLib(file);
    } catch (error) {
      console.error("Error processing PDF:", error);
      showMessage("Error processing PDF. Please try again.", "error");
      setIsProcessing(false);
    }
  };

  const loadPDFJS = () => {
    return new Promise((resolve, reject) => {
      if (window.pdfjsLib) {
        resolve();
        return;
      }

      const script = document.createElement("script");
      script.src = "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js";
      script.onload = () => {
        window.pdfjsLib.GlobalWorkerOptions.workerSrc =
          "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js";
        resolve();
      };
      script.onerror = reject;
      document.head.appendChild(script);
    });
  };

  const processPDFWithLib = async (file) => {
    try {
      const arrayBuffer = await file.arrayBuffer();
      const typedArray = new Uint8Array(arrayBuffer);
      const pdf = await window.pdfjsLib.getDocument(typedArray).promise;
      const numPages = pdf.numPages;
      const extractedPages = [];

      showMessage(`Extracting ${numPages} pages from PDF...`, "");

      for (let pageNum = 1; pageNum <= numPages; pageNum++) {
        try {
          const page = await pdf.getPage(pageNum);
          const scale = 2.0;
          const viewport = page.getViewport({ scale });

          const canvas = document.createElement("canvas");
          const context = canvas.getContext("2d");
          
          // Set A4 aspect ratio (210:297 mm ≈ 0.707:1) for consistent dimensions
          const a4Ratio = 210 / 297;
          const pageRatio = viewport.width / viewport.height;
          
          // Adjust canvas size to maintain A4 proportions while ensuring readability
          if (pageRatio > a4Ratio) {
            // Page is wider than A4, fit to width
            canvas.width = Math.min(viewport.width, 800);
            canvas.height = canvas.width / a4Ratio;
          } else {
            // Page is taller than A4, fit to height
            canvas.height = Math.min(viewport.height, 1000);
            canvas.width = canvas.height * a4Ratio;
          }

          // Fill with white background for better readability
          context.fillStyle = 'white';
          context.fillRect(0, 0, canvas.width, canvas.height);

          // Calculate scaling and positioning to center the page content
          const scaleX = canvas.width / viewport.width;
          const scaleY = canvas.height / viewport.height;
          const scale_final = Math.min(scaleX, scaleY);
          
          const scaledWidth = viewport.width * scale_final;
          const scaledHeight = viewport.height * scale_final;
          const offsetX = (canvas.width - scaledWidth) / 2;
          const offsetY = (canvas.height - scaledHeight) / 2;

          // Create a scaled viewport
          const scaledViewport = page.getViewport({ scale: scale * scale_final });
          
          // Save context state
          context.save();
          context.translate(offsetX, offsetY);

          const renderContext = { 
            canvasContext: context, 
            viewport: scaledViewport 
          };
          
          await page.render(renderContext).promise;

          // Restore context state
          context.restore();

          // Convert canvas to blob with high quality
          const blob = await new Promise((resolve) => {
            canvas.toBlob(resolve, "image/jpeg", 0.95);
          });

          if (blob) {
            extractedPages.push({
              pageNumber: pageNum,
              blob: blob,
              imageUrl: URL.createObjectURL(blob),
              fileName: `${file.name.replace('.pdf', '')}_page_${pageNum}.jpg`,
              size: blob.size
            });
          }

          // Update progress during extraction
          const extractProgress = Math.round((pageNum / numPages) * 100);
          showMessage(`Extracting page ${pageNum}/${numPages} (${extractProgress}%)...`, "");
          
        } catch (pageError) {
          console.error(`Error processing page ${pageNum}:`, pageError);
          showMessage(`Error processing page ${pageNum}, skipping...`, "error");
        }
      }

      if (extractedPages.length === 0) {
        showMessage("No pages could be extracted from the PDF.", "error");
        setIsProcessing(false);
        return;
      }

      setPages(extractedPages);
      const totalSize = extractedPages.reduce((sum, page) => sum + page.size, 0);
      showMessage(`Successfully extracted ${extractedPages.length} pages from PDF (${(totalSize / 1024 / 1024).toFixed(2)}MB total)`, "success");
      
    } catch (error) {
      console.error("Error processing PDF:", error);
      if (error.name === 'InvalidPDFException') {
        showMessage("Invalid PDF file. Please try a different PDF.", "error");
      } else if (error.name === 'MissingPDFException') {
        showMessage("PDF file appears to be corrupted. Please try a different file.", "error");
      } else {
        showMessage("Error processing PDF. Please try again.", "error");
      }
    } finally {
      setIsProcessing(false);
    }
  };

  const uploadSequentially = async () => {
    if (pages.length === 0) {
      showMessage("No pages to upload.", "error");
      return;
    }

    setUploading(true);
    setUploadComplete(false);
    setUploadStarted(true);
    setUploadedPages(new Set());
    setProgress(0);
    showMessage("Starting upload...", "");
    
    let successCount = 0;
    let failCount = 0;

    for (let i = 0; i < pages.length; i++) {
      const page = pages[i];
      try {
        await uploadPage(page, i + 1, pages.length);
        successCount++;
        setUploadedPages(prev => new Set([...prev, page.pageNumber]));
        
        const percent = Math.round(((i + 1) / pages.length) * 100);
        setProgress(percent);
        showMessage(`Uploaded page ${page.pageNumber} (${i + 1}/${pages.length} - ${percent}%)`, "");
        
      } catch (error) {
        failCount++;
        console.error(`Failed to upload page ${page.pageNumber}:`, error);
        showMessage(`Failed to upload page ${page.pageNumber}`, "error");
      }
    }
    
    setUploading(false);
    
    if (successCount === pages.length) {
      setUploadComplete(true);
      showMessage(`All ${pages.length} pages uploaded successfully!`, "success");
      
      // Notify parent component of successful upload
      setTimeout(() => {
        onUploadSuccess?.(subject, topic);
      }, 2000);
      
    } else if (successCount > 0) {
      showMessage(`${successCount}/${pages.length} pages uploaded successfully. ${failCount} failed.`, "warning");
      // Still call onUploadSuccess if at least some pages were uploaded
      setTimeout(() => {
        onUploadSuccess?.(subject, topic);
      }, 2000);
    } else {
      showMessage("All uploads failed. Please try again.", "error");
      onUploadError?.("All uploads failed");
    }
  };

  const uploadPage = async (page, currentIndex, totalPages) => {
    const formData = new FormData();
    formData.append("usn", usn);
    formData.append("subject", subject);
    formData.append("topic", topic);
    formData.append("file", page.blob, page.fileName);

    try {
      const response = await axios.post("/api/topic/upload", formData, {
        headers: { "Content-Type": "multipart/form-data" },
        timeout: 30000, // 30 second timeout per upload
      });

      if (!response.data) {
        throw new Error("No response data received");
      }

      return response.data;
    } catch (error) {
      if (error.code === 'ECONNABORTED') {
        throw new Error("Upload timeout");
      } else if (error.response?.status === 413) {
        throw new Error("File too large");
      } else if (error.response?.status >= 500) {
        throw new Error("Server error");
      } else {
        throw new Error(error.response?.data?.error || "Upload failed");
      }
    }
  };

  // Cleanup function to revoke object URLs
  useEffect(() => {
    return () => {
      pages.forEach((page) => {
        if (page.imageUrl) {
          URL.revokeObjectURL(page.imageUrl);
        }
      });
    };
  }, [pages]);

  // Handle component unmount
  useEffect(() => {
    const currentPages = pages;
    return () => {
      currentPages.forEach((page) => {
        if (page.imageUrl) {
          URL.revokeObjectURL(page.imageUrl);
        }
      });
    };
  }, []);

  return (
    <div className="pdf-processor-container">

      <div className="pdf-processor-header">

        <div className="pdf-processor-title">

          <FiFile className="pdf-processor-icon" />

          <h3>Upload PDF Document</h3>

        </div>

        <button onClick={onClose} className="pdf-processor-close" disabled={uploading}>

          <FiX />

        </button>

      </div>



      <div className="pdf-processor-content">

        {message && (

          <div className={`pdf-processor-message ${messageType}`}>

            {messageType === 'success' && <FiCheckCircle className="pdf-message-icon" />}

            {messageType === 'error' && <FiAlertTriangle className="pdf-message-icon" />}

            <span>{message}</span>

          </div>

        )}



        {uploadComplete ? (

          <div className="pdf-processor-success-animation">

            <FiCheckCircle className="pdf-processor-success-icon" />

            <div className="pdf-processor-success-text">

              PDF Upload Completed Successfully!

            </div>

            <div className="pdf-processor-success-details">

              {pages.length} pages uploaded to {subject} → {topic}

            </div>

          </div>

        ) : (

          <>

            <div className="pdf-processor-file-select">

              <label className="pdf-processor-select-btn">

                <FiFile className="pdf-select-icon" />

                {originalFile ? 'Change File' : 'Select PDF or DOCX File'}

                <input 

                  type="file" 

                  accept=".pdf,application/pdf,.docx,application/vnd.openxmlformats-officedocument.wordprocessingml.document" 

                  onChange={handleFileSelect} 

                  disabled={isProcessing || uploading} 

                  className="pdf-processor-file-input"

                />

              </label>

            </div>



            {originalFile && (

              <div className="pdf-processor-file-info">

                <div className="pdf-file-details">

                  <FiFile className="pdf-file-icon" />

                  <div className="pdf-file-text">

                    <div className="pdf-file-name">{originalFile.name}</div>

                    <div className="pdf-file-size">{(originalFile.size / 1024 / 1024).toFixed(2)} MB</div>

                  </div>

                </div>

              </div>

            )}



            {isProcessing && (

              <div className="pdf-processor-loading">

                <FiLoader className="pdf-processor-spinner" />

                <span>Processing PDF pages...</span>

              </div>

            )}



            {pages.length > 0 && !uploadComplete && (

              <>

                <div className="pdf-processor-pages-header">

                  <h4>Extracted Pages ({pages.length})</h4>

                  <span className="pdf-pages-size">

                    Total size: {(pages.reduce((sum, p) => sum + p.size, 0) / 1024 / 1024).toFixed(2)} MB

                  </span>

                </div>

                

                <div className="pdf-processor-preview-grid">

                  {pages.map((page) => (

                    <div 

                      key={page.pageNumber} 

                      className={`pdf-processor-page ${uploadedPages.has(page.pageNumber) ? "uploaded" : ""}`}

                    >

                      <div className="pdf-processor-page-header">

                        <span className="pdf-page-title">

                          <FiImage /> Page {page.pageNumber}

                        </span>

                        {uploadedPages.has(page.pageNumber) && (

                          <FiCheck className="pdf-page-check" />

                        )}

                      </div>

                      <div className="pdf-processor-thumb-container">

                        <img 

                          src={page.imageUrl} 

                          alt={`Page ${page.pageNumber}`} 

                          className="pdf-processor-thumb" 

                          loading="lazy"

                        />

                        <div className="pdf-page-size">

                          {(page.size / 1024).toFixed(1)} KB

                        </div>

                      </div>

                    </div>

                  ))}

                </div>



                {!uploading && uploadedPages.size < pages.length && !uploadStarted && (

                  <button 

                    onClick={uploadSequentially} 

                    className="pdf-processor-upload-all"

                    disabled={isProcessing}

                  >

                    <FiUpload /> Upload All Pages to {topic}

                  </button>

                )}



                {uploading && (

                  <div className="pdf-processor-upload-section">

                    <div className="pdf-processor-progress">

                      <div className="pdf-processor-progress-container">

                        <div 

                          className="pdf-processor-progress-bar" 

                          style={{ width: `${progress}%` }}

                        ></div>

                      </div>

                      <span className="pdf-processor-progress-text">

                        {progress}% Completed ({uploadedPages.size}/{pages.length} pages)

                      </span>

                    </div>

                  </div>

                )}

              </>

            )}

          </>
        )}
      </div>
    </div>
  );
}