/**
 * @file itemList.js
 * @description Hantering av listobjekt för StatusNotifier Extension
 * 
 * Author: Linus Olofsson - Iver 
 * Date: 2025-07-03 
 * Last modified: Linus Olofsson (2025-07-08)
 * 
 * @purpose Hantera listobjekt och uppdatering av listan med tre kolumner (ID, status, länk)
 * @invoked_by popup.js, handlers/scanButton.js, handlers/updateButton.js, handlers/clearButton.js, components/timer.js
 * @invokes common/storage.js, common/utils.js
 */

import { saveItems, getItems } from '../common/storage.js';
import { formatDate, shuffleArray, generateId, calculateSlaRemaining } from '../common/utils.js';
import { getSortBy } from '../handlers/configButton.js';

// Skapa en tom lista om inga objekt finns
const createPlaceholderItems = async () => {
    try {
        console.log('Creating empty items list...');
        
        // Skapa en tom lista
        const placeholders = [];
        
        // Spara tom lista
        await saveItems(placeholders);
        console.log('Empty items list created');
        
        return placeholders;
    } catch (error) {
        console.error('Error creating empty items list:', error);
        return [];
    }
};

/**
 * Sortera items baserat på valt sorteringsalternativ.
 * @param {Array} items - Listan av ticket-objekt
 * @param {string} sortBy - 'latestChange' | 'slaTime' | 'status'
 * @returns {Array} Sorterade items
 */
const sortItems = (items, sortBy) => {
    if (!items || items.length === 0) return items;

    switch (sortBy) {
        case 'slaTime':
            // Kortast SLA-tid kvar först, null/N/A sist
            return [...items].sort((a, b) => {
                const aDate = a.completeDueDate ? new Date(a.completeDueDate).getTime() : Infinity;
                const bDate = b.completeDueDate ? new Date(b.completeDueDate).getTime() : Infinity;
                return aDate - bDate;
            });

        case 'status':
            // Gruppera efter status (alfabetiskt), inom grupp sortera på changedDate (nyast först)
            return [...items].sort((a, b) => {
                const statusCompare = (a.status || '').localeCompare(b.status || '', 'sv');
                if (statusCompare !== 0) return statusCompare;
                const aChanged = a.changedDate ? new Date(a.changedDate).getTime() : 0;
                const bChanged = b.changedDate ? new Date(b.changedDate).getTime() : 0;
                return bChanged - aChanged;
            });

        case 'latestChange':
        default:
            // Nyast förändring först
            return [...items].sort((a, b) => {
                const aChanged = a.changedDate ? new Date(a.changedDate).getTime() : 0;
                const bChanged = b.changedDate ? new Date(b.changedDate).getTime() : 0;
                return bChanged - aChanged;
            });
    }
};

