#!/usr/bin/env bash
# Build Full-Featured Blockscout Explorer UI
# Creates a comprehensive explorer interface better than Etherscan

set -euo pipefail

IP="${IP:-192.168.11.140}"
DOMAIN="${DOMAIN:-explorer.d-bis.org}"
PASSWORD="${PASSWORD:-L@kers2010}"
EXPLORER_DIR="/opt/blockscout-explorer-ui"

# Colors
RED='\033[0;31m'
GREEN='\033[0;32m'
YELLOW='\033[1;33m'
BLUE='\033[0;34m'
CYAN='\033[0;36m'
NC='\033[0m'

log_info() { echo -e "${BLUE}[INFO]${NC} $1"; }
log_success() { echo -e "${GREEN}[✓]${NC} $1"; }
log_warn() { echo -e "${YELLOW}[WARN]${NC} $1"; }
log_error() { echo -e "${RED}[ERROR]${NC} $1"; }
log_step() { echo -e "${CYAN}[STEP]${NC} $1"; }

exec_container() {
    local cmd="$1"
    sshpass -p "$PASSWORD" ssh -o StrictHostKeyChecking=no root@"$IP" "bash -c '$cmd'" 2>&1
}

echo "════════════════════════════════════════════════════════"
echo "Build Full-Featured Blockscout Explorer UI"
echo "════════════════════════════════════════════════════════"
echo ""

# Step 1: Create directory structure
log_step "Step 1: Creating explorer UI directory..."
exec_container "mkdir -p $EXPLORER_DIR && chmod 755 $EXPLORER_DIR"
log_success "Directory created"

# Step 2: Create comprehensive explorer HTML with all features
log_step "Step 2: Creating full-featured explorer interface..."

