script.js

const FAVICON_SIZES = [
    { name: 'favicon-16x16.png', size: 16, label: '16×16 (Browser Tab)' },
    { name: 'favicon-32x32.png', size: 32, label: '32×32 (Retina Display)' },
    { name: 'apple-touch-icon.png', size: 180, label: '180×180 (iOS)' },
    { name: 'android-chrome-192x192.png', size: 192, label: '192×192 (Android)' },
    { name: 'android-chrome-512x512.png', size: 512, label: '512×512 (Android HD)' }
];

const SUPPORTED_FORMATS = ['image/png', 'image/jpeg', 'image/jpg', 'image/webp', 'image/svg+xml'];
const MAX_FILE_SIZE = 10 * 1024 * 1024; // 10MB
const REMOVE_BG_API_URL = 'https://api.remove.bg/v1.0/removebg';

class FaviCraft {
    constructor() {
        this.uploadedImages = [];
        this.currentImageIndex = 0;
        this.croppedImageData = null;
        this.isProcessing = false;
        this.removeApiKey = null;

        this.initializeElements();
        this.bindEvents();
        this.loadSettings();
    }

    initializeElements() {
        this.fileInput = document.getElementById('fileInput');
        this.uploadSection = document.getElementById('uploadSection');
        this.fileName = document.getElementById('fileName');
        this.controls = document.getElementById('controls');
        this.previewSection = document.getElementById('previewSection');
        this.cropSlider = document.getElementById('cropSlider');
        this.cropValue = document.getElementById('cropValue');
        this.paddingSlider = document.getElementById('paddingSlider');
        this.paddingValue = document.getElementById('paddingValue');
        this.bgColorInput = document.getElementById('bgColor');
        this.transparentBgCheckbox = document.getElementById('transparentBg');
        this.outputGrid = document.getElementById('outputGrid');
        this.downloadAllBtn = document.getElementById('downloadAllBtn');
        this.infoPanel = document.getElementById('infoPanel');
    }

    loadSettings() {
        const savedSettings = localStorage.getItem('favicraft-settings');
        if (savedSettings) {
            try {
                const settings = JSON.parse(savedSettings);
                this.cropSlider.value = settings.cropValue || 5;
                this.paddingSlider.value = settings.paddingValue || 8;
                this.bgColorInput.value = settings.bgColor || '#ffffff';
                this.transparentBgCheckbox.checked = settings.transparentBg || false;
                this.removeApiKey = settings.removeApiKey || null;
                this.updateDisplayValues();
            } catch (error) {
                console.warn('Failed to load settings:', error);
            }
        }
    }

    saveSettings() {
        const settings = {
            cropValue: this.cropSlider.value,
            paddingValue: this.paddingSlider.value,
            bgColor: this.bgColorInput.value,
            transparentBg: this.transparentBgCheckbox.checked,
            removeApiKey: this.removeApiKey
        };
        localStorage.setItem('favicraft-settings', JSON.stringify(settings));
    }

    updateDisplayValues() {
        const val = this.cropSlider.value;
        this.cropValue.textContent = val == 0 ? 'None' : val == 5 ? 'Auto' : val < 5 ? 'Light' : 'Aggressive';
        this.paddingValue.textContent = this.paddingSlider.value + '%';
    }

    bindEvents() {
        // Drag and drop events
        this.uploadSection.addEventListener('dragover', (e) => {
            e.preventDefault();
            this.uploadSection.classList.add('dragover');
        });

        this.uploadSection.addEventListener('dragleave', () => {
            this.uploadSection.classList.remove('dragover');
        });

        this.uploadSection.addEventListener('drop', (e) => {
            e.preventDefault();
            this.uploadSection.classList.remove('dragover');
            const files = Array.from(e.dataTransfer.files).filter(file =>
                file.type.startsWith('image/'));
            if (files.length > 0) {
                this.handleFiles(files);
            }
        });

        // File input change
        this.fileInput.addEventListener('change', (e) => {
            const files = Array.from(e.target.files);
            if (files.length > 0) this.handleFiles(files);
        });

        // Control events
        this.cropSlider.addEventListener('input', () => {
            this.updateDisplayValues();
            this.saveSettings();
            if (this.uploadedImages.length > 0) this.generateAll();
        });

        this.paddingSlider.addEventListener('input', () => {
            this.updateDisplayValues();
            this.saveSettings();
            if (this.uploadedImages.length > 0) this.generateAll();
        });

        this.bgColorInput.addEventListener('input', () => {
            this.saveSettings();
            if (this.uploadedImages.length > 0) this.generateAll();
        });

        this.transparentBgCheckbox.addEventListener('change', () => {
            this.bgColorInput.disabled = this.transparentBgCheckbox.checked;
            this.saveSettings();
            if (this.uploadedImages.length > 0) this.generateAll();
        });

        this.downloadAllBtn.addEventListener('click', () => this.downloadAllFavicons());

        const removeBgBtn = document.getElementById('removeBgBtn');
        if (removeBgBtn) {
            removeBgBtn.addEventListener('click', () => this.handleRemoveBackground());
        }

        const generateHtmlBtn = document.getElementById('generateHtmlBtn');
        if (generateHtmlBtn) {
            generateHtmlBtn.addEventListener('click', () => this.copyHtmlCode());
        }

        // Info panel toggle
        if (this.infoPanel) {
            this.infoPanel.addEventListener('click', () => {
                this.infoPanel.classList.toggle('open');
            });
        }
    }

