export class LinksManager {
    constructor() {
        this.iconPacks = {
            'Font Awesome Icons': {
                prefix: {
                    brands: 'fab fa-',
                    solid: 'fas fa-'
                },
                icons: {
                    brands: [
                        'github', 'gitlab', 'reddit', 'twitter', 'youtube', 'spotify', 'discord', 'twitch',
                        'steam', 'linkedin', 'instagram', 'facebook', 'amazon', 'apple', 'google',
                        'pinterest', 'microsoft', 'windows', 'linux', 'chrome', 'firefox', 'opera',
                        'html5', 'css3', 'js', 'npm', 'node', 'react', 'angular', 
                        'wordpress', 'sass', 'gulp', 'python', 'java', 'php', 'stack-overflow',
                        'docker', 'android'
                    ],
                    solid: [
                        'home', 'link', 'folder', 'file', 'book', 'code', 'film',
                        'envelope', 'star', 'heart', 'user', 'cog', 'search',
                        'lock', 'check', 'times', 'plus', 'minus', 'edit', 'trash',
                        'download', 'upload', 'print', 'camera', 'phone', 'desktop',
                        'wifi', 'moon', 'sun', 'cloud', 'bell', 'bookmark', 'map',
                        'globe', 'eye', 'pen', 'terminal', 'folder-open', 'image'
                    ]
                }
            }
        };
        this.customIcons = JSON.parse(localStorage.getItem('customIcons')) || {};
        this.links = JSON.parse(localStorage.getItem('customLinks')) || this.getDefaultLinks();
        this.categoriesEditor = document.getElementById('categories-editor');
        this.init();
    }

    getDefaultLinks() {
        return {
            'Development': [
                { name: 'GitHub', url: 'https://github.com', icon: 'fab fa-github' },
                { name: 'Stack Overflow', url: 'https://stackoverflow.com', icon: 'fab fa-stack-overflow' },
                { name: 'MDN', url: 'https://developer.mozilla.org', icon: 'fas fa-book' }
            ],
            'Social': [
                { name: 'Reddit', url: 'https://www.reddit.com', icon: 'fab fa-reddit' },
                { name: 'Twitter', url: 'https://www.twitter.com', icon: 'fab fa-twitter' },
                { name: 'LinkedIn', url: 'https://www.linkedin.com', icon: 'fab fa-linkedin' }
            ],
            'Entertainment': [
                { name: 'YouTube', url: 'https://www.youtube.com', icon: 'fab fa-youtube' },
                { name: 'Netflix', url: 'https://www.netflix.com', icon: 'fas fa-film' },
                { name: 'Spotify', url: 'https://www.spotify.com', icon: 'fab fa-spotify' }
            ]
        };
    }

    init() {
        this.renderLinks();
        this.attachEventListeners();
    }

    renderLinks() {
        // Render links in settings
        this.renderLinksEditor();
        // Render links in main container
        this.renderLinksContainer();
    }

    renderLinksEditor() {
        this.categoriesEditor.innerHTML = Object.entries(this.links)
            .map(([category, links]) => `
                <div class="category-item">
                    <h5>${category}</h5>
                    <button class="settings-btn small remove-category" data-category="${category}">
                        <i class="fas fa-trash"></i>
                    </button>
                    <div class="category-links">
                        ${links.map((link, index) => {
                            const iconHtml = link.icon.startsWith('custom-') 
                                ? `<img src="${this.customIcons[link.icon.replace('custom-', '')]}" style="width: 16px; height: 16px; vertical-align: middle;">` 
                                : `<i class="${link.icon}"></i>`;
                            return `
                                <div class="link-item">
                                    <div class="icon-select" data-category="${category}" data-index="${index}">
                                        ${iconHtml}
                                    </div>
                                    <input type="text" value="${link.name}" placeholder="Name" 
                                        data-category="${category}" data-index="${index}" data-field="name">
                                    <input type="text" value="${link.url}" placeholder="URL"
                                        data-category="${category}" data-index="${index}" data-field="url">
                                    <button class="settings-btn small remove-link" data-category="${category}" data-index="${index}">
                                        <i class="fas fa-times"></i>
                                    </button>
                                </div>
                            `;
                        }).join('')}
                    </div>
                </div>
            `).join('');

        // Add event listeners
        this.categoriesEditor.addEventListener('click', (e) => {
            const target = e.target.closest('[data-category]');
            if (!target) return;

            if (target.classList.contains('remove-category')) {
                this.removeCategory(target.dataset.category);
            } else if (target.classList.contains('remove-link')) {
                this.removeLink(target.dataset.category, parseInt(target.dataset.index));
            } else if (target.classList.contains('icon-select')) {
                this.showIconPicker(target.dataset.category, parseInt(target.dataset.index));
            }
        });

        this.categoriesEditor.addEventListener('change', (e) => {
            const target = e.target;
            if (target.matches('input[data-field]')) {
                this.updateLink(
                    target.dataset.category,
                    parseInt(target.dataset.index),
                    target.dataset.field,
                    target.value
                );
            }
        });
    }

