document.addEventListener('DOMContentLoaded', function () {
    const searchContainer = document.createElement('div');
    searchContainer.id = 'globalSearchContainer';
    searchContainer.style.cssText = `
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0.5);
        display: none;
        align-items: flex-start;
        justify-content: center;
        z-index: 2000;
        padding-top: 72px;
    `;

    searchContainer.innerHTML = `
        <div style="
            background: white;
            border-radius: 12px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
            width: 90%;
            max-width: 500px;
        ">
            <input type="text" id="globalSearchInput" placeholder="Search pages, functions... (Ctrl+K)" style="
                width: 100%;
                padding: 16px;
                border: none;
                border-radius: 12px 12px 0 0;
                font-size: 16px;
                outline: none;
                box-sizing: border-box;
            ">
            <div id="globalSearchResults" style="
                max-height: 400px;
                overflow-y: auto;
                padding: 0;
            "></div>
        </div>
    `;

    document.body.appendChild(searchContainer);

    const searchInput = document.getElementById('globalSearchInput');
    const searchResults = document.getElementById('globalSearchResults');

    const pages = [
        { title: 'Dashboard', url: '/static/index.html', icon: 'speedometer2' },
        { title: 'Sales', url: '/static/sales.html', icon: 'cart' },
        { title: 'Invoices', url: '/static/invoices.html', icon: 'receipt' },
        { title: 'Customers', url: '/static/customers.html', icon: 'people' },
        { title: 'Products', url: '/static/products.html', icon: 'box' },
        { title: 'Purchases', url: '/static/purchases.html', icon: 'download' },
        { title: 'Accounting', url: '/static/accounting.html', icon: 'calculator' },
        { title: 'Reports', url: '/static/reports.html', icon: 'graph-up' },
        { title: 'Bank Accounts', url: '/static/bank-accounts.html', icon: 'bank' },
        { title: 'Journal Entries', url: '/static/journal-entries.html', icon: 'book' },
        { title: 'Chart of Accounts', url: '/static/chart-of-accounts.html', icon: 'list-ul' },
        { title: 'Manufacturing', url: '/static/manufacturing.html?v=20260602', icon: 'gear' },
        { title: 'Inventory', url: '/static/inventory-reports.html', icon: 'boxes' },
        { title: 'Settings', url: '/static/settings.html', icon: 'sliders' },
        { title: 'Users', url: '/static/users.html', icon: 'person-circle' },
    ];

    // Open search on Ctrl+K or Cmd+K
    document.addEventListener('keydown', function (e) {
        if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
            e.preventDefault();
            searchContainer.style.display = 'flex';
            searchInput.focus();
            searchInput.value = '';
            searchResults.innerHTML = '<div style="padding: 16px; color: #999;">Start typing to search...</div>';
        }
    });

    // Close search on Escape
    document.addEventListener('keydown', function (e) {
        if (e.key === 'Escape') {
            searchContainer.style.display = 'none';
            searchInput.value = '';
        }
    });

    // Close when clicking outside
    searchContainer.addEventListener('click', function (e) {
        if (e.target === searchContainer) {
            searchContainer.style.display = 'none';
        }
    });

    // Search functionality
    searchInput.addEventListener('input', function (e) {
        const query = e.target.value.toLowerCase();
        searchResults.innerHTML = '';

        if (query.length === 0) {
            searchResults.innerHTML = '<div style="padding: 16px; color: #999;">Start typing to search...</div>';
            return;
        }

        const filtered = pages.filter(p =>
            p.title.toLowerCase().includes(query) ||
            p.url.toLowerCase().includes(query)
        );

        if (filtered.length === 0) {
            searchResults.innerHTML = '<div style="padding: 16px; color: #999;">No results found</div>';
            return;
        }

        filtered.forEach(page => {
            const item = document.createElement('a');
            item.href = page.url;
            item.style.cssText = `
                display: flex;
                align-items: center;
                gap: 12px;
                padding: 12px 16px;
                border-bottom: 1px solid #f0f0f0;
                color: #333;
                text-decoration: none;
                transition: background-color 0.2s;
            `;
            item.innerHTML = `
                <i class="bi bi-${page.icon}"></i>
                <span>${page.title}</span>
            `;
            item.addEventListener('click', function () {
                searchContainer.style.display = 'none';
            });
            item.addEventListener('mouseenter', function () {
                this.style.backgroundColor = '#f8f9fa';
            });
            item.addEventListener('mouseleave', function () {
                this.style.backgroundColor = 'transparent';
            });
            searchResults.appendChild(item);
        });
    });

    // Show hint on load
    setTimeout(function () {
        searchResults.innerHTML = '<div style="padding: 16px; color: #999; text-align: center;">Press Ctrl+K to search</div>';
    }, 0);
});