    // Enhanced file handling with validation and batch support
    async handleFiles(files) {
        if (this.isProcessing) {
            this.showNotification('Please wait for current processing to complete', 'warning');
            return;
        }

        const validFiles = [];
        const errors = [];

        for (const file of files) {
            if (!this.validateFile(file)) {
                errors.push(`${file.name}: Invalid file type or size`);
                continue;
            }
            validFiles.push(file);
        }

        if (errors.length > 0) {
            this.showNotification(errors.join('\n'), 'error');
        }

        if (validFiles.length === 0) return;

        this.isProcessing = true;
        this.showProgressBar(true);

        try {
            this.uploadedImages = [];

            for (let i = 0; i < validFiles.length; i++) {
                const file = validFiles[i];
                this.updateProgress((i / validFiles.length) * 50, `Loading ${file.name}...`);

                const imageData = await this.loadImage(file);
                this.uploadedImages.push({
                    file,
                    image: imageData.image,
                    originalName: file.name
                });
            }

            this.currentImageIndex = 0;
            this.updateFileDisplay();
            this.controls.style.display = 'block';
            this.previewSection.style.display = 'block';

            this.updateProgress(100, 'Processing complete!');
            await this.generateAll();

        } catch (error) {
            this.showNotification(`Error processing files: ${error.message}`, 'error');
        } finally {
            this.isProcessing = false;
            setTimeout(() => this.showProgressBar(false), 1000);
        }
    }

    validateFile(file) {
        if (!SUPPORTED_FORMATS.includes(file.type)) {
            return false;
        }
        if (file.size > MAX_FILE_SIZE) {
            return false;
        }
        return true;
    }

    loadImage(file) {
        return new Promise((resolve, reject) => {
            const reader = new FileReader();
            reader.onload = function(event) {
                const img = new Image();
                img.onload = function() {
                    resolve({ image: img, dataUrl: event.target.result });
                };
                img.onerror = () => reject(new Error('Failed to load image'));
                img.src = event.target.result;
            };
            reader.onerror = () => reject(new Error('Failed to read file'));
            reader.readAsDataURL(file);
        });
    }

    updateFileDisplay() {
        const totalFiles = this.uploadedImages.length;
        if (totalFiles === 1) {
            this.fileName.textContent = `Selected: ${this.uploadedImages[0].originalName}`;
        } else {
            this.fileName.textContent = `Selected: ${totalFiles} files (${this.currentImageIndex + 1}/${totalFiles})`;
        }
    }

    // AI Background Removal using Remove.bg API
    async removeBackground(imageFile) {
        if (!this.removeApiKey) {
            const apiKey = prompt('Enter your Remove.bg API key (get free key at remove.bg):');
            if (!apiKey) return null;
            this.removeApiKey = apiKey;
            this.saveSettings();
        }

        try {
            const formData = new FormData();
            formData.append('image_file', imageFile);
            formData.append('size', 'auto');

            const response = await fetch(REMOVE_BG_API_URL, {
                method: 'POST',
                headers: {
                    'X-Api-Key': this.removeApiKey
                },
                body: formData
            });

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

            const blob = await response.blob();
            return await this.blobToImage(blob);

        } catch (error) {
            this.showNotification(`Background removal failed: ${error.message}`, 'error');
            return null;
        }
    }