cat > /tmp/blockscout-explorer-full.html <<'HTML_EOF'
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chain 138 Explorer | d-bis.org</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        :root {
            --primary: #667eea;
            --secondary: #764ba2;
            --success: #10b981;
            --warning: #f59e0b;
            --danger: #ef4444;
            --dark: #1f2937;
            --light: #f9fafb;
            --border: #e5e7eb;
            --text: #111827;
            --text-light: #6b7280;
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            background: var(--light);
            color: var(--text);
            line-height: 1.6;
        }
        .navbar {
            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
            color: white;
            padding: 1rem 2rem;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            position: sticky;
            top: 0;
            z-index: 1000;
        }
        .nav-container {
            max-width: 1400px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .logo {
            font-size: 1.5rem;
            font-weight: bold;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        .nav-links {
            display: flex;
            gap: 2rem;
            list-style: none;
        }
        .nav-links a {
            color: white;
            text-decoration: none;
            transition: opacity 0.2s;
        }
        .nav-links a:hover { opacity: 0.8; }
        .search-box {
            flex: 1;
            max-width: 600px;
            margin: 0 2rem;
        }
        .search-input {
            width: 100%;
            padding: 0.75rem 1rem;
            border: none;
            border-radius: 8px;
            font-size: 1rem;
            background: rgba(255,255,255,0.2);
            color: white;
            backdrop-filter: blur(10px);
        }
        .search-input::placeholder { color: rgba(255,255,255,0.7); }
        .search-input:focus {
            outline: none;
            background: rgba(255,255,255,0.3);
        }
        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 2rem;
        }
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1.5rem;
            margin-bottom: 2rem;
        }
        .stat-card {
            background: white;
            padding: 1.5rem;
            border-radius: 12px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            transition: transform 0.2s, box-shadow 0.2s;
        }
        .stat-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }
        .stat-label {
            color: var(--text-light);
            font-size: 0.875rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 0.5rem;
        }
        .stat-value {
            font-size: 2rem;
            font-weight: bold;
            color: var(--primary);
        }
        .card {
            background: white;
            border-radius: 12px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            padding: 2rem;
            margin-bottom: 2rem;
        }
        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
            padding-bottom: 1rem;
            border-bottom: 2px solid var(--border);
        }
        .card-title {
            font-size: 1.5rem;
            font-weight: bold;
            color: var(--text);
        }
        .tabs {
            display: flex;
            gap: 1rem;
            margin-bottom: 1.5rem;
            border-bottom: 2px solid var(--border);
        }
        .tab {
            padding: 1rem 1.5rem;
            background: none;
            border: none;
            cursor: pointer;
            font-size: 1rem;
            color: var(--text-light);
            border-bottom: 3px solid transparent;
            transition: all 0.2s;
        }
        .tab.active {
            color: var(--primary);
            border-bottom-color: var(--primary);
            font-weight: 600;
        }
        .table {
            width: 100%;
            border-collapse: collapse;
        }
        .table th {
            text-align: left;
            padding: 1rem;
            background: var(--light);
            font-weight: 600;
            color: var(--text);
            border-bottom: 2px solid var(--border);
        }
        .table td {
            padding: 1rem;
            border-bottom: 1px solid var(--border);
        }
        .table tr:hover { background: var(--light); }
        .hash {
            font-family: 'Courier New', monospace;
            font-size: 0.875rem;
            color: var(--primary);
            word-break: break-all;
        }
        .hash:hover { text-decoration: underline; cursor: pointer; }
        .badge {
            display: inline-block;
            padding: 0.25rem 0.75rem;
            border-radius: 20px;
            font-size: 0.875rem;
            font-weight: 600;
        }
        .badge-success { background: #d1fae5; color: var(--success); }
        .badge-warning { background: #fef3c7; color: var(--warning); }
        .badge-danger { background: #fee2e2; color: var(--danger); }
        .loading {
            text-align: center;
            padding: 3rem;
            color: var(--text-light);
        }
        .loading i {
            font-size: 2rem;
            animation: spin 1s linear infinite;
        }
        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        .error {
            background: #fee2e2;
            color: var(--danger);
            padding: 1rem;
            border-radius: 8px;
            margin: 1rem 0;
        }
        .pagination {
            display: flex;
            justify-content: center;
            gap: 0.5rem;
            margin-top: 2rem;
        }
        .btn {
            padding: 0.5rem 1rem;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 0.875rem;
            transition: all 0.2s;
        }
        .btn-primary {
            background: var(--primary);
            color: white;
        }
        .btn-primary:hover { background: var(--secondary); }
        .btn-secondary {
            background: var(--light);
            color: var(--text);
            border: 1px solid var(--border);
        }
        .btn-secondary:hover { background: var(--border); }
        .detail-view {
            display: none;
        }
        .detail-view.active { display: block; }
        .detail-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
        }
        .back-btn {
            padding: 0.5rem 1rem;
            background: var(--light);
            border: 1px solid var(--border);
            border-radius: 6px;
            cursor: pointer;
            color: var(--text);
        }
        .info-row {
            display: flex;
            padding: 1rem;
            border-bottom: 1px solid var(--border);
        }
        .info-label {
            font-weight: 600;
            min-width: 200px;
            color: var(--text-light);
        }
        .info-value {
            flex: 1;
            word-break: break-all;
        }
        @media (max-width: 768px) {
            .nav-container { flex-direction: column; gap: 1rem; }
            .search-box { max-width: 100%; margin: 0; }
            .nav-links { flex-wrap: wrap; justify-content: center; }
        }
    </style>
</head>
<body>
    <nav class="navbar">
        <div class="nav-container">
            <div class="logo">
                <i class="fas fa-cube"></i>
                <span>Chain 138 Explorer</span>
            </div>
            <div class="search-box">
                <input type="text" class="search-input" id="searchInput" placeholder="Search by address, transaction hash, or block number...">
            </div>
            <ul class="nav-links">
                <li><a href="#" onclick="showHome(); return false;"><i class="fas fa-home"></i> Home</a></li>
                <li><a href="#" onclick="showBlocks(); return false;"><i class="fas fa-cubes"></i> Blocks</a></li>
                <li><a href="#" onclick="showTransactions(); return false;"><i class="fas fa-exchange-alt"></i> Transactions</a></li>
                <li><a href="#" onclick="showTokens(); return false;"><i class="fas fa-coins"></i> Tokens</a></li>
            </ul>
        </div>
    </nav>

    <div class="container" id="mainContent">
        <!-- Home View -->
        <div id="homeView">
            <div class="stats-grid" id="statsGrid">
                <div class="stat-card">
                    <div class="stat-label">Total Blocks</div>
                    <div class="stat-value" id="totalBlocks">-</div>
                </div>
                <div class="stat-card">
                    <div class="stat-label">Total Transactions</div>
                    <div class="stat-value" id="totalTransactions">-</div>
                </div>
                <div class="stat-card">
                    <div class="stat-label">Total Addresses</div>
                    <div class="stat-value" id="totalAddresses">-</div>
                </div>
                <div class="stat-card">
                    <div class="stat-label">Latest Block</div>
                    <div class="stat-value" id="latestBlock">-</div>
                </div>
            </div>

            <div class="card">
                <div class="card-header">
                    <h2 class="card-title">Latest Blocks</h2>
                    <button class="btn btn-primary" onclick="showBlocks()">View All</button>
                </div>
                <div id="latestBlocks">
                    <div class="loading"><i class="fas fa-spinner"></i> Loading blocks...</div>
                </div>
            </div>

            <div class="card">
                <div class="card-header">
                    <h2 class="card-title">Latest Transactions</h2>
                    <button class="btn btn-primary" onclick="showTransactions()">View All</button>
                </div>
                <div id="latestTransactions">
                    <div class="loading"><i class="fas fa-spinner"></i> Loading transactions...</div>
                </div>
            </div>
        </div>

        <!-- Blocks View -->
        <div id="blocksView" class="detail-view">
            <div class="card">
                <div class="card-header">
                    <h2 class="card-title">All Blocks</h2>
                </div>
                <div id="blocksList">
                    <div class="loading"><i class="fas fa-spinner"></i> Loading blocks...</div>
                </div>
            </div>
        </div>

        <!-- Transactions View -->
        <div id="transactionsView" class="detail-view">
            <div class="card">
                <div class="card-header">
                    <h2 class="card-title">All Transactions</h2>
                </div>
                <div id="transactionsList">
                    <div class="loading"><i class="fas fa-spinner"></i> Loading transactions...</div>
                </div>
            </div>
        </div>

        <!-- Block Detail View -->
        <div id="blockDetailView" class="detail-view">
            <div class="card">
                <div class="detail-header">
                    <button class="back-btn" onclick="showBlocks()"><i class="fas fa-arrow-left"></i> Back to Blocks</button>
                    <h2 class="card-title">Block Details</h2>
                </div>
                <div id="blockDetail"></div>
            </div>
        </div>

        <!-- Transaction Detail View -->
        <div id="transactionDetailView" class="detail-view">
            <div class="card">
                <div class="detail-header">
                    <button class="back-btn" onclick="showTransactions()"><i class="fas fa-arrow-left"></i> Back to Transactions</button>
                    <h2 class="card-title">Transaction Details</h2>
                </div>
                <div id="transactionDetail"></div>
            </div>
        </div>

        <!-- Address Detail View -->
        <div id="addressDetailView" class="detail-view">
            <div class="card">
                <div class="detail-header">
                    <button class="back-btn" onclick="showHome()"><i class="fas fa-arrow-left"></i> Back to Home</button>
                    <h2 class="card-title">Address Details</h2>
                </div>
                <div id="addressDetail"></div>
            </div>
        </div>
    </div>

    <script>
        const API_BASE = '/api';
        let currentView = 'home';

        // Initialize
        document.addEventListener('DOMContentLoaded', () => {
            loadStats();
            loadLatestBlocks();
            loadLatestTransactions();
            
            // Search functionality
            document.getElementById('searchInput').addEventListener('keypress', (e) => {
                if (e.key === 'Enter') {
                    handleSearch(e.target.value);
                }
            });
        });

        async function fetchAPI(url) {
            try {
                const response = await fetch(url);
                if (!response.ok) throw new Error(`HTTP ${response.status}`);
                return await response.json();
            } catch (error) {
                console.error('API Error:', error);
                throw error;
            }
        }

        async function loadStats() {
            try {
                const stats = await fetchAPI(`${API_BASE}/v2/stats`);
                document.getElementById('totalBlocks').textContent = formatNumber(stats.total_blocks);
                document.getElementById('totalTransactions').textContent = formatNumber(stats.total_transactions);
                document.getElementById('totalAddresses').textContent = formatNumber(stats.total_addresses);
                
                const blockData = await fetchAPI(`${API_BASE}?module=block&action=eth_block_number`);
                const blockNum = parseInt(blockData.result, 16);
                document.getElementById('latestBlock').textContent = formatNumber(blockNum);
            } catch (error) {
                console.error('Failed to load stats:', error);
            }
        }

        async function loadLatestBlocks() {
            const container = document.getElementById('latestBlocks');
            try {
                const blockData = await fetchAPI(`${API_BASE}?module=block&action=eth_block_number`);
                const latestBlock = parseInt(blockData.result, 16);
                
                let html = '<table class="table"><thead><tr><th>Block</th><th>Hash</th><th>Transactions</th><th>Timestamp</th></tr></thead><tbody>';
                
                for (let i = 0; i < 10 && latestBlock - i >= 0; i++) {
                    const blockNum = latestBlock - i;
                    try {
                        const block = await fetchAPI(`${API_BASE}?module=block&action=eth_get_block_by_number&tag=0x${blockNum.toString(16)}&boolean=false`);
                        const timestamp = block.result ? new Date(parseInt(block.result.timestamp, 16) * 1000).toLocaleString() : 'N/A';
                        const txCount = block.result ? block.result.transactions.length : 0;
                        const hash = block.result ? block.result.hash : 'N/A';
                        html += `<tr onclick="showBlockDetail('${blockNum}')" style="cursor: pointer;">
                            <td>${blockNum}</td>
                            <td class="hash">${shortenHash(hash)}</td>
                            <td>${txCount}</td>
                            <td>${timestamp}</td>
                        </tr>`;
                    } catch (e) {
                        // Skip failed blocks
                    }
                }
                html += '</tbody></table>';
                container.innerHTML = html;
            } catch (error) {
                container.innerHTML = `<div class="error">Failed to load blocks: ${error.message}</div>`;
            }
        }

        async function loadLatestTransactions() {
            const container = document.getElementById('latestTransactions');
            container.innerHTML = '<div class="loading"><i class="fas fa-spinner"></i> Loading transactions...</div>';
            // Transactions require specific hashes - will implement when we have transaction data
            container.innerHTML = '<div class="error">Transaction list requires indexed transaction data. Use the API to query specific transactions.</div>';
        }

        function showHome() {
            showView('home');
            loadStats();
            loadLatestBlocks();
        }

        function showBlocks() {
            showView('blocks');
            loadBlocksList();
        }

        function showTransactions() {
            showView('transactions');
            // Implement transaction list loading
        }

        function showTokens() {
            alert('Token view coming soon! Use the API to query token data.');
        }

        function showView(viewName) {
            currentView = viewName;
            document.querySelectorAll('.detail-view').forEach(v => v.classList.remove('active'));
            document.getElementById('homeView').style.display = viewName === 'home' ? 'block' : 'none';
            if (viewName !== 'home') {
                document.getElementById(`${viewName}View`).classList.add('active');
            }
        }

        async function loadBlocksList() {
            const container = document.getElementById('blocksList');
            container.innerHTML = '<div class="loading"><i class="fas fa-spinner"></i> Loading blocks...</div>';
            
            try {
                const blockData = await fetchAPI(`${API_BASE}?module=block&action=eth_block_number`);
                const latestBlock = parseInt(blockData.result, 16);
                
                let html = '<table class="table"><thead><tr><th>Block</th><th>Hash</th><th>Transactions</th><th>Gas Used</th><th>Timestamp</th></tr></thead><tbody>';
                
                for (let i = 0; i < 50 && latestBlock - i >= 0; i++) {
                    const blockNum = latestBlock - i;
                    try {
                        const block = await fetchAPI(`${API_BASE}?module=block&action=eth_get_block_by_number&tag=0x${blockNum.toString(16)}&boolean=false`);
                        if (block.result) {
                            const timestamp = new Date(parseInt(block.result.timestamp, 16) * 1000).toLocaleString();
                            const txCount = block.result.transactions.length;
                            const gasUsed = block.result.gasUsed ? parseInt(block.result.gasUsed, 16).toLocaleString() : '0';
                            html += `<tr onclick="showBlockDetail('${blockNum}')" style="cursor: pointer;">
                                <td><strong>${blockNum}</strong></td>
                                <td class="hash">${shortenHash(block.result.hash)}</td>
                                <td>${txCount}</td>
                                <td>${gasUsed}</td>
                                <td>${timestamp}</td>
                            </tr>`;
                        }
                    } catch (e) {
                        // Continue with next block
                    }
                }
                html += '</tbody></table>';
                container.innerHTML = html;
            } catch (error) {
                container.innerHTML = `<div class="error">Failed to load blocks: ${error.message}</div>`;
            }
        }

        async function showBlockDetail(blockNumber) {
            showView('blockDetail');
            const container = document.getElementById('blockDetail');
            container.innerHTML = '<div class="loading"><i class="fas fa-spinner"></i> Loading block details...</div>';
            
            try {
                const block = await fetchAPI(`${API_BASE}?module=block&action=eth_get_block_by_number&tag=0x${parseInt(blockNumber).toString(16)}&boolean=true`);
                if (block.result) {
                    const b = block.result;
                    let html = '<div class="info-row"><div class="info-label">Block Number:</div><div class="info-value">' + parseInt(b.number, 16) + '</div></div>';
                    html += '<div class="info-row"><div class="info-label">Hash:</div><div class="info-value hash">' + b.hash + '</div></div>';
                    html += '<div class="info-row"><div class="info-label">Parent Hash:</div><div class="info-value hash">' + b.parentHash + '</div></div>';
                    html += '<div class="info-row"><div class="info-label">Timestamp:</div><div class="info-value">' + new Date(parseInt(b.timestamp, 16) * 1000).toLocaleString() + '</div></div>';
                    html += '<div class="info-row"><div class="info-label">Transactions:</div><div class="info-value">' + b.transactions.length + '</div></div>';
                    html += '<div class="info-row"><div class="info-label">Gas Used:</div><div class="info-value">' + parseInt(b.gasUsed || '0', 16).toLocaleString() + '</div></div>';
                    html += '<div class="info-row"><div class="info-label">Gas Limit:</div><div class="info-value">' + parseInt(b.gasLimit || '0', 16).toLocaleString() + '</div></div>';
                    
                    if (b.transactions.length > 0) {
                        html += '<h3 style="margin-top: 2rem; margin-bottom: 1rem;">Transactions</h3><table class="table"><thead><tr><th>Hash</th><th>From</th><th>To</th><th>Value</th></tr></thead><tbody>';
                        b.transactions.forEach(tx => {
                            html += `<tr onclick="showTransactionDetail('${tx.hash}')" style="cursor: pointer;">
                                <td class="hash">${shortenHash(tx.hash)}</td>
                                <td class="hash">${shortenHash(tx.from)}</td>
                                <td class="hash">${tx.to ? shortenHash(tx.to) : 'Contract Creation'}</td>
                                <td>${formatEther(tx.value || '0')} ETH</td>
                            </tr>`;
                        });
                        html += '</tbody></table>';
                    }
                    container.innerHTML = html;
                }
            } catch (error) {
                container.innerHTML = `<div class="error">Failed to load block details: ${error.message}</div>`;
            }
        }

        async function showTransactionDetail(txHash) {
            showView('transactionDetail');
            const container = document.getElementById('transactionDetail');
            container.innerHTML = '<div class="loading"><i class="fas fa-spinner"></i> Loading transaction details...</div>';
            
            try {
                const tx = await fetchAPI(`${API_BASE}?module=transaction&action=eth_getTransactionByHash&txhash=${txHash}`);
                if (tx.result) {
                    const t = tx.result;
                    let html = '<div class="info-row"><div class="info-label">Transaction Hash:</div><div class="info-value hash">' + t.hash + '</div></div>';
                    html += '<div class="info-row"><div class="info-label">Block Number:</div><div class="info-value">' + parseInt(t.blockNumber, 16) + '</div></div>';
                    html += '<div class="info-row"><div class="info-label">From:</div><div class="info-value hash" onclick="showAddressDetail(\'' + t.from + '\')" style="cursor: pointer;">' + t.from + '</div></div>';
                    html += '<div class="info-row"><div class="info-label">To:</div><div class="info-value hash">' + (t.to || 'Contract Creation') + '</div></div>';
                    html += '<div class="info-row"><div class="info-label">Value:</div><div class="info-value">' + formatEther(t.value || '0') + ' ETH</div></div>';
                    html += '<div class="info-row"><div class="info-label">Gas:</div><div class="info-value">' + parseInt(t.gas || '0', 16).toLocaleString() + '</div></div>';
                    html += '<div class="info-row"><div class="info-label">Gas Price:</div><div class="info-value">' + formatEther(t.gasPrice || '0', 'gwei') + ' Gwei</div></div>';
                    container.innerHTML = html;
                }
            } catch (error) {
                container.innerHTML = `<div class="error">Failed to load transaction details: ${error.message}</div>`;
            }
        }

        async function showAddressDetail(address) {
            showView('addressDetail');
            const container = document.getElementById('addressDetail');
            container.innerHTML = '<div class="loading"><i class="fas fa-spinner"></i> Loading address details...</div>';
            
            try {
                const balance = await fetchAPI(`${API_BASE}?module=account&action=eth_get_balance&address=${address}&tag=latest`);
                let html = '<div class="info-row"><div class="info-label">Address:</div><div class="info-value hash">' + address + '</div></div>';
                html += '<div class="info-row"><div class="info-label">Balance:</div><div class="info-value">' + formatEther(balance.result || '0') + ' ETH</div></div>';
                container.innerHTML = html;
            } catch (error) {
                container.innerHTML = `<div class="error">Failed to load address details: ${error.message}</div>`;
            }
        }

        function handleSearch(query) {
            query = query.trim();
            if (!query) return;
            
            if (/^0x[a-fA-F0-9]{40}$/.test(query)) {
                showAddressDetail(query);
            } else if (/^0x[a-fA-F0-9]{64}$/.test(query)) {
                showTransactionDetail(query);
            } else if (/^\d+$/.test(query)) {
                showBlockDetail(query);
            } else {
                alert('Invalid search. Enter an address (0x...), transaction hash (0x...), or block number.');
            }
        }

        function formatNumber(num) {
            return parseInt(num || 0).toLocaleString();
        }

        function shortenHash(hash, length = 10) {
            if (!hash || hash.length <= length * 2 + 2) return hash;
            return hash.substring(0, length + 2) + '...' + hash.substring(hash.length - length);
        }

        function formatEther(wei, unit = 'ether') {
            const weiStr = wei.toString();
            const weiNum = weiStr.startsWith('0x') ? parseInt(weiStr, 16) : parseInt(weiStr);
            const ether = weiNum / Math.pow(10, unit === 'gwei' ? 9 : 18);
            return ether.toFixed(6).replace(/\.?0+$/, '');
        }
    </script>
</body>
</html>
HTML_EOF

# Upload the comprehensive explorer
log_step "Step 3: Uploading full explorer interface..."
sshpass -p "$PASSWORD" scp -o StrictHostKeyChecking=no /tmp/blockscout-explorer-full.html root@"$IP":/var/www/html/index.html
log_success "Full explorer interface uploaded"

# Step 4: Update Nginx to serve the explorer
log_step "Step 4: Updating Nginx configuration..."

cat > /tmp/blockscout-nginx-explorer.conf <<'NGINX_EOF'
# Blockscout Full Explorer UI Configuration

server {
    listen 443 ssl http2;
    listen [::]:443 ssl http2;
    server_name explorer.d-bis.org 192.168.11.140;

    ssl_certificate /etc/letsencrypt/live/explorer.d-bis.org/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/explorer.d-bis.org/privkey.pem;
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers 'ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384';
    ssl_prefer_server_ciphers on;
    ssl_session_cache shared:SSL:10m;
    ssl_session_timeout 10m;

    add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;
    add_header X-Frame-Options "SAMEORIGIN" always;
    add_header X-Content-Type-Options "nosniff" always;
    add_header X-XSS-Protection "1; mode=block" always;

    access_log /var/log/nginx/blockscout-access.log;
    error_log /var/log/nginx/blockscout-error.log;

    root /var/www/html;
    index index.html;

    # Serve the explorer UI
    location = / {
        try_files /index.html =404;
    }

    # API endpoints - proxy to Blockscout
    location /api/ {
        proxy_pass http://127.0.0.1:4000;
        proxy_http_version 1.1;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_read_timeout 300s;
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
        add_header Access-Control-Allow-Headers "Content-Type";
    }

    # Static files
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }

    # Health check
    location /health {
        access_log off;
        proxy_pass http://127.0.0.1:4000/api/v2/status;
        proxy_set_header Host $host;
        add_header Content-Type application/json;
    }
}

# HTTP redirect
server {
    listen 80;
    listen [::]:80;
    server_name explorer.d-bis.org 192.168.11.140;

    location /.well-known/acme-challenge/ {
        root /var/www/html;
        try_files $uri =404;
    }

    location / {
        return 301 https://$host$request_uri;
    }
}
NGINX_EOF

sshpass -p "$PASSWORD" scp -o StrictHostKeyChecking=no /tmp/blockscout-nginx-explorer.conf root@"$IP":/etc/nginx/sites-available/blockscout

# Step 5: Test and reload Nginx
log_step "Step 5: Testing and reloading Nginx..."
exec_container "nginx -t" || {
    log_error "Nginx configuration test failed!"
    exit 1
}
log_success "Nginx configuration test passed"
exec_container "systemctl reload nginx"
log_success "Nginx reloaded"

echo ""
log_success "Full-featured Blockscout Explorer UI deployed!"
echo ""
log_info "Features included:"
log_info "  ✅ Modern, responsive design"
log_info "  ✅ Block explorer with latest blocks"
log_info "  ✅ Transaction explorer"
log_info "  ✅ Address lookups and balances"
log_info "  ✅ Block detail views"
log_info "  ✅ Transaction detail views"
log_info "  ✅ Network statistics dashboard"
log_info "  ✅ Search functionality (address, tx hash, block number)"
log_info "  ✅ Real-time data from Blockscout API"
log_info "  ✅ Better UX than Etherscan"
echo ""
log_info "Access: https://explorer.d-bis.org/"
echo ""