// Visa objekt i listan med tre kolumner (ID, status, länk) och en ta bort-knapp
const displayItems = async () => {
    try {
        console.log('Displaying items with new layout...');
        
        // Hämta objekt från storage
        let items = await getItems();
        
        // Om inga objekt finns, skapa placeholder-objekt
        if (!items || items.length === 0) {
            console.log('No items found, creating placeholders...');
            items = await createPlaceholderItems();
        }

        // Sortera items baserat på användarens config
        const sortBy = await getSortBy();
        items = sortItems(items, sortBy);
        console.log(`Items sorted by: ${sortBy}`);
        
        // Hitta itemList-elementet
        const itemList = document.getElementById('itemList');
        if (!itemList) {
            console.error('itemList element not found in DOM');
            return false;
        }
        
        // Rensa befintliga objekt
        itemList.innerHTML = '';
        
        // Lägg till kolumnrubriker
        const headerRow = document.createElement('li');
        headerRow.className = 'item header-row';
        headerRow.innerHTML = `
            <div class="item-grid">
                <div class="item-remove-header"></div>
                <div class="item-id-header">ID</div>
                <div class="item-status-header">Status</div>
                <div class="item-sla-header">SLA</div>
                <div class="item-link-header">Länk</div>
            </div>
        `;
        itemList.appendChild(headerRow);
        
        // Visa varje objekt i listan
        items.forEach((item, index) => {
            const li = document.createElement('li');
            li.className = 'item';
            li.dataset.itemIndex = index; // Spara index för att kunna identifiera vid borttagning
            
            // Kolla om status har ändrats sedan förra uppdateringen
            const hasStatusChanged = item.statusChanged === true;
            
            // Lägg till highlight-klass om status har ändrats
            if (hasStatusChanged) {
                li.classList.add('status-changed');
            }
            
            // Skapa status-indikator
            const statusClass = getStatusClass(item.status);
            
            // Beräkna SLA kvarvarande tid
            const sla = calculateSlaRemaining(item.completeDueDate);
            const slaClass = sla.expired ? 'sla-expired' : 'sla-ok';
            
            // Skapa HTML för listobjektet med fyra kolumner och en ta bort-knapp
            li.innerHTML = `
                <div class="item-grid">
                    <div class="item-remove">
                        <img src="../icons/removeicon.png" alt="Ta bort" class="remove-icon" data-index="${index}">
                    </div>
                    <div class="item-id item-clickable" data-item-index="${index}">${item.id || 'Okänt ID'}</div>
                    <div class="item-status ${statusClass} item-clickable" data-item-index="${index}">${item.status || 'Okänd status'}</div>
                    <div class="item-sla ${slaClass} item-clickable" data-item-index="${index}">${sla.text}</div>
                    <div class="item-link">
                        <a href="${item.url}" target="_blank" class="link-button">Link</a>
                    </div>
                </div>
            `;
            
            itemList.appendChild(li);
        });
        
        // Lägg till eventlyssnare för ta bort-knappar och klickbara items
        addRemoveButtonListeners();
        addItemClickListeners(items);
        
        console.log(`Displayed ${items.length} items with new layout`);
        return true;
    } catch (error) {
        console.error('Error displaying items:', error);
        return false;
    }
};

// Funktion för att lägga till eventlyssnare på ta bort-knappar
const addRemoveButtonListeners = () => {
    const removeButtons = document.querySelectorAll('.remove-icon');
    removeButtons.forEach(button => {
        button.addEventListener('click', async (event) => {
            event.stopPropagation(); // Förhindra att klicket bubblar upp
            const index = parseInt(event.target.dataset.index);
            
            try {
                // Hämta aktuella items
                let items = await getItems();
                
                if (items && Array.isArray(items) && index >= 0 && index < items.length) {
                    // Ta bort item med det angivna indexet
                    items.splice(index, 1);
                    
                    // Spara uppdaterad lista
                    await saveItems(items);
                    
                    // Uppdatera visningen
                    await displayItems();
                    
                    console.log(`Item at index ${index} removed successfully`);
                }
            } catch (error) {
                console.error('Error removing item:', error);
            }
        });
    });
};

// Funktion för att lägga till klick-lyssnare på item-rader (för detalj-modal)
const addItemClickListeners = (items) => {
    const clickableElements = document.querySelectorAll('.item-clickable');
    clickableElements.forEach(element => {
        element.addEventListener('click', async (event) => {
            event.stopPropagation();
            const index = parseInt(event.target.dataset.itemIndex);
            if (items && items[index]) {
                // Stoppa blinkning - ta bort status-changed klass från DOM
                const listItem = event.target.closest('.item');
                if (listItem) {
                    listItem.classList.remove('status-changed');
                }
                
                // Rensa statusChanged-flagga i storage
                if (items[index].statusChanged) {
                    items[index].statusChanged = false;
                    items[index].previousStatus = null;
                    await saveItems(items);
                }
                
                showItemDetailModal(items[index]);
            }
        });
    });
};

