import { WindowManager } from './window_manager.js';

export const PlayersOverlay = {
    open() {
        const { win, content } = WindowManager.create('window-players', '👥 Players', { x: 20, y: 120, width: 200, height: 200 });
        this.update(content);
    },

    update(container) {
        if (!container) container = document.getElementById('window-players-content');
        if (!container) return;

        const MB = window.MagicBot;
        if (!MB || !MB.state || !MB.state.players) {
            container.innerHTML = '<div style="color:red">No Data</div>';
            return;
        }

        container.innerHTML = '';
        const list = document.createElement('div');
        list.style.cssText = "display: flex; flex-direction: column; gap: 4px; font-size: 11px;";

        MB.state.players.forEach(p => {
            const isSelf = p.id === MB.state.playerId;
            const color = p.isConnected ? '#66bb6a' : '#666';
            const row = document.createElement('div');
            row.style.cssText = `background: rgba(255,255,255,${isSelf ? '0.1' : '0.05'}); padding: 4px; border-radius: 4px; display: flex; align-items: center; gap: 8px;`;
            row.innerHTML = `<div style="width:8px; height:8px; border-radius:50%; background:${color};"></div><span style="color:${isSelf ? '#448aff' : '#eee'}; font-weight:${isSelf ? 'bold' : 'normal'};">${p.name}</span>`;
            list.appendChild(row);
        });

        container.appendChild(list);
    }
};