    showIconPicker(category, linkIndex) {
        const popup = document.createElement('div');
        popup.className = 'icon-picker-popup';
        
        const content = document.createElement('div');
        content.className = 'icon-picker-content';
        
        const pack = this.iconPacks['Font Awesome Icons'];
        
        content.innerHTML = `
            <div class="icon-picker-header">
                <h3>Icon Picker</h3>
                <div class="icon-picker-tabs">
                    <button class="active" data-tab="fontawesome">Font Awesome Icons</button>
                    <button data-tab="custom">Custom Icons</button>
                </div>
            </div>
            <div class="icon-sections">
                <div class="icon-section fontawesome-section">
                    ${[...pack.icons.brands.map(icon => ({
                        class: pack.prefix.brands + icon,
                        name: 'brands-' + icon
                    })), ...pack.icons.solid.map(icon => ({
                        class: pack.prefix.solid + icon,
                        name: 'solid-' + icon
                    }))].map(icon => `
                        <div class="icon-item" data-icon="${icon.class}">
                            <i class="${icon.class}"></i>
                        </div>
                    `).join('')}
                </div>
                <div class="icon-section custom-section" style="display: none;">
                    <div class="custom-icons-grid">
                        ${Object.entries(this.customIcons).map(([name, url]) => `
                            <div class="custom-icon-item" data-name="${name}">
                                <img src="${url}" class="custom-icon" title="${name}">
                                <button class="delete-icon" data-name="${name}">×</button>
                            </div>
                        `).join('')}
                    </div>
                    <input type="file" id="customIconUpload" accept="image/*" style="display: none;">
                    <button class="settings-btn upload-icon-btn">Upload Custom Icon</button>
                </div>
            </div>
        `;

        // Event listeners for icons
        content.querySelectorAll('.icon-item').forEach(item => {
            item.addEventListener('click', () => {
                if (item.dataset.icon) {
                    this.setIcon(category, linkIndex, item.dataset.icon);
                } else if (item.dataset.name && item.dataset.url) {
                    this.setCustomIcon(category, linkIndex, item.dataset.name, item.dataset.url);
                }
            });
        });

        // Add delete icon handler
        content.querySelectorAll('.delete-icon').forEach(btn => {
            btn.addEventListener('click', (e) => {
                e.stopPropagation();
                const name = btn.dataset.name;
                if (confirm(`Delete custom icon "${name}"?`)) {
                    delete this.customIcons[name];
                    localStorage.setItem('customIcons', JSON.stringify(this.customIcons));
                    this.showIconPicker(category, linkIndex);
                }
            });
        });

        // Update custom icon click handler
        content.querySelectorAll('.custom-icon-item').forEach(item => {
            item.addEventListener('click', () => {
                const name = item.dataset.name;
                if (name && this.customIcons[name]) {
                    this.setCustomIcon(category, linkIndex, name, this.customIcons[name]);
                }
            });
        });

        // Upload button handler
        const uploadBtn = content.querySelector('.upload-icon-btn');
        const fileInput = content.querySelector('#customIconUpload');
        uploadBtn?.addEventListener('click', () => fileInput.click());

        // File input handler
        fileInput?.addEventListener('change', (e) => {
            const file = e.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = (e) => {
                    const name = file.name.replace(/\.[^/.]+$/, "");
                    this.customIcons[name] = e.target.result;
                    localStorage.setItem('customIcons', JSON.stringify(this.customIcons));
                    this.showIconPicker(category, linkIndex);
                };
                reader.readAsDataURL(file);
            }
        });

