class CustomBotControls extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .control-panel {
                    background: rgba(31, 41, 55, 0.5);
                    border: 1px solid rgba(255, 255, 255, 0.1);
                    border-radius: 0.75rem;
                    padding: 1.5rem;
                }
                .panel-header {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-bottom: 1.5rem;
                }
                .status-badge {
                    display: inline-flex;
                    align-items: center;
                    gap: 0.5rem;
                    padding: 0.375rem 0.75rem;
                    border-radius: 9999px;
                    font-size: 0.875rem;
                    font-weight: 500;
                }
                .btn {
                    display: inline-flex;
                    align-items: center;
                    gap: 0.5rem;
                    padding: 0.5rem 1rem;
                    border-radius: 0.375rem;
                    font-weight: 500;
                    cursor: pointer;
                    transition: all 0.2s;
                    border: none;
                }
                .btn-primary {
                    background-color: #8b5cf6;
                    color: white;
                }
                .btn-warning {
                    background-color: #f59e0b;
                    color: white;
                }
                .btn-warning:hover {
                    background-color: #d97706;
                }
.btn-primary:hover {
                    background-color: #7c3aed;
                }
                .btn-danger {
                    background-color: #ef4444;
                    color: white;
                }
                .btn-danger:hover {
                    background-color: #dc2626;
                }
                .btn-secondary {
                    background-color: #374151;
                    color: white;
                }
                .btn-secondary:hover {
                    background-color: #4b5563;
                }
                .btn:disabled {
                    opacity: 0.5;
                    cursor: not-allowed;
                }
                .btn-group {
                    display: flex;
                    gap: 0.75rem;
                }
                .log-container {
                    margin-top: 1.5rem;
                    background: rgba(17, 24, 39, 0.7);
                    border-radius: 0.5rem;
                    padding: 1rem;
                    max-height: 200px;
                    overflow-y: auto;
                    border: 1px solid rgba(255, 255, 255, 0.1);
                }
                .log-title {
                    font-size: 0.875rem;
                    color: #9ca3af;
                    margin-bottom: 0.5rem;
                    display: flex;
                    align-items: center;
                    gap: 0.5rem;
                }
                .action-buttons {
                    display: flex;
                    gap: 0.75rem;
                    margin-top: 1.5rem;
                }
                .bot-icon {
                    width: 1.25rem;
                    height: 1.25rem;
                }
                @media (max-width: 640px) {
                    .btn-group {
                        flex-direction: column;
                    }
                    .action-buttons {
                        flex-direction: column;
                    }
                }
            </style>
            <div class="control-panel">
                <div class="panel-header">
                    <h2 class="text-xl font-semibold flex items-center gap-2">
                        <i data-feather="bot" class="bot-icon"></i>
                        Bot Controls
                    </h2>
                    <span id="bot-status" class="status-badge bg-red-500 text-white px-3 py-1 rounded-full text-sm">
                        Stopped
                    </span>
                </div>
                
                <div class="btn-group">
                    <button id="start-bot" class="btn btn-primary">
                        <i data-feather="play"></i>
                        Start Bot
                    </button>
                    <button id="stop-bot" class="btn btn-danger" disabled>
                        <i data-feather="square"></i>
                        Stop Bot
                    </button>
                </div>
                <div class="action-buttons">
                    <button id="check-points" class="btn btn-warning">
<i data-feather="shield"></i>
                        Verify Points
                    </button>
                    <button id="send-images" class="btn btn-secondary" disabled>
                        <i data-feather="send"></i>
                        Send Images to Chat
                    </button>
                    <button id="save-images" class="btn btn-secondary" disabled>
                        <i data-feather="save"></i>
                        Save to User Messages
                    </button>
                </div>
<div class="log-container">
                    <div class="log-title">
                        <i data-feather="activity"></i>
                        Bot Activity Logs
                    </div>
                    <div id="bot-logs">
                        <div class="text-sm text-gray-400 py-2">Bot is currently inactive. Start the bot to see activity logs.</div>
                    </div>
                </div>
            </div>
        `;
    }
}
customElements.define('custom-bot-controls', CustomBotControls);