camaleon
// =======================================================
// MAQUETA 301: E-COMMERCE WEB 3.0 & METAMASK
// Creado por: Tracert System & Antigravity (Paparai Engine)
// =======================================================
var proyecto = "Tienda Descentralizada Web3"

// 1. Preparar la Base de Datos para el Contrato Inteligente
// Relacional (SQL) para el catálogo de productos:
ejecutar_sql("CREATE TABLE IF NOT EXISTS ecommerce_productos (id INT AUTO_INCREMENT PRIMARY KEY, nombre VARCHAR(100), precio_eth DECIMAL(10,4), stock INT);")
// NoSQL (MongoDB) para los Hash Criptográficos (Documental / Inmutable):
// mongodb_crear_coleccion("transacciones_smart_contract")
// [Nota]: El insert real lo hace procesar_pago_web3.php después de la firma.

// 2. Insertar Productos de Prueba (Migración Inicial)
ejecutar_sql("INSERT IGNORE INTO ecommerce_productos (id, nombre, precio_eth, stock) VALUES (1, 'Licencia Camaleon IDE Pro', 0.0010, 10);")

// 3. Renderizar Vista y Lógica de Negocio
imprimir("
<!DOCTYPE html>
<html lang='es'>
<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>E-Commerce Web 3.0</title>
    <!-- AdminLTE & Bootstrap 5 (Estética Dark) -->
    <link href='https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css' rel='stylesheet'>
    <link href='https://cdn.jsdelivr.net/npm/admin-lte@3.2/dist/css/adminlte.min.css' rel='stylesheet'>
    <style>
        body { background: #0f172a; color: #f8fafc; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
        .glass-card { 
            background: rgba(30,41,59,0.7); 
            border: 1px solid rgba(16,185,129,0.2); 
            border-radius: 15px; 
            padding: 30px; 
            box-shadow: 0 4px 30px rgba(0,0,0,0.5); 
            backdrop-filter: blur(10px); 
            transition: transform 0.3s ease;
        }
        .glass-card:hover { transform: translateY(-5px); border-color: #10b981; }
        .btn-web3 { background: #f6851b; color: white; font-weight: bold; border: none; }
        .btn-web3:hover { background: #e2761b; color: white; }
    </style>
    <!-- Ethers.js para MetaMask -->
    <script src='https://cdn.jsdelivr.net/npm/ethers@5.7.2/dist/ethers.umd.min.js'></script>
    <script src='https://cdn.jsdelivr.net/npm/sweetalert2@11'></script>
</head>
<body>
<div class='container mt-5'>
    <div class='text-center mb-5'>
        <h1 class='fw-bold' style='color: #10b981;'>🌐 Tienda Descentralizada Web 3.0</h1>
        <p class='text-muted'>Paga directamente con tu Wallet mediante Smart Contracts</p>
        
        <button id='btnConnect' class='btn btn-web3 btn-lg mt-3 shadow-lg'>
            <img src='https://upload.wikimedia.org/wikipedia/commons/3/36/MetaMask_Fox.svg' width='30' class='me-2'> Conectar MetaMask
        </button>
        <p id='walletAddress' class='mt-3 text-info font-monospace' style='font-size: 1.1rem;'></p>
    </div>

    <div class='row justify-content-center'>
        <div class='col-md-6'>
            <div class='glass-card text-center'>
                <h3 class='fw-bold text-white'>Licencia Camaleón Pro</h3>
                <hr style='border-color: #334155;'>
                <h2 class='text-warning fw-bold my-4'>0.001 ETH</h2>
                <p class='text-muted mb-4'>Acceso perpetuo al motor 6GL y reportes criptográficos de auditoría.</p>
                <button id='btnBuy' class='btn btn-success btn-lg w-100 shadow' disabled>
                    <i class='fas fa-lock me-2'></i> Pagar Seguro con Smart Contract
                </button>
            </div>
        </div>
    </div>
</div>

<script>
    let provider, signer, userAddress;

    // 1. CONECTAR BILLETERA
    document.getElementById('btnConnect').addEventListener('click', async () => {
        if (typeof window.ethereum !== 'undefined') {
            try {
                // Solicitar acceso a la Billetera (Apertura del Pop-Up)
                await window.ethereum.request({ method: 'eth_requestAccounts' });
                provider = new ethers.providers.Web3Provider(window.ethereum);
                signer = provider.getSigner();
                userAddress = await signer.getAddress();
                
                document.getElementById('walletAddress').innerHTML = '✅ Billetera Activa: <strong>' + userAddress + '</strong>';
                document.getElementById('btnConnect').style.display = 'none';
                document.getElementById('btnBuy').disabled = false;
                
                Swal.fire({ title: '¡MetaMask Conectado!', text: 'El sistema está listo para operar sobre la Blockchain.', icon: 'success', background: '#1e293b', color: '#fff', confirmButtonColor: '#10b981' });
            } catch (error) {
                Swal.fire({ title: 'Conexión Rechazada', text: error.message, icon: 'error', background: '#1e293b', color: '#fff' });
            }
        } else {
            Swal.fire('Falta MetaMask', 'Debes instalar la extensión de MetaMask en tu navegador para interactuar con esta dApp.', 'warning');
        }
    });

    // 2. DISPARAR CONTRATO INTELIGENTE (PAGO)
    document.getElementById('btnBuy').addEventListener('click', async () => {
        try {
            let btn = document.getElementById('btnBuy');
            btn.innerHTML = '<span class=\"spinner-border spinner-border-sm\" role=\"status\" aria-hidden=\"true\"></span> Procesando Blockchain...';
            btn.disabled = true;

            // Simular transferencia a una Wallet Recaudadora o Contrato
            const tx = await signer.sendTransaction({
                to: '0x000000000000000000000000000000000000dEaD', // Burn address para pruebas
                value: ethers.utils.parseEther('0.001') // Monto real en ETH
            });

            Swal.fire({ 
                title: 'Confirmando Transacción', 
                html: 'El minero está validando la operación.<br><br>Hash de Trazabilidad:<br><small class=\"text-success font-monospace\">' + tx.hash + '</small>', 
                icon: 'info', 
                allowOutsideClick: false, 
                showConfirmButton: false,
                background: '#1e293b', 
                color: '#fff' 
            });
            Swal.showLoading();

            // Esperar que la red confirme el bloque
            await tx.wait(); 

            // 3. REGISTRO INMUTABLE EN BASE DE DATOS (VIA AJAX)
            const formData = new FormData();
            formData.append('wallet', userAddress);
            formData.append('hash', tx.hash);
            formData.append('monto', '0.001');

            fetch('procesar_pago_web3.php', {
                method: 'POST',
                body: formData
            }).then(r => r.json()).then(data => {
                if(data.status === 'success'){
                    Swal.fire({ title: '¡GOOOOL! Operación Exitosa', text: 'El contrato se ejecutó. Trazabilidad inmutable guardada en DB.', icon: 'success', background: '#1e293b', color: '#fff', confirmButtonColor: '#10b981' });
                } else {
                    Swal.fire({ title: 'Advertencia', text: 'El pago pasó, pero hubo un error registrando en BD local.', icon: 'warning', background: '#1e293b', color: '#fff' });
                }
            });

        } catch (error) {
            Swal.fire({ title: 'Error en Smart Contract', text: error.message, icon: 'error', background: '#1e293b', color: '#fff' });
        } finally {
            let btn = document.getElementById('btnBuy');
            btn.innerHTML = '<i class=\"fas fa-lock me-2\"></i> Pagar Seguro con Smart Contract';
            btn.disabled = false;
        }
    });
</script>
</body>
</html>
")