        // Tab switching
        content.querySelectorAll('.icon-picker-tabs button').forEach(button => {
            button.addEventListener('click', () => {
                content.querySelectorAll('.icon-picker-tabs button').forEach(b => b.classList.remove('active'));
                button.classList.add('active');

                const tab = button.dataset.tab;
                content.querySelectorAll('.icon-section').forEach(section => {
                    section.style.display = section.classList.contains(`${tab}-section`) ? 'grid' : 'none';
                });
            });
        });

        popup.appendChild(content);
        document.body.appendChild(popup);
        
        popup.addEventListener('click', (e) => {
            if (e.target === popup) popup.remove();
        });
    }

    renderIconPackContent(packName) {
        const pack = this.iconPacks[packName];
        return Object.entries(pack.icons).map(([type, icons]) => `
            <div class="${type}-icons icon-grid">
                ${icons.map(icon => 
                    `<i class="${pack.prefix[type]}${icon}" title="${icon}" 
                        data-icon="${pack.prefix[type]}${icon}"></i>`
                ).join('')}
            </div>
        `).join('');
    }

    setCustomIcon(category, index, name, url) {
        if (this.customIcons[name]) {
            this.updateLink(category, index, 'icon', `custom-${name}`);
            // Remove iconUrl since we're storing it in customIcons
            const link = this.links[category][index];
            delete link.iconUrl;
            this.save();
            document.querySelector('.icon-picker-popup').remove();
        }
    }

    setIcon(category, index, icon) {
        this.updateLink(category, index, 'icon', icon);
        document.querySelector('.icon-picker-popup').remove();
    }

    renderLinksContainer() {
        const container = document.querySelector('.links-container');
        container.innerHTML = Object.entries(this.links)
            .map(([category, links]) => `
                <div class="category">
                    <h2>${category}</h2>
                    <ul>
                        ${links.map(link => {
                            if (link.icon.startsWith('custom-')) {
                                const iconData = this.customIcons[link.icon.replace('custom-', '')];
                                if (!iconData) return `<li><a href="${link.url}"><i class="fas fa-link"></i> ${link.name}</a></li>`;
                                return `<li><a href="${link.url}"><img src="${iconData}" style="width: 1em; height: 1em; vertical-align: middle;"> ${link.name}</a></li>`;
                            }
                            return `<li><a href="${link.url}"><i class="${link.icon}"></i> ${link.name}</a></li>`;
                        }).join('')}
                    </ul>
                </div>
            `).join('');
    }

    attachEventListeners() {
        document.getElementById('addCategory').addEventListener('click', () => {
            const name = prompt('Enter category name:');
            if (name) this.addCategory(name);
        });

        document.getElementById('addLink').addEventListener('click', () => {
            const category = prompt('Enter category:');
            if (category && this.links[category]) {
                this.addLink(category, {
                    name: 'New Link',
                    url: 'https://',
                    icon: 'fas fa-link'
                });
            }
        });

        document.getElementById('exportLinks').addEventListener('click', () => this.export());
        
        document.getElementById('importLinksBtn').addEventListener('click', () => {
            document.getElementById('importLinks').click();
        });

        document.getElementById('importLinks').addEventListener('change', (e) => {
            if (e.target.files[0]) this.import(e.target.files[0]);
        });
    }

    addCategory(name) {
        if (!this.links[name]) {
            this.links[name] = [];
            this.save();
            this.renderLinks();
        }
    }

    addLink(category, link) {
        this.links[category].push(link);
        this.save();
        this.renderLinks();
    }

    updateLink(category, index, field, value) {
        if (this.links[category] && this.links[category][index]) {
            this.links[category][index][field] = value;
            this.save();
            this.renderLinks();
        }
    }

    removeLink(category, index) {
        if (this.links[category]) {
            this.links[category].splice(index, 1);
            this.save();
            this.renderLinks();
        }
    }

    removeCategory(category) {
        if (confirm(`Are you sure you want to delete the category "${category}" and all its links?`)) {
            delete this.links[category];
            this.save();
            this.renderLinks();
        }
    }

    save() {
        localStorage.setItem('customLinks', JSON.stringify(this.links));
    }

    export() {
        const blob = new Blob([JSON.stringify(this.links, null, 2)], { type: 'application/json' });
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = 'links-config.json';
        a.click();
        URL.revokeObjectURL(url);
    }

    async import(file) {
        try {
            const text = await file.text();
            this.links = JSON.parse(text);
            this.save();
            this.renderLinks();
            return true;
        } catch (error) {
            console.error('Failed to import links:', error);
            return false;
        }
    }
}