/**
 * File Viewer Component
 * 
 * A simple file content viewer that displays file contents in a modal window.
 * This component handles file loading via HTTP requests and displays the content
 * with basic syntax highlighting support.
 */

class FileViewer {
    constructor() {
        this.modal = null;
        this.currentFile = null;
        this.initialized = false;
        this.contentCache = new Map();
    }

    /**
     * Initialize the file viewer
     */
    initialize() {
        if (this.initialized) {
            return;
        }

        this.createModal();
        this.setupEventHandlers();
        
        this.initialized = true;
        console.log('File viewer initialized');
    }

    /**
     * Create modal DOM structure
     */
    createModal() {
        const modalHtml = `
            <div class="file-viewer-modal" id="file-viewer-modal">
                <div class="file-viewer-content">
                    <div class="file-viewer-header">
                        <h2>📄 File Viewer</h2>
                        <button class="file-viewer-close" id="file-viewer-close">×</button>
                    </div>
                    <div class="file-viewer-path" id="file-viewer-path">
                        Loading...
                    </div>
                    <div class="file-viewer-body">
                        <pre class="file-viewer-code" id="file-viewer-code">
                            <code id="file-viewer-code-content">Loading file content...</code>
                        </pre>
                    </div>
                    <div class="file-viewer-footer">
                        <div class="file-viewer-info">
                            <span id="file-viewer-type">Type: --</span>
                            <span id="file-viewer-lines">Lines: --</span>
                            <span id="file-viewer-size">Size: --</span>
                        </div>
                        <button class="file-viewer-copy" id="file-viewer-copy">📋 Copy</button>
                    </div>
                </div>
            </div>
        `;

        // Add modal to body
        document.body.insertAdjacentHTML('beforeend', modalHtml);
        this.modal = document.getElementById('file-viewer-modal');

        // Add styles if not already present
        if (!document.getElementById('file-viewer-styles')) {
            const styles = `
                <style id="file-viewer-styles">
                    .file-viewer-modal {
                        display: none;
                        position: fixed;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        background: rgba(0, 0, 0, 0.7);
                        z-index: 10000;
                        animation: fadeIn 0.2s;
                    }

                    .file-viewer-modal.show {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }

                    .file-viewer-content {
                        background: #1e1e1e;
                        border-radius: 8px;
                        width: 90%;
                        max-width: 1200px;
                        height: 80%;
                        display: flex;
                        flex-direction: column;
                        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
                    }

                    .file-viewer-header {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        padding: 15px 20px;
                        background: #2d2d30;
                        border-radius: 8px 8px 0 0;
                        border-bottom: 1px solid #3e3e42;
                    }

                    .file-viewer-header h2 {
                        margin: 0;
                        color: #cccccc;
                        font-size: 18px;
                    }

                    .file-viewer-close {
                        background: none;
                        border: none;
                        color: #999;
                        font-size: 24px;
                        cursor: pointer;
                        padding: 0;
                        width: 30px;
                        height: 30px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }

                    .file-viewer-close:hover {
                        color: #fff;
                    }

                    .file-viewer-path {
                        padding: 10px 20px;
                        background: #252526;
                        color: #8b8b8b;
                        font-family: 'Consolas', 'Monaco', monospace;
                        font-size: 12px;
                        border-bottom: 1px solid #3e3e42;
                        word-break: break-all;
                    }

                    .file-viewer-body {
                        flex: 1;
                        overflow: auto;
                        padding: 20px;
                        background: #1e1e1e;
                    }

                    .file-viewer-code {
                        margin: 0;
                        padding: 0;
                        background: transparent;
                        overflow: visible;
                    }

                    .file-viewer-code code {
                        font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
                        font-size: 13px;
                        line-height: 1.5;
                        color: #d4d4d4;
                        white-space: pre;
                        display: block;
                    }

                    .file-viewer-footer {
                        padding: 15px 20px;
                        background: #2d2d30;
                        border-top: 1px solid #3e3e42;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        border-radius: 0 0 8px 8px;
                    }

                    .file-viewer-info {
                        display: flex;
                        gap: 20px;
                        color: #8b8b8b;
                        font-size: 12px;
                    }

                    .file-viewer-copy {
                        background: #0e639c;
                        color: white;
                        border: none;
                        padding: 6px 12px;
                        border-radius: 4px;
                        cursor: pointer;
                        font-size: 12px;
                    }

                    .file-viewer-copy:hover {
                        background: #1177bb;
                    }

                    .file-viewer-copy.copied {
                        background: #4ec9b0;
                    }

                    .file-viewer-error {
                        color: #f48771;
                        padding: 20px;
                        text-align: center;
                    }

                    @keyframes fadeIn {
                        from { opacity: 0; }
                        to { opacity: 1; }
                    }
                </style>
            `;
            document.head.insertAdjacentHTML('beforeend', styles);
        }
    }

