jQuery(document).ready(function($) {
    const rdpApp = {
        init() {
            this.bindEvents();
            this.renderRDPModal();
        },

        bindEvents() {
            $('#new-rdp-connection').on('click', () => {
                $('#rdp-connection-modal').show();
            });

            $('#rdp-cancel').on('click', () => {
                $('#rdp-connection-modal').hide();
            });

            $('#rdp-connect').on('click', this.handleRDPConnect.bind(this));
        },

        renderRDPModal() {
            $('body').append(`
                <div id="rdp-connection-modal" style="display:none;">
                    <div class="modal-content">
                        <h3>Remote Desktop Connection</h3>
                        <div class="form-group">
                            <label>Computer</label>
                            <input type="text" id="rdp-host" placeholder="computer.example.com">
                        </div>
                        <div class="form-group">
                            <label>Username</label>
                            <input type="text" id="rdp-username" placeholder="user">
                        </div>
                        <div class="form-group">
                            <label>Display Settings</label>
                            <select id="rdp-resolution">
                                <option value="fullscreen">Full Screen</option>
                                <option value="1024x768">1024x768</option>
                                <option value="1280x720">1280x720</option>
                                <option value="1366x768">1366x768</option>
                                <option value="1920x1080">1920x1080</option>
                            </select>
                        </div>
                        <div class="form-actions">
                            <button id="rdp-connect" class="button button-primary">Generate RDP File</button>
                            <button id="rdp-cancel" class="button">Cancel</button>
                        </div>
                    </div>
                </div>
            `);
        },

        handleRDPConnect() {
            const host = $('#rdp-host').val().trim();
            const username = $('#rdp-username').val().trim();
            const resolution = $('#rdp-resolution').val();

            if (!host) {
                alert('Computer name is required');
                return;
            }

            const settings = {
                fullscreen: resolution === 'fullscreen' ? 1 : 0,
                width: resolution === 'fullscreen' ? 0 : parseInt(resolution.split('x')[0]),
                height: resolution === 'fullscreen' ? 0 : parseInt(resolution.split('x')[1])
            };

            $.ajax({
                url: ajaxurl,
                type: 'POST',
                data: {
                    action: 'code_editor_rdp_connect',
                    host: host,
                    username: username,
                    settings: settings,
                    security: codeEditorVars.nonce
                },
                success: (response) => {
                    if (response.success) {
                        this.downloadRDPFile(response.data.rdp_content, response.data.filename);
                        $('#rdp-connection-modal').hide();
                    } else {
                        alert('Error: ' + response.data);
                    }
                }
            });
        },

        downloadRDPFile(content, filename) {
            const blob = new Blob([content], {type: 'application/rdp'});
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = filename;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(url);
        }
    };

    rdpApp.init();
});