<!DOCTYPE html>
<html>
<head>
    <title>HDGL Program Interface</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.43.0/min/vs/editor/editor.main.min.css" rel="stylesheet">
    <script src="https://cdn.socket.io/4.7.2/socket.io.min.js"></script>
    <style>
        body { margin: 0; display: flex; flex-direction: column; height: 100vh; }
        #editor { flex-grow: 1; border: none; }
        .controls {
            padding: 10px;
            background: #1e1e1e;
            display: flex;
            gap: 10px;
        }
        button {
            background: #0e639c;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover { background: #1177bb; }
    </style>
</head>
<body>
    <div class="controls">
        <button onclick="sendToTape()">Write to Tape</button>
        <button onclick="clearTape()">Clear Tape</button>
        <button onclick="loadSmartContract('hdgl_lattice')">Load HDGL Lattice</button>
        <button onclick="loadSmartContract('charg_coin')">Load ChargCoin</button>
        <button onclick="loadSmartContract('resonance')">Load Harmonic Resonance</button>
        <button onclick="deployToPOA()">Deploy to POA Network</button>
    </div>
    <div id="editor"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.43.0/min/vs/loader.min.js"></script>
    <script>
        require.config({ paths: { 'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.43.0/min/vs' }});
        require(['vs/editor/editor.main'], function() {
            window.editor = monaco.editor.create(document.getElementById('editor'), {
                value: getDefaultProgram(),
                language: 'javascript',
                theme: 'vs-dark',
                automaticLayout: true
            });
        });

        const socket = io('/program');

        function getDefaultProgram() {
            return `// HDGL Program Interface - Connected to ChargNet POA (chainId: 22177)
// ChargNet RPC: http://localhost:8555 (rpc-node)
// Deploy smart contracts to the POA network or interact with HDGL bridge

// Sample: Basic lattice state query
function queryLatticeState() {
    return {
        method: 'get_state',
        params: {
            evolution_count: true,
            phase_variance: true,
            consensus_status: true
        }
    };
}

// Sample: Write program to tape
function writeTapeProgram(code) {
    return {
        method: 'write_tape',
        code: code
    };
}

// ChargNet POA Network Status:
// - RPC Node: http://localhost:8555 (main interface)
// - Miner1: http://localhost:8557 (validator)
// - Miner2: http://localhost:8558 (validator)
// - Chain ID: 22177
// - Block Time: 10 seconds
// - Consensus: Clique POA

// Ready for smart contract deployment
// Click "Load HDGL Lattice" or other buttons to load contract templates
`;
        }

        function loadSmartContract(type) {
            let contractCode = '';

            switch(type) {
                case 'hdgl_lattice':
                    contractCode = `// HDGL Lattice Contract
pragma solidity ^0.8.0;

contract HDGLLatticeContract {
    struct LatticeState {
        uint256 evolutionCount;
        uint256 phaseVariance;
        bytes32 stateHash;
        uint256 timestamp;
        bool consensusLocked;
    }

    mapping(address => LatticeState) public states;

    function commitState(
        uint256 _evolutionCount,
        uint256 _phaseVariance,
        bytes32 _stateHash
    ) public {
        states[msg.sender] = LatticeState({
            evolutionCount: _evolutionCount,
            phaseVariance: _phaseVariance,
            stateHash: _stateHash,
            timestamp: block.timestamp,
            consensusLocked: _phaseVariance < 1000000 // 0.001000 threshold
        });
    }
}`;
                    break;

                case 'charg_coin':
                    contractCode = `// ChargCoin Token Contract
pragma solidity ^0.4.18;

contract ChargCoinContract {
    string public name = "ChargCoin";
    string public symbol = "CHG";
    uint8 public decimals = 18;
    uint256 public totalSupply;

    mapping(address => uint256) balances;
    mapping(address => mapping(address => uint256)) allowed;

    function transfer(address _to, uint256 _value) public returns (bool) {
        require(balances[msg.sender] >= _value);
        balances[msg.sender] -= _value;
        balances[_to] += _value;
        return true;
    }
}`;
                    break;

                case 'resonance':
                    contractCode = `// Lattice Harmonic Resonance
pragma solidity ^0.8.0;

contract LatticeHarmonicResonance {
    uint256 constant GOLDEN_RATIO = 1618033988749895; // φ * 10^15

    struct ResonanceNode {
        uint256 frequency;
        uint256 amplitude;
        uint256 phase;
        bool active;
    }

    mapping(uint256 => ResonanceNode) public nodes;
    uint256 public nodeCount;

    function addResonanceNode(
        uint256 frequency,
        uint256 amplitude,
        uint256 phase
    ) public {
        nodes[nodeCount] = ResonanceNode({
            frequency: frequency,
            amplitude: amplitude,
            phase: phase,
            active: true
        });
        nodeCount++;
    }
}`;
                    break;
            }

            window.editor.setValue(contractCode);
        }

        function deployToPOA() {
            const code = window.editor.getValue();
            console.log('Deploying to POA:', code);
            socket.emit('deploy_contract', {
                code: code,
                network: 'chargnet',
                chainId: 22177,
                rpcUrl: 'http://localhost:8555'
            });

            // Update visualizer with deployment
            updateVisualizerState('Contract deployment initiated');
        }

        function sendToTape() {
            const code = window.editor.getValue();
            console.log('Sending to tape:', code);
            socket.emit('write_tape', { code });

            // Update visualizer state
            updateVisualizerState('Code sent to tape');
        }

        function clearTape() {
            socket.emit('clear_tape');
            window.editor.setValue(getDefaultProgram());

            // Update visualizer state
            updateVisualizerState('Tape cleared');
        }

        function updateVisualizerState(action) {
            // Emit to visualizer namespace to update its state
            socket.emit('program_action', {
                action: action,
                timestamp: new Date().toISOString(),
                code_length: window.editor.getValue().length
            });
        }

        // Socket.IO event handlers
        socket.on('connect', function() {
            console.log('Program interface connected to Socket.IO');
            updateVisualizerState('Program interface connected');
        });

        socket.on('tape_status', function(data) {
            console.log('Tape status update:', data);
            // Could display status in UI
        });

        socket.on('deployment_result', function(data) {
            console.log('Deployment result:', data);
            if (data.success) {
                alert('Contract deployed successfully! TX Hash: ' + data.txHash);
            } else {
                alert('Deployment failed: ' + data.error);
            }
        });

        socket.on('disconnect', function() {
            console.log('Program interface disconnected from Socket.IO');
        });
    </script>
</body>
</html>