class CustomTaskBoard extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .task-column {
                    min-height: 300px;
                    background: rgba(30, 30, 45, 0.5);
                }
                
                .task-item {
                    transition: all 0.2s ease;
                }
                
                .task-item:hover {
                    transform: translateY(-2px);
                    box-shadow: 0 4px 6px -1px rgba(79, 70, 229, 0.3);
                }
                
                .task-pending { border-left: 4px solid #f59e0b; }
                .task-progress { border-left: 4px solid #3b82f6; }
                .task-completed { border-left: 4px solid #10b981; }
            </style>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div class="task-column rounded-lg p-4">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="font-medium text-yellow-400">Pending</h3>
                        <span class="bg-yellow-900 text-yellow-100 text-xs px-2 py-1 rounded-full">3 tasks</span>
                    </div>
                    
                    <div class="space-y-3">
                        <div class="task-item task-pending bg-gray-800 p-4 rounded-lg">
                            <h4 class="font-medium text-white">Data collection</h4>
                            <p class="text-sm text-gray-400 mt-1">Gather customer feedback from social media</p>
                            <div class="flex items-center justify-between mt-3">
                                <span class="text-xs text-gray-500">Assigned to Data Miner</span>
                                <button class="text-yellow-400 hover:text-yellow-300 text-xs">
                                    <i data-feather="chevron-right"></i>
                                </button>
                            </div>
                        </div>
                        
                        <div class="task-item task-pending bg-gray-800 p-4 rounded-lg">
                            <h4 class="font-medium text-white">Security audit</h4>
                            <p class="text-sm text-gray-400 mt-1">Check for vulnerabilities in API endpoints</p>
                            <div class="flex items-center justify-between mt-3">
                                <span class="text-xs text-gray-500">Unassigned</span>
                                <button class="text-yellow-400 hover:text-yellow-300 text-xs">
                                    <i data-feather="chevron-right"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="task-column rounded-lg p-4">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="font-medium text-blue-400">In Progress</h3>
                        <span class="bg-blue-900 text-blue-100 text-xs px-2 py-1 rounded-full">2 tasks</span>
                    </div>
                    
                    <div class="space-y-3">
                        <div class="task-item task-progress bg-gray-800 p-4 rounded-lg">
                            <h4 class="font-medium text-white">Sentiment analysis</h4>
                            <p class="text-sm text-gray-400 mt-1">Process customer feedback data</p>
                            <div class="flex items-center justify-between mt-3">
                                <span class="text-xs text-gray-500">Assigned to Customer Scout</span>
                                <button class="text-blue-400 hover:text-blue-300 text-xs">
                                    <i data-feather="chevron-right"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="task-column rounded-lg p-4">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="font-medium text-green-400">Completed</h3>
                        <span class="bg-green-900 text-green-100 text-xs px-2 py-1 rounded-full">5 tasks</span>
                    </div>
                    
                    <div class="space-y-3">
                        <div class="task-item task-completed bg-gray-800 p-4 rounded-lg">
                            <h4 class="font-medium text-white">Market research</h4>
                            <p class="text-sm text-gray-400 mt-1">Competitor analysis completed</p>
                            <div class="flex items-center justify-between mt-3">
                                <span class="text-xs text-gray-500">Assigned to Data Miner</span>
                                <button class="text-green-400 hover:text-green-300 text-xs">
                                    <i data-feather="check"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        `;
    }
}

customElements.define('custom-task-board', CustomTaskBoard);