    blobToImage(blob) {
        return new Promise((resolve, reject) => {
            const img = new Image();
            const url = URL.createObjectURL(blob);
            img.onload = () => {
                URL.revokeObjectURL(url);
                resolve(img);
            };
            img.onerror = () => {
                URL.revokeObjectURL(url);
                reject(new Error('Failed to load processed image'));
            };
            img.src = url;
        });
    }

    // Enhanced crop function with better edge detection
    cropImage(img, threshold) {
        const canvas = document.createElement('canvas');
        canvas.width = img.width;
        canvas.height = img.height;
        const ctx = canvas.getContext('2d');
        ctx.drawImage(img, 0, 0);

        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        const data = imageData.data;

        let top = 0, bottom = canvas.height, left = 0, right = canvas.width;

        // Find top
        for (let y = 0; y < canvas.height; y++) {
            let hasContent = false;
            for (let x = 0; x < canvas.width; x++) {
                const i = (y * canvas.width + x) * 4;
                if (data[i + 3] > threshold) {
                    hasContent = true;
                    break;
                }
            }
            if (hasContent) {
                top = y;
                break;
            }
        }

        // Find bottom
        for (let y = canvas.height - 1; y >= 0; y--) {
            let hasContent = false;
            for (let x = 0; x < canvas.width; x++) {
                const i = (y * canvas.width + x) * 4;
                if (data[i + 3] > threshold) {
                    hasContent = true;
                    break;
                }
            }
            if (hasContent) {
                bottom = y + 1;
                break;
            }
        }

        // Find left
        for (let x = 0; x < canvas.width; x++) {
            let hasContent = false;
            for (let y = 0; y < canvas.height; y++) {
                const i = (y * canvas.width + x) * 4;
                if (data[i + 3] > threshold) {
                    hasContent = true;
                    break;
                }
            }
            if (hasContent) {
                left = x;
                break;
            }
        }

        // Find right
        for (let x = canvas.width - 1; x >= 0; x--) {
            let hasContent = false;
            for (let y = 0; y < canvas.height; y++) {
                const i = (y * canvas.width + x) * 4;
                if (data[i + 3] > threshold) {
                    hasContent = true;
                    break;
                }
            }
            if (hasContent) {
                right = x + 1;
                break;
            }
        }

        const width = right - left;
        const height = bottom - top;

        const croppedCanvas = document.createElement('canvas');
        croppedCanvas.width = width;
        croppedCanvas.height = height;
        const croppedCtx = croppedCanvas.getContext('2d');
        croppedCtx.drawImage(canvas, left, top, width, height, 0, 0, width, height);

        return { canvas: croppedCanvas, stats: { left, top, right, bottom, width, height } };
    }

