class BotStats extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .stats-container {
                    background: white;
                    border-radius: 0.5rem;
                    padding: 1rem;
                    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
                }
                .stats-grid {
                    display: grid;
                    grid-template-columns: repeat(2, minmax(0, 1fr));
                    gap: 1rem;
                }
                .stat-item {
                    padding: 0.75rem;
                    border-radius: 0.375rem;
                    background: #f8fafc;
                }
                .stat-value {
                    font-size: 1.25rem;
                    font-weight: 600;
                    margin-top: 0.25rem;
                }
                .stat-label {
                    font-size: 0.75rem;
                    color: #64748b;
                    text-transform: uppercase;
                    letter-spacing: 0.05em;
                }
                .positive { color: #10b981; }
                .negative { color: #ef4444; }
            </style>
            <div class="stats-container">
                <h3 class="text-lg font-semibold mb-4">Performance Dashboard</h3>
                <div class="stats-grid">
                    <div class="stat-item">
                        <div class="stat-label">Win Rate</div>
                        <div class="stat-value positive">82%</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-label">Avg Profit</div>
                        <div class="stat-value positive">3.2%</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-label">Max Drawdown</div>
                        <div class="stat-value negative">12.5%</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-label">Profit Factor</div>
                        <div class="stat-value positive">2.8</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-label">Trades/Month</div>
                        <div class="stat-value">24</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-label">Risk/Reward</div>
                        <div class="stat-value">1:3</div>
                    </div>
                </div>
            </div>
        `;
    }
}
customElements.define('bot-stats', BotStats);