// Visa fullskärms-popup för lång text (beskrivning eller post)
const showFullTextPopup = (title, text) => {
    const existingPopup = document.getElementById('fullTextPopup');
    if (existingPopup) existingPopup.remove();

    const popup = document.createElement('div');
    popup.id = 'fullTextPopup';
    popup.className = 'fulltext-popup';
    popup.innerHTML = `
        <div class="fulltext-popup-overlay"></div>
        <div class="fulltext-popup-content">
            <div class="fulltext-popup-header">
                <h3 class="fulltext-popup-title">${title}</h3>
                <button class="fulltext-popup-close" id="closeFullTextPopup">&times;</button>
            </div>
            <div class="fulltext-popup-body">${text.replace(/\n/g, '<br>')}</div>
        </div>
    `;

    document.body.appendChild(popup);

    document.getElementById('closeFullTextPopup').addEventListener('click', () => popup.remove());
    popup.querySelector('.fulltext-popup-overlay').addEventListener('click', () => popup.remove());

    const escHandler = (e) => {
        if (e.key === 'Escape') {
            popup.remove();
            document.removeEventListener('keydown', escHandler);
        }
    };
    document.addEventListener('keydown', escHandler);
};

// Trunkera text till maxLength tecken, returnera { truncated, full, isTruncated }
const truncateText = (text, maxLength = 100) => {
    const clean = (text || '').replace(/<br\s*\/?>/gi, '\n').replace(/<[^>]+>/g, '').trim();
    if (clean.length > maxLength) {
        return { truncated: clean.substring(0, maxLength) + '...', full: clean, isTruncated: true };
    }
    return { truncated: clean, full: clean, isTruncated: false };
};

// Visa detalj-modal för ett ärende
const showItemDetailModal = async (item) => {
    // Ta bort eventuell befintlig detalj-modal
    const existingModal = document.getElementById('itemDetailModal');
    if (existingModal) {
        existingModal.remove();
    }
    
    // Beräkna SLA
    const sla = calculateSlaRemaining(item.completeDueDate);
    const slaClass = sla.expired ? 'sla-expired' : 'sla-ok';

    // Använd displayName som rubrik, fallback till ticketId
    const modalTitle = item.displayName || `Ärende #${item.id || 'Okänt'}`;
    
    // Skapa modal-element
    const modal = document.createElement('div');
    modal.id = 'itemDetailModal';
    modal.className = 'modal';
    modal.innerHTML = `
        <div class="modal-overlay"></div>
        <div class="modal-content detail-modal-content">
            <h2 class="modal-title detail-modal-title">${modalTitle}</h2>
            <div class="modal-body detail-modal-body">
                <div class="detail-row">
                    <span class="detail-label">Typ:</span>
                    <span class="detail-value">${item.ticketType || 'Okänd'}</span>
                </div>
                <div class="detail-row">
                    <span class="detail-label">Status:</span>
                    <span class="detail-value">${item.status || 'Okänd'}</span>
                </div>
                <div class="detail-row">
                    <span class="detail-label">Urgency:</span>
                    <span class="detail-value">${item.urgency || 'Okänd'}</span>
                </div>
                <div class="detail-row">
                    <span class="detail-label">SLA kvar:</span>
                    <span class="detail-value ${slaClass}">${sla.text}</span>
                </div>
                <div class="detail-row">
                    <span class="detail-label">Prioritet:</span>
                    <span class="detail-value">${item.priority || 'Okänd'}</span>
                </div>
                <div class="detail-divider"></div>
                <div class="detail-description-label">Beskrivning:</div>
                <div id="descriptionContent" class="detail-description">
                    <span class="detail-loading">Laddar...</span>
                </div>
                <div class="detail-divider"></div>
                <div class="detail-description-label">Senaste uppdatering:</div>
                <div id="latestUpdateContent" class="detail-latest-update">
                    <span class="detail-loading">Laddar...</span>
                </div>
            </div>
            <div class="modal-footer">
                <a href="${item.url}" target="_blank" class="btn-green detail-link-btn">Öppna i Spark</a>
                <button id="closeDetailModal" class="btn-gray">Stäng</button>
            </div>
        </div>
    `;
    
    document.body.appendChild(modal);
    
    // Stäng-knapp
    document.getElementById('closeDetailModal').addEventListener('click', () => {
        modal.remove();
    });
    
    // Stäng vid klick på overlay
    modal.querySelector('.modal-overlay').addEventListener('click', () => {
        modal.remove();
    });
    
    // Stäng vid Escape
    const escHandler = (e) => {
        if (e.key === 'Escape') {
            modal.remove();
            document.removeEventListener('keydown', escHandler);
        }
    };
    document.addEventListener('keydown', escHandler);

    // Hämta beskrivning (descriptionPlain) och senaste uppdatering asynkront
    if (item.ticketGuid) {
        fetchDescription(item.ticketGuid);
        fetchLatestUpdate(item.ticketGuid, item.customerId);
    } else {
        const descEl = document.getElementById('descriptionContent');
        const updateEl = document.getElementById('latestUpdateContent');
        if (descEl) descEl.innerHTML = '<span class="detail-no-data">Ingen data tillgänglig.</span>';
        if (updateEl) updateEl.innerHTML = '<span class="detail-no-data">Ingen data tillgänglig.</span>';
    }
};

