@extends('layout.app')

@section('content')
    <section class="content">
        <div class="container-fluid">
            <div class="row">

                {{-- Connection Settings --}}
                <div class="col-md-4">
                    <div class="card card-outline card-primary">
                        <div class="card-header">
                            <h3 class="card-title"><i class="fas fa-plug"></i> Connection Settings</h3>
                        </div>
                        <div class="card-body">
                            <div class="form-group">
                                <label>Host / IP <span class="text-danger">*</span></label>
                                <input type="text" id="host" class="form-control" value="172.18.9.18">
                            </div>
                            <div class="form-group">
                                <label>Port <span class="text-danger">*</span></label>
                                <input type="number" id="port" class="form-control" value="23">
                            </div>
                            <div class="form-group">
                                <label>Username <span class="text-danger">*</span></label>
                                <input type="text" id="username" class="form-control" value="root">
                            </div>
                            <div class="form-group">
                                <label>Password <span class="text-danger">*</span></label>
                                <input type="password" id="password" class="form-control" value="admin123">
                            </div>
                            <div class="form-group">
                                <label>Login Prompt
                                    <small class="text-muted d-block">Text OLT shows asking for username</small>
                                </label>
                                <input type="text" id="login_prompt" class="form-control" value="User name:">
                            </div>
                            <div class="form-group">
                                <label>Password Prompt
                                    <small class="text-muted d-block">Text OLT shows asking for password</small>
                                </label>
                                <input type="text" id="pass_prompt" class="form-control" value="User password:">
                            </div>
                            <div class="form-group">
                                <label>CLI Prompt <span class="text-danger">*</span>
                                    <small class="text-muted d-block">Prompt shown after login (e.g. <code>#</code>, <code>&gt;</code>)</small>
                                </label>
                                <input type="text" id="prompt" class="form-control" value="#">
                            </div>
                            <div class="form-group">
                                <label>OLT Brand</label>
                                <select id="olt_brand" class="form-control">
                                    <option value="">-- Generic --</option>
                                    <option value="huawei">Huawei</option>
                                    <option value="vsol">Vsol</option>
                                    <option value="cdata">Cdata</option>
                                    <option value="zte">ZTE</option>
                                </select>
                            </div>
                            <button type="button" id="btn-clear" class="btn btn-secondary btn-block">
                                <i class="fas fa-trash"></i> Clear Terminal
                            </button>
                        </div>
                    </div>
                </div>

                {{-- Terminal --}}
                <div class="col-md-8">
                    <div class="card card-outline card-dark">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <h3 class="card-title"><i class="fas fa-terminal"></i> Terminal</h3>
                            <span id="connection-status" class="badge badge-secondary">Not Connected</span>
                        </div>
                        <div class="card-body p-0">
                            <div id="terminal-output"
                                style="background:#1e1e1e; color:#d4d4d4; font-family: 'Courier New', monospace;
                                       font-size: 13px; min-height: 420px; max-height: 500px; overflow-y: auto;
                                       padding: 12px; white-space: pre-wrap; word-break: break-all;">
                                <span style="color:#6a9955;">-- OLT Telnet Terminal --</span>
                                <span style="color:#6a9955;">
-- Fill in connection settings and type a command below.
</span>
                            </div>
                        </div>
                        <div class="card-footer p-2">
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text"
                                        style="background:#2d2d2d; color:#d4d4d4; border-color:#444; font-family:monospace;">
                                        &gt;_
                                    </span>
                                </div>
                                <input type="text" id="command-input" class="form-control"
                                    style="background:#2d2d2d; color:#d4d4d4; border-color:#444; font-family:monospace;"
                                    placeholder="Enter command..." autocomplete="off">
                                <div class="input-group-append">
                                    <button class="btn btn-primary" id="btn-execute" type="button">
                                        <i class="fas fa-play"></i> Run
                                    </button>
                                </div>
                            </div>
                            <small class="text-muted mt-1 d-block">Press <kbd>Enter</kbd> to run · <kbd>↑</kbd> / <kbd>↓</kbd> for history</small>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </section>
@endsection

@section('ajax')
    <script>
        $(document).ready(function () {
            var executeUrl = '{{ route("olt-telnet.execute") }}';
            var csrfToken = '{{ csrf_token() }}';
            var commandHistory = [];
            var historyIndex = -1;

            function getConn() {
                return {
                    host:         $('#host').val().trim(),
                    port:         $('#port').val().trim(),
                    username:     $('#username').val().trim(),
                    password:     $('#password').val().trim(),
                    login_prompt: $('#login_prompt').val().trim(),
                    pass_prompt:  $('#pass_prompt').val().trim(),
                    prompt:       $('#prompt').val().trim(),
                };
            }

            function appendToTerminal(html) {
                $('#terminal-output').append(html);
                var el = document.getElementById('terminal-output');
                el.scrollTop = el.scrollHeight;
            }

            function escapeHtml(text) {
                return $('<div>').text(text).html();
            }

            function setStatus(connected) {
                if (connected) {
                    $('#connection-status').removeClass('badge-secondary badge-danger').addClass('badge-success').text('Connected');
                } else {
                    $('#connection-status').removeClass('badge-success badge-secondary').addClass('badge-danger').text('Error');
                }
            }

            function runCommand() {
                var conn = getConn();
                var command = $('#command-input').val().trim();

                if (!conn.host || !conn.username || !conn.password || !conn.prompt || !conn.login_prompt || !conn.pass_prompt) {
                    appendToTerminal('\n<span style="color:#f97316;">⚠ Please fill in all connection settings.</span>\n');
                    return;
                }
                if (!command) return;

                commandHistory.unshift(command);
                if (commandHistory.length > 50) commandHistory.pop();
                historyIndex = -1;

                appendToTerminal('\n<span style="color:#569cd6;">$ ' + escapeHtml(command) + '</span>\n');
                $('#command-input').val('');
                $('#btn-execute').prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i>');

                $.ajax({
                    url: executeUrl,
                    method: 'POST',
                    data: $.extend({}, conn, { command: command, _token: csrfToken }),
                    success: function (res) {
                        setStatus(true);
                        if (res.login_banner && res.login_banner.trim()) {
                            appendToTerminal('<span style="color:#9cdcfe;">' + escapeHtml(res.login_banner) + '</span>');
                        }
                        appendToTerminal('<span style="color:#d4d4d4;">' + escapeHtml(res.output) + '</span>\n');
                    },
                    error: function (xhr) {
                        setStatus(false);
                        var msg = xhr.responseJSON ? xhr.responseJSON.error : 'Connection failed.';
                        appendToTerminal('<span style="color:#f44747;">✗ ' + escapeHtml(msg) + '</span>\n');
                    },
                    complete: function () {
                        $('#btn-execute').prop('disabled', false).html('<i class="fas fa-play"></i> Run');
                        $('#command-input').focus();
                    }
                });
            }

            $('#btn-execute').on('click', runCommand);

            $('#command-input').on('keydown', function (e) {
                if (e.key === 'Enter') {
                    runCommand();
                } else if (e.key === 'ArrowUp') {
                    e.preventDefault();
                    if (historyIndex < commandHistory.length - 1) {
                        historyIndex++;
                        $(this).val(commandHistory[historyIndex]);
                    }
                } else if (e.key === 'ArrowDown') {
                    e.preventDefault();
                    if (historyIndex > 0) {
                        historyIndex--;
                        $(this).val(commandHistory[historyIndex]);
                    } else {
                        historyIndex = -1;
                        $(this).val('');
                    }
                }
            });

            $('#btn-clear').on('click', function () {
                $('#terminal-output').html('<span style="color:#6a9955;">-- Terminal cleared --\n</span>');
                $('#connection-status').removeClass('badge-success badge-danger').addClass('badge-secondary').text('Not Connected');
            });

            // Pre-fill common prompts per brand
            $('#olt_brand').on('change', function () {
                var brand = $(this).val();
                var prompts = { huawei: '>', vsol: '#', cdata: '#', zte: '#' };
                if (prompts[brand]) $('#prompt').val(prompts[brand]);
            });
        });
    </script>
@endsection