@extends('ops.layout')
@section('title', 'Artisan Commands')

@section('content')
<div class="flex gap-4 flex-col lg:flex-row">

    {{-- Left: command browser --}}
    <div class="card p-4 w-full lg:w-80 flex-shrink-0" style="max-height:80vh; overflow-y:auto;">
        <input id="cmd-search" type="text" placeholder="{{ trans('ops.search_command_placeholder') }}" class="w-full mb-3 px-3 py-2 text-sm">

        @foreach($groups as $ns => $commands)
            <div class="mb-3">
                <div class="tag-group mb-1">{{ $ns }}</div>
                @foreach($commands as $cmd)
                    <button
                        onclick="selectCommand('{{ $cmd['name'] }}')"
                        class="cmd-btn w-full text-start text-sm py-1 px-2 rounded hover:bg-gray-800 block {{ $cmd['blocked'] ? 'opacity-40 cursor-not-allowed' : '' }}"
                        style="color: {{ $cmd['blocked'] ? '#f85149' : '#c9d1d9' }};"
                        data-name="{{ $cmd['name'] }}"
                        data-desc="{{ $cmd['description'] }}"
                        {{ $cmd['blocked'] ? 'disabled title=' . trans('ops.blocked') : '' }}
                    >
                        <span style="color:#58a6ff;">{{ $cmd['name'] }}</span>
                        <span class="block" style="color:#8b949e; font-size:.68rem;">{{ Str::limit($cmd['description'], 55) }}</span>
                    </button>
                @endforeach
            </div>
        @endforeach
    </div>

    {{-- Right: run panel + output --}}
    <div class="flex-1 flex flex-col gap-4">

        <div class="card p-4">
            <div class="mb-2 text-sm" style="color:#8b949e;">{{ trans('ops.selected_command') }}</div>
            <input id="selected-cmd" type="text" class="w-full px-3 py-2 text-sm font-mono mb-2" placeholder="{{ trans('ops.command_placeholder') }}" style="color:#58a6ff;">

            <div class="mb-2 text-sm" style="color:#8b949e;">{{ trans('ops.arguments_optional') }} <span style="color:#56d364;">--env=production --force</span></div>
            <input id="cmd-args" type="text" class="w-full px-3 py-2 text-sm font-mono mb-3" placeholder="">

            <div id="cmd-desc" class="text-xs mb-3" style="color:#8b949e; min-height:16px;"></div>

            <button onclick="runCommand()" class="btn-primary px-5 py-2 rounded text-sm font-bold">
                ▶ {{ trans('ops.execute') }}
            </button>
            <button onclick="clearOutput()" class="ml-3 px-4 py-2 rounded text-sm" style="background:#21262d; color:#8b949e; border:1px solid #30363d;">
                {{ trans('ops.clear') }}
            </button>
        </div>

        <div class="card p-4 flex-1">
            <div class="flex items-center justify-between mb-2">
                <span class="text-xs" style="color:#8b949e;">{{ trans('ops.output') }}</span>
                <span id="cmd-status" class="text-xs px-2 py-0.5 rounded"></span>
            </div>
            <div id="output-box" class="terminal p-3" style="min-height:220px; max-height:50vh;">{{ trans('ops.ready_to_run') }}</div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    const csrf = document.querySelector('meta[name=csrf-token]').content;

    function selectCommand(name) {
        document.getElementById('selected-cmd').value = name;
        const btn = document.querySelector(`.cmd-btn[data-name="${name}"]`);
        document.getElementById('cmd-desc').textContent = btn ? btn.dataset.desc : '';
        document.querySelectorAll('.cmd-btn').forEach(b => b.classList.remove('bg-gray-700'));
        if (btn) btn.classList.add('bg-gray-700');
    }

    async function runCommand() {
        const command = document.getElementById('selected-cmd').value.trim();
        const args    = document.getElementById('cmd-args').value.trim();
        const out     = document.getElementById('output-box');
        const status  = document.getElementById('cmd-status');

        if (!command) { out.textContent = {!! json_encode(trans('ops.select_command_first')) !!}; return; }

        out.textContent = {!! json_encode(trans('ops.running')) !!};
        status.textContent = '';
        status.className = 'text-xs px-2 py-0.5 rounded';

        try {
            const res = await fetch('{{ route("ops.commands.run") }}', {
                method: 'POST',
                headers: {'Content-Type':'application/json','X-CSRF-TOKEN':csrf},
                body: JSON.stringify({ command, args })
            });
            const data = await res.json();

            out.textContent = data.output ?? data.error ?? {!! json_encode(trans('ops.no_output')) !!};

            if (res.ok && data.status === 'ok') {
                status.textContent = '✔ ' + {!! json_encode(trans('ops.success')) !!};
                status.className = 'text-xs px-2 py-0.5 rounded badge-ok text-white';
            } else {
                status.textContent = '✖ ' + {!! json_encode(trans('ops.error')) !!};
                status.className = 'text-xs px-2 py-0.5 rounded badge-fail text-white';
            }
        } catch (e) {
            out.textContent = {!! json_encode(trans('ops.connection_failed') . ' ') !!} + e.message;
        }
    }

    function clearOutput() {
        document.getElementById('output-box').textContent = {!! json_encode(trans('ops.ready_to_run')) !!};
        document.getElementById('cmd-status').textContent = '';
    }

    // Live search filter
    document.getElementById('cmd-search').addEventListener('input', function () {
        const q = this.value.toLowerCase();
        document.querySelectorAll('.cmd-btn').forEach(btn => {
            btn.style.display = btn.dataset.name.includes(q) ? '' : 'none';
        });
    });
</script>
@endpush