class GameHeader extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.render();
        // Listen to global state updates
        document.addEventListener('state-update', () => this.render());
    }

    render() {
        const isPlaying = state.personaId && !state.gameOver;
        const persona = PERSONAS[state.personaId];
        
        // Debt warning logic (Behavioral Nudge)
        const isDebtCritical = isPlaying && state.stats.debt > 50;
        const criticalClass = isDebtCritical ? 'debt-critical' : '';

        // Dual Wallet Logic (Sunita - Woman)
        const isDualWallet = isPlaying && PERSONAS[state.personaId].special === 'separation_wallets';

        this.shadowRoot.innerHTML = `
            <style>
                @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap');
                .header-box { 
                    display: flex; 
                    justify-content: space-between; 
                    align-items: center; 
                    padding: 1rem; 
                    background: #1e293b; 
                    border-radius: 0.75rem; 
                    border-bottom: 4px solid #f97316;
                    transition: all 0.3s ease;
                }
                .left-section { display: flex; flex-direction: column; }
                .right-section { text-align: right; }
                .time-display { font-size: 0.85rem; color: #94a3b8; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; }
                .persona-info { display: flex; align-items: center; gap: 10px; margin-top: 5px; }
                .avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid #f97316; }
                .persona-name { font-size: 1.1rem; font-weight: 700; color: white; }
                
                .money-display { 
                    font-size: 1.5rem; 
                    font-weight: 800; 
                    color: #f97316; 
                    line-height: 1.1;
                }
                
                .money-label { font-size: 0.7rem; color: #64748b; text-transform: uppercase; }
                
                .debt-alert { 
                    color: #ef4444; 
                    font-size: 0.75rem; 
                    font-weight: bold; 
                    margin-top: 4px; 
                    display: flex; 
                    align-items: center; 
                    justify-content: flex-end;
                    gap: 4px;
                }

                /* Dual Wallet Styles */
                .wallets-container { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
                .wallet-row { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
                .wallet-amount { font-weight: bold; font-family: monospace; font-size: 1.1rem; }
                .wallet-bar-bg { width: 80px; height: 4px; background: #334155; border-radius: 2px; overflow: hidden; }
                .wallet-bar-fill { height: 100%; transition: width 0.5s ease; }
            </style>
            <div class="header-box ${criticalClass}">
                <div class="left-section">
                    ${isPlaying ? `
                        <div class="time-display">Year ${state.year} - Month ${state.month}</div>
                        <div class="persona-info">
                            <img src="${persona.img}" class="avatar">
                            <span class="persona-name">${persona.name}</span>
                        </div>
                    ` : `
                        <div class="text-xl font-bold tracking-wider text-white" style="letter-spacing: 2px;">PAISA YUDDH 💰</div>
                    `}
                </div>
                <div class="right-section">
                    ${isPlaying ? `
                        ${isDualWallet ? this.renderDualWallets() : this.renderSingleWallet()}
                        ${isDebtCritical ? `
                            <div class="debt-alert">
                                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>
                                DEBT TRAP WARNING
                            </div>
                        ` : ''}
                    ` : `<div class="text-slate-500 text-sm">Select Persona</div>`}
                </div>
            </div>
        `;
    }

    renderSingleWallet() {
        return `
            <div class="money-label">Total Balance</div>
            <div class="money-display neon-text">₹${state.money.toLocaleString()}</div>
        `;
    }

    renderDualWallets() {
        // Calculate max for bars (normalized for visuals)
        const maxVal = Math.max(Math.abs(state.money), Math.abs(state.businessCash), 5000);
        
        return `
            <div class="wallets-container">
                <!-- Home Wallet -->
                <div class="wallet-row">
                    <div class="wallet-amount text-orange-400">₹${state.money.toLocaleString()}</div>
                    <div class="wallet-bar-bg">
                        <div class="wallet-bar-fill" style="width: ${Math.min(100, (Math.max(0, state.money) / maxVal) * 100)}%; background: #f97316;"></div>
                    </div>
                </div>
                <!-- Business Wallet -->
                <div class="wallet-row">
                    <div class="wallet-amount text-green-400">₹${state.businessCash.toLocaleString()}</div>
                    <div class="wallet-bar-bg">
                        <div class="wallet-bar-fill" style="width: ${Math.min(100, (Math.max(0, state.businessCash) / maxVal) * 100)}%; background: #22c55e;"></div>
                    </div>
                </div>
                <div class="text-[0.6rem] text-slate-500 mt-1">HOME vs BUSINESS</div>
            </div>
        `;
    }
}
customElements.define('game-header', GameHeader);