import React, { useState, useEffect } from 'react'; import { motion, AnimatePresence } from 'framer-motion'; import { FileText, Code, Eye, ArrowLeft, Download, Copy, Check, Maximize2, ZoomIn, ZoomOut, Search } from 'lucide-react'; import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'; import { atomDark } from 'react-syntax-highlighter/dist/esm/styles/prism'; import { marked } from 'marked'; const TextViewer = () => { const [text, setText] = useState(''); const [fileName, setFileName] = useState(''); const [viewMode, setViewMode] = useState('text'); const [copied, setCopied] = useState(false); const [fontSize, setFontSize] = useState(16); const [searchTerm, setSearchTerm] = useState(''); const [isSearching, setIsSearching] = useState(false); useEffect(() => { // Get text from URL params or localStorage const urlParams = new URLSearchParams(window.location.search); const textParam = urlParams.get('text'); const fileParam = urlParams.get('file'); if (textParam) { setText(decodeURIComponent(textParam)); } else { const savedText = localStorage.getItem('extractedText'); if (savedText) setText(savedText); } if (fileParam) { setFileName(decodeURIComponent(fileParam)); } else { setFileName(localStorage.getItem('fileName') || 'extracted-text'); } }, []); const viewModes = [ { id: 'text', label: 'Text', icon: , ext: '.txt' }, { id: 'markdown', label: 'Markdown', icon:

, ext: '.md' },
    { id: 'html', label: 'Rendered', icon: , ext: '.html' },
    { id: 'json', label: 'JSON', icon: , ext: '.json' }
  ];

  const handleCopy = async () => {
    try {
      await navigator.clipboard.writeText(text);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    } catch (err) {
      console.error('Failed to copy text:', err);
    }
  };

  const handleBack = () => {
    window.history.back();
  };

  const adjustFontSize = (delta) => {
    setFontSize(prev => Math.max(12, Math.min(24, prev + delta)));
  };  cons
t renderContent = () => {
    const baseStyle = { fontSize: `${fontSize}px`, lineHeight: 1.7 };
    
    switch (viewMode) {
      case 'text':
        return (
          
            {text}
          
        );
      case 'markdown':
        return (
          
            
              {text}
            
          
        );
      case 'html':
        return (
          
        );
      case 'json':
        const jsonData = {
          metadata: {
            fileName: fileName || 'extracted-text',
            extractedAt: new Date().toISOString(),
            characterCount: text.length,
            lineCount: text.split('\n').length,
            wordCount: text.split(/\s+/).filter(word => word.length > 0).length
          },
          content: {
            rawText: text,
            lines: text.split('\n'),
            paragraphs: text.split('\n\n').filter(p => p.trim().length > 0)
          }
        };
        return (
          
            
              {JSON.stringify(jsonData, null, 2)}
            
          
        );
      default:
        return null;
    }
  };  return
 (
    
      {/* Same background as main app */}
      
        
          
            
            
            
          
        
      

      
        {/* Professional Header */}
        
          
            
              
              Back
            
            
            
              {fileName}
              
                {text.length} chars • {text.split('\n').length} lines • {text.split(/\s+/).filter(w => w.length > 0).length} words
              
            
          

          
            
              
               setSearchTerm(e.target.value)}
                className="search-input"
              />
            
            
            
              
              {fontSize}px
              
            

            
              
                {copied ? (
                  
                    
                  
                ) : (
                  
                    
                  
                )}
              
              {copied ? 'Copied!' : 'Copy'}
            
          
               
 {/* Format Selector */}
        
          
            {viewModes.map((mode, index) => (
               setViewMode(mode.id)}
                whileHover={{ scale: 1.02 }}
                whileTap={{ scale: 0.98 }}
                initial={{ opacity: 0, x: -20 }}
                animate={{ opacity: 1, x: 0 }}
                transition={{ delay: index * 0.1 }}
              >
                {mode.icon}
                {mode.label}
                {mode.ext}
                
                {viewMode === mode.id && (
                  
                )}
              
            ))}
          
        

        {/* Professional Reader */}
        
          
            
              
                {renderContent()}