    /**
     * Setup event handlers
     */
    setupEventHandlers() {
        // Close button
        document.getElementById('file-viewer-close').addEventListener('click', () => {
            this.hide();
        });

        // Close on backdrop click
        this.modal.addEventListener('click', (e) => {
            if (e.target === this.modal) {
                this.hide();
            }
        });

        // Close on ESC key
        document.addEventListener('keydown', (e) => {
            if (e.key === 'Escape' && this.modal.classList.contains('show')) {
                this.hide();
            }
        });

        // Copy button
        document.getElementById('file-viewer-copy').addEventListener('click', () => {
            this.copyContent();
        });
    }

    /**
     * Show the file viewer with file content
     */
    async show(filePath) {
        if (!this.initialized) {
            this.initialize();
        }

        this.currentFile = filePath;
        this.modal.classList.add('show');
        
        // Update path
        document.getElementById('file-viewer-path').textContent = filePath;
        
        // Load file content
        await this.loadFileContent(filePath);
    }

    /**
     * Hide the file viewer
     */
    hide() {
        this.modal.classList.remove('show');
        this.currentFile = null;
    }

    /**
     * Load file content
     */
    async loadFileContent(filePath) {
        const codeContent = document.getElementById('file-viewer-code-content');
        
        // Check cache first
        if (this.contentCache.has(filePath)) {
            this.displayContent(this.contentCache.get(filePath));
            return;
        }
        
        // Show loading state
        codeContent.textContent = 'Loading file content...';
        
        try {
            // Try to fetch file content via API
            const response = await fetch('/api/file', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ path: filePath })
            });

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

            const data = await response.json();
            
            if (data.success && data.content !== undefined) {
                // Cache the content
                this.contentCache.set(filePath, data.content);
                
                // Display the content
                this.displayContent(data.content);
                
                // Update file info
                this.updateFileInfo(data);
            } else {
                throw new Error(data.error || 'Failed to load file content');
            }
        } catch (error) {
            console.error('Error loading file:', error);
            
            // If API fails, show error message with helpful information
            this.displayError(filePath, error.message);
        }
    }

    /**
     * Display file content
     */
    displayContent(content) {
        const codeContent = document.getElementById('file-viewer-code-content');
        
        // Set the content
        codeContent.textContent = content || '(Empty file)';
        
        // Update line count
        const lines = content ? content.split('\n').length : 0;
        document.getElementById('file-viewer-lines').textContent = `Lines: ${lines}`;
        
        // Update file size
        const size = content ? new Blob([content]).size : 0;
        document.getElementById('file-viewer-size').textContent = `Size: ${this.formatFileSize(size)}`;
        
        // Detect and set file type
        const fileType = this.detectFileType(this.currentFile);
        document.getElementById('file-viewer-type').textContent = `Type: ${fileType}`;
        
        // Apply syntax highlighting if Prism is available
        if (window.Prism) {
            const language = this.detectLanguage(this.currentFile);
            codeContent.className = `language-${language}`;
            Prism.highlightElement(codeContent);
        }
    }

    /**
     * Display error message
     */
    displayError(filePath, errorMessage) {
        const codeContent = document.getElementById('file-viewer-code-content');
        
        // For now, show a helpful message since the API endpoint doesn't exist yet
        const errorHtml = `
            <div class="file-viewer-error">
                ⚠️ File content loading is not yet implemented
                
                File path: ${filePath}
                
                The file viewing functionality requires:
                1. A server-side /api/file endpoint
                2. Proper file reading permissions
                3. Security validation for file access
                
                Error: ${errorMessage}
                
                This feature will be available once the backend API is implemented.
            </div>
        `;
        
        codeContent.innerHTML = errorHtml;
        
        // Update info
        document.getElementById('file-viewer-lines').textContent = 'Lines: --';
        document.getElementById('file-viewer-size').textContent = 'Size: --';
        document.getElementById('file-viewer-type').textContent = 'Type: --';
    }

    /**
     * Update file info
     */
    updateFileInfo(data) {
        if (data.lines !== undefined) {
            document.getElementById('file-viewer-lines').textContent = `Lines: ${data.lines}`;
        }
        
        if (data.size !== undefined) {
            document.getElementById('file-viewer-size').textContent = `Size: ${this.formatFileSize(data.size)}`;
        }
        
        if (data.type) {
            document.getElementById('file-viewer-type').textContent = `Type: ${data.type}`;
        }
    }

    /**
     * Format file size for display
     */
    formatFileSize(bytes) {
        if (bytes === 0) return '0 Bytes';
        
        const k = 1024;
        const sizes = ['Bytes', 'KB', 'MB', 'GB'];
        const i = Math.floor(Math.log(bytes) / Math.log(k));
        
        return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
    }

    /**
     * Detect file type from path
     */
    detectFileType(path) {
        if (!path) return 'Unknown';
        
        const ext = path.split('.').pop()?.toLowerCase();
        const typeMap = {
            'py': 'Python',
            'js': 'JavaScript',
            'ts': 'TypeScript',
            'jsx': 'React JSX',
            'tsx': 'React TSX',
            'html': 'HTML',
            'css': 'CSS',
            'json': 'JSON',
            'xml': 'XML',
            'yaml': 'YAML',
            'yml': 'YAML',
            'md': 'Markdown',
            'txt': 'Text',
            'sh': 'Shell Script',
            'bash': 'Bash Script',
            'sql': 'SQL',
            'go': 'Go',
            'rs': 'Rust',
            'java': 'Java',
            'cpp': 'C++',
            'c': 'C',
            'cs': 'C#',
            'rb': 'Ruby',
            'php': 'PHP'
        };
        
        return typeMap[ext] || 'Text';
    }

    /**
     * Detect language for syntax highlighting
     */
    detectLanguage(path) {
        if (!path) return 'plaintext';
        
        const ext = path.split('.').pop()?.toLowerCase();
        const languageMap = {
            'py': 'python',
            'js': 'javascript',
            'ts': 'typescript',
            'jsx': 'jsx',
            'tsx': 'tsx',
            'html': 'html',
            'css': 'css',
            'json': 'json',
            'xml': 'xml',
            'yaml': 'yaml',
            'yml': 'yaml',
            'md': 'markdown',
            'sh': 'bash',
            'bash': 'bash',
            'sql': 'sql',
            'go': 'go',
            'rs': 'rust',
            'java': 'java',
            'cpp': 'cpp',
            'c': 'c',
            'cs': 'csharp',
            'rb': 'ruby',
            'php': 'php'
        };
        
        return languageMap[ext] || 'plaintext';
    }

    /**
     * Copy file content to clipboard
     */
    async copyContent() {
        const codeContent = document.getElementById('file-viewer-code-content');
        const button = document.getElementById('file-viewer-copy');
        const content = codeContent.textContent;
        
        try {
            await navigator.clipboard.writeText(content);
            
            // Show feedback
            const originalText = button.textContent;
            button.textContent = '✅ Copied!';
            button.classList.add('copied');
            
            setTimeout(() => {
                button.textContent = originalText;
                button.classList.remove('copied');
            }, 2000);
        } catch (err) {
            console.error('Failed to copy:', err);
            alert('Failed to copy content to clipboard');
        }
    }
}

// Create singleton instance
const fileViewer = new FileViewer();

// Create global function for easy access
window.showFileViewerModal = (filePath) => {
    fileViewer.show(filePath);
};

// Export for use in other modules
if (typeof window !== 'undefined') {
    window.FileViewer = fileViewer;
    
    // Initialize when DOM is ready
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', () => {
            fileViewer.initialize();
        });
    } else {
        // DOM is already loaded
        fileViewer.initialize();
    }
}

export default fileViewer;