frontend/src/App.js

/**
 * Enhanced Multi-Domain RAG Frontend with Professional Light Theme
 *
 * Features:
 * - Clean, professional light theme design
 * - Multi-domain document upload and querying
 * - Document processing status tracking
 * - Processed documents management
 * - Real-time query responses with streaming
 */

import React, { useState, useEffect, useRef, useCallback } from 'react';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import rehypeHighlight from 'rehype-highlight';
import 'highlight.js/styles/github.css'; // Code syntax highlighting theme
import {
  Send,
  Upload,
  FileText,
  CheckCircle,
  XCircle,
  Menu,
  X,
  Loader2,
  Trash2,
  FolderOpen,
  RefreshCw
} from 'lucide-react';

// =============================================================================
// Domain Configurations
// =============================================================================

const DOMAIN_CONFIGS = {
  medical: {
    name: 'Medical & Healthcare',
    description: 'Medical documents, research papers, clinical guidelines',
    color: '#3b82f6',
    bgColor: 'bg-blue-50',
    borderColor: 'border-blue-200',
    textColor: 'text-blue-700',
    fileTypes: ['.pdf', '.docx', '.xml', '.txt', '.doc', '.csv', '.xlsx'],
    icon: '🏥'
  },
  legal: {
    name: 'Legal & Compliance',
    description: 'Legal documents, contracts, regulations, case law',
    color: '#8b5cf6',
    bgColor: 'bg-purple-50',
    borderColor: 'border-purple-200',
    textColor: 'text-purple-700',
    fileTypes: ['.pdf', '.docx', '.txt', '.doc', '.csv', '.xlsx'],
    icon: '⚖️'
  },
  financial: {
    name: 'Financial & Analytics',
    description: 'Financial reports, analysis, market research',
    color: '#10b981',
    bgColor: 'bg-green-50',
    borderColor: 'border-green-200',
    textColor: 'text-green-700',
    fileTypes: ['.pdf', '.xlsx', '.csv', '.json', '.xls'],
    icon: '💰'
  },
  technical: {
    name: 'Technical Documentation',
    description: 'Technical docs, APIs, code, system architecture',
    color: '#f97316',
    bgColor: 'bg-orange-50',
    borderColor: 'border-orange-200',
    textColor: 'text-orange-700',
    fileTypes: ['.pdf', '.md', '.docx', '.json', '.txt', '.rst', '.csv', '.xlsx'],
    icon: '⚙️'
  },
  academic: {
    name: 'Academic Research',
    description: 'Research papers, academic publications, studies',
    color: '#6366f1',
    bgColor: 'bg-indigo-50',
    borderColor: 'border-indigo-200',
    textColor: 'text-indigo-700',
    fileTypes: ['.pdf', '.docx', '.tex', '.bib', '.txt', '.csv', '.xlsx'],
    icon: '🎓'
  }
};

const API_BASE_URL = process.env.REACT_APP_API_URL || '';

// =============================================================================
// Main Component
// =============================================================================

