'use client';
import { useState, useEffect } from 'react';
import { createPortal } from 'react-dom';
import { Document, Page, pdfjs } from 'react-pdf';
import 'react-pdf/dist/Page/AnnotationLayer.css';
import 'react-pdf/dist/Page/TextLayer.css';

// Worker setup — configured independently from PdfViewer (separate module)
pdfjs.GlobalWorkerOptions.workerSrc = new URL(
  'pdfjs-dist/build/pdf.worker.min.mjs',
  import.meta.url,
).toString();

interface PreviewModalProps {
  pdfBytes: ArrayBuffer;
  onClose: () => void;
}

export function PreviewModal({ pdfBytes, onClose }: PreviewModalProps) {
  const [numPages, setNumPages] = useState(0);
  const [pageNumber, setPageNumber] = useState(1);

  // Bug 1 fix: lock body scroll while modal is open
  useEffect(() => {
    const original = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    return () => { document.body.style.overflow = original; };
  }, []);

  // Bug 2 fix: render via portal so the modal escapes the sticky sidebar's stacking
  // context. The zIndex of 9999 ensures the backdrop sits above all field overlay boxes
  // (zIndex: 10/12) and dnd-kit DragOverlay regardless of parent stacking contexts.
  const modal = (
    <div
      style={{
        position: 'fixed',
        inset: 0,
        background: 'rgba(0,0,0,0.7)',
        zIndex: 9999,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
      }}
    >
      <div
        style={{
          background: 'white',
          maxWidth: '900px',
          width: '90vw',
          maxHeight: '90vh',
          overflowY: 'auto',
          padding: '16px',
        }}
      >
        {/* Navigation controls */}
        <div className="flex items-center gap-3 text-sm mb-4">
          <button
            onClick={() => setPageNumber(p => Math.max(1, p - 1))}
            disabled={pageNumber <= 1}
            className="px-3 py-1 border rounded disabled:opacity-40 hover:bg-gray-100"
          >
            Prev
          </button>
          <span>{pageNumber} / {numPages || '?'}</span>
          <button
            onClick={() => setPageNumber(p => Math.min(numPages, p + 1))}
            disabled={pageNumber >= numPages}
            className="px-3 py-1 border rounded disabled:opacity-40 hover:bg-gray-100"
          >
            Next
          </button>
          <button
            onClick={onClose}
            className="ml-auto px-3 py-1 border rounded hover:bg-gray-100"
          >
            Close
          </button>
        </div>

        {/* PDF renderer */}
        <Document
          file={pdfBytes}
          onLoadSuccess={({ numPages }) => setNumPages(numPages)}
        >
          <Page pageNumber={pageNumber} />
        </Document>
      </div>
    </div>
  );

  return createPortal(modal, document.body);
}
