components/header.js

class MetroHeader extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    display: block;
                    margin-bottom: 2rem;
                }
                
                .header-content {
                    display: flex;
                    flex-direction: column;
                    gap: 1.5rem;
                }
                
                @media (min-width: 768px) {
                    .header-content {
                        flex-direction: row;
                        justify-content: space-between;
                        align-items: center;
                    }
                }
                
                .welcome-text h1 {
                    font-size: 1.875rem;
                    font-weight: 800;
                    background: linear-gradient(135deg, #ffffff 0%, #94a3b8 100%);
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                    background-clip: text;
                    margin-bottom: 0.5rem;
                }
                
                .welcome-text p {
                    color: #9ca3af;
                }
                
                .header-actions {
                    display: flex;
                    flex-direction: column;
                    gap: 1rem;
                }
                
                @media (min-width: 640px) {
                    .header-actions {
                        flex-direction: row;
                        align-items: center;
                    }
                }
                
                .search-container {
                    position: relative;
                    flex: 1;
                    max-width: 400px;
                }
                
                .search-input {
                    width: 100%;
                    padding: 0.75rem 1rem 0.75rem 2.75rem;
                    background: rgba(255, 255, 255, 0.05);
                    border: 1px solid rgba(255, 255, 255, 0.1);
                    border-radius: 0.75rem;
                    color: #ffffff;
                    font-size: 0.875rem;
                    transition: all 0.2s;
                }
                
                .search-input:focus {
                    outline: none;
                    border-color: rgba(14, 165, 233, 0.5);
                    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
                }
                
                .search-icon {
                    position: absolute;
                    left: 1rem;
                    top: 50%;
                    transform: translateY(-50%);
                    color: #6b7280;
                }
                
                .action-buttons {
                    display: flex;
                    gap: 0.75rem;
                }
                
                .action-btn {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 2.5rem;
                    height: 2.5rem;
                    background: rgba(255, 255, 255, 0.05);
                    border: 1px solid rgba(255, 255, 255, 0.1);
                    border-radius: 0.75rem;
                    color: #9ca3af;
                    transition: all 0.2s;
                    cursor: pointer;
                }
                
                .action-btn:hover {
                    background: rgba(255, 255, 255, 0.1);
                    color: #ffffff;
                    transform: translateY(-1px);
                }
                
                .action-btn.notification {
                    position: relative;
                }
                
                .notification-badge {
                    position: absolute;
                    top: -0.25rem;
                    right: -0.25rem;
                    width: 0.75rem;
                    height: 0.75rem;
                    background: #ef4444;
                    border-radius: 50%;
                    border: 2px solid #1f2937;
                }
                
                .date-badge {
                    background: linear-gradient(135deg, #0ea5e9 0%, #d946ef 100%);
                    color: white;
                    padding: 0.5rem 1rem;
                    border-radius: 0.75rem;
                    font-size: 0.875rem;
                    font-weight: 500;
                    white-space: nowrap;
                }
            </style>
            
            <div class="header-content">
                <div class="welcome-text">
                    <h1>Welcome back, Admin</h1>
                    <p>Here's what's happening with your platform today.</p>
                </div>
                
                <div class="header-actions">
                    <div class="search-container">
                        <i data-feather="search" class="search-icon w-4 h-4"></i>
                        <input 
                            type="search" 
                            class="search-input" 
                            placeholder="Search anything..."
                            aria-label="Search"
                        >
                    </div>
                    
                    <div class="action-buttons">
                        <button class="action-btn notification" aria-label="Notifications">
                            <i data-feather="bell"></i>
                            <span class="notification-badge"></span>
                        </button>
                        
                        <button class="action-btn" aria-label="Calendar">
                            <i data-feather="calendar"></i>
                        </button>
                        
                        <button class="action-btn" aria-label="Settings">
                            <i data-feather="settings"></i>
                        </button>
                    </div>
                    
                    <div class="date-badge">
                        <span id="current-date"></span>
                    </div>
                </div>
            </div>
        `;
        
        const currentDateElement = this.shadowRoot.getElementById('current-date');
        if (currentDateElement) {
            const now = new Date();
            const options = { weekday: 'short', month: 'short', day: 'numeric' };
            currentDateElement.textContent = now.toLocaleDateString('en-US', options);
        }
        
        const searchInput = this.shadowRoot.querySelector('.search-input');
        if (searchInput) {
            searchInput.addEventListener('input', (e) => {
                console.log('Searching for:', e.target.value);
            });
        }
        
        const notificationBtn = this.shadowRoot.querySelector('.notification');
        if (notificationBtn) {
            notificationBtn.addEventListener('click', () => {
                window.MetroPulse?.showNotification('You have 3 new notifications', 'info');
            });
        }
        
        setTimeout(() => {
            const icons = this.shadowRoot.querySelectorAll('[data-feather]');
            icons.forEach(icon => {
                feather.replace();
            });
        }, 100);
    }
}

customElements.define('metro-header', MetroHeader);