script.js

// File processing logic
document.addEventListener('DOMContentLoaded', () => {
    console.log('BlogVista initialized');
    
    // Handle file uploads and generation
    const handleFileUpload = async (files) => {
        if (!files || files.length === 0) return;
        
        // Convert FileList to array
        const filesArray = Array.from(files);
        
        // Process each file
        for (const file of filesArray) {
            try {
                const content = await extractFileContent(file);
                const html = generateBlogHTML(file.name.replace(/\.[^/.]+$/, ""), content);
                downloadHTMLFile(file.name.replace(/\.[^/.]+$/, ".html"), html);


// Initialize Feather Icons when DOM is loaded
document.addEventListener('DOMContentLoaded', () => {
    feather.replace();
    
    // Handle file uploads and generation
    const handleFileUpload = async (files) => {
        if (!files || files.length === 0) return;
        
        // Convert FileList to array
        const filesArray = Array.from(files);
        
        // Process each file
        for (const file of filesArray) {
            try {
                const content = await extractFileContent(file);
                const html = generateBlogHTML(file.name.replace(/\.[^/.]+$/, ""), content);
                downloadHTMLFile(file.name.replace(/\.[^/.]+$/, ".html"), html);
            } catch (error) {
                console.error(`Error processing ${file.name}:`, error);
                showErrorNotification(`Failed to process ${file.name}`);
            }
        }
    };

    // Listen for custom event from file-upload component
    document.addEventListener('files-uploaded', (e) => {
        if (e.detail && e.detail.files) {
            handleFileUpload(e.detail.files);
        }
    });
});
catch (error) {
console.error(`Error processing ${file.name}:`, error);
                showErrorNotification(`Failed to process ${file.name}`);
    }
}
};

    // Listen for custom event from file-upload component
    document.addEventListener('files-uploaded', (e) => {
        if (e.detail && e.detail.files) {
            handleFileUpload(e.detail.files);
        }
    });
});
function showErrorNotification(message) {
    const notification = document.createElement('div');
    notification.style.position = 'fixed';
    notification.style.bottom = '20px';
    notification.style.right = '20px';
    notification.style.backgroundColor = '#ef4444';
    notification.style.color = 'white';
    notification.style.padding = '12px 24px';
    notification.style.borderRadius = '8px';
    notification.style.boxShadow = '0 4px 6px rgba(0,0,0,0.1)';
    notification.style.zIndex = '1000';
    notification.textContent = message;
    
    document.body.appendChild(notification);
    
    setTimeout(() => {
        notification.style.transition = 'opacity 0.5s';
        notification.style.opacity = '0';
        setTimeout(() => notification.remove(), 500);
    }, 3000);
}
// Simulate file content extraction with improved mock content
async function extractFileContent(file) {
    return new Promise((resolve) => {
        // Simulate processing delay
        setTimeout(() => {
            const isPPT = file.type.includes('powerpoint');
            const mockContent = `
                <h1>${file.name.replace(/\.[^/.]+$/, "")}</h1>
                <p class="text-lg text-secondary-500 mb-6">Auto-generated from ${isPPT ? 'PowerPoint' : 'Word'} document</p>
                
                <div class="grid ${isPPT ? 'md:grid-cols-2' : 'md:grid-cols-1'} gap-6 mb-8">
                    ${isPPT ? 
                        `<div class="bg-stone-100 p-6 rounded-lg">
                            <h2 class="text-xl font-bold mb-3">Presentation Slides</h2>
                            <p>This would contain your PowerPoint slides content.</p>
                            <img src="http://static.photos/business/640x360/42" alt="Presentation" class="mt-4 rounded-lg">
                        </div>` : ''}
                    
                    <div class="bg-stone-100 p-6 rounded-lg">
                        <h2 class="text-xl font-bold mb-3">Document Content</h2>
                        <p>This would contain the formatted text content from your document with proper headings, lists, and paragraphs.</p>
                        <ul class="mt-4 pl-5 space-y-2">
                            <li class="list-disc">Document: ${file.name}</li>
                            <li class="list-disc">Size: ${(file.size / 1024).toFixed(2)} KB</li>
                            <li class="list-disc">Pages: ${Math.ceil(Math.random() * 10)}</li>
                        </ul>
                    </div>
                </div>
                
                ${isPPT ? 
                    `<div class="bg-stone-100 p-6 rounded-lg mb-8">
                        <h2 class="text-xl font-bold mb-3">Slide Notes</h2>
                        <p>This section would contain any speaker notes from your presentation.</p>
                    </div>` : ''}
                
                <div class="prose max-w-none">
                    <h2>About This Conversion</h2>
                    <p>This HTML was automatically generated from your original document while preserving the structure and key content elements.</p>
                    
                    <h3>Features</h3>
                    <ul>
                        <li>Responsive design for all devices</li>
                        <li>Clean, professional typography</li>
                        <li>Automatic image optimization</li>
                        <li>SEO-friendly structure</li>
                    </ul>
                </div>
            `;
            resolve(mockContent);
        }, 1500);
    });
}
function generateBlogHTML(title, content) {
    return `
<!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>${title}</title>
            <link rel="stylesheet" href="style.css">
            <script src="https://cdn.tailwindcss.com"></script>
            <script src="components/navbar.js"></script>
            <script src="components/footer.js"></script>
        </head>
        <body class="bg-stone-50 min-h-screen flex flex-col">
            <custom-navbar></custom-navbar>
            <article class="container mx-auto px-4 py-12 max-w-4xl flex-grow">
                <header class="mb-12 text-center">
                    <h1 class="text-4xl font-bold text-primary-500 mb-4">${title}</h1>
                    <div class="h-1 w-24 bg-primary-500 mx-auto"></div>
                </header>
                <div class="prose prose-lg max-w-none bg-white p-8 rounded-xl shadow-lg">
                    ${content}
                </div>
            </article>
            <custom-footer></custom-footer>
            <script>
                feather.replace();
            </script>
        </body>
        </html>
    `;
}
function downloadHTMLFile(filename, content) {
    try {
const blob = new Blob([content], { type: 'text/html' });
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = filename;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        
        // Revoke the object URL after a delay to ensure download completes
        setTimeout(() => {
            URL.revokeObjectURL(url);
        }, 100);
    } catch (error) {
        console.error('Error downloading file:', error);
        showErrorNotification('Failed to download file');
    }
}
}