import { useEffect, useState, useCallback, useMemo, useRef } from 'react';
import { Icon } from "@iconify/react";
import hljs from 'highlight.js';
import 'highlight.js/styles/github-dark.css';
import { Authentication } from '../../../scripts/pocketbase/Authentication';

// Image component with fallback handling
interface ImageWithFallbackProps {
    url: string;
    filename: string;
    onError: (message: string) => void;
}

const ImageWithFallback = ({ url, filename, onError }: ImageWithFallbackProps) => {
    const [imgSrc, setImgSrc] = useState<string>(url);
    const [isObjectUrl, setIsObjectUrl] = useState<boolean>(false);
    const [errorCount, setErrorCount] = useState<number>(0);
    const maxRetries = 2;

    // Clean up object URL when component unmounts
    useEffect(() => {
        return () => {
            if (isObjectUrl && imgSrc !== url) {
                URL.revokeObjectURL(imgSrc);
            }
        };
    }, [imgSrc, url, isObjectUrl]);

    // Reset when URL changes
    useEffect(() => {
        setImgSrc(url);
        setIsObjectUrl(false);
        setErrorCount(0);
    }, [url]);

    // Special handling for blob URLs
    useEffect(() => {
        const handleBlobUrl = async () => {
            if (url.startsWith('blob:') && !isObjectUrl) {
                try {
                    // For blob URLs, we don't need to fetch again, just set directly
                    setImgSrc(url);
                } catch (error) {
                    console.error('Error with blob URL:', error);
                }
            }
        };

        handleBlobUrl();
    }, [url, isObjectUrl]);

    const handleError = async () => {
        // Prevent infinite retry loops
        if (errorCount >= maxRetries) {
            console.error(`Image failed to load after ${maxRetries} attempts:`, url);
            onError('Failed to load image after multiple attempts. The file may be corrupted or unsupported.');
            return;
        }

        setErrorCount(prev => prev + 1);
        console.error(`Image failed to load (attempt ${errorCount + 1}):`, url);

        try {
            // Skip fetch for blob URLs that already failed
            if (url.startsWith('blob:')) {
                throw new Error('Blob URL failed to load directly');
            }

            // Try to fetch the image as a blob and create an object URL
            const response = await fetch(url, {
                mode: 'cors',
                cache: 'no-cache' // Avoid caching issues
            });

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

            const blob = await response.blob();
            const objectUrl = URL.createObjectURL(blob);

            // Update the image source with the object URL
            setImgSrc(objectUrl);
            setIsObjectUrl(true);
        } catch (fetchError) {
            console.error('Error fetching image as blob:', fetchError);

            // Only show error to user on final retry
            if (errorCount >= maxRetries - 1) {
                onError('Failed to load image. This might be due to permission issues or the file may not exist.');
            }
        }
    };

    return (
        <img
            src={imgSrc}
            alt={filename || 'Image preview'}
            className="max-w-full h-auto rounded-lg"
            loading="lazy"
            onError={handleError}
        />
    );
};

// Cache for file content
const contentCache = new Map<string, { content: string | 'image' | 'video' | 'pdf', fileType: string, timestamp: number }>();
const CACHE_DURATION = 5 * 60 * 1000; // 5 minutes

interface FilePreviewProps {
    url?: string;
    filename?: string;
    isModal?: boolean;
}