    async generateAll() {
        if (this.uploadedImages.length === 0) return;

        const currentImage = this.uploadedImages[this.currentImageIndex];
        const threshold = parseInt(this.cropSlider.value) * 12;
        const cropped = this.cropImage(currentImage.image, threshold);
        this.croppedImageData = cropped;

        const isTransparent = this.transparentBgCheckbox.checked;
        const bgColor = isTransparent ? 'transparent' : this.bgColorInput.value;

        // Show original
        const originalCanvas = document.getElementById('originalCanvas');
        const originalCtx = originalCanvas.getContext('2d');
        originalCtx.clearRect(0, 0, 32, 32);
        if (!isTransparent) {
            originalCtx.fillStyle = bgColor;
            originalCtx.fillRect(0, 0, 32, 32);
        }
        originalCtx.drawImage(currentImage.image, 0, 0, 32, 32);
        originalCanvas.style.width = '128px';
        originalCanvas.style.height = '128px';

        // Show optimized
        const optimizedCanvas = document.getElementById('optimizedCanvas');
        const optimizedCtx = optimizedCanvas.getContext('2d');
        const padding = (parseInt(this.paddingSlider.value) / 100) * 32;
        const drawSize = 32 - (padding * 2);
        optimizedCtx.clearRect(0, 0, 32, 32);
        if (!isTransparent) {
            optimizedCtx.fillStyle = bgColor;
            optimizedCtx.fillRect(0, 0, 32, 32);
        }
        optimizedCtx.drawImage(cropped.canvas, padding, padding, drawSize, drawSize);
        optimizedCanvas.style.width = '128px';
        optimizedCanvas.style.height = '128px';

        // Stats
        const originalSize = Math.min(currentImage.image.width, currentImage.image.height);
        const croppedSize = Math.min(cropped.stats.width, cropped.stats.height);
        const increase = ((croppedSize / originalSize) * 100 - 100).toFixed(0);

        document.getElementById('originalIssue').textContent = `${(100 - (croppedSize / originalSize) * 100).toFixed(0)}% wasted space`;
        document.getElementById('improvement').textContent = `${increase}% larger appearance`;

        // Generate all sizes
        this.outputGrid.innerHTML = '';
        FAVICON_SIZES.forEach(sizeInfo => {
            const item = document.createElement('div');
            item.className = 'output-item';

            const title = document.createElement('h4');
            title.textContent = sizeInfo.label;
            item.appendChild(title);

            const canvasWrap = document.createElement('div');
            canvasWrap.className = 'output-canvas-wrap';

            const canvas = document.createElement('canvas');
            canvas.width = sizeInfo.size;
            canvas.height = sizeInfo.size;
            const ctx = canvas.getContext('2d');

            const padding = (parseInt(this.paddingSlider.value) / 100) * sizeInfo.size;
            const drawSize = sizeInfo.size - (padding * 2);

            ctx.clearRect(0, 0, sizeInfo.size, sizeInfo.size);
            if (!isTransparent) {
                ctx.fillStyle = bgColor;
                ctx.fillRect(0, 0, sizeInfo.size, sizeInfo.size);
            }
            ctx.drawImage(cropped.canvas, padding, padding, drawSize, drawSize);

            const displaySize = Math.min(sizeInfo.size * 2, 112);
            canvas.style.width = displaySize + 'px';
            canvas.style.height = displaySize + 'px';
            canvas.style.imageRendering = 'pixelated';

            if (isTransparent) {
                canvas.style.background = 'repeating-conic-gradient(#ddd 0% 25%, white 0% 50%) 50% / 16px 16px';
            }

            canvasWrap.appendChild(canvas);
            item.appendChild(canvasWrap);

            const sizeLabel = document.createElement('p');
            sizeLabel.className = 'size-label';
            sizeLabel.textContent = sizeInfo.name;
            item.appendChild(sizeLabel);

            const btn = document.createElement('button');
            btn.className = 'download-btn';
            btn.textContent = 'Download';
            btn.onclick = () => this.downloadCanvas(canvas, sizeInfo.name);
            item.appendChild(btn);

            this.outputGrid.appendChild(item);
        });
    }

    downloadCanvas(canvas, filename) {
        canvas.toBlob(blob => {
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = filename;
            a.click();
            URL.revokeObjectURL(url);
        });
    }

    async downloadAllFavicons() {
        const zip = new JSZip();
        const folder = zip.folder('favicons');
        const isTransparent = this.transparentBgCheckbox.checked;
        const bgColor = isTransparent ? 'transparent' : this.bgColorInput.value;

        for (const sizeInfo of FAVICON_SIZES) {
            const canvas = document.createElement('canvas');
            canvas.width = sizeInfo.size;
            canvas.height = sizeInfo.size;
            const ctx = canvas.getContext('2d');

            const padding = (parseInt(this.paddingSlider.value) / 100) * sizeInfo.size;
            const drawSize = sizeInfo.size - (padding * 2);

            ctx.clearRect(0, 0, sizeInfo.size, sizeInfo.size);
            if (!isTransparent) {
                ctx.fillStyle = bgColor;
                ctx.fillRect(0, 0, sizeInfo.size, sizeInfo.size);
            }
            ctx.drawImage(this.croppedImageData.canvas, padding, padding, drawSize, drawSize);

            const blob = await new Promise(resolve => canvas.toBlob(resolve));
            folder.file(sizeInfo.name, blob);
        }

        // Add HTML implementation code
        const htmlCode = this.generateHtmlCode();
        folder.file('favicon-implementation.html', htmlCode);

        const content = await zip.generateAsync({ type: 'blob' });
        const url = URL.createObjectURL(content);
        const a = document.createElement('a');
        a.href = url;
        a.download = 'favicraft-favicons.zip';
        a.click();
        URL.revokeObjectURL(url);
    }

    generateHtmlCode() {
        return `<!DOCTYPE html>
<html>
<head>
    <!-- Favicon Implementation Code -->
    <!-- Copy the lines below to your website's <head> section -->

    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png">
    <link rel="icon" type="image/png" sizes="512x512" href="/android-chrome-512x512.png">

    <!-- Optional: Add these for better browser support -->
    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="theme-color" content="#ffffff">
</head>
<body>
    <h1>Favicon Implementation Guide</h1>
    <p>1. Upload all the favicon files to your website's root directory (or /favicons/ folder)</p>
    <p>2. Copy the &lt;link&gt; tags above to your website's &lt;head&gt; section</p>
    <p>3. Update the href paths if you placed files in a subfolder</p>
    <p>4. Test your favicon by visiting your website!</p>
</body>
</html>`;
    }

