class CustomMiningDashboard extends HTMLElement {
    constructor() {
        super();
    }

    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .mining-card {
                    background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
                    transition: transform 0.3s ease;
                }
                .mining-card:hover {
                    transform: translateY(-5px);
                }
                .progress-bar {
                    height: 10px;
                    background: linear-gradient(90deg, #f6ad55 0%, #f687b3 100%);
                    animation: progress 2s ease-in-out infinite;
                }
                @keyframes progress {
                    0% { background-position: 0% 50%; }
                    50% { background-position: 100% 50%; }
                    100% { background-position: 0% 50%; }
                }
            </style>
            <div class="mining-card rounded-xl shadow-lg overflow-hidden border border-gray-700">
                <div class="bg-gray-800 px-6 py-4 border-b border-gray-700">
                    <h2 class="text-xl font-bold flex items-center">
                        <i data-feather="cpu" class="mr-2 text-yellow-400"></i> Mining Dashboard
                    </h2>
                </div>
                <div class="p-6">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                        <div class="bg-gray-800 rounded-lg p-4 shadow">
                            <div class="flex items-center justify-between mb-2">
                                <h3 class="text-lg font-semibold">Mining Status</h3>
                                <span id="miningStatus" class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-900 text-green-200">
                                    <span class="h-2 w-2 rounded-full bg-green-400 mr-1"></span>
                                    Ready
                                </span>
                            </div>
                            <div class="flex space-x-4 mt-4">
                                <button id="startMiningBtn" onclick="startMining()" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-md flex items-center">
                                    <i data-feather="play" class="mr-2"></i> Start Mining
                                </button>
                                <button id="stopMiningBtn" onclick="stopMining()" class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-md flex items-center hidden">
                                    <i data-feather="stop-circle" class="mr-2"></i> Stop Mining
                                </button>
                            </div>
                        </div>
                        <div class="bg-gray-800 rounded-lg p-4 shadow">
                            <h3 class="text-lg font-semibold mb-2">Mining Statistics</h3>
                            <div class="space-y-3">
                                <div class="flex justify-between">
                                    <span class="text-gray-400">Hash Rate:</span>
                                    <span class="font-mono" id="miningPowerValue">1.00</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-gray-400">Mined BTC:</span>
                                    <span class="font-mono" id="minedAmount">0.00000000</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-gray-400">Estimated Daily:</span>
                                    <span class="font-mono">0.00001234 BTC</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="bg-gray-800 rounded-lg p-4 shadow mb-6">
                        <h3 class="text-lg font-semibold mb-4">Mining Progress</h3>
                        <div class="mb-2 flex justify-between text-sm">
                            <span>Current Block: 789,456</span>
                            <span>Next Block ETA: 4m 23s</span>
                        </div>
                        <div class="w-full bg-gray-700 rounded-full h-2.5 mb-2">
                            <div class="progress-bar h-2.5 rounded-full" style="width: 45%"></div>
                        </div>
                        <div class="text-xs text-gray-400">Processing shares: 124/256</div>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <button onclick="upgradeMiningPower()" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-3 rounded-md flex items-center justify-between">
                            <div class="flex items-center">
                                <i data-feather="zap" class="mr-2"></i>
                                <span>Upgrade Mining Power</span>
                            </div>
                            <span class="text-xs bg-blue-800 px-2 py-1 rounded">0.0001 BTC</span>
                        </button>
                        <button onclick="withdrawToWallet()" class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-3 rounded-md flex items-center justify-between">
                            <div class="flex items-center">
                                <i data-feather="dollar-sign" class="mr-2"></i>
                                <span>Withdraw to Wallet</span>
                            </div>
                            <span class="text-xs bg-purple-800 px-2 py-1 rounded">Min 0.00005 BTC</span>
                        </button>
                    </div>
                </div>
            </div>
            <script>feather.replace();</script>
        `;
    }
}

customElements.define('custom-mining-dashboard', CustomMiningDashboard);