DocumentEditor.tsx

'use client'

import React, { useEffect, useRef, useState, useCallback } from 'react'
import { useEditor, EditorContent } from '@tiptap/react'
import StarterKit from '@tiptap/starter-kit'
import Underline from '@tiptap/extension-underline'
import TextAlign from '@tiptap/extension-text-align'
import TextStyle from '@tiptap/extension-text-style'
import FontFamily from '@tiptap/extension-font-family'
import Color from '@tiptap/extension-color'
import Highlight from '@tiptap/extension-highlight'
import Link from '@tiptap/extension-link'
import Image from '@tiptap/extension-image'
import Table from '@tiptap/extension-table'
import TableRow from '@tiptap/extension-table-row'
import TableCell from '@tiptap/extension-table-cell'
import TableHeader from '@tiptap/extension-table-header'
import { FontSize } from '@/extensions/FontSize'
import { LineHeight } from '@/extensions/LineHeight'
import { Indent } from '@/extensions/Indent'
import { PageBreak } from '@/extensions/PageBreak'
import { PAGE_CONFIG, calculateTotalPages, getCurrentPage } from '@/utils/pagination'
import Toolbar from './Toolbar'
import jsPDF from 'jspdf'
import html2canvas from 'html2canvas'

// Interface for page break positions
interface PageBreakData {
  pageNumber: number
  yPosition: number
  spacerHeight: number
}

