src/App.js

import React, { useState, useCallback, useRef, useEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { useDropzone } from 'react-dropzone';
import FlowingMenu from './components/FlowingMenu';
import FileUploader from './components/FileUploader';
import PreviewPanel from './components/PreviewPanel';
import ResultsPanel from './components/ResultsPanel';
import Orb from './components/Orb';
import TrueFocus from './components/TrueFocus';
import LoadingScreen from './components/LoadingScreen';
import ProcessingProgress from './components/ProcessingProgress';
import ApiKeyEncryption from './utils/encryption';
import './index.css';

function App() {
  const [apiKey, setApiKey] = useState(() => {
    // Load encrypted API key from localStorage on initialization
    return ApiKeyEncryption.retrieveApiKey() || '';
  });
  
  // Handle API key changes and save encrypted to localStorage
  const handleApiKeyChange = (newApiKey) => {
    setApiKey(newApiKey);
    
    // Store encrypted API key
    if (newApiKey.trim()) {
      ApiKeyEncryption.storeApiKey(newApiKey);
      console.log('🔐 API key encrypted and stored securely');
    } else {
      ApiKeyEncryption.clearApiKey();
      console.log('🗑️ Encrypted API key cleared');
    }
  };
  
  const [uploadedFile, setUploadedFile] = useState(null);
  const [extractedText, setExtractedText] = useState('');
  const [isProcessing, setIsProcessing] = useState(false);
  const [processingProgress, setProcessingProgress] = useState({ current: 0, total: 0, status: '', fileName: '' });
  const [processingMode, setProcessingMode] = useState('standard');
  const [activeTab, setActiveTab] = useState('upload');
  const [previewMode, setPreviewMode] = useState('text');
  const [showLoading, setShowLoading] = useState(true);
  const fileInputRef = useRef(null);

  // Check if server has API key configured
  const [serverHasApiKey, setServerHasApiKey] = useState(false);

  // Migrate old unencrypted API key to encrypted storage
  useEffect(() => {
    const migrateOldApiKey = () => {
      const oldApiKey = localStorage.getItem('gemini-api-key');
      if (oldApiKey && !ApiKeyEncryption.retrieveApiKey()) {
        console.log('🔄 Migrating old API key to encrypted storage...');
        ApiKeyEncryption.storeApiKey(oldApiKey);
        localStorage.removeItem('gemini-api-key'); // Remove old unencrypted key
        setApiKey(oldApiKey);
        console.log('✅ API key migration completed');
      }
    };
    
    migrateOldApiKey();
  }, []);

  // Cleanup temp files on app load/reload and check server API key
  useEffect(() => {
    const initializeApp = async () => {
      try {
        // Check if server has API key configured
        const healthResponse = await fetch('http://localhost:3002/api/health');
        if (healthResponse.ok) {
          const healthData = await healthResponse.json();
          setServerHasApiKey(healthData.hasApiKey || false);
        }

        // Cleanup temp files
        await fetch('http://localhost:3002/api/cleanup', { method: 'POST' });
        console.log('✅ Cleanup completed on app load');
      } catch (error) {
        console.log('⚠️ App initialization failed (server might be starting):', error.message);
      }
    };
    
    // Run initialization after a short delay to ensure server is ready
    setTimeout(initializeApp, 2000);
  }, []);

  const menuItems = [
    { id: 'upload', label: 'Upload', icon: '↑' },
    { id: 'preview', label: 'Preview', icon: '○' },
    { id: 'results', label: 'RESULTS', icon: '↓' }
  ];

  const onDrop = useCallback(async (acceptedFiles) => {
    const file = acceptedFiles[0];
    if (file) {
      // Trigger cleanup before processing new file
      try {
        await fetch('http://localhost:3002/api/cleanup', { method: 'POST' });
        console.log('✅ Pre-upload cleanup completed');
      } catch (error) {
        console.log('⚠️ Pre-upload cleanup failed:', error.message);
      }
      
      setUploadedFile(file);
      setActiveTab('preview');
    }
  }, []);

  const { getRootProps, getInputProps, isDragActive } = useDropzone({
    onDrop,
    accept: {
      'image/*': ['.png', '.jpg', '.jpeg'],
      'application/pdf': ['.pdf'],
      'text/html': ['.html', '.htm']
    },
    multiple: false
  });

  const handlePaste = useCallback((e) => {
    const items = e.clipboardData?.items;
    if (items) {
      for (let item of items) {
        if (item.type.indexOf('image') !== -1) {
          const file = item.getAsFile();
          if (file) {
            setUploadedFile(file);
            setActiveTab('preview');
          }
        }
      }
    }
  }, []);

  const handleFileSelect = () => {
    fileInputRef.current?.click();
  };

  const handleFileChange = (e) => {
    const file = e.target.files?.[0];
    if (file) {
      setUploadedFile(file);
      setActiveTab('preview');
    }
  };

  const processFile = async () => {
    if (!uploadedFile || !apiKey) return;

    setIsProcessing(true);
    
    // Initialize progress
    setProcessingProgress({
      current: 0,
      total: 1,
      status: '🔄 Initializing...',
      fileName: uploadedFile.name
    });
    
    let progressInterval = null;
    
    try {
      // Create FormData for file upload
      const formData = new FormData();
      formData.append('file', uploadedFile);
      formData.append('apiKey', apiKey);
      formData.append('mode', processingMode);

      console.log('Processing file:', uploadedFile.name, 'Mode:', processingMode);

      // Start the OCR request
      const ocrPromise = fetch('http://localhost:3002/api/ocr', {
        method: 'POST',
        body: formData,
      });

      // Start progress polling immediately
      progressInterval = setInterval(async () => {
          try {
            // We'll get the sessionId from the response, but for now poll a generic endpoint
            // In a real implementation, you'd start polling after getting the sessionId
            const progressResponse = await fetch(`http://localhost:3002/api/progress-latest`);
            if (progressResponse.ok) {
              const progressData = await progressResponse.json();
              // Progress data received and processed
              if (progressData.current > 0) {
                setProcessingProgress({
                  current: progressData.current,
                  total: progressData.total,
                  status: progressData.status,
                  fileName: progressData.fileName || uploadedFile.name,
                  totalPages: progressData.totalPages || 1,
                  currentPage: progressData.currentPage || 1,
                  totalCharacters: progressData.totalCharacters || 0,
                  pageCharacters: progressData.pageCharacters || 0,
                  phase: progressData.phase || 'processing',
                  consoleLogs: progressData.consoleLogs || []
                });
              }
            }
          } catch (error) {
            // Ignore progress polling errors
            console.log('Progress polling error (ignored):', error.message);
          }
        }, 1000); // Poll every 1 second to reduce spam

      // Wait for OCR to complete
      const response = await ocrPromise;
      const result = await response.json();

      // Clear progress polling
      if (progressInterval) {
        clearInterval(progressInterval);
        progressInterval = null;
      }

      if (result.success) {
        // Final progress update
        setProcessingProgress(prev => ({
          ...prev,
          current: prev.total,
          status: '✅ Processing complete!'
        }));
        
        await new Promise(resolve => setTimeout(resolve, 500));
        
        // Use the extracted text from Gemini
        setExtractedText(result.data.extractedText);
        setActiveTab('results');
        
        console.log('✅ OCR Success:', {
          fileName: result.data.fileName,
          characters: result.data.metadata.characterCount,
          words: result.data.metadata.wordCount,
          mode: result.data.processingMode
        });
      } else {
        console.error('❌ OCR Error:', result.error);
        alert(`OCR Error: ${result.error}`);
      }
    } catch (error) {
      console.error('❌ Network Error:', error);
      
      // Clear progress polling on error
      if (progressInterval) {
        clearInterval(progressInterval);
        progressInterval = null;
      }
      
      // Check if backend is running
      if (error.message.includes('fetch')) {
        alert(`Network Error: Cannot connect to OCR backend. 

Please make sure:
1. Backend server is running on port 3002
2. Run: cd server && npm install && npm start
3. Check console for any backend errors
4. Visit http://localhost:3002 to verify backend is running

Error: ${error.message}`);
      } else {
        alert(`Processing Error: ${error.message}`);
      }
    } finally {
      // Clean up
      if (progressInterval) {
        clearInterval(progressInterval);
      }
      setIsProcessing(false);
      setProcessingProgress({ current: 0, total: 0, status: '', fileName: '' });
    }
  };

  return (
    <div className="app" onPaste={handlePaste}>
      {/* Loading Screen */}
      {showLoading && (
        <LoadingScreen onComplete={() => setShowLoading(false)} />
      )}

      {/* Giant Central Orb - Fades in after loading */}
      <div className={`giant-orb-background ${!showLoading ? 'loaded' : ''}`}>
        <div className="giant-orb-container">
          <Orb hue={0} hoverIntensity={0.5} rotateOnHover={true} forceHoverState={false} />
        </div>
      </div>

      <div className="glass-container">
        <header className="app-header">
          <motion.div
            className="logo"
            initial={{ opacity: 0, y: -20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8 }}
          >
            <TrueFocus
              sentence="Luna OCR"
              manualMode={true}
              blurAmount={8.5}
              borderColor="#ffffff"
              glowColor="rgba(255, 255, 255, 0.8)"
              animationDuration={0.5}
              pauseBetweenAnimations={2}
            />
          </motion.div>

          <motion.div
            className="api-key-input"
            initial={{ opacity: 0, x: 20 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.8, delay: 0.2 }}
          >
            {!serverHasApiKey && (
              <div className="api-key-container">
                <input
                  type="password"
                  placeholder={apiKey ? "API Key loaded from storage" : "Enter Google API Key..."}
                  value={apiKey}
                  onChange={(e) => handleApiKeyChange(e.target.value)}
                  className="glass-input"
                />
                {apiKey && (
                  <button
                    type="button"
                    onClick={() => handleApiKeyChange('')}
                    className="clear-api-key-btn"
                    title="Clear saved API key"
                  >
                    ×
                  </button>
                )}
              </div>
            )}
            
            {serverHasApiKey && (
              <div className="server-api-notice">
                <p>🔒 API key configured on server - no user key required</p>
              </div>
            )}
          </motion.div>
        </header>

        <FlowingMenu
          items={menuItems}
          activeItem={activeTab}
          onItemClick={setActiveTab}
        />

        <main className="app-main">
          <AnimatePresence mode="wait">
            {activeTab === 'upload' && (
              <motion.div
                key="upload"
                initial={{ opacity: 0, x: -20 }}
                animate={{ opacity: 1, x: 0 }}
                exit={{ opacity: 0, x: 20 }}
                className="tab-content"
              >
                <FileUploader
                  getRootProps={getRootProps}
                  getInputProps={getInputProps}
                  isDragActive={isDragActive}
                  onFileSelect={handleFileSelect}
                  fileInputRef={fileInputRef}
                  onFileChange={handleFileChange}
                />
              </motion.div>
            )}



            {activeTab === 'preview' && uploadedFile && (
              <motion.div
                key="preview"
                initial={{ opacity: 0, x: -20 }}
                animate={{ opacity: 1, x: 0 }}
                exit={{ opacity: 0, x: 20 }}
                className="tab-content"
              >
                <PreviewPanel
                  file={uploadedFile}
                  processingMode={processingMode}
                  onModeChange={setProcessingMode}
                  onProcess={processFile}
                  isProcessing={isProcessing}
                  apiKey={apiKey}
                />
              </motion.div>
            )}

            {activeTab === 'results' && extractedText && (
              <motion.div
                key="results"
                initial={{ opacity: 0, x: -20 }}
                animate={{ opacity: 1, x: 0 }}
                exit={{ opacity: 0, x: 20 }}
                className="tab-content"
              >
                <ResultsPanel
                  text={extractedText}
                  previewMode={previewMode}
                  onPreviewModeChange={setPreviewMode}
                  fileName={uploadedFile?.name}
                />
              </motion.div>
            )}
          </AnimatePresence>
        </main>
      </div>

      {/* Processing Progress Overlay */}
      <ProcessingProgress 
        progress={processingProgress} 
        isVisible={isProcessing} 
      />

    </div>
  );
}

export default App;