class ArchStatusBar extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
    }

    connectedCallback() {
        this.render();
        this.updateStats();
        setInterval(() => this.updateStats(), 1000);
    }

    updateStats() {
        const now = new Date();
        const time = now.toLocaleTimeString('en-US', { hour12: false, hour: '2-digit', minute: '2-digit' });
        
        // Update shadow DOM elements
        const timeEl = this.shadowRoot.querySelector('.clock-time');
        if (timeEl) timeEl.textContent = time;
    }

    render() {
        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    position: fixed;
                    top: 0;
                    left: 0;
                    right: 0;
                    z-index: 100;
                    padding-top: env(safe-area-inset-top, 8px);
                    background: linear-gradient(to bottom, rgba(15, 23, 42, 0.9), transparent);
                }
                .bar {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding: 8px 16px;
                    font-family: 'JetBrains Mono', monospace;
                    font-size: 12px;
                    color: #94a3b8;
                }
                .left {
                    display: flex;
                    align-items: center;
                    gap: 8px;
                    color: #06b6d4;
                    font-weight: 700;
                }
                .center {
                    position: absolute;
                    left: 50%;
                    transform: translateX(-50%);
                    color: #e2e8f0;
                    letter-spacing: 1px;
                }
                .right {
                    display: flex;
                    align-items: center;
                    gap: 12px;
                }
                .icon {
                    width: 14px;
                    height: 14px;
                    stroke-width: 2;
                }
                .battery {
                    display: flex;
                    align-items: center;
                    gap: 4px;
                }
                .battery-level {
                    color: #22d3ee;
                }
                .wifi-icon {
                    color: #22d3ee;
                }
            </style>
            <div class="bar">
                <div class="left">
                    <span>⌘</span>
                    <span>arch</span>
                </div>
                <div class="center clock-time">00:00</div>
                <div class="right">
                    <svg class="icon wifi-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M5 12.55a11 11 0 0 1 14.08 0"></path>
                        <path d="M1.42 9a16 16 0 0 1 21.16 0"></path>
                        <path d="M8.53 16.11a6 6 0 0 1 6.95 0"></path>
                        <line x1="12" y1="20" x2="12.01" y2="20"></line>
                    </svg>
                    <div class="battery">
                        <span class="battery-level">84%</span>
                        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <rect x="2" y="7" width="16" height="10" rx="2" ry="2"></rect>
                            <line x1="22" y1="11" x2="22" y2="13"></line>
                            <path d="M6 11v2" stroke="#22d3ee" stroke-width="3"></path>
                            <path d="M10 11v2" stroke="#22d3ee" stroke-width="3"></path>
                            <path d="M14 11v2" stroke="#22d3ee" stroke-width="3"></path>
                        </svg>
                    </div>
                </div>
            </div>
        `;
    }
}

customElements.define('arch-status-bar', ArchStatusBar);