export default function DocumentEditor() {
  const editorContainerRef = useRef<HTMLDivElement>(null)
  const measureRef = useRef<HTMLDivElement>(null)
  const [currentPage, setCurrentPage] = useState(1)
  const [totalPages, setTotalPages] = useState(1)
  const [isSaved, setIsSaved] = useState(true)
  const [pageBreakPositions, setPageBreakPositions] = useState<PageBreakData[]>([])
  const [headerText, setHeaderText] = useState('O-1 Visa Petition')
  const [footerText, setFooterText] = useState('')
  const [showHeaderFooter, setShowHeaderFooter] = useState(false)
  const [showPageNumbers, setShowPageNumbers] = useState(true)
  const [pageNumberPosition, setPageNumberPosition] = useState<'header' | 'footer'>('footer')
  const [showLetterhead, setShowLetterhead] = useState(false)
  const [showPreview, setShowPreview] = useState(false)
  const [previewZoom, setPreviewZoom] = useState(100)
  const paginationTimeoutRef = useRef<NodeJS.Timeout | null>(null)

  const editor = useEditor({
    extensions: [
      StarterKit.configure({
        heading: {
          levels: [1, 2, 3],
        },
      }),
      Underline,
      TextAlign.configure({
        types: ['heading', 'paragraph'],
      }),
      TextStyle,
      FontFamily,
      FontSize,
      Color,
      Highlight.configure({
        multicolor: true,
      }),
      LineHeight,
      Indent,
      PageBreak,
      Link.configure({
        openOnClick: false,
        HTMLAttributes: {
          class: 'text-blue-600 underline cursor-pointer',
        },
      }),
      Image.configure({
        inline: true,
        allowBase64: true,
      }),
      Table.configure({
        resizable: true,
      }),
      TableRow,
      TableCell,
      TableHeader,
    ],
    content: `
      <p></p>
    `,
    editorProps: {
      attributes: {
        class: 'prose max-w-none focus:outline-none',
        style: `min-height: ${PAGE_CONFIG.CONTENT_HEIGHT - PAGE_CONFIG.HEADER_HEIGHT - PAGE_CONFIG.FOOTER_HEIGHT}px; padding: 0; line-height: 1.5; font-family: "Times New Roman", serif; font-size: 16px;`,
      },
    },
    immediatelyRender: false,
    onUpdate: ({ editor }) => {
      setIsSaved(false)
      // Recalculate pagination when content changes - debounced for performance
      if (paginationTimeoutRef.current) {
        clearTimeout(paginationTimeoutRef.current)
      }
      paginationTimeoutRef.current = setTimeout(() => {
        requestAnimationFrame(() => {
          calculatePagination()
        })
      }, 16) // ~60fps debounce
      
      // Simulate auto-save
      setTimeout(() => {
        setIsSaved(true)
      }, 1000)
    },
  })

  // Calculate pagination based on measured DOM content height
  // This creates "virtual" page breaks by measuring where content would overflow
  const calculatePagination = useCallback(() => {
    if (!measureRef.current) return

    const proseMirror = measureRef.current.querySelector('.ProseMirror') as HTMLElement
    if (!proseMirror) return

    // Get all block-level children (paragraphs, headings, lists, etc.)
    const children = Array.from(proseMirror.children) as HTMLElement[]
    
    // First, clear any previous pagination adjustments
    children.forEach((child) => {
      if (child.dataset.paginationSpacer) {
        child.remove()
      } else {
        // Clear any margin adjustments
        child.style.marginTop = ''
        child.style.paddingTop = ''
      }
    })
    
    // Re-query children after clearing spacers
    const cleanChildren = Array.from(proseMirror.children) as HTMLElement[]
    
    // Calculate reserved zones
    const headerReserve = showHeaderFooter ? PAGE_CONFIG.HEADER_HEIGHT : 0
    const footerReserve = (showHeaderFooter || showPageNumbers) ? PAGE_CONFIG.FOOTER_HEIGHT : 0
    
    // Writable height per page (excluding reserved header/footer zones)
    // Also account for page gap in visual display
    const writablePerPage = PAGE_CONFIG.CONTENT_HEIGHT - headerReserve - footerReserve
    
    // Track accumulated height and page breaks
    let accumulatedHeight = 0
    let currentPageNumber = 1
    let currentPageWritableEnd = writablePerPage // End of writable area on current page
    const pageBreaks: PageBreakData[] = []
    const elementsToAdjust: { element: HTMLElement; marginTop: number }[] = []
    
    cleanChildren.forEach((child, index) => {
      const elementHeight = child.offsetHeight
      const elementBottom = accumulatedHeight + elementHeight
      
      // Check if this element would cross into the footer reserved zone
      if (elementBottom > currentPageWritableEnd) {
        // Calculate how much space to add to push to next page
        // This includes: remaining space on current page + footer zone + page gap + header zone
        const remainingOnPage = currentPageWritableEnd - accumulatedHeight
        const spacerHeight = remainingOnPage + footerReserve + PAGE_CONFIG.PAGE_GAP + headerReserve
        
        if (spacerHeight > 0 && index > 0) {
          pageBreaks.push({
            pageNumber: currentPageNumber,
            yPosition: accumulatedHeight,
            spacerHeight: spacerHeight,
          })
          
          // Store the adjustment to apply
          elementsToAdjust.push({
            element: child,
            marginTop: spacerHeight,
          })
          
          accumulatedHeight += spacerHeight
        }
        
        // Move to next page
        currentPageNumber++
        currentPageWritableEnd = accumulatedHeight + writablePerPage
      }
      
      accumulatedHeight += elementHeight
    })
    
    // Apply margin adjustments to push content to next page
    elementsToAdjust.forEach(({ element, marginTop }) => {
      element.style.marginTop = `${marginTop}px`
    })
    
    // Calculate total pages based on actual measured content
    const finalHeight = accumulatedHeight
    const pages = Math.max(1, Math.ceil(finalHeight / (PAGE_CONFIG.CONTENT_HEIGHT + PAGE_CONFIG.PAGE_GAP)))
    
    setTotalPages(Math.max(pages, currentPageNumber))
    setPageBreakPositions(pageBreaks)
  }, [showHeaderFooter, showPageNumbers])

  // Initial pagination calculation
  useEffect(() => {
    if (editor) {
      // Wait for editor to render
      const timer = setTimeout(() => {
        calculatePagination()
      }, 100)
      return () => clearTimeout(timer)
    }
  }, [editor, calculatePagination])

  // Recalculate when header/footer or page number visibility changes
  useEffect(() => {
    calculatePagination()
  }, [showHeaderFooter, showPageNumbers, calculatePagination])

  // Handle scroll to update current page indicator
  useEffect(() => {
    const handleScroll = () => {
      if (editorContainerRef.current) {
        const scrollTop = window.scrollY
        const page = getCurrentPage(scrollTop, totalPages)
        setCurrentPage(page)
      }
    }

    window.addEventListener('scroll', handleScroll)
    return () => window.removeEventListener('scroll', handleScroll)
  }, [totalPages])

  const handleSave = useCallback(() => {
    setIsSaved(true)
    console.log('Document saved')
  }, [])

  const handlePreview = useCallback(() => {
    setShowPreview(true)
  }, [])

  // Export to PDF
  const handleExportPDF = useCallback(async () => {
    if (!editor || !measureRef.current) return

    try {
      const pdf = new jsPDF({
        orientation: 'portrait',
        unit: 'px',
        format: [PAGE_CONFIG.WIDTH, PAGE_CONFIG.HEIGHT],
      })

      // Get the editor content HTML
      const contentHTML = editor.getHTML()
      
      // Create temporary container for each page
      for (let i = 0; i < totalPages; i++) {
        const tempContainer = document.createElement('div')
        tempContainer.style.position = 'absolute'
        tempContainer.style.left = '-9999px'
        tempContainer.style.top = '0'
        tempContainer.style.width = `${PAGE_CONFIG.WIDTH}px`
        tempContainer.style.height = `${PAGE_CONFIG.HEIGHT}px`
        tempContainer.style.backgroundColor = '#ffffff'
        tempContainer.style.padding = `${PAGE_CONFIG.MARGIN}px`
        tempContainer.style.boxSizing = 'border-box'
        tempContainer.style.fontFamily = '"Times New Roman", serif'
        tempContainer.style.fontSize = '16px'
        tempContainer.style.lineHeight = '1.5'
        
        // Create content div
        const contentDiv = document.createElement('div')
        contentDiv.innerHTML = contentHTML
        contentDiv.style.maxHeight = `${PAGE_CONFIG.CONTENT_HEIGHT}px`
        contentDiv.style.overflow = 'hidden'
        contentDiv.style.marginTop = `${-i * PAGE_CONFIG.CONTENT_HEIGHT}px`
        
        tempContainer.appendChild(contentDiv)
        document.body.appendChild(tempContainer)
        
        await new Promise(resolve => setTimeout(resolve, 100))
        
        const canvas = await html2canvas(tempContainer, {
          scale: 2,
          useCORS: true,
          logging: false,
          backgroundColor: '#ffffff',
        })
        
        const imgData = canvas.toDataURL('image/png')
        
        if (i > 0) {
          pdf.addPage()
        }
        
        pdf.addImage(imgData, 'PNG', 0, 0, PAGE_CONFIG.WIDTH, PAGE_CONFIG.HEIGHT)
        
        document.body.removeChild(tempContainer)
      }

      pdf.save('document.pdf')
    } catch (error) {
      console.error('Error exporting PDF:', error)
      alert('Failed to export PDF. Please try again.')
    }
  }, [editor, totalPages])

  // Export to Word (HTML format)
  const handleExportWord = useCallback(() => {
    if (!editor) return

    try {
      const content = editor.getHTML()
      
      // Create Word-compatible HTML
      const htmlContent = `
        <!DOCTYPE html>
        <html>
        <head>
          <meta charset="utf-8">
          <title>Document</title>
          <style>
            body {
              font-family: "Times New Roman", serif;
              font-size: 12pt;
              line-height: 1.5;
              margin: 1in;
            }
            h1, h2, h3 { font-weight: bold; }
            h1 { font-size: 18pt; }
            h2 { font-size: 16pt; }
            h3 { font-size: 14pt; }
            p { margin: 0 0 1em 0; }
            table { border-collapse: collapse; width: 100%; }
            td, th { border: 1px solid #000; padding: 8px; }
          </style>
        </head>
        <body>
          ${content}
        </body>
        </html>
      `

      const blob = new Blob([htmlContent], { type: 'application/msword' })
      const url = URL.createObjectURL(blob)
      const link = document.createElement('a')
      link.href = url
      link.download = 'document.doc'
      link.click()
      URL.revokeObjectURL(url)
    } catch (error) {
      console.error('Error exporting Word:', error)
      alert('Failed to export Word document. Please try again.')
    }
  }, [editor])

  if (!editor) {
    return <div className="flex items-center justify-center h-screen">Loading editor...</div>
  }

  return (
    <div className="min-h-screen bg-white">
      {/* Toolbar */}
      <div className="no-print sticky top-0 z-50 bg-white shadow-md">
        <Toolbar 
          editor={editor} 
          onSave={handleSave}
          isSaved={isSaved}
          onExportPDF={handleExportPDF}
          onExportWord={handleExportWord}
          onPreview={handlePreview}
          // Page Elements
          showHeaderFooter={showHeaderFooter}
          onToggleHeaderFooter={setShowHeaderFooter}
          headerText={headerText}
          onHeaderTextChange={setHeaderText}
          footerText={footerText}
          onFooterTextChange={setFooterText}
          showPageNumbers={showPageNumbers}
          onTogglePageNumbers={setShowPageNumbers}
          pageNumberPosition={pageNumberPosition}
          onPageNumberPositionChange={setPageNumberPosition}
          // Letterhead
          showLetterhead={showLetterhead}
          onToggleLetterhead={setShowLetterhead}
        />
        {/* Page indicator - Google Docs style */}
        <div className="bg-gray-100 px-4 py-1 text-sm text-gray-600 border-t flex items-center justify-between no-print">
          <span>Page {currentPage} of {totalPages}</span>
          <span className="text-xs text-gray-400">US Letter (8.5" × 11") • 1" margins • USCIS Format</span>
        </div>
      </div>

      {/* Editor Container with Pages - White workspace background */}
      <div className="py-8 bg-gray-100" ref={editorContainerRef}>
        <div className="flex flex-col items-center">
          {/* Main container - relative positioned for absolute children */}
          <div 
            ref={measureRef}
            className="relative"
            style={{ 
              width: `${PAGE_CONFIG.WIDTH}px`,
              minHeight: `${totalPages * (PAGE_CONFIG.HEIGHT + PAGE_CONFIG.PAGE_GAP) - PAGE_CONFIG.PAGE_GAP}px`,
            }}
          >
            {/* Layer 1: Page backgrounds with white margin masks */}
            {Array.from({ length: totalPages }, (_, pageIndex) => {
              const pageTop = pageIndex * (PAGE_CONFIG.HEIGHT + PAGE_CONFIG.PAGE_GAP);
              const headerReserve = showHeaderFooter ? PAGE_CONFIG.HEADER_HEIGHT : 0;
              const footerReserve = (showHeaderFooter || showPageNumbers) ? PAGE_CONFIG.FOOTER_HEIGHT : 0;
              // Content box starts after margin + header reserve
              const contentBoxTop = PAGE_CONFIG.MARGIN + headerReserve;
              // Content box height = page height - margins - header - footer reserves
              const contentBoxHeight = PAGE_CONFIG.HEIGHT - (PAGE_CONFIG.MARGIN * 2) - headerReserve - footerReserve;
              
              return (
                <div 
                  key={pageIndex} 
                  className="absolute"
                  style={{
                    top: `${pageTop}px`,
                    left: 0,
                    width: `${PAGE_CONFIG.WIDTH}px`,
                    height: `${PAGE_CONFIG.HEIGHT}px`,
                    zIndex: 1,
                  }}
                >
                  {/* Page label */}
                  <div className="absolute -top-6 left-0 text-xs text-gray-500 font-medium no-print">
                    Page {pageIndex + 1}
                  </div>

                  {/* Page background - white paper */}
                  <div 
                    className="page bg-white absolute inset-0"
                    style={{
                      width: `${PAGE_CONFIG.WIDTH}px`,
                      height: `${PAGE_CONFIG.HEIGHT}px`,
                      border: '1px solid #C7C7C7',
                      boxShadow: 'rgba(60, 64, 67, 0.15) 0px 1px 3px 1px',
                    }}
                  />

                  {/* Content Box - dashed border showing editable area */}
                  <div 
                    className="absolute pointer-events-none no-print"
                    style={{
                      top: `${contentBoxTop}px`,
                      left: `${PAGE_CONFIG.MARGIN}px`,
                      width: `${PAGE_CONFIG.CONTENT_WIDTH}px`,
                      height: `${contentBoxHeight}px`,
                      border: 'none',
                    }}
                  />
                </div>
              );
            })}

            {/* Layer 2: Editor content - positioned in content boxes */}
            <div 
              className="absolute top-0 left-0 pointer-events-auto"
              style={{
                paddingTop: `${PAGE_CONFIG.MARGIN + (showHeaderFooter ? PAGE_CONFIG.HEADER_HEIGHT : 0)}px`,
                paddingLeft: `${PAGE_CONFIG.MARGIN}px`,
                paddingRight: `${PAGE_CONFIG.MARGIN}px`,
                width: `${PAGE_CONFIG.WIDTH}px`,
                boxSizing: 'border-box',
                zIndex: 5,
              }}
            >
              <div 
                style={{
                  width: `${PAGE_CONFIG.CONTENT_WIDTH}px`,
                }}
              >
                <EditorContent editor={editor} />
              </div>
            </div>

            {/* Layer 3: White margin masks - hide any content bleeding outside content boxes */}
            {Array.from({ length: totalPages }, (_, pageIndex) => {
              const pageTop = pageIndex * (PAGE_CONFIG.HEIGHT + PAGE_CONFIG.PAGE_GAP);
              const headerReserve = showHeaderFooter ? PAGE_CONFIG.HEADER_HEIGHT : 0;
              const footerReserve = (showHeaderFooter || showPageNumbers) ? PAGE_CONFIG.FOOTER_HEIGHT : 0;
              
              return (
                <div 
                  key={`masks-${pageIndex}`} 
                  className="absolute pointer-events-none"
                  style={{
                    top: `${pageTop}px`,
                    left: 0,
                    width: `${PAGE_CONFIG.WIDTH}px`,
                    height: `${PAGE_CONFIG.HEIGHT}px`,
                    zIndex: 15,
                  }}
                >
                  {/* Top margin mask - covers top 1" including header zone */}
                  <div 
                    className="absolute bg-white"
                    style={{
                      top: 0,
                      left: 0,
                      right: 0,
                      height: `${PAGE_CONFIG.MARGIN + headerReserve}px`,
                    }}
                  />
                  
                  {/* Bottom margin mask - covers bottom 1" including footer zone */}
                  <div 
                    className="absolute bg-white"
                    style={{
                      bottom: 0,
                      left: 0,
                      right: 0,
                      height: `${PAGE_CONFIG.MARGIN + footerReserve}px`,
                    }}
                  />
                  
                  {/* Left margin mask */}
                  <div 
                    className="absolute bg-white"
                    style={{
                      top: `${PAGE_CONFIG.MARGIN + headerReserve}px`,
                      left: 0,
                      width: `${PAGE_CONFIG.MARGIN}px`,
                      bottom: `${PAGE_CONFIG.MARGIN + footerReserve}px`,
                    }}
                  />
                  
                  {/* Right margin mask */}
                  <div 
                    className="absolute bg-white"
                    style={{
                      top: `${PAGE_CONFIG.MARGIN + headerReserve}px`,
                      right: 0,
                      width: `${PAGE_CONFIG.MARGIN}px`,
                      bottom: `${PAGE_CONFIG.MARGIN + footerReserve}px`,
                    }}
                  />
                </div>
              );
            })}

            {/* Layer 4: Page gaps - gray areas between pages */}
            {Array.from({ length: totalPages - 1 }, (_, gapIndex) => {
              const gapTop = (gapIndex + 1) * PAGE_CONFIG.HEIGHT + gapIndex * PAGE_CONFIG.PAGE_GAP;
              
              return (
                <div 
                  key={`gap-${gapIndex}`} 
                  className="absolute bg-gray-100 pointer-events-none"
                  style={{
                    top: `${gapTop}px`,
                    left: 0,
                    width: `${PAGE_CONFIG.WIDTH}px`,
                    height: `${PAGE_CONFIG.PAGE_GAP}px`,
                    zIndex: 25,
                  }}
                />
              );
            })}

            {/* Layer 5: Header/Footer content overlays - topmost layer */}
            {Array.from({ length: totalPages }, (_, pageIndex) => {
              const pageTop = pageIndex * (PAGE_CONFIG.HEIGHT + PAGE_CONFIG.PAGE_GAP);
              
              return (
                <div 
                  key={`overlay-${pageIndex}`} 
                  className="absolute pointer-events-none"
                  style={{
                    top: `${pageTop}px`,
                    left: 0,
                    width: `${PAGE_CONFIG.WIDTH}px`,
                    height: `${PAGE_CONFIG.HEIGHT}px`,
                    zIndex: 30,
                  }}
                >
                  {/* Letterhead - only on first page */}
                  {showLetterhead && pageIndex === 0 && (
                    <div 
                      className="absolute left-0 right-0"
                      style={{
                        top: `${PAGE_CONFIG.MARGIN}px`,
                        paddingLeft: `${PAGE_CONFIG.MARGIN}px`,
                        paddingRight: `${PAGE_CONFIG.MARGIN}px`,
                      }}
                    >
                      <div className="flex items-start justify-between" style={{ height: '90px', background: '#faf8f5' }}>
                        {/* Left section with logo and brand */}
                        <div className="flex items-start gap-2" style={{ paddingTop: '8px' }}>
                          {/* Logo pillars */}
                          <img 
                            src="/legal-bridge-icon.png" 
                            alt="Legal Bridge Logo" 
                            width={36} 
                            height={48}
                            style={{ objectFit: 'contain' }}
                          />
                          
                          <div style={{ paddingTop: '4px' }}>
                            {/* Brand name */}
                            <div className="flex items-baseline gap-1.5" style={{ marginBottom: '2px' }}>
                              <span style={{ fontSize: '28px', fontWeight: '600', color: '#000000', letterSpacing: '0.5px' }}>LEGAL</span>
                              <span style={{ fontSize: '28px', fontWeight: '600', color: '#9333EA', letterSpacing: '0.5px' }}>BRIDGE</span>
                            </div>
                            
                            {/* Separator line */}
                            <div style={{ 
                              width: '100%', 
                              height: '1.5px', 
                              background: '#000000',
                              marginBottom: '4px',
                              marginTop: '2px'
                            }} />
                            
                            {/* Contact info */}
                            <div style={{ fontSize: '10px', color: '#000000', lineHeight: '1.4' }}>
                              <div>Website: www.legalbridge.ai</div>
                              <div>Email: connect@legalbridge.ai</div>
                            </div>
                          </div>
                        </div>
                        
                        {/* Right purple accent box */}
                        <div style={{
                          width: '300px',
                          height: '90px',
                          background: 'linear-gradient(135deg, rgba(168, 85, 247, 0.5) 0%, rgba(147, 51, 234, 0.6) 100%)',
                          clipPath: 'polygon(15% 0, 100% 0, 100% 100%, 0% 100%)',
                        }} />
                      </div>
                    </div>
                  )}

                  {/* Header text - positioned at 0.5" from top */}
                  {showHeaderFooter && pageIndex > 0 && (
                    <div 
                      className="absolute left-0 right-0 flex items-center justify-between"
                      style={{
                        top: `${PAGE_CONFIG.HEADER_OFFSET}px`,
                        height: `${PAGE_CONFIG.HEADER_HEIGHT}px`,
                        paddingLeft: `${PAGE_CONFIG.MARGIN}px`,
                        paddingRight: `${PAGE_CONFIG.MARGIN}px`,
                      }}
                    >
                      <span className="text-xs text-gray-500">{headerText}</span>
                      {showPageNumbers && pageNumberPosition === 'header' && (
                        <span className="text-xs text-gray-500">Page {pageIndex + 1}</span>
                      )}
                    </div>
                  )}

                  {/* Page number in header for first page */}
                  {showPageNumbers && pageNumberPosition === 'header' && pageIndex === 0 && (
                    <div 
                      className="absolute left-0 right-0 flex items-center justify-end"
                      style={{
                        top: `${PAGE_CONFIG.HEADER_OFFSET}px`,
                        height: `${PAGE_CONFIG.HEADER_HEIGHT}px`,
                        paddingLeft: `${PAGE_CONFIG.MARGIN}px`,
                        paddingRight: `${PAGE_CONFIG.MARGIN}px`,
                      }}
                    >
                      <span className="text-xs text-gray-500">Page {pageIndex + 1}</span>
                    </div>
                  )}

                  {/* Footer text - positioned at 0.5" from bottom */}
                  {(showHeaderFooter || (showPageNumbers && pageNumberPosition === 'footer')) && (
                    <div 
                      className="absolute left-0 right-0 flex items-center"
                      style={{
                        bottom: `${PAGE_CONFIG.FOOTER_OFFSET}px`,
                        height: `${PAGE_CONFIG.FOOTER_HEIGHT}px`,
                        paddingLeft: `${PAGE_CONFIG.MARGIN}px`,
                        paddingRight: `${PAGE_CONFIG.MARGIN}px`,
                      }}
                    >
                      {showHeaderFooter && footerText && (
                        <span className="text-xs text-gray-500 flex-1">{footerText}</span>
                      )}
                      {(!showHeaderFooter || !footerText) && <span className="flex-1"></span>}
                      {showPageNumbers && pageNumberPosition === 'footer' && (
                        <span className="text-xs text-gray-500">Page {pageIndex + 1}</span>
                      )}
                      <span className="flex-1"></span>
                    </div>
                  )}

                  {/* Visual margin guides - dashed box (optional debug) */}
                  <div 
                    className="absolute pointer-events-none no-print"
                    style={{
                      top: `${PAGE_CONFIG.MARGIN + (showHeaderFooter ? PAGE_CONFIG.HEADER_HEIGHT : 0)}px`,
                      left: `${PAGE_CONFIG.MARGIN}px`,
                      right: `${PAGE_CONFIG.MARGIN}px`,
                      bottom: `${PAGE_CONFIG.MARGIN + ((showHeaderFooter || showPageNumbers) ? PAGE_CONFIG.FOOTER_HEIGHT : 0)}px`,
                      border: 'none',
                    }}
                  />
                </div>
              );
            })}

          </div>
        </div>
      </div>

      {/* Print styles */}
      <style jsx global>{`
        @media print {
          .no-print {
            display: none !important;
          }
          
          body {
            background: white !important;
          }
          
          .page {
            box-shadow: none !important;
            margin: 0 !important;
            page-break-after: always;
          }
          
          .page:last-child {
            page-break-after: avoid;
          }
        }
        
        @page {
          size: letter;
          margin: 0;
        }
        
        /* ProseMirror Editor - constrained to 6.5" × writable content area */
        .ProseMirror {
          outline: none;
          position: relative;
          width: ${PAGE_CONFIG.CONTENT_WIDTH}px; /* 6.5 inches content width */
          min-height: ${PAGE_CONFIG.CONTENT_HEIGHT - PAGE_CONFIG.HEADER_HEIGHT - PAGE_CONFIG.FOOTER_HEIGHT}px;
          font-family: 'Times New Roman', Times, serif;
          font-size: 16px; /* 12pt equivalent */
          line-height: 1.5;
          color: #000;
        }
        
        /* Prevent content from being selected in header/footer zones */
        .ProseMirror > * {
          position: relative;
          z-index: 1;
        }
        
        .ProseMirror p {
          margin: 0 0 1em 0;
        }
        
        .ProseMirror h1 {
          font-size: 32px;
          font-weight: bold;
          margin: 1.5em 0 0.5em 0;
          line-height: 1.2;
        }
        
        .ProseMirror h2 {
          font-size: 24px;
          font-weight: bold;
          margin: 1.2em 0 0.5em 0;
          line-height: 1.3;
        }
        
        .ProseMirror h3 {
          font-size: 20px;
          font-weight: bold;
          margin: 1em 0 0.5em 0;
          line-height: 1.4;
        }
        
        .ProseMirror ul, .ProseMirror ol {
          padding-left: 1.5em;
          margin: 0.5em 0;
        }
        
        .ProseMirror li {
          margin: 0.25em 0;
          line-height: 1.5;
        }
        
        .ProseMirror strong {
          font-weight: bold;
        }
        
        .ProseMirror em {
          font-style: italic;
        }
        
        .ProseMirror u {
          text-decoration: underline;
        }
        
        /* Page Break Styling */
        .ProseMirror .page-break {
          margin: 2em 0;
          padding: 1.5em 0;
          border: none;
          border-top: 2px solid #e0e0e0;
          border-bottom: 2px solid #e0e0e0;
          position: relative;
          background: #fafafa;
          page-break-after: always;
          break-after: page;
          cursor: default;
          user-select: none;
        }
        
        .ProseMirror .page-break::before {
          content: 'Page Break (Ctrl+Enter to insert)';
          display: block;
          text-align: center;
          color: #666;
          font-size: 12px;
          font-weight: 500;
          letter-spacing: 0.5px;
          text-transform: uppercase;
        }
        
        .ProseMirror .page-break:hover {
          background: #f0f0f0;
          border-color: #9333ea;
        }
        
        .ProseMirror .page-break:hover::before {
          color: #9333ea;
        }
        
        @media print {
          .ProseMirror .page-break {
            margin: 0;
            padding: 0;
            background: transparent;
            border: none;
          }
          
          .ProseMirror .page-break::before {
            display: none;
          }
        }
        
        .ProseMirror table {
          border-collapse: collapse;
          width: 100%;
          margin: 1em 0;
          table-layout: fixed;
          page-break-inside: auto;
        }
        
        .ProseMirror td, .ProseMirror th {
          border: 1px solid #333;
          padding: 8px 12px;
          min-width: 50px;
          position: relative;
          vertical-align: top;
          page-break-inside: avoid;
        }
        
        .ProseMirror th {
          background: #f5f5f5;
          font-weight: bold;
          text-align: left;
        }
        
        .ProseMirror tr {
          page-break-inside: avoid;
          page-break-after: auto;
        }
        
        /* Table cell resizing handle */
        .ProseMirror .column-resize-handle {
          position: absolute;
          right: -2px;
          top: 0;
          bottom: 0;
          width: 4px;
          background-color: #3b82f6;
          cursor: col-resize;
          z-index: 10;
        }
        
        .ProseMirror .selectedCell {
          background-color: #e0e7ff;
        }
        
        .ProseMirror .tableWrapper {
          overflow-x: auto;
          margin: 1em 0;
        }
        
        .ProseMirror img {
          max-width: 100%;
          height: auto;
        }
        
        .ProseMirror a {
          color: #2563eb;
          text-decoration: underline;
        }
        
        .ProseMirror mark {
          padding: 0.125em 0;
        }
      `}</style>

      {/* Preview Modal */}
      {showPreview && (
        <div className="fixed inset-0 bg-black/80 z-[100] flex flex-col">
          {/* Preview Header */}
          <div className="bg-white border-b flex items-center justify-between px-6 py-3">
            <div className="flex items-center gap-3">
              <div className="w-8 h-8 bg-purple-100 rounded flex items-center justify-center">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" className="text-purple-600">
                  <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                  <circle cx="12" cy="12" r="3" strokeWidth="2"/>
                </svg>
              </div>
              <div>
                <h3 className="font-semibold text-lg">Preview</h3>
                <p className="text-sm text-gray-500">Cover Letter - Version 3</p>
              </div>
            </div>
            <div className="flex items-center gap-3">
              <button
                onClick={handleExportPDF}
                className="flex items-center gap-2 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors"
              >
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                  <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                  <polyline points="7 10 12 15 17 10" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                  <line x1="12" y1="15" x2="12" y2="3" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
                Download PDF
              </button>
              <button
                onClick={() => setShowPreview(false)}
                className="w-8 h-8 flex items-center justify-center rounded hover:bg-gray-100 transition-colors"
              >
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                  <line x1="18" y1="6" x2="6" y2="18" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                  <line x1="6" y1="6" x2="18" y2="18" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
              </button>
            </div>
          </div>

          {/* Preview Content */}
          <div className="flex-1 flex overflow-hidden">
            {/* Page Thumbnails Sidebar */}
            <div className="w-48 bg-gray-50 border-r overflow-y-auto">
              <div className="p-3">
                <p className="text-xs text-gray-500 font-semibold mb-3">Pages</p>
                {Array.from({ length: totalPages }, (_, i) => (
                  <div
                    key={i}
                    className={`mb-3 cursor-pointer rounded-lg border-2 overflow-hidden ${
                      currentPage === i + 1 ? 'border-purple-500' : 'border-gray-200'
                    }`}
                    onClick={() => setCurrentPage(i + 1)}
                  >
                    <div className="bg-white aspect-[8.5/11] flex items-center justify-center text-xs text-gray-400">
                      <div className="text-center">
                        <div className="w-32 h-40 bg-gray-100 rounded mb-1"></div>
                        <span className="text-xs font-semibold">{i + 1}</span>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            {/* Main Preview Area */}
            <div className="flex-1 flex flex-col bg-gray-200">
              {/* Navigation Bar */}
              <div className="bg-white border-b px-4 py-2 flex items-center justify-between">
                <div className="flex items-center gap-2">
                  <button
                    onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
                    disabled={currentPage === 1}
                    className="p-1 rounded hover:bg-gray-100 disabled:opacity-30 disabled:cursor-not-allowed"
                  >
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                      <polyline points="15 18 9 12 15 6" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                    </svg>
                  </button>
                  <span className="text-sm">
                    Page {currentPage} of {totalPages}
                  </span>
                  <button
                    onClick={() => setCurrentPage(Math.min(totalPages, currentPage + 1))}
                    disabled={currentPage === totalPages}
                    className="p-1 rounded hover:bg-gray-100 disabled:opacity-30 disabled:cursor-not-allowed"
                  >
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                      <polyline points="9 18 15 12 9 6" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                    </svg>
                  </button>
                </div>

                {/* Zoom Controls */}
                <div className="flex items-center gap-2">
                  <button
                    onClick={() => setPreviewZoom(Math.max(25, previewZoom - 25))}
                    className="p-1 rounded hover:bg-gray-100"
                  >
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                      <line x1="5" y1="12" x2="19" y2="12" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                    </svg>
                  </button>
                  <span className="text-sm min-w-[60px] text-center">{previewZoom}%</span>
                  <button
                    onClick={() => setPreviewZoom(Math.min(200, previewZoom + 25))}
                    className="p-1 rounded hover:bg-gray-100"
                  >
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                      <line x1="12" y1="5" x2="12" y2="19" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                      <line x1="5" y1="12" x2="19" y2="12" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                    </svg>
                  </button>
                </div>
              </div>

              {/* Document Preview */}
              <div className="flex-1 overflow-auto p-8 flex justify-center bg-gray-100">
                <div
                  style={{
                    transform: `scale(${previewZoom / 100})`,
                    transformOrigin: 'top center',
                    transition: 'transform 0.2s',
                  }}
                >
                  <div className="flex flex-col" style={{ gap: '32px' }}>
                    {Array.from({ length: totalPages }, (_, pageIndex) => {
                      const pageTop = pageIndex * (PAGE_CONFIG.HEIGHT + PAGE_CONFIG.PAGE_GAP);
                      const headerReserve = showHeaderFooter ? PAGE_CONFIG.HEADER_HEIGHT : 0;
                      const footerReserve = (showHeaderFooter || showPageNumbers) ? PAGE_CONFIG.FOOTER_HEIGHT : 0;
                      
                      return (
                        <div 
                          key={pageIndex}
                          className="bg-white" 
                          style={{ 
                            width: `${PAGE_CONFIG.WIDTH}px`,
                            height: `${PAGE_CONFIG.HEIGHT}px`,
                            border: '1px solid #C7C7C7',
                            boxShadow: 'rgba(60, 64, 67, 0.15) 0px 1px 3px 1px',
                            position: 'relative',
                            overflow: 'hidden',
                          }}
                        >
                          {/* Page content with proper clipping */}
                          <div
                            style={{
                              position: 'absolute',
                              top: 0,
                              left: 0,
                              right: 0,
                              bottom: 0,
                              overflow: 'hidden',
                            }}
                          >
                            <div
                              style={{
                                position: 'absolute',
                                top: `${PAGE_CONFIG.MARGIN + headerReserve}px`,
                                left: `${PAGE_CONFIG.MARGIN}px`,
                                width: `${PAGE_CONFIG.CONTENT_WIDTH}px`,
                                fontFamily: '"Times New Roman", serif',
                                fontSize: '16px',
                                lineHeight: '1.5',
                              }}
                            >
                              {editor && (
                                <div
                                  dangerouslySetInnerHTML={{ __html: editor.getHTML() }}
                                  style={{
                                    marginTop: `${-pageTop - PAGE_CONFIG.MARGIN - headerReserve}px`,
                                  }}
                                />
                              )}
                            </div>
                          </div>

                          {/* Header/Footer overlays */}
                          {showPageNumbers && pageNumberPosition === 'footer' && (
                            <div 
                              className="absolute left-0 right-0 flex items-center justify-center"
                              style={{
                                bottom: `${PAGE_CONFIG.FOOTER_OFFSET}px`,
                                height: `${PAGE_CONFIG.FOOTER_HEIGHT}px`,
                                paddingLeft: `${PAGE_CONFIG.MARGIN}px`,
                                paddingRight: `${PAGE_CONFIG.MARGIN}px`,
                              }}
                            >
                              <span className="text-xs text-gray-500">Page {pageIndex + 1}</span>
                            </div>
                          )}
                          
                          {showPageNumbers && pageNumberPosition === 'header' && (
                            <div 
                              className="absolute left-0 right-0 flex items-center justify-center"
                              style={{
                                top: `${PAGE_CONFIG.HEADER_OFFSET}px`,
                                height: `${PAGE_CONFIG.HEADER_HEIGHT}px`,
                                paddingLeft: `${PAGE_CONFIG.MARGIN}px`,
                                paddingRight: `${PAGE_CONFIG.MARGIN}px`,
                              }}
                            >
                              <span className="text-xs text-gray-500">Page {pageIndex + 1}</span>
                            </div>
                          )}
                        </div>
                      );
                    })}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}