export default function FilePreview({ url: initialUrl = '', filename: initialFilename = '', isModal = false }: FilePreviewProps) {
    // Constants
    const CHUNK_SIZE = 50;
    const INITIAL_LINES_TO_SHOW = 20;

    // Consolidate state management with useRef for latest values
    const latestPropsRef = useRef({ url: initialUrl, filename: initialFilename });
    const loadingRef = useRef(false); // Add a ref to track loading state
    const [state, setState] = useState({
        url: initialUrl,
        filename: initialFilename,
        content: null as string | 'image' | 'video' | 'pdf' | null,
        error: null as string | null,
        loading: false,
        fileType: null as string | null,
        isVisible: false,
        visibleLines: INITIAL_LINES_TO_SHOW
    });

    // Memoize the truncated filename
    const truncatedFilename = useMemo(() => {
        if (!state.filename) return '';
        const maxLength = 40;
        if (state.filename.length <= maxLength) return state.filename;
        const extension = state.filename.split('.').pop();
        const name = state.filename.substring(0, state.filename.lastIndexOf('.'));
        const truncatedName = name.substring(0, maxLength - 3 - (extension?.length || 0));
        return `${truncatedName}...${extension ? `.${extension}` : ''}`;
    }, [state.filename]);

    // Update ref when props change
    useEffect(() => {
        latestPropsRef.current = { url: initialUrl, filename: initialFilename };
        loadingRef.current = false; // Reset loading ref
        // Clear state when URL changes
        setState(prev => ({
            ...prev,
            url: initialUrl,
            filename: initialFilename,
            content: null,
            error: null,
            fileType: null,
            loading: false
        }));
    }, [initialUrl, initialFilename]);

    // Single effect for modal event handling
    useEffect(() => {
        if (isModal) {
            const handleStateChange = (event: CustomEvent<{ url: string; filename: string }>) => {
                const { url: newUrl, filename: newFilename } = event.detail;

                // Force clear cache for PDFs to prevent stale content
                if (newUrl.endsWith('.pdf')) {
                    contentCache.delete(`${newUrl}_${newFilename}`);
                }

                setState(prev => ({
                    ...prev,
                    url: newUrl,
                    filename: newFilename,
                    content: null,
                    error: null,
                    fileType: null,
                    loading: true
                }));
            };

            window.addEventListener('filePreviewStateChange', handleStateChange as EventListener);
            return () => {
                window.removeEventListener('filePreviewStateChange', handleStateChange as EventListener);
            };
        }
    }, [isModal]);

    // Consolidated content loading effect
    const loadContent = useCallback(async () => {
        if (!state.url) {
            setState(prev => ({ ...prev, error: 'No file URL provided', loading: false }));
            return;
        }

        // Prevent duplicate loading
        if (loadingRef.current) {
            return;
        }

        loadingRef.current = true;
        setState(prev => ({ ...prev, loading: true, error: null }));

        try {
            // Check cache first
            const cacheKey = `${state.url}_${state.filename}`;
            const cachedData = contentCache.get(cacheKey);

            if (cachedData && Date.now() - cachedData.timestamp < CACHE_DURATION) {
                // Use cached data
                setState(prev => ({
                    ...prev,
                    content: cachedData.content,
                    fileType: cachedData.fileType,
                    loading: false
                }));
                loadingRef.current = false;
                return;
            }

            // Special handling for PDFs
            if (state.url.endsWith('.pdf')) {
                setState(prev => ({
                    ...prev,
                    content: 'pdf',
                    fileType: 'application/pdf',
                    loading: false
                }));

                // Cache the result
                contentCache.set(cacheKey, {
                    content: 'pdf',
                    fileType: 'application/pdf',
                    timestamp: Date.now()
                });

                loadingRef.current = false;
                return;
            }

            // Handle image files
            const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.webp', '.bmp', '.svg'];
            if (imageExtensions.some(ext => state.url.toLowerCase().endsWith(ext) ||
                (state.filename && state.filename.toLowerCase().endsWith(ext)))) {
                setState(prev => ({
                    ...prev,
                    content: 'image',
                    fileType: 'image/' + (state.url.split('.').pop() || 'jpeg'),
                    loading: false
                }));

                // Cache the result
                contentCache.set(cacheKey, {
                    content: 'image',
                    fileType: 'image/' + (state.url.split('.').pop() || 'jpeg'),
                    timestamp: Date.now()
                });

                loadingRef.current = false;
                return;
            }

            // Handle video files
            const videoExtensions = ['.mp4', '.webm', '.ogg', '.mov', '.avi'];
            if (videoExtensions.some(ext => state.url.toLowerCase().endsWith(ext) ||
                (state.filename && state.filename.toLowerCase().endsWith(ext)))) {
                setState(prev => ({
                    ...prev,
                    content: 'video',
                    fileType: 'video/' + (state.url.split('.').pop() || 'mp4'),
                    loading: false
                }));

                // Cache the result
                contentCache.set(cacheKey, {
                    content: 'video',
                    fileType: 'video/' + (state.url.split('.').pop() || 'mp4'),
                    timestamp: Date.now()
                });

                loadingRef.current = false;
                return;
            }

            // For other file types, try to fetch the content
            // Handle blob URLs (for local file previews)
            if (state.url.startsWith('blob:')) {
                try {
                    // Determine file type from filename if available
                    let fileType = '';
                    if (state.filename) {
                        const extension = state.filename.split('.').pop()?.toLowerCase();
                        if (extension) {
                            switch (extension) {
                                case 'jpg':
                                case 'jpeg':
                                case 'png':
                                case 'gif':
                                case 'webp':
                                case 'bmp':
                                case 'svg':
                                    fileType = `image/${extension === 'jpg' ? 'jpeg' : extension}`;
                                    break;
                                case 'mp4':
                                case 'webm':
                                case 'ogg':
                                case 'mov':
                                    fileType = `video/${extension}`;
                                    break;
                                case 'pdf':
                                    fileType = 'application/pdf';
                                    break;
                                case 'doc':
                                    fileType = 'application/msword';
                                    break;
                                case 'docx':
                                    fileType = 'application/vnd.openxmlformats-officedocument.wordprocessingml.document';
                                    break;
                                case 'xls':
                                    fileType = 'application/vnd.ms-excel';
                                    break;
                                case 'xlsx':
                                    fileType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
                                    break;
                                case 'ppt':
                                    fileType = 'application/vnd.ms-powerpoint';
                                    break;
                                case 'pptx':
                                    fileType = 'application/vnd.openxmlformats-officedocument.presentationml.presentation';
                                    break;
                                case 'txt':
                                case 'md':
                                case 'js':
                                case 'jsx':
                                case 'ts':
                                case 'tsx':
                                case 'html':
                                case 'css':
                                case 'json':
                                case 'yml':
                                case 'yaml':
                                case 'csv':
                                    fileType = 'text/plain';
                                    break;
                                default:
                                    fileType = 'application/octet-stream';
                            }
                        }
                    }

                    // Try to fetch the blob
                    const response = await fetch(state.url);
                    if (!response.ok) {
                        throw new Error(`Failed to fetch blob: ${response.status}`);
                    }

                    const blob = await response.blob();

                    // If we couldn't determine file type from filename, use the blob type
                    if (!fileType && blob.type) {
                        fileType = blob.type;
                    }

                    // Handle different file types
                    if (fileType.startsWith('image/') ||
                        (state.filename && /\.(jpg|jpeg|png|gif|webp|bmp|svg)$/i.test(state.filename))) {
                        setState(prev => ({
                            ...prev,
                            content: 'image',
                            fileType: fileType || 'image/jpeg',
                            loading: false
                        }));

                        // Cache the result
                        contentCache.set(cacheKey, {
                            content: 'image',
                            fileType: fileType || 'image/jpeg',
                            timestamp: Date.now()
                        });
                    } else if (fileType.startsWith('video/') ||
                        (state.filename && /\.(mp4|webm|ogg|mov|avi)$/i.test(state.filename))) {
                        setState(prev => ({
                            ...prev,
                            content: 'video',
                            fileType: fileType || 'video/mp4',
                            loading: false
                        }));

                        // Cache the result
                        contentCache.set(cacheKey, {
                            content: 'video',
                            fileType: fileType || 'video/mp4',
                            timestamp: Date.now()
                        });
                    } else if (fileType === 'application/pdf' ||
                        (state.filename && /\.pdf$/i.test(state.filename))) {
                        setState(prev => ({
                            ...prev,
                            content: 'pdf',
                            fileType: 'application/pdf',
                            loading: false
                        }));

                        // Cache the result
                        contentCache.set(cacheKey, {
                            content: 'pdf',
                            fileType: 'application/pdf',
                            timestamp: Date.now()
                        });
                    } else if (
                        fileType === 'application/msword' ||
                        fileType === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' ||
                        fileType === 'application/vnd.ms-excel' ||
                        fileType === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
                        fileType === 'application/vnd.ms-powerpoint' ||
                        fileType === 'application/vnd.openxmlformats-officedocument.presentationml.presentation' ||
                        (state.filename && /\.(doc|docx|xls|xlsx|ppt|pptx)$/i.test(state.filename))
                    ) {
                        // Handle Office documents with a document icon and download option
                        const extension = state.filename?.split('.').pop()?.toLowerCase() || '';
                        let documentType = 'document';

                        if (['xls', 'xlsx'].includes(extension)) {
                            documentType = 'spreadsheet';
                        } else if (['ppt', 'pptx'].includes(extension)) {
                            documentType = 'presentation';
                        }

                        setState(prev => ({
                            ...prev,
                            content: `document-${documentType}`,
                            fileType: fileType || `application/${documentType}`,
                            loading: false
                        }));

                        // Cache the result
                        contentCache.set(cacheKey, {
                            content: `document-${documentType}`,
                            fileType: fileType || `application/${documentType}`,
                            timestamp: Date.now()
                        });
                    } else {
                        // For text files, read the content
                        try {
                            const text = await blob.text();
                            setState(prev => ({
                                ...prev,
                                content: text,
                                fileType: fileType || 'text/plain',
                                loading: false
                            }));

                            // Cache the result
                            contentCache.set(cacheKey, {
                                content: text,
                                fileType: fileType || 'text/plain',
                                timestamp: Date.now()
                            });
                        } catch (textError) {
                            console.error('Error reading blob as text:', textError);
                            throw new Error('Failed to read file content');
                        }
                    }

                    loadingRef.current = false;
                    return;
                } catch (error) {
                    console.error('Error processing blob URL:', error);
                    setState(prev => ({
                        ...prev,
                        error: 'Failed to load file preview. Please try again or proceed with upload.',
                        loading: false
                    }));
                    loadingRef.current = false;
                    return;
                }
            }

            // For remote files
            const response = await fetch(state.url);
            if (!response.ok) {
                throw new Error(`Failed to fetch file: ${response.status} ${response.statusText}`);
            }

            const contentType = response.headers.get('content-type') || '';

            if (contentType.startsWith('image/')) {
                setState(prev => ({
                    ...prev,
                    content: 'image',
                    fileType: contentType,
                    loading: false
                }));

                // Cache the result
                contentCache.set(cacheKey, {
                    content: 'image',
                    fileType: contentType,
                    timestamp: Date.now()
                });
            } else if (contentType.startsWith('video/')) {
                setState(prev => ({
                    ...prev,
                    content: 'video',
                    fileType: contentType,
                    loading: false
                }));

                // Cache the result
                contentCache.set(cacheKey, {
                    content: 'video',
                    fileType: contentType,
                    timestamp: Date.now()
                });
            } else if (contentType === 'application/pdf') {
                setState(prev => ({
                    ...prev,
                    content: 'pdf',
                    fileType: contentType,
                    loading: false
                }));

                // Cache the result
                contentCache.set(cacheKey, {
                    content: 'pdf',
                    fileType: contentType,
                    timestamp: Date.now()
                });
            } else if (
                contentType === 'application/msword' ||
                contentType === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' ||
                (state.filename && /\.(doc|docx)$/i.test(state.filename))
            ) {
                setState(prev => ({
                    ...prev,
                    content: 'document-document',
                    fileType: contentType || 'application/document',
                    loading: false
                }));

                // Cache the result
                contentCache.set(cacheKey, {
                    content: 'document-document',
                    fileType: contentType || 'application/document',
                    timestamp: Date.now()
                });
            } else if (
                contentType === 'application/vnd.ms-excel' ||
                contentType === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
                (state.filename && /\.(xls|xlsx)$/i.test(state.filename))
            ) {
                setState(prev => ({
                    ...prev,
                    content: 'document-spreadsheet',
                    fileType: contentType || 'application/spreadsheet',
                    loading: false
                }));

                // Cache the result
                contentCache.set(cacheKey, {
                    content: 'document-spreadsheet',
                    fileType: contentType || 'application/spreadsheet',
                    timestamp: Date.now()
                });
            } else if (
                contentType === 'application/vnd.ms-powerpoint' ||
                contentType === 'application/vnd.openxmlformats-officedocument.presentationml.presentation' ||
                (state.filename && /\.(ppt|pptx)$/i.test(state.filename))
            ) {
                setState(prev => ({
                    ...prev,
                    content: 'document-presentation',
                    fileType: contentType || 'application/presentation',
                    loading: false
                }));

                // Cache the result
                contentCache.set(cacheKey, {
                    content: 'document-presentation',
                    fileType: contentType || 'application/presentation',
                    timestamp: Date.now()
                });
            } else {
                // For text files, read the content
                const text = await response.text();
                setState(prev => ({
                    ...prev,
                    content: text,
                    fileType: contentType,
                    loading: false
                }));

                // Cache the result
                contentCache.set(cacheKey, {
                    content: text,
                    fileType: contentType,
                    timestamp: Date.now()
                });
            }
        } catch (err) {
            console.error('Error loading content:', err);
            setState(prev => ({
                ...prev,
                error: err instanceof Error ? err.message : 'Failed to load file',
                loading: false
            }));
            loadingRef.current = false;
        }
    }, [state.url]);

    useEffect(() => {
        if (!state.url) return;

        // For modal, only load when visible
        if (isModal && !state.isVisible) return;

        // Reset loading state when URL changes
        loadingRef.current = false;

        // Small timeout to ensure state updates are processed
        const timer = setTimeout(() => {
            loadContent();
        }, 50);

        return () => clearTimeout(timer);
    }, [state.url, state.isVisible, isModal, loadContent]);

    // Intersection observer effect
    useEffect(() => {
        const observer = new IntersectionObserver(
            ([entry]) => {
                setState(prev => ({ ...prev, isVisible: entry.isIntersecting }));
            },
            { threshold: 0.1 }
        );

        const previewElement = document.querySelector('.file-preview-container');
        if (previewElement) {
            observer.observe(previewElement);
        }

        return () => observer.disconnect();
    }, []);

    const handleDownload = async () => {
        try {
            const response = await fetch(state.url);
            const blob = await response.blob();
            const downloadUrl = window.URL.createObjectURL(blob);
            const link = document.createElement('a');
            link.href = downloadUrl;
            link.download = state.filename;
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            window.URL.revokeObjectURL(downloadUrl);
        } catch (err) {
            console.error('Error downloading file:', err);
            alert('Failed to download file. Please try again.');
        }
    };

    const getLanguageFromFilename = (filename: string): string => {
        const extension = filename.split('.').pop()?.toLowerCase();
        switch (extension) {
            case 'js':
            case 'jsx':
                return 'javascript';
            case 'ts':
            case 'tsx':
                return 'typescript';
            case 'py':
                return 'python';
            case 'html':
                return 'html';
            case 'css':
                return 'css';
            case 'json':
                return 'json';
            case 'md':
                return 'markdown';
            case 'yml':
            case 'yaml':
                return 'yaml';
            case 'csv':
                return 'csv';
            case 'txt':
                return 'plaintext';
            default:
                // If no extension or unrecognized extension, default to plaintext
                return 'plaintext';
        }
    };

    const parseCSV = useCallback((csvContent: string) => {
        const lines = csvContent.split('\n').map(line =>
            line.split(',').map(cell =>
                cell.trim().replace(/^["'](.*)["']$/, '$1')
            )
        );
        const headers = lines[0];
        const dataRows = lines.slice(1).filter(row => row.some(cell => cell.length > 0)); // Skip empty rows

        // Remove the truncation message if it exists
        const lastRow = dataRows[dataRows.length - 1];
        if (lastRow && lastRow[0] && lastRow[0].includes('Content truncated')) {
            dataRows.pop();
        }

        return { headers, rows: dataRows };
    }, []);

    const renderCSVTable = useCallback((csvContent: string) => {
        const { headers, rows } = parseCSV(csvContent);
        const totalRows = rows.length;
        const rowsToShow = Math.min(state.visibleLines, totalRows);
        const displayedRows = rows.slice(0, rowsToShow);

        return `
            <div class="overflow-x-auto">
                <table class="table w-full">
                    <thead>
                        <tr class="bg-base-200">
                            ${headers.map(header => `<th class="px-4 py-2 text-left font-medium">${header}</th>`).join('')}
                        </tr>
                    </thead>
                    <tbody>
                        ${displayedRows.map((row, rowIndex) => `
                            <tr class="${rowIndex % 2 === 0 ? 'bg-base-100' : 'bg-base-200/50'}">
                                ${row.map(cell => `<td class="px-4 py-2 border-t border-base-300">${cell}</td>`).join('')}
                            </tr>
                        `).join('')}
                        ${rowsToShow < totalRows ? `
                            <tr>
                                <td colspan="${headers.length}" class="px-4 py-3 text-base-content/70 bg-base-200/30 border-t border-base-300">
                                    ... ${totalRows - rowsToShow} more rows
                                </td>
                            </tr>
                        ` : ''}
                    </tbody>
                </table>
            </div>
        `;
    }, [state.visibleLines]);

    const formatCodeWithLineNumbers = useCallback((code: string, language: string) => {
        try {
            // Use highlight.js to highlight the code
            const highlighted = hljs.highlight(code, { language }).value;
            const lines = highlighted.split('\n');

            return lines.map((line, i) =>
                `<div class="code-line">
                    <span class="line-number">${i + 1}</span>
                    <span class="line-content">${line || ' '}</span>
                </div>`
            ).join('');
        } catch (error) {
            console.warn(`Failed to highlight code as ${language}, falling back to plaintext`);
            const plaintext = hljs.highlight(code, { language: 'plaintext' }).value;
            const lines = plaintext.split('\n');

            return lines.map((line, i) =>
                `<div class="code-line">
                    <span class="line-number">${i + 1}</span>
                    <span class="line-content">${line || ' '}</span>
                </div>`
            ).join('');
        }
    }, []);

    const highlightCode = useCallback((code: string, language: string) => {
        // Skip highlighting for CSV
        if (language === 'csv') {
            return code;
        }

        return code; // Just return the code, formatting is handled in formatCodeWithLineNumbers
    }, []);

    const handleShowMore = useCallback(() => {
        setState(prev => ({
            ...prev,
            visibleLines: Math.min(prev.visibleLines + CHUNK_SIZE, (prev.content as string).split('\n').length)
        }));
    }, []);

    const handleShowLess = useCallback(() => {
        setState(prev => ({ ...prev, visibleLines: INITIAL_LINES_TO_SHOW }));
    }, []);

    // Update the Try Again button handler
    const handleTryAgain = useCallback(() => {
        loadingRef.current = false; // Reset loading ref
        setState(prev => ({
            ...prev,
            error: null,
            loading: true
        }));
        setTimeout(() => {
            loadContent();
        }, 100); // Small delay to ensure state is updated
    }, [loadContent]);

    // If URL is empty, show a message
    if (!state.url) {
        return (
            <div className="file-preview-container bg-base-100 rounded-lg shadow-md overflow-hidden">
                <div className="p-6 flex flex-col items-center justify-center text-center">
                    <Icon icon="heroicons:exclamation-triangle" className="h-12 w-12 text-warning mb-3" />
                    <h3 className="text-lg font-semibold mb-2">No File URL Provided</h3>
                    <p className="text-base-content/70">Please check if the file exists or if you have the necessary permissions.</p>
                </div>
            </div>
        );
    }

    return (
        <div className="file-preview-container space-y-4">
            <div className="flex justify-between items-center bg-base-200 p-3 rounded-t-lg">
                <div className="flex items-center gap-2 flex-1 min-w-0">
                    <span className="truncate font-medium" title={state.filename}>{truncatedFilename}</span>
                    {state.fileType && (
                        <span className="badge badge-sm whitespace-nowrap">{state.fileType.split('/')[1]}</span>
                    )}
                </div>
                <button
                    onClick={handleDownload}
                    className="btn btn-sm btn-ghost gap-2 whitespace-nowrap"
                >
                    <Icon icon="mdi:download" className="h-4 w-4" />
                    Download
                </button>
            </div>

            <div className="preview-content overflow-auto border border-base-300 rounded-lg bg-base-200/50 relative">
                {/* Initial loading state - show immediately when URL is provided but content hasn't loaded yet */}
                {state.url && !state.loading && !state.error && state.content === null && (
                    <div className="flex justify-center items-center p-8">
                        <span className="loading loading-spinner loading-lg"></span>
                    </div>
                )}

                {state.loading && (
                    <div className="flex justify-center items-center p-8">
                        <span className="loading loading-spinner loading-lg"></span>
                    </div>
                )}

                {state.error && (
                    <div className="flex flex-col items-center justify-center p-8 bg-base-200 rounded-lg text-center space-y-4">
                        <div className="bg-warning/20 p-4 rounded-full">
                            <Icon icon="mdi:alert" className="h-12 w-12 text-warning" />
                        </div>
                        <div className="space-y-2">
                            <h3 className="text-lg font-semibold">Preview Unavailable</h3>
                            <p className="text-base-content/70 max-w-md">{state.error}</p>
                        </div>
                        <button
                            onClick={handleDownload}
                            className="btn btn-warning btn-sm gap-2 mt-4"
                        >
                            <Icon icon="mdi:download" className="h-4 w-4" />
                            Download File Instead
                        </button>
                        <button
                            className="btn btn-sm btn-outline btn-error mt-4"
                            onClick={handleTryAgain}
                        >
                            Try Again
                        </button>
                    </div>
                )}

                {!state.loading && !state.error && state.content === 'image' && (
                    <div className="flex justify-center bg-base-200 p-4 rounded-b-lg">
                        <ImageWithFallback
                            url={state.url}
                            filename={state.filename}
                            onError={(message) => setState(prev => ({ ...prev, error: message }))}
                        />
                    </div>
                )}

                {!state.loading && !state.error && state.content === 'video' && (
                    <div className="flex justify-center bg-base-200 p-4 rounded-b-lg">
                        <div className="w-full max-w-2xl">
                            <video
                                controls
                                className="max-w-full h-auto rounded-lg"
                                preload="metadata"
                                src={state.url}
                                onError={(e) => {
                                    console.error('Video failed to load:', e);

                                    // For blob URLs, try a different approach
                                    if (state.url.startsWith('blob:')) {
                                        const videoElement = e.target as HTMLVideoElement;

                                        // Try to set the src directly
                                        try {
                                            videoElement.src = state.url;
                                            videoElement.load();
                                            return;
                                        } catch (directError) {
                                            console.error('Direct src assignment failed:', directError);
                                        }
                                    }

                                    setState(prev => ({
                                        ...prev,
                                        error: 'Failed to load video. This might be due to permission issues or the file may not exist.'
                                    }));
                                }}
                            >
                                Your browser does not support the video tag.
                            </video>
                        </div>
                    </div>
                )}

                {!state.loading && !state.error && state.content === 'pdf' && (
                    <div className="w-full h-[600px] bg-base-200 p-4 rounded-b-lg">
                        <div className="w-full h-full rounded-lg overflow-hidden">
                            {/* Use object tag instead of iframe for better PDF support */}
                            <object
                                data={state.url}
                                type="application/pdf"
                                className="w-full h-full rounded-lg"
                                onError={(e) => {
                                    console.error('PDF object failed to load:', e);

                                    // Create a fallback div with a download link
                                    const obj = e.target as HTMLObjectElement;
                                    const container = obj.parentElement;

                                    if (container) {
                                        container.innerHTML = `
                                            <div class="flex flex-col items-center justify-center h-full bg-base-200 p-6 text-center">
                                                <div class="bg-warning/20 p-4 rounded-full mb-4">
                                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-warning" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                                                    </svg>
                                                </div>
                                                <h3 class="text-lg font-semibold mb-2">PDF Preview Unavailable</h3>
                                                <p class="text-base-content/70 mb-4">The PDF cannot be displayed in the browser due to security restrictions.</p>
                                                <a href="${state.url}" download="${state.filename}" class="btn btn-primary gap-2">
                                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
                                                    </svg>
                                                    Download PDF Instead
                                                </a>
                                            </div>
                                        `;
                                    }
                                }}
                            >
                                <div className="flex flex-col items-center justify-center h-full bg-base-200 p-6 text-center">
                                    <div className="bg-warning/20 p-4 rounded-full mb-4">
                                        <svg xmlns="http://www.w3.org/2000/svg" className="h-12 w-12 text-warning" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                                        </svg>
                                    </div>
                                    <h3 className="text-lg font-semibold mb-2">PDF Preview Unavailable</h3>
                                    <p className="text-base-content/70 mb-4">Your browser cannot display this PDF or it failed to load.</p>
                                    <a href={state.url} download={state.filename} className="btn btn-primary gap-2">
                                        <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
                                        </svg>
                                        Download PDF Instead
                                    </a>
                                </div>
                            </object>
                        </div>
                    </div>
                )}

                {!state.loading && !state.error && state.content && state.content.startsWith('document-') && (
                    <div className="flex flex-col items-center justify-center bg-base-200 p-8 rounded-b-lg">
                        <div className="bg-primary/10 p-6 rounded-full mb-6">
                            <Icon
                                icon={
                                    state.content === 'document-spreadsheet'
                                        ? "mdi:file-excel"
                                        : state.content === 'document-presentation'
                                            ? "mdi:file-powerpoint"
                                            : "mdi:file-word"
                                }
                                className="h-16 w-16 text-primary"
                            />
                        </div>
                        <h3 className="text-xl font-semibold mb-2">{state.filename}</h3>
                        <p className="text-base-content/70 mb-6 text-center max-w-md">
                            This document cannot be previewed in the browser. Please download it to view its contents.
                        </p>
                        <a
                            href={state.url}
                            download={state.filename}
                            className="btn btn-primary btn-lg gap-2"
                        >
                            <Icon icon="mdi:download" className="h-5 w-5" />
                            Download {
                                state.content === 'document-spreadsheet'
                                    ? 'Spreadsheet'
                                    : state.content === 'document-presentation'
                                        ? 'Presentation'
                                        : 'Document'
                            }
                        </a>
                    </div>
                )}

                {!state.loading && !state.error && state.content && !['image', 'video', 'pdf'].includes(state.content) && (
                    <div className="overflow-x-auto max-h-[600px] bg-base-200">
                        <div className={`p-1 ${state.filename.toLowerCase().endsWith('.csv') ? 'p-4' : ''}`}>
                            {state.filename.toLowerCase().endsWith('.csv') ? (
                                <div dangerouslySetInnerHTML={{ __html: renderCSVTable(state.content) }} />
                            ) : (
                                <>
                                    <div className="file-preview-code-container text-sm">
                                        <style>
                                            {`
                                            .file-preview-code-container {
                                                font-family: monospace;
                                            }
                                            .file-preview-code-container .code-line {
                                                display: flex;
                                                white-space: pre;
                                            }
                                            .file-preview-code-container .line-number {
                                                user-select: none;
                                                text-align: right;
                                                color: rgba(115, 115, 115, 0.6);
                                                min-width: 40px;
                                                padding-right: 12px;
                                                display: inline-block;
                                            }
                                            .file-preview-code-container .line-content {
                                                flex: 1;
                                                white-space: pre-wrap;
                                                word-break: break-word;
                                            }
                                            `}
                                        </style>
                                        <div
                                            dangerouslySetInnerHTML={{
                                                __html: formatCodeWithLineNumbers(
                                                    state.content.split('\n').slice(0, state.visibleLines).join('\n'),
                                                    getLanguageFromFilename(state.filename)
                                                )
                                            }}
                                        />
                                    </div>
                                    {state.content.split('\n').length > state.visibleLines && (
                                        <div className="flex justify-center p-2 border-t border-base-300 bg-base-200/50">
                                            {state.visibleLines < state.content.split('\n').length && (
                                                <button
                                                    className="btn btn-sm btn-ghost gap-1"
                                                    onClick={handleShowMore}
                                                >
                                                    <Icon icon="mdi:chevron-down" className="h-4 w-4" />
                                                    Show {Math.min(CHUNK_SIZE, state.content.split('\n').length - state.visibleLines)} more lines
                                                </button>
                                            )}
                                            {state.visibleLines > INITIAL_LINES_TO_SHOW && (
                                                <button
                                                    className="btn btn-sm btn-ghost gap-1 ml-2"
                                                    onClick={handleShowLess}
                                                >
                                                    <Icon icon="mdi:chevron-up" className="h-4 w-4" />
                                                    Show less
                                                </button>
                                            )}
                                        </div>
                                    )}
                                </>
                            )}
                        </div>
                    </div>
                )}
            </div>
        </div>
    );
}