    showNotification(message, type = 'info') {
        let notification = document.getElementById('notification');
        if (!notification) {
            notification = document.createElement('div');
            notification.id = 'notification';
            document.body.appendChild(notification);
        }

        const colors = {
            info: '#3b82f6',
            success: '#10b981',
            warning: '#f59e0b',
            error: '#ef4444'
        };

        notification.style.backgroundColor = colors[type] || colors.info;
        notification.textContent = message;
        notification.style.display = 'block';
        notification.style.opacity = '1';

        clearTimeout(this._notifTimeout);
        this._notifTimeout = setTimeout(() => {
            notification.style.opacity = '0';
            setTimeout(() => { notification.style.display = 'none'; }, 300);
        }, 4000);
    }

    showProgressBar(show) {
        let progressBar = document.getElementById('progress-bar');
        if (!progressBar && show) {
            progressBar = document.createElement('div');
            progressBar.id = 'progress-bar';
            progressBar.innerHTML = `
                <div style="background: rgba(0,0,0,0.8); position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 2000; display: flex; align-items: center; justify-content: center;">
                    <div style="background: white; padding: 30px; border-radius: 12px; text-align: center; min-width: 300px;">
                        <div id="progress-text" style="margin-bottom: 15px; font-weight: 600;">Processing...</div>
                        <div style="background: #e2e8f0; height: 8px; border-radius: 4px; overflow: hidden;">
                            <div id="progress-fill" style="background: #667eea; height: 100%; width: 0%; transition: width 0.3s ease;"></div>
                        </div>
                    </div>
                </div>
            `;
            document.body.appendChild(progressBar);
        }

        if (progressBar) {
            progressBar.style.display = show ? 'block' : 'none';
        }
    }

    updateProgress(percent, text) {
        const progressFill = document.getElementById('progress-fill');
        const progressText = document.getElementById('progress-text');
        if (progressFill) progressFill.style.width = percent + '%';
        if (progressText) progressText.textContent = text;
    }

    // Handle AI background removal (simplified)
    async handleRemoveBackground() {
        if (this.uploadedImages.length === 0) {
            this.showNotification('Please upload an image first', 'warning');
            return;
        }

        // Show info about the feature
        const useFeature = confirm(`Smart Background Removal

This feature can automatically remove backgrounds from your images using AI.

To use this feature, you'll need a free API key from Remove.bg:
1. Visit remove.bg
2. Sign up for free (50 free images/month)
3. Get your API key from your account

Would you like to continue and enter your API key?`);

        if (!useFeature) {
            this.showNotification('You can always use the transparent background option instead!', 'info');
            return;
        }

        const currentImage = this.uploadedImages[this.currentImageIndex];
        this.showProgressBar(true);
        this.updateProgress(0, 'Removing background with AI...');

        try {
            const processedImage = await this.removeBackground(currentImage.file);
            if (processedImage) {
                // Replace current image with processed one
                this.uploadedImages[this.currentImageIndex].image = processedImage;
                this.updateProgress(100, 'Background removed successfully!');
                await this.generateAll();
                this.showNotification('Background removed successfully!', 'success');
            }
        } catch (error) {
            this.showNotification(`Background removal failed. Try using the transparent background option instead.`, 'error');
        } finally {
            setTimeout(() => this.showProgressBar(false), 1000);
        }
    }

    // Copy HTML implementation code to clipboard
    copyHtmlCode() {
        const htmlCode = `<!-- Favicon Implementation Code -->
<!-- Copy these lines to your website's <head> section -->

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="512x512" href="/android-chrome-512x512.png">

<!-- Optional: Add these for better browser support -->
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="theme-color" content="#ffffff">`;

        navigator.clipboard.writeText(htmlCode).then(() => {
            this.showNotification('HTML code copied to clipboard!', 'success');
        }).catch(() => {
            // Fallback for older browsers
            const textArea = document.createElement('textarea');
            textArea.value = htmlCode;
            document.body.appendChild(textArea);
            textArea.select();
            document.execCommand('copy');
            document.body.removeChild(textArea);
            this.showNotification('HTML code copied to clipboard!', 'success');
        });
    }
}

// Initialize the application
let faviCraft;
document.addEventListener('DOMContentLoaded', () => {
    faviCraft = new FaviCraft();
});