export default function EnhancedMultiDomainRAG() {
  // Helper function to get from localStorage with fallback
  const getFromLocalStorage = (key, defaultValue) => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : defaultValue;
    } catch (error) {
      console.error(`Error reading localStorage key "${key}":`, error);
      return defaultValue;
    }
  };

  // State Management with localStorage persistence
  const [selectedDomain, setSelectedDomain] = useState(() =>
    getFromLocalStorage('selectedDomain', 'medical')
  );
  const [currentView, setCurrentView] = useState('app'); // 'app', 'files', 'settings'
  const [processingDocs, setProcessingDocs] = useState(() =>
    getFromLocalStorage('processingDocs', [])
  );
  const [processedDocs, setProcessedDocs] = useState([]);
  const [query, setQuery] = useState('');
  const [messages, setMessages] = useState(() =>
    getFromLocalStorage('chatMessages', [])
  );
  const [isQuerying, setIsQuerying] = useState(false);
  const [error, setError] = useState(null);
  const [showUploadModal, setShowUploadModal] = useState(false);
  const [isDragging, setIsDragging] = useState(false);
  const [showSidebar, setShowSidebar] = useState(true);
  const [enableWebSearch, setEnableWebSearch] = useState(() =>
    getFromLocalStorage('enableWebSearch', false)
  );
  const [webSearchOnly, setWebSearchOnly] = useState(() =>
    getFromLocalStorage('webSearchOnly', false)
  );
  const [urlInput, setUrlInput] = useState('');
  const [uploadMode, setUploadMode] = useState('file'); // 'file' or 'url'
  const [fastMode, setFastMode] = useState(() =>
    getFromLocalStorage('fastMode', false)
  );
  const [enableCache, setEnableCache] = useState(() =>
    getFromLocalStorage('enableCache', true)
  );
  const [enableQueryImprovement, setEnableQueryImprovement] = useState(() =>
    getFromLocalStorage('enableQueryImprovement', true)
  );
  const [enableVerification, setEnableVerification] = useState(() =>
    getFromLocalStorage('enableVerification', true)
  );
  const [typingSpeed] = useState(0)

  const messagesEndRef = useRef(null);
  const fileInputRef = useRef(null);
  const typingQueueRef = useRef([]);
  const typingIntervalRef = useRef(null);

  // Auto-scroll to bottom of messages
  const scrollToBottom = () => {
    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
  };

  useEffect(() => {
    scrollToBottom();
  }, [messages]);

  // Persist messages to localStorage whenever they change
  useEffect(() => {
    try {
      window.localStorage.setItem('chatMessages', JSON.stringify(messages));
    } catch (error) {
      console.error('Error saving messages to localStorage:', error);
    }
  }, [messages]);

  // Persist selectedDomain to localStorage
  useEffect(() => {
    try {
      window.localStorage.setItem('selectedDomain', JSON.stringify(selectedDomain));
    } catch (error) {
      console.error('Error saving domain to localStorage:', error);
    }
  }, [selectedDomain]);

  // Persist processingDocs to localStorage
  useEffect(() => {
    try {
      window.localStorage.setItem('processingDocs', JSON.stringify(processingDocs));
    } catch (error) {
      console.error('Error saving processingDocs to localStorage:', error);
    }
  }, [processingDocs]);

  // Persist web search settings to localStorage
  useEffect(() => {
    try {
      window.localStorage.setItem('enableWebSearch', JSON.stringify(enableWebSearch));
    } catch (error) {
      console.error('Error saving enableWebSearch to localStorage:', error);
    }
  }, [enableWebSearch]);

  useEffect(() => {
    try {
      window.localStorage.setItem('webSearchOnly', JSON.stringify(webSearchOnly));
    } catch (error) {
      console.error('Error saving webSearchOnly to localStorage:', error);
    }
  }, [webSearchOnly]);

  // Persist fast mode setting to localStorage
  useEffect(() => {
    try {
      window.localStorage.setItem('fastMode', JSON.stringify(fastMode));
    } catch (error) {
      console.error('Error saving fastMode to localStorage:', error);
    }
  }, [fastMode]);

  // Persist cache setting to localStorage
  useEffect(() => {
    try {
      window.localStorage.setItem('enableCache', JSON.stringify(enableCache));
    } catch (error) {
      console.error('Error saving enableCache to localStorage:', error);
    }
  }, [enableCache]);

  // Persist query improvement setting to localStorage
  useEffect(() => {
    try {
      window.localStorage.setItem('enableQueryImprovement', JSON.stringify(enableQueryImprovement));
    } catch (error) {
      console.error('Error saving enableQueryImprovement to localStorage:', error);
    }
  }, [enableQueryImprovement]);

  // Persist verification setting to localStorage
  useEffect(() => {
    try {
      window.localStorage.setItem('enableVerification', JSON.stringify(enableVerification));
    } catch (error) {
      console.error('Error saving enableVerification to localStorage:', error);
    }
  }, [enableVerification]);

  // Persist typing speed setting to localStorage
  useEffect(() => {
    try {
      window.localStorage.setItem('typingSpeed', JSON.stringify(typingSpeed));
    } catch (error) {
      console.error('Error saving typingSpeed to localStorage:', error);
    }
  }, [typingSpeed]);

  // Fetch processed documents function with useCallback
  const fetchProcessedDocuments = useCallback(async () => {
    try {
      const response = await fetch(`${API_BASE_URL}/documents?domain=${selectedDomain}`);
      if (response.ok) {
        const data = await response.json();
        const fetchedDocs = data.documents || [];

        // Merge with existing docs to avoid duplicates
        // Keep docs that exist in both, prefer fetched version for consistency
        setProcessedDocs(prev => {
          const fetchedIds = new Set(fetchedDocs.map(d => d.id));

          // Keep docs from prev that aren't in fetched (recently added via status check)
          const recentlyAdded = prev.filter(d => d.id && !fetchedIds.has(d.id));

          // Combine with fetched docs
          return [...fetchedDocs, ...recentlyAdded];
        });
      }
    } catch (err) {
      console.error('Error fetching documents:', err);
    }
  }, [selectedDomain]);

  // Check processing status function with useCallback
  const checkProcessingStatus = useCallback(async () => {
    // Update processing docs status
    const updatedProcessing = [];
    for (const doc of processingDocs) {
      try {
        const response = await fetch(`${API_BASE_URL}/status/${doc.processingId}`);
        if (response.ok) {
          const status = await response.json();
          if (status.status === 'completed') {
            // Move to processed - use processingId as id for deletion
            setProcessedDocs(prev => [...prev, {
              ...doc,
              id: doc.processingId,
              status: 'completed'
            }]);
          } else if (status.status === 'failed') {
            setError(`Processing failed for ${doc.name}: ${status.error}`);
          } else {
            updatedProcessing.push({ ...doc, status: status.status });
          }
        }
      } catch (err) {
        console.error('Error checking status:', err);
      }
    }
    setProcessingDocs(updatedProcessing);
  }, [processingDocs]);

  // Fetch processed documents on domain change
  useEffect(() => {
    fetchProcessedDocuments();
  }, [selectedDomain, fetchProcessedDocuments]);

  // Poll for document processing status
  useEffect(() => {
    const interval = setInterval(() => {
      if (processingDocs.length > 0) {
        checkProcessingStatus();
      }
    }, 3000);

    return () => clearInterval(interval);
  }, [processingDocs, checkProcessingStatus]);

  // =============================================================================
  // API Functions
  // =============================================================================


  const handleFileUpload = async (files) => {
    if (!files || files.length === 0) return;

    setError(null);
    const newProcessingDocs = [];

    for (const file of files) {
      const fileExt = '.' + file.name.split('.').pop().toLowerCase();
      const allowedTypes = DOMAIN_CONFIGS[selectedDomain].fileTypes;

      if (!allowedTypes.includes(fileExt)) {
        setError(`File type ${fileExt} not supported for ${selectedDomain} domain. Allowed: ${allowedTypes.join(', ')}`);
        continue;
      }

      const formData = new FormData();
      formData.append('file', file);
      formData.append('domain', selectedDomain);

      try {
        const response = await fetch(`${API_BASE_URL}/upload`, {
          method: 'POST',
          body: formData
        });

        const data = await response.json();
        if (response.ok) {
          newProcessingDocs.push({
            name: file.name,
            domain: selectedDomain,
            processingId: data.processing_id,
            status: 'processing',
            uploadedAt: new Date().toISOString()
          });
        } else {
          setError(data.detail || 'Upload failed');
        }
      } catch (err) {
        console.error('Upload error:', err);
        setError(`Failed to upload ${file.name}: ${err.message}`);
      }
    }

    setProcessingDocs(prev => [...prev, ...newProcessingDocs]);
    setShowUploadModal(false);
  };

  const handleUrlUpload = async () => {
    if (!urlInput.trim()) {
      setError('Please enter a valid URL');
      return;
    }

    setError(null);

    try {
      const response = await fetch(`${API_BASE_URL}/upload-url`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          url: urlInput,
          domain: selectedDomain,
          convert_to_markdown: true
        })
      });

      const data = await response.json();
      if (response.ok) {
        setProcessingDocs(prev => [...prev, {
          name: urlInput,
          domain: selectedDomain,
          processingId: data.processing_id,
          status: 'processing',
          uploadedAt: new Date().toISOString()
        }]);
        setUrlInput('');
        setShowUploadModal(false);
      } else {
        setError(data.detail || 'URL upload failed');
      }
    } catch (err) {
      console.error('URL upload error:', err);
      setError(`Failed to upload URL: ${err.message}`);
    }
  };

  // Typing effect function with queue-based approach
  const startTypingEffect = useCallback((messageIndex, targetTextRef, isStreamingRef) => {
    // Clear any existing typing interval
    if (typingIntervalRef.current) {
      clearInterval(typingIntervalRef.current);
    }

    let displayedLength = 0;

    typingIntervalRef.current = setInterval(() => {
      const targetText = targetTextRef.current || '';
      const isStillStreaming = isStreamingRef.current;

      if (displayedLength < targetText.length) {
        // Add characters based on typing speed (higher = faster)
        const charsToAdd = Math.max(1, Math.floor(typingSpeed / 10));
        displayedLength = Math.min(displayedLength + charsToAdd, targetText.length);

        setMessages(prev => {
          const newMessages = [...prev];
          if (newMessages[messageIndex]) {
            newMessages[messageIndex] = {
              ...newMessages[messageIndex],
              content: targetText.substring(0, displayedLength)
            };
          }
          return newMessages;
        });
      } else if (!isStillStreaming && displayedLength >= targetText.length) {
        // If we've caught up and streaming is done, clear the interval
        clearInterval(typingIntervalRef.current);
        typingIntervalRef.current = null;
      }
    }, 30); // Update every 30ms for smoother animation
  }, [typingSpeed]);

  // Cleanup typing interval on unmount
  useEffect(() => {
    return () => {
      if (typingIntervalRef.current) {
        clearInterval(typingIntervalRef.current);
      }
    };
  }, []);

  const handleQuery = async () => {
    if (!query.trim()) return;

    setError(null);
    setIsQuerying(true);

    const userMessage = { role: 'user', content: query };
    setMessages(prev => [...prev, userMessage]);
    const currentQuery = query;
    setQuery('');

    // Create placeholder for streaming response
    const assistantMessageIndex = messages.length + 1;
    setMessages(prev => [...prev, {
      role: 'assistant',
      content: '',
      streaming: true,
      verification: null
    }]);

    // Use ref to store the full text buffer so typing effect can access it
    const fullTextBufferRef = { current: '' };
    const isStreamingRef = { current: true };
    let typingStarted = false;

    try {
      const response = await fetch(`${API_BASE_URL}/query/stream`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          query: currentQuery,
          domain: selectedDomain,
          enable_verification: true,
          enable_web_search: enableWebSearch,
          web_search_only: webSearchOnly,
          fast_mode: fastMode,
          enable_cache: enableCache,
          enable_query_improvement: enableQueryImprovement,
          enable_verification_check: enableVerification
        })
      });

      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }

      // Read the stream
      const reader = response.body.getReader();
      const decoder = new TextDecoder();
      let buffer = '';

      while (true) {
        const { done, value } = await reader.read();

        if (done) {
          break;
        }

        // Decode chunk
        buffer += decoder.decode(value, { stream: true });

        // Process complete SSE events
        const events = buffer.split('\n\n');
        buffer = events.pop() || ''; // Keep incomplete event in buffer

        for (const event of events) {
          if (!event.trim()) continue;

          const lines = event.split('\n');
          let eventType = 'message';
          let eventData = '';

          for (const line of lines) {
            if (line.startsWith('event:')) {
              eventType = line.substring(6).trim();
            } else if (line.startsWith('data:')) {
              eventData = line.substring(5).trim();
            }
          }

          if (eventData) {
            const data = JSON.parse(eventData);

            if (eventType === 'token') {
              // Add to buffer ref
              fullTextBufferRef.current += data.content;

              // Start typing effect once if speed > 0
              if (!typingStarted && typingSpeed > 0) {
                typingStarted = true;
                startTypingEffect(assistantMessageIndex, fullTextBufferRef, isStreamingRef);
              } else if (typingSpeed === 0) {
                // Instant display if typing speed is 0
                setMessages(prev => {
                  const newMessages = [...prev];
                  newMessages[assistantMessageIndex] = {
                    ...newMessages[assistantMessageIndex],
                    content: fullTextBufferRef.current
                  };
                  return newMessages;
                });
              }

            } else if (eventType === 'verification') {
              // Add verification info to message
              setMessages(prev => {
                const newMessages = [...prev];
                newMessages[assistantMessageIndex] = {
                  ...newMessages[assistantMessageIndex],
                  verification: data.content,
                  streaming: false
                };
                return newMessages;
              });

            } else if (eventType === 'done') {
              // Mark streaming as complete
              isStreamingRef.current = false;

              // Wait a bit for typing to catch up, then ensure final text is shown
              setTimeout(() => {
                if (typingIntervalRef.current) {
                  clearInterval(typingIntervalRef.current);
                  typingIntervalRef.current = null;
                }

                // Set final content and mark as complete
                setMessages(prev => {
                  const newMessages = [...prev];
                  newMessages[assistantMessageIndex] = {
                    ...newMessages[assistantMessageIndex],
                    streaming: false,
                    content: fullTextBufferRef.current
                  };
                  return newMessages;
                });
              }, typingSpeed === 0 ? 0 : 500); // Wait 500ms for typing to finish

            } else if (eventType === 'error') {
              const errorMessage = data.content.message || 'An error occurred while processing your query';
              const errorSuggestion = data.content.suggestion || '';
              setError(errorSuggestion ? `${errorMessage}\n\n${errorSuggestion}` : errorMessage);

              // Mark streaming as complete
              isStreamingRef.current = false;

              // Clear typing interval
              if (typingIntervalRef.current) {
                clearInterval(typingIntervalRef.current);
                typingIntervalRef.current = null;
              }

              // Mark message as error with helpful message
              setMessages(prev => {
                const newMessages = [...prev];
                newMessages[assistantMessageIndex] = {
                  ...newMessages[assistantMessageIndex],
                  content: fullTextBufferRef.current || errorMessage,
                  streaming: false,
                  error: true
                };
                return newMessages;
              });
              break;
            }
          }
        }
      }

    } catch (err) {
      console.error('Query error:', err);
      setError(`Query failed: ${err.message}`);

      // Clear typing interval
      if (typingIntervalRef.current) {
        clearInterval(typingIntervalRef.current);
        typingIntervalRef.current = null;
      }

      // Update message with error
      setMessages(prev => {
        const newMessages = [...prev];
        if (newMessages[assistantMessageIndex]) {
          newMessages[assistantMessageIndex] = {
            ...newMessages[assistantMessageIndex],
            content: newMessages[assistantMessageIndex].content || '[Error occurred]',
            streaming: false,
            error: true
          };
        }
        return newMessages;
      });
    } finally {
      setIsQuerying(false);
    }
  };

  const handleKeyPress = (e) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      handleQuery();
    }
  };

  const handleDeleteDocument = async (docId, docName) => {
    if (!docId) {
      console.error('Document ID is undefined');
      setError('Cannot delete document: ID is missing');
      return;
    }

    // Show confirmation dialog
    const confirmed = window.confirm(
      `Are you sure you want to delete "${docName || 'this document'}"?\n\n` +
      `This will permanently remove:\n` +
      `• All text chunks and embeddings\n` +
      `• Knowledge graph entities and relationships\n` +
      `• Vector database entries\n` +
      `• Physical files\n\n` +
      `This action cannot be undone.`
    );

    if (!confirmed) {
      return;
    }

    try {
      const response = await fetch(`${API_BASE_URL}/documents/${docId}`, {
        method: 'DELETE'
      });

      const data = await response.json();

      if (response.ok && data.success) {
        // Show success message with deletion details
        const report = data.report;
        const summary = report?.summary || {};

        alert(
          `✓ Document deleted successfully!\n\n` +
          `Removed from knowledge base:\n` +
          `• ${summary.chunks_deleted || 0} text chunks\n` +
          `• ${summary.entities_deleted || 0} knowledge graph entities\n` +
          `• ${summary.relationships_deleted || 0} relationships\n` +
          `• ${summary.vectors_deleted || 0} embedding vectors\n` +
          `• ${summary.files_deleted || 0} physical files\n` +
          `• ${summary.directories_deleted || 0} directories`
        );

        setProcessedDocs(prev => prev.filter(doc => doc.id !== docId));
        // Also refresh the documents list to ensure consistency
        await fetchProcessedDocuments();
      } else {
        // Show error with details if available
        const errorMsg = data.message || data.detail || 'Failed to delete document';
        const errors = data.report?.errors || [];

        setError(
          errorMsg +
          (errors.length > 0 ? `\n\nErrors: ${errors.join(', ')}` : '')
        );
      }
    } catch (err) {
      console.error('Error deleting document:', err);
      setError('Failed to delete document: ' + err.message);
    }
  };

  const clearConversation = () => {
    setMessages([]);
  };

  // =============================================================================
  // Drag and Drop Handlers
  // =============================================================================

  const handleDragOver = (e) => {
    e.preventDefault();
    setIsDragging(true);
  };

  const handleDragLeave = (e) => {
    e.preventDefault();
    setIsDragging(false);
  };

  const handleDrop = (e) => {
    e.preventDefault();
    setIsDragging(false);
    handleFileUpload(e.dataTransfer.files);
  };

  // =============================================================================
  // Render Functions
  // =============================================================================

  const renderNavigation = () => (
    <nav className="bg-white border-b border-gray-200 px-6 py-3">
      <div className="flex items-center justify-between max-w-7xl mx-auto">
        <div className="flex items-center space-x-8">
          <div className="flex items-center space-x-3">
              <div className="flex items-center space-x-2">
             <div className="h-8 flex items-center justify-center">
                <img src="/logo.jpg" alt="GlokalAI Logo" className="h-full w-auto" />
             </div>
             <h1 className="text-xl font-bold text-gray-800">OrgAI</h1>
          </div>
            <span className="text-sm text-gray-500">/ {DOMAIN_CONFIGS[selectedDomain].name}</span>
          </div>

          <div className="flex items-center space-x-1">
            <button
              onClick={() => setCurrentView('app')}
              className={`px-4 py-2 text-sm font-medium rounded-md transition-colors ${
                currentView === 'app'
                  ? 'text-blue-600 bg-blue-50'
                  : 'text-gray-600 hover:text-gray-800 hover:bg-gray-50'
              }`}
            >
              App
            </button>
            <button
              onClick={() => setCurrentView('files')}
              className={`px-4 py-2 text-sm font-medium rounded-md transition-colors ${
                currentView === 'files'
                  ? 'text-blue-600 bg-blue-50'
                  : 'text-gray-600 hover:text-gray-800 hover:bg-gray-50'
              }`}
            >
              Files
            </button>
            <button
              onClick={() => setCurrentView('settings')}
              className={`px-4 py-2 text-sm font-medium rounded-md transition-colors ${
                currentView === 'settings'
                  ? 'text-blue-600 bg-blue-50'
                  : 'text-gray-600 hover:text-gray-800 hover:bg-gray-50'
              }`}
            >
              Settings
            </button>
          </div>
        </div>

        <button
          onClick={() => setShowSidebar(!showSidebar)}
          className="p-2 text-gray-600 hover:text-gray-800 hover:bg-gray-100 rounded-md"
        >
          {showSidebar ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
        </button>
      </div>
    </nav>
  );

  const renderSidebar = () => (
    <div className={`${showSidebar ? 'w-64' : 'w-0'} transition-all duration-300 bg-gray-50 border-r border-gray-200 overflow-hidden`}>
      <div className="p-4 space-y-4">
        <div>
          <h3 className="text-xs font-semibold text-gray-500 uppercase mb-3">Domains</h3>
          <div className="space-y-1">
            {Object.entries(DOMAIN_CONFIGS).map(([key, config]) => (
              <button
                key={key}
                onClick={() => setSelectedDomain(key)}
                className={`w-full flex items-center space-x-3 px-3 py-2 rounded-lg text-sm transition-colors ${
                  selectedDomain === key
                    ? `${config.bgColor} ${config.textColor} font-medium`
                    : 'text-gray-700 hover:bg-gray-100'
                }`}
              >
                <span className="text-lg">{config.icon}</span>
                <span className="flex-1 text-left truncate font-sans">{config.name}</span>
              </button>
            ))}
          </div>
        </div>

        {processingDocs.length > 0 && (
          <div>
            <h3 className="text-xs font-semibold text-gray-500 uppercase mb-3">Processing</h3>
            <div className="space-y-2">
              {processingDocs.map((doc, idx) => (
                <div key={idx} className="flex items-center space-x-2 px-3 py-2 bg-yellow-50 rounded-lg">
                  <Loader2 className="w-4 h-4 text-yellow-600 animate-spin" />
                  <span className="text-xs text-yellow-800 truncate flex-1">{doc.name}</span>
                </div>
              ))}
            </div>
          </div>
        )}

        {processedDocs.length > 0 && (
          <div>
            <h3 className="text-xs font-semibold text-gray-500 uppercase mb-3">
              Processed Documents ({processedDocs.length})
            </h3>
            <div className="space-y-1 max-h-64 overflow-y-auto">
              {processedDocs.map((doc, idx) => (
                <div key={idx} className="flex items-center space-x-2 px-3 py-2 bg-white rounded-lg border border-gray-200 group">
                  <FileText className="w-4 h-4 text-gray-400" />
                  <span className="text-xs text-gray-700 truncate flex-1">{doc.name || `Document ${idx + 1}`}</span>
                  <button
                    onClick={() => handleDeleteDocument(doc.id, doc.name)}
                    className="opacity-0 group-hover:opacity-100 transition-opacity"
                  >
                    <Trash2 className="w-3 h-3 text-gray-400 hover:text-red-600" />
                  </button>
                </div>
              ))}
            </div>
          </div>
        )}

        {messages.length > 0 && (
          <div className="pt-4 border-t border-gray-200">
            <button
              onClick={() => {
                if (window.confirm('Clear all chat history? This cannot be undone.')) {
                  setMessages([]);
                  window.localStorage.removeItem('chatMessages');
                }
              }}
              className="w-full flex items-center justify-center space-x-2 px-3 py-2 text-sm text-red-600 hover:bg-red-50 rounded-lg transition-colors"
            >
              <Trash2 className="w-4 h-4" />
              <span>Clear Chat History</span>
            </button>
          </div>
        )}
      </div>
    </div>
  );

  const renderAppView = () => (
    <div className="flex-1 flex flex-col bg-white">
      {messages.length === 0 ? (
        <div className="flex-1 flex flex-col items-center justify-center px-4">
          <div className="text-center max-w-2xl">
            {/* <div className="w-16 h-16 bg-gradient-to-br from-blue-500 to-purple-600 rounded-2xl flex items-center justify-center mx-auto mb-6">
              <span className="text-white font-bold text-2xl">O</span>
            </div>
            <h2 className="text-3xl font-bold text-gray-800 mb-3">Welcome to OrgAI</h2> */}
                                                          <div className="flex items-center justify-center space-x-2 mb-6">
                                                <img src="/org-gpt.png" alt="OrgAI Logo" className="w-20 h-20 rounded-full" />
                                                <p className="text-3xl font-bold text-gray-800 font-sans">OrgAI</p>
                                                {/* <img src="/logo.jpg" alt="GlokalAI Logo" className="h-10 w-auto" /> */}
                                              </div> 
            <h3 className="text-3xl font-bold text-gray-800 mb-3 font-sans">Welcome to OrgAI</h3>
            <p className="text-gray-600 mb-8">
              Upload documents and start chatting to get intelligent responses powered by Advanced Multimodal RAG technology.
            </p>

            <div className="grid grid-cols-3 gap-4 text-left">
              <div className="p-4 bg-gray-50 rounded-lg">
                <div className="text-2xl mb-2">📄</div>
                <h3 className="font-semibold text-gray-800 mb-1">Upload Documents</h3>
                <p className="text-xs text-gray-600">Support for PDF, Word, Excel, CSV and more</p>
              </div>
              <div className="p-4 bg-gray-50 rounded-lg">
                <div className="text-2xl mb-2">🔍</div>
                <h3 className="font-semibold text-gray-800 mb-1">Ask Questions</h3>
                <p className="text-xs text-gray-600">Get accurate answers from your documents</p>
              </div>
              <div className="p-4 bg-gray-50 rounded-lg">
                <div className="text-2xl mb-2">⚡</div>
                <h3 className="font-semibold text-gray-800 mb-1">Multi-Domain</h3>
                <p className="text-xs text-gray-600">Optimized for medical, legal, financial and more</p>
              </div>
            </div>
          </div>
        </div>
      ) : (
        <div className="flex-1 overflow-y-auto px-4 py-6">
          <div className="max-w-4xl mx-auto space-y-6">
            {messages.map((msg, idx) => (
              <div key={idx} className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'}`}>
                <div className={`max-w-2xl ${msg.role === 'user' ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-800'} rounded-2xl px-4 py-3`}>
                  <div className="flex items-start space-x-2">
                    <div className="flex-1">
                      {msg.role === 'user' ? (
                        // User messages: simple text
                        <p className="text-sm whitespace-pre-wrap">
                          {msg.content}
                        </p>
                      ) : (
                        // Assistant messages: rendered markdown
                        <div className="text-sm prose prose-sm max-w-none prose-headings:mt-3 prose-headings:mb-2 prose-p:my-2 prose-ul:my-2 prose-ol:my-2 prose-li:my-0.5 prose-pre:my-2 prose-pre:bg-gray-800 prose-pre:text-gray-100">
                          <ReactMarkdown
                            remarkPlugins={[remarkGfm]}
                            rehypePlugins={[rehypeHighlight]}
                            components={{
                              // Custom styling for code blocks
                              code({ node, inline, className, children, ...props }) {
                                return inline ? (
                                  <code className="bg-gray-200 text-gray-800 px-1.5 py-0.5 rounded text-xs font-mono" {...props}>
                                    {children}
                                  </code>
                                ) : (
                                  <code className={className} {...props}>
                                    {children}
                                  </code>
                                );
                              },
                              // Custom styling for links
                              a({ node, children, ...props }) {
                                return (
                                  <a className="text-blue-600 hover:text-blue-800 underline" target="_blank" rel="noopener noreferrer" {...props}>
                                    {children}
                                  </a>
                                );
                              },
                              // Custom styling for headings
                              h1: ({ node, ...props }) => <h1 className="text-xl font-bold text-gray-900 mt-4 mb-2" {...props} />,
                              h2: ({ node, ...props }) => <h2 className="text-lg font-bold text-gray-900 mt-3 mb-2" {...props} />,
                              h3: ({ node, ...props }) => <h3 className="text-base font-semibold text-gray-900 mt-2 mb-1" {...props} />,
                              // Custom styling for lists
                              ul: ({ node, ...props }) => <ul className="list-disc list-inside space-y-1 my-2" {...props} />,
                              ol: ({ node, ...props }) => <ol className="list-decimal list-inside space-y-1 my-2" {...props} />,
                              // Custom styling for blockquotes
                              blockquote: ({ node, ...props }) => (
                                <blockquote className="border-l-4 border-gray-300 pl-4 italic text-gray-700 my-2" {...props} />
                              ),
                              // Custom styling for tables
                              table: ({ node, ...props }) => (
                                <div className="overflow-x-auto my-2">
                                  <table className="min-w-full divide-y divide-gray-200 border border-gray-200" {...props} />
                                </div>
                              ),
                              th: ({ node, ...props }) => (
                                <th className="px-3 py-2 bg-gray-50 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider border-b" {...props} />
                              ),
                              td: ({ node, ...props }) => (
                                <td className="px-3 py-2 text-sm text-gray-900 border-b" {...props} />
                              ),
                            }}
                          >
                            {msg.content}
                          </ReactMarkdown>
                          {/* {msg.streaming && (
                            <span className="inline-block w-0.5 h-4 bg-blue-600 ml-1 animate-pulse"></span>
                          )} */}
                        </div>
                      )}
                    </div>
                      {msg.streaming && msg.role === 'assistant' && (
                      <div className="flex items-center space-x-0 text-gray-400 text-sm">
                        <span>Thinking</span>
                        <span className="animate-blink" style={{ animationDelay: '0s' }}>.</span>
                        <span className="animate-blink" style={{ animationDelay: '0.2s' }}>.</span>
                        <span className="animate-blink" style={{ animationDelay: '0.4s' }}>.</span>
                      </div>
                    )}
                  </div>

                  {/* Verification Badge
                  {msg.verification && !msg.streaming && (
                    <div className={`mt-3 pt-3 border-t ${msg.role === 'user' ? 'border-blue-500' : 'border-gray-300'}`}>
                      <div className="flex items-center space-x-2 mb-2">
                        {msg.verification.passed ? (
                          <CheckCircle className="w-4 h-4 text-green-600" />
                        ) : (
                          <XCircle className="w-4 h-4 text-red-600" />
                        )}
                        <span className={`text-xs font-medium ${
                          msg.verification.passed ? 'text-green-700' : 'text-red-700'
                        }`}>
                          Verification Score: {msg.verification.score?.toFixed(1)}/10
                        </span>
                        <span className="text-xs text-gray-500">
                          ({Math.round((msg.verification.confidence || 0) * 100)}% confident)
                        </span>
                      </div>
                      {msg.verification.issues && msg.verification.issues.length > 0 && (
                        <div className="mt-2">
                          <p className="text-xs text-gray-600 font-medium mb-1">Issues found:</p>
                          <ul className="text-xs text-gray-600 space-y-0.5 list-disc list-inside">
                            {msg.verification.issues.slice(0, 3).map((issue, i) => (
                              <li key={i}>{issue}</li>
                            ))}
                          </ul>
                        </div>
                      )}
                    </div>
                  )} */}

                  {msg.sources && msg.sources.length > 0 && (
                    <div className={`mt-3 pt-3 border-t ${msg.role === 'user' ? 'border-blue-500' : 'border-gray-300'}`}>
                      <p className="text-xs text-gray-600 mb-2">Sources:</p>
                      {msg.sources.slice(0, 3).map((source, i) => (
                        <div key={i} className="text-xs text-gray-600 mb-1">
                          • {source.file_name} (score: {source.score?.toFixed(2)})
                        </div>
                      ))}
                    </div>
                  )}
                </div>
              </div>
            ))}
            <div ref={messagesEndRef} />
          </div>
        </div>
      )}

      {/* Bottom Input Bar */}
      <div className="border-t border-gray-200 bg-white px-4 py-4">
        <div className="max-w-4xl mx-auto">
          <div className="flex items-center space-x-3">
            <button
              onClick={() => setShowUploadModal(true)}
              className="flex items-center space-x-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
            >
              <Upload className="w-4 h-4" />
              <span className="text-sm font-medium">Upload</span>
            </button>

            <input
              type="text"
              value={query}
              onChange={(e) => setQuery(e.target.value)}
              onKeyDown={handleKeyPress}
              placeholder="Ask me anything or upload documents for context..."
              className="flex-1 px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              disabled={isQuerying}
            />

            <button
              onClick={handleQuery}
              disabled={isQuerying || !query.trim()}
              className="p-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
            >
              <Send className="w-5 h-5" />
            </button>
          </div>

          {/* Web Search Options */}
          <div className="flex items-center justify-center space-x-6 mt-3">
            <label className="flex items-center space-x-2 cursor-pointer">
              <input
                type="checkbox"
                checked={enableWebSearch}
                onChange={(e) => {
                  setEnableWebSearch(e.target.checked);
                  if (e.target.checked && webSearchOnly) {
                    setWebSearchOnly(false);
                  }
                }}
                className="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
              />
              <span className="text-sm text-gray-700">Enhance with Web Search</span>
            </label>
            <label className="flex items-center space-x-2 cursor-pointer">
              <input
                type="checkbox"
                checked={webSearchOnly}
                onChange={(e) => {
                  setWebSearchOnly(e.target.checked);
                  if (e.target.checked) {
                    setEnableWebSearch(false);
                  }
                }}
                className="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
              />
              <span className="text-sm text-gray-700">Web Search Only</span>
            </label>
          </div>

          <p className="text-xs text-gray-500 mt-2 text-center">
            Press Enter to send, Shift+Enter for new line
          </p>
        </div>
      </div>
    </div>
  );

  const renderFilesView = () => (
    <div className="flex-1 overflow-y-auto p-6">
      <div className="max-w-5xl mx-auto">
        <div className="flex items-center justify-between mb-6">
          <div>
            <h2 className="text-2xl font-bold text-gray-800">Document Management</h2>
            <p className="text-gray-600">Manage your uploaded and processed documents</p>
          </div>
          <div className="flex space-x-3">
            <button
              onClick={fetchProcessedDocuments}
              className="flex items-center space-x-2 px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors"
            >
              <RefreshCw className="w-4 h-4" />
              <span>Refresh</span>
            </button>
            <button
              onClick={() => setShowUploadModal(true)}
              className="flex items-center space-x-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
            >
              <Upload className="w-4 h-4" />
              <span>Upload Documents</span>
            </button>
          </div>
        </div>

        {processingDocs.length > 0 && (
          <div className="mb-6">
            <h3 className="text-lg font-semibold text-gray-800 mb-3">Processing Documents</h3>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              {processingDocs.map((doc, idx) => (
                <div key={idx} className="flex items-center space-x-4 p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
                  <Loader2 className="w-8 h-8 text-yellow-600 animate-spin" />
                  <div className="flex-1">
                    <p className="font-medium text-gray-800">{doc.name}</p>
                    <p className="text-sm text-gray-600">Processing...</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}

        <div>
          <h3 className="text-lg font-semibold text-gray-800 mb-3">
            Processed Documents ({processedDocs.length})
          </h3>
          {processedDocs.length === 0 ? (
            <div className="text-center py-12 bg-gray-50 rounded-lg">
              <FolderOpen className="w-16 h-16 text-gray-400 mx-auto mb-4" />
              <p className="text-gray-600">No documents processed yet</p>
              <button
                onClick={() => setShowUploadModal(true)}
                className="mt-4 px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
              >
                Upload Your First Document
              </button>
            </div>
          ) : (
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
              {processedDocs.map((doc, idx) => (
                <div key={idx} className="p-4 bg-white border border-gray-200 rounded-lg hover:shadow-md transition-shadow group">
                  <div className="flex items-start justify-between mb-3">
                    <FileText className="w-8 h-8 text-blue-600" />
                    <button
                      onClick={() => handleDeleteDocument(doc.id, doc.name)}
                      className="opacity-0 group-hover:opacity-100 transition-opacity p-1 hover:bg-gray-100 rounded"
                    >
                      <Trash2 className="w-4 h-4 text-gray-400 hover:text-red-600" />
                    </button>
                  </div>
                  <p className="font-medium text-gray-800 mb-1 truncate" title={doc.name}>{doc.name || `Document ${idx + 1}`}</p>
                  <p className="text-sm text-gray-600 mb-2">{DOMAIN_CONFIGS[doc.domain]?.name || selectedDomain}</p>
                  <div className="flex items-center space-x-2">
                    <CheckCircle className="w-4 h-4 text-green-600" />
                    <span className="text-xs text-gray-600">Processed</span>
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>
    </div>
  );

  const renderSettingsView = () => (
    <div className="flex-1 overflow-y-auto p-6">
      <div className="max-w-3xl mx-auto">
        <h2 className="text-2xl font-bold text-gray-800 mb-6">Settings</h2>

        <div className="space-y-6">
          <div className="bg-white border border-gray-200 rounded-lg p-6">
            <h3 className="text-lg font-semibold text-gray-800 mb-4">Domain Configuration</h3>
            <div className="space-y-3">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">Current Domain</label>
                <select
                  value={selectedDomain}
                  onChange={(e) => setSelectedDomain(e.target.value)}
                  className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                >
                  {Object.entries(DOMAIN_CONFIGS).map(([key, config]) => (
                    <option key={key} value={key}>{config.name}</option>
                  ))}
                </select>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">Supported File Types</label>
                <div className="flex flex-wrap gap-2">
                  {DOMAIN_CONFIGS[selectedDomain].fileTypes.map(type => (
                    <span key={type} className="px-3 py-1 bg-gray-100 text-gray-700 text-xs rounded-full">
                      {type}
                    </span>
                  ))}
                </div>
              </div>
            </div>
          </div>

          <div className="bg-white border border-gray-200 rounded-lg p-6">
            <h3 className="text-lg font-semibold text-gray-800 mb-4">Performance Settings</h3>
            <div className="space-y-4">
              <div className="flex items-start space-x-3">
                <input
                  type="checkbox"
                  id="fastMode"
                  checked={fastMode}
                  onChange={(e) => setFastMode(e.target.checked)}
                  className="w-5 h-5 text-blue-600 border-gray-300 rounded focus:ring-blue-500 mt-0.5"
                />
                <div className="flex-1">
                  <label htmlFor="fastMode" className="block text-sm font-medium text-gray-700 cursor-pointer">
                    Fast Mode
                  </label>
                  <p className="text-xs text-gray-600 mt-1">
                    Use optimized parameters for 2-3x faster queries. Slightly reduced quality but much better performance.
                  </p>
                </div>
              </div>

              <div className="flex items-start space-x-3">
                <input
                  type="checkbox"
                  id="enableCache"
                  checked={enableCache}
                  onChange={(e) => setEnableCache(e.target.checked)}
                  className="w-5 h-5 text-blue-600 border-gray-300 rounded focus:ring-blue-500 mt-0.5"
                />
                <div className="flex-1">
                  <label htmlFor="enableCache" className="block text-sm font-medium text-gray-700 cursor-pointer">
                    Enable Query Caching
                  </label>
                  <p className="text-xs text-gray-600 mt-1">
                    Cache query results for 5 minutes. Repeated queries return instantly (100x faster).
                  </p>
                </div>
              </div>

              <div className="flex items-start space-x-3">
                <input
                  type="checkbox"
                  id="enableWebSearch"
                  checked={enableWebSearch}
                  onChange={(e) => {
                    setEnableWebSearch(e.target.checked);
                    if (e.target.checked && webSearchOnly) {
                      setWebSearchOnly(false);
                    }
                  }}
                  className="w-5 h-5 text-blue-600 border-gray-300 rounded focus:ring-blue-500 mt-0.5"
                />
                <div className="flex-1">
                  <label htmlFor="enableWebSearch" className="block text-sm font-medium text-gray-700 cursor-pointer">
                    Enhance with Web Search
                  </label>
                  <p className="text-xs text-gray-600 mt-1">
                    Augment document answers with current web search results.
                  </p>
                </div>
              </div>

              <div className="flex items-start space-x-3">
                <input
                  type="checkbox"
                  id="webSearchOnly"
                  checked={webSearchOnly}
                  onChange={(e) => {
                    setWebSearchOnly(e.target.checked);
                    if (e.target.checked) {
                      setEnableWebSearch(false);
                    }
                  }}
                  className="w-5 h-5 text-blue-600 border-gray-300 rounded focus:ring-blue-500 mt-0.5"
                />
                <div className="flex-1">
                  <label htmlFor="webSearchOnly" className="block text-sm font-medium text-gray-700 cursor-pointer">
                    Web Search Only
                  </label>
                  <p className="text-xs text-gray-600 mt-1">
                    Skip document retrieval and use only web search (useful when no documents uploaded).
                  </p>
                </div>
              </div>

              <div className="flex items-start space-x-3">
                <input
                  type="checkbox"
                  id="enableQueryImprovement"
                  checked={enableQueryImprovement}
                  onChange={(e) => setEnableQueryImprovement(e.target.checked)}
                  className="w-5 h-5 text-blue-600 border-gray-300 rounded focus:ring-blue-500 mt-0.5"
                />
                <div className="flex-1">
                  <label htmlFor="enableQueryImprovement" className="block text-sm font-medium text-gray-700 cursor-pointer">
                    Enable Query Improvement
                  </label>
                  <p className="text-xs text-gray-600 mt-1">
                    Automatically improve and expand user queries for better results. Disable for faster responses.
                  </p>
                </div>
              </div>

              <div className="flex items-start space-x-3">
                <input
                  type="checkbox"
                  id="enableVerification"
                  checked={enableVerification}
                  onChange={(e) => setEnableVerification(e.target.checked)}
                  className="w-5 h-5 text-blue-600 border-gray-300 rounded focus:ring-blue-500 mt-0.5"
                />
                <div className="flex-1">
                  <label htmlFor="enableVerification" className="block text-sm font-medium text-gray-700 cursor-pointer">
                    Enable Answer Verification
                  </label>
                  <p className="text-xs text-gray-600 mt-1">
                    Use dual-LLM verification to check answer quality and accuracy. Disable for faster responses.
                  </p>
                </div>
              </div>

    
            </div>
          </div>

          <div className="bg-white border border-gray-200 rounded-lg p-6">
            <h3 className="text-lg font-semibold text-gray-800 mb-4">Actions</h3>
            <div className="space-y-3">
              <button
                onClick={clearConversation}
                className="w-full flex items-center justify-center space-x-2 px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors"
              >
                <Trash2 className="w-4 h-4" />
                <span>Clear Conversation</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );

  // Upload Modal
  const renderUploadModal = () => {
    if (!showUploadModal) return null;

    return (
      <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
        <div className="bg-white rounded-xl max-w-2xl w-full p-6">
          <div className="flex items-center justify-between mb-6">
            <h2 className="text-2xl font-bold text-gray-800">Upload Documents</h2>
            <button
              onClick={() => {
                setShowUploadModal(false);
                setUploadMode('file');
                setUrlInput('');
              }}
              className="p-2 hover:bg-gray-100 rounded-lg"
            >
              <X className="w-5 h-5 text-gray-600" />
            </button>
          </div>

          {/* Mode Toggle */}
          <div className="flex items-center space-x-2 mb-6">
            <button
              onClick={() => setUploadMode('file')}
              className={`flex-1 px-4 py-2 rounded-lg font-medium transition-colors ${
                uploadMode === 'file'
                  ? 'bg-blue-600 text-white'
                  : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
              }`}
            >
              Upload File
            </button>
            <button
              onClick={() => setUploadMode('url')}
              className={`flex-1 px-4 py-2 rounded-lg font-medium transition-colors ${
                uploadMode === 'url'
                  ? 'bg-blue-600 text-white'
                  : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
              }`}
            >
              Upload from URL
            </button>
          </div>

          {uploadMode === 'file' ? (
            <div
              onDragOver={handleDragOver}
              onDragLeave={handleDragLeave}
              onDrop={handleDrop}
              className={`border-2 border-dashed rounded-xl p-12 text-center transition-colors ${
                isDragging
                  ? 'border-blue-500 bg-blue-50'
                  : 'border-gray-300 hover:border-gray-400'
              }`}
            >
              <Upload className="w-16 h-16 text-gray-400 mx-auto mb-4" />
              <h3 className="text-lg font-semibold text-gray-800 mb-2">
                Drop files here or click to browse
              </h3>
              <p className="text-gray-600 mb-4">
                Supported: {DOMAIN_CONFIGS[selectedDomain].fileTypes.join(', ')}
              </p>
              <input
                ref={fileInputRef}
                type="file"
                multiple
                accept={DOMAIN_CONFIGS[selectedDomain].fileTypes.join(',')}
                onChange={(e) => handleFileUpload(e.target.files)}
                className="hidden"
              />
              <button
                onClick={() => fileInputRef.current?.click()}
                className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
              >
                Select Files
              </button>
            </div>
          ) : (
            <div className="space-y-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  Enter URL to fetch and process
                </label>
                <input
                  type="url"
                  value={urlInput}
                  onChange={(e) => setUrlInput(e.target.value)}
                  placeholder="https://example.com/document.pdf"
                  className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                  onKeyDown={(e) => {
                    if (e.key === 'Enter') {
                      handleUrlUpload();
                    }
                  }}
                />
              </div>
              <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
                <p className="text-sm text-blue-800">
                  <strong>Supported:</strong> PDF, HTML pages (converted to markdown), and other web documents
                </p>
              </div>
              <button
                onClick={handleUrlUpload}
                disabled={!urlInput.trim()}
                className="w-full px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
              >
                Fetch and Process URL
              </button>
            </div>
          )}
        </div>
      </div>
    );
  };

  // Error Display
  const renderError = () => {
    if (!error) return null;

    return (
      <div className="fixed bottom-4 right-4 bg-red-50 border border-red-200 rounded-lg p-4 max-w-md shadow-lg">
        <div className="flex items-start space-x-3">
          <XCircle className="w-5 h-5 text-red-600 flex-shrink-0 mt-0.5" />
          <div className="flex-1">
            <p className="text-sm text-red-800">{error}</p>
          </div>
          <button
            onClick={() => setError(null)}
            className="text-red-600 hover:text-red-800"
          >
            <X className="w-4 h-4" />
          </button>
        </div>
      </div>
    );
  };

  // =============================================================================
  // Main Render
  // =============================================================================

  return (
    <div className="h-screen flex flex-col bg-gray-50">
      {renderNavigation()}

      <div className="flex-1 flex overflow-hidden">
        {renderSidebar()}

        {currentView === 'app' && renderAppView()}
        {currentView === 'files' && renderFilesView()}
        {currentView === 'settings' && renderSettingsView()}
      </div>

      {renderUploadModal()}
      {renderError()}
    </div>
  );
}