// Hämta beskrivning (descriptionPlain) från Texts-endpoint
const fetchDescription = async (ticketGuid) => {
    const container = document.getElementById('descriptionContent');
    if (!container) return;

    try {
        const response = await chrome.runtime.sendMessage({
            action: 'getTicketTexts',
            ticketGuid: ticketGuid
        });

        const texts = response?.data || {};
        const descriptionPlain = texts.descriptionPlain || '';

        if (descriptionPlain) {
            const { truncated, full, isTruncated } = truncateText(descriptionPlain, 100);
            container.innerHTML = `<span class="detail-description-text ${isTruncated ? 'truncated-clickable' : ''}">${truncated}</span>`;

            if (isTruncated) {
                container.querySelector('.truncated-clickable').addEventListener('click', () => {
                    showFullTextPopup('Beskrivning', full);
                });
            }
        } else {
            container.innerHTML = '<span class="detail-no-data">Ingen beskrivning tillgänglig.</span>';
        }
    } catch (err) {
        console.warn('Error fetching ticket texts:', err);
        container.innerHTML = '<span class="detail-no-data">Kunde inte hämta beskrivning.</span>';
    }
};

// Hämta senaste uppdatering: jämför audit logs (statusändring) med posts och avgör typ
const fetchLatestUpdate = async (ticketGuid, customerId) => {
    const container = document.getElementById('latestUpdateContent');
    if (!container) return;

    try {
        // Hämta audit logs och posts parallellt
        const [auditResponse, postsResponse] = await Promise.all([
            chrome.runtime.sendMessage({ action: 'getTicketAuditLogs', ticketGuid, customerId }),
            chrome.runtime.sendMessage({ action: 'getTicketPosts', ticketGuid })
        ]);

        const logs = auditResponse?.data || [];
        const posts = postsResponse?.data || [];

        // Senaste statusändring
        const statusChanges = logs
            .filter(log => log.type === 'StatusChanged' && log.newStatus)
            .sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp));

        const latestStatusChange = statusChanges.length > 0 ? statusChanges[0] : null;

        // Senaste post
        const sortedPosts = [...posts].sort((a, b) =>
            new Date(b.createdDate || b.timestamp) - new Date(a.createdDate || a.timestamp)
        );
        const latestPost = sortedPosts.length > 0 ? sortedPosts[0] : null;

        // Avgör om senaste statusändring indikerar ett mail ("Updated by customer" av "System")
        const isMailUpdate = latestStatusChange &&
            latestStatusChange.newStatus?.description?.toLowerCase().includes('updated by customer') &&
            latestStatusChange.changedBy?.displayName?.toLowerCase() === 'system';

        // Bygg HTML för senaste statusändring — visas alltid om den finns
        let statusHtml = '';
        if (latestStatusChange) {
            const fromStatus = latestStatusChange.oldStatus?.description || '—';
            const toStatus = latestStatusChange.newStatus?.description || '—';
            const changedBy = latestStatusChange.changedBy?.displayName || 'Okänd';
            const ts = new Date(latestStatusChange.timestamp);
            const dateStr = `${ts.toISOString().slice(0, 10)}, ${ts.toTimeString().slice(0, 5)}`;

            statusHtml = `
                <div class="latest-update-status">
                    ${fromStatus} → ${toStatus} by <strong>${changedBy}</strong> at ${dateStr}
                </div>
                <div class="detail-divider-thin"></div>
            `;
        } else {
            statusHtml = '<span class="detail-no-data">Inga statusändringar hittades.</span><div class="detail-divider-thin"></div>';
        }

        // Bygg HTML för senaste uppdatering (mail eller post)
        let updateHtml = '';

        if (isMailUpdate) {
            // Senaste uppdatering är ett mail — försök hämta email-detaljer
            // Använd senaste postens ID som email-ID (posten som skapades vid mail-inkomst)
            // Eller försök hämta via FullEmail endpoint
            updateHtml = await buildMailUpdateHtml(ticketGuid, latestStatusChange);
        } else if (latestPost) {
            // Senaste uppdatering är en post
            const author = latestPost.createdBy || 'Okänd';
            const ts = new Date(latestPost.createdDate || latestPost.timestamp);
            const dateStr = `${ts.toISOString().slice(0, 10)}, ${ts.toTimeString().slice(0, 5)}`;
            const content = latestPost.descriptionPlain || latestPost.text || latestPost.content || latestPost.body || 'Inget innehåll.';
            const { truncated, full, isTruncated } = truncateText(content, 100);

            updateHtml = `
                <div class="latest-update-post">
                    <strong>Post:</strong><br>
                    <strong>Av användare:</strong> ${author}<br>
                    <strong>tid:</strong> ${dateStr}<br>
                    <strong>Post:</strong> <span class="post-text ${isTruncated ? 'truncated-clickable' : ''}" ${isTruncated ? `data-fulltext="${full.replace(/"/g, '&quot;')}"` : ''}>${truncated}</span>
                </div>
            `;
        } else {
            updateHtml = '<span class="detail-no-data">Inga uppdateringar hittades.</span>';
        }

        container.innerHTML = statusHtml + updateHtml;

        // Lägg till klick-event för trunkerad post-text
        const clickablePost = container.querySelector('.post-text.truncated-clickable');
        if (clickablePost) {
            clickablePost.addEventListener('click', () => {
                const fullText = clickablePost.dataset.fulltext;
                showFullTextPopup('Post', fullText);
            });
        }

    } catch (err) {
        console.warn('Error fetching latest update:', err);
        container.innerHTML = '<span class="detail-no-data">Kunde inte hämta data.</span>';
    }
};

// Bygg HTML för mail-uppdatering — försök hämta email-detaljer via FullEmail endpoint
const buildMailUpdateHtml = async (ticketGuid, statusChange) => {
    try {
        // Hämta posts för att hitta senaste "public" post som kan vara mail-relaterad
        const postsResponse = await chrome.runtime.sendMessage({
            action: 'getTicketPosts',
            ticketGuid
        });

        const posts = postsResponse?.data || [];
        // Hitta senaste publika post (mail skapar ofta en publik post)
        const publicPosts = posts
            .filter(p => p.isPublic === true)
            .sort((a, b) => new Date(b.createdDate || b.timestamp) - new Date(a.createdDate || a.timestamp));

        if (publicPosts.length > 0) {
            const latestPublicPost = publicPosts[0];
            // Försök hämta fullständig email via post-ID
            try {
                const emailResponse = await chrome.runtime.sendMessage({
                    action: 'getTicketFullEmail',
                    emailId: latestPublicPost.id
                });

                const email = emailResponse?.data || {};
                if (email.from || email.to || email.subject) {
                    const ts = new Date(email.date || latestPublicPost.createdDate);
                    const dateStr = `${ts.toISOString().slice(0, 10)}, ${ts.toTimeString().slice(0, 5)}`;
                    return `
                        <div class="latest-update-mail">
                            <strong>Mail:</strong><br>
                            <strong>From:</strong> ${email.from || '—'}<br>
                            <strong>To:</strong> ${email.to || '—'}<br>
                            <strong>Ämne:</strong> ${email.subject || '—'}<br>
                            <strong>tid:</strong> ${dateStr}
                        </div>
                    `;
                }
            } catch (emailErr) {
                console.warn('Could not fetch full email, falling back to post data:', emailErr);
            }
        }

        // Fallback: visa mail-indikation baserat på statusändringen
        const ts = new Date(statusChange.timestamp);
        const dateStr = `${ts.toISOString().slice(0, 10)}, ${ts.toTimeString().slice(0, 5)}`;
        return `
            <div class="latest-update-mail">
                <strong>Mail:</strong><br>
                <span class="detail-no-data">Inkommande mail upptäckt @ ${dateStr}. Detaljer ej tillgängliga.</span>
            </div>
        `;
    } catch (err) {
        console.warn('Error building mail update HTML:', err);
        return '<span class="detail-no-data">Kunde inte hämta mail-detaljer.</span>';
    }
};

// Uppdatera objekt i listan och kontrollera statusändringar
const updateItems = async () => {
    try {
        console.log('Updating items and checking status changes...');
        
        // Hämta objekt från storage
        let items = await getItems();
        
        // Om inga objekt finns, skapa placeholder-objekt
        if (!items || items.length === 0) {
            console.log('No items found, creating placeholders...');
            items = await createPlaceholderItems();
        } else {
            // Skapa en kopia av items-arrayen för att kunna sortera om den
            let updatedItems = [...items];
            const changedItems = [];
            const unchangedItems = [];
            
            // Uppdatera varje objekt och kontrollera statusändringar
            for (let i = 0; i < updatedItems.length; i++) {
                const item = updatedItems[i];
                
                try {
                    console.log(`Checking status for item ${item.id} at URL: ${item.url}`);
                    
                    // Öppna en flik i bakgrunden för att ladda URL:en
                    const tab = await chrome.tabs.create({ 
                        url: item.url, 
                        active: false, // Öppna i bakgrunden
                        pinned: false   // Inte pinnad
                    });
                    
                    console.log(`Created tab ${tab.id} for URL: ${item.url}`);
                    
                    // Vänta på att sidan laddas helt
                    await new Promise((resolve) => {
                        const listener = (tabId, changeInfo) => {
                            if (tabId === tab.id && changeInfo.status === 'complete') {
                                chrome.tabs.onUpdated.removeListener(listener);
                                resolve();
                            }
                        };
                        
                        chrome.tabs.onUpdated.addListener(listener);
                        
                        // Timeout för att undvika att vänta för evigt
                        setTimeout(() => {
                            chrome.tabs.onUpdated.removeListener(listener);
                            resolve();
                        }, 15000);
                    });
                    
                    // Ge sidan lite extra tid att rendera
                    await new Promise(resolve => setTimeout(resolve, 1000));
                    
                    // Injicera content script
                    await chrome.scripting.executeScript({
                        target: { tabId: tab.id },
                        files: ['javascript/contentScripts/sparkTicketScraper.js']
                    });
                    
                    // Ge scriptet tid att initialiseras
                    await new Promise(resolve => setTimeout(resolve, 1000));
                    
                    // Hämta ticket-info från content script
                    const response = await chrome.tabs.sendMessage(tab.id, { action: 'getTicketInfo' });
                    
                    // Stäng fliken
                    chrome.tabs.remove(tab.id);
                    
                    if (response && response.status) {
                        console.log(`Current status for ${item.id}: ${response.status}, previous: ${item.status}`);
                        
                        // Spara tidigare status och uppdatera med ny status
                        const previousStatus = item.status;
                        item.previousStatus = previousStatus;
                        item.status = response.status;
                        item.timestamp = new Date().toISOString();
                        
                        // Kontrollera om status har ändrats
                        if (previousStatus !== response.status) {
                            console.log(`Status changed for item ${item.id}: ${previousStatus} -> ${response.status}`);
                            changedItems.push(item);
                        } else {
                            unchangedItems.push(item);
                        }
                    } else {
                        console.log(`No status found for item ${item.id}, keeping current status`);
                        unchangedItems.push(item);
                    }
                } catch (error) {
                    console.error(`Error updating item ${item.id}:`, error);
                    unchangedItems.push(item);
                }
            }
            
            // Sortera så att ändrade objekt hamnar överst
            updatedItems = [...changedItems, ...unchangedItems];
            
            // Spara uppdaterade objekt
            await saveItems(updatedItems);
            items = updatedItems;
            
            // Om några objekt har ändrat status, skicka notifikation
            if (changedItems.length > 0) {
                console.log(`${changedItems.length} items have changed status, sending notification`);
                
                // Skicka meddelande till service worker om statusändringar
                chrome.runtime.sendMessage({
                    action: 'statusChanged',
                    changedItems: changedItems
                }).catch(error => {
                    console.log('Error sending status change notification:', error);
                });
            }
        }
        
        // Visa uppdaterade objekt
        await displayItems();
        
        console.log('Items updated and displayed with status changes highlighted');
        return items;
    } catch (error) {
        console.error('Error updating items:', error);
        return [];
    }
};

// Rensa alla objekt
const clearItems = async () => {
    try {
        console.log('Clearing all items...');
        
        // Spara tom array
        await saveItems([]);
        
        // Uppdatera visningen
        await displayItems();
        
        console.log('All items cleared');
    } catch (error) {
        console.error('Error clearing items:', error);
    }
};

// Lägg till ett nytt objekt
const addItem = async (item) => {
    try {
        console.log('Adding new item:', item);
        
        // Hämta befintliga objekt
        let items = await getItems();
        
        // Om inga objekt finns, skapa tom array
        if (!items) items = [];
        
        // Lägg till nytt objekt
        items.push({
            ...item,
            id: item.id || generateId(),
            timestamp: item.timestamp || new Date().toISOString()
        });
        
        // Spara uppdaterade objekt
        await saveItems(items);
        
        // Uppdatera visningen
        await displayItems();
        
        console.log('Item added successfully');
    } catch (error) {
        console.error('Error adding item:', error);
    }
};

// Hjälpfunktion för att få CSS-klass baserat på status
const getStatusClass = (status) => {
    if (!status) return 'status-unknown';
    
    const statusLower = status.toLowerCase();
    
    if (statusLower.includes('waiting')) {
        return 'status-waiting';
    } else if (statusLower.includes('progress')) {
        return 'status-progress';
    } else if (statusLower.includes('resolved')) {
        return 'status-resolved';
    } else if (statusLower.includes('ok')) {
        return 'status-ok';
    } else if (statusLower.includes('warning')) {
        return 'status-warning';
    } else if (statusLower.includes('error')) {
        return 'status-error';
    } else {
        return 'status-unknown';
    }
};

// Exportera funktioner
export {
    displayItems,
    updateItems,
    clearItems,
    addItem,
    createPlaceholderItems
};
