@extends('layouts.app')

@php
    $pageTitle = 'Command History';
    $pageHeading = 'Command Monitoring';
    $pageDescription = 'Monitoring semua command mesin: queued, sent, success, dan error dalam satu halaman.';
    $tableThemeClass = 'ops-datatable-theme ops-datatable-theme--commands';
@endphp

@section('content')
    <style>
        .command-summary {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 8px;
            margin-bottom: 12px;
        }

        .command-summary-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            min-height: 48px;
            padding: 8px 12px;
            border: 1px solid #aebbc7;
            border-left: 5px solid #0d6efd;
            border-radius: 7px;
            background: #ffffff;
        }

        .command-summary-item strong {
            font-size: 20px;
            line-height: 1;
            color: #172b4d;
        }

        .command-summary-item span {
            color: #475467;
            font-size: 11px;
            font-weight: 800;
            text-transform: uppercase;
        }

        .command-summary-item--pending { border-left-color: #fd7e14; background: #fff5e8; }
        .command-summary-item--success { border-left-color: #198754; background: #edf9f2; }
        .command-summary-item--error { border-left-color: #dc3545; background: #fff0f1; }

        .command-filter-card,
        .command-panel,
        .command-history {
            border: 1px solid #aebbc7;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
        }

        .command-filter-card {
            margin-bottom: 12px;
            border-top: 3px solid #0d6efd;
        }

        .command-operations {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 12px;
            margin-bottom: 12px;
        }

        .command-panel {
            margin: 0;
            padding: 12px;
        }

        .command-panel--manual { border-top: 4px solid #0d6efd; }
        .command-panel--delete { border-top: 4px solid #dc3545; }

        .command-panel-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 10px;
            margin-bottom: 10px;
        }

        .command-panel-head h3 {
            margin: 0 0 3px;
            font-size: 16px;
        }

        .command-panel-head p {
            margin: 0;
            color: #667085;
            font-size: 11px;
            line-height: 1.45;
        }

        .command-form {
            display: grid;
            grid-template-columns: minmax(210px, .8fr) minmax(280px, 1.2fr);
            gap: 10px;
        }

        .command-field {
            display: grid;
            gap: 5px;
        }

        .command-field label {
            color: #344054;
            font-size: 12px;
            font-weight: 800;
        }

        .command-field select,
        .command-field textarea {
            width: 100%;
            min-width: 0;
            padding: 8px 10px;
            border: 1px solid #98a6b3;
            border-radius: 6px;
            background: #ffffff;
        }

        .command-field select {
            min-height: 145px;
        }

        .command-field textarea {
            min-height: 106px;
            resize: vertical;
        }

        .command-help {
            color: #667085;
            font-size: 10px;
            line-height: 1.45;
        }

        .command-note {
            margin-top: 6px;
            padding: 6px 8px;
            border: 1px solid #e5a900;
            border-left: 4px solid #fd7e14;
            border-radius: 5px;
            background: #fff3cd;
            color: #664d03;
            font-size: 10px;
            line-height: 1.45;
        }

        .command-actions {
            display: flex;
            justify-content: flex-end;
            margin-top: 8px;
        }

        .command-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 32px;
            padding: 6px 12px;
            border: 1px solid transparent;
            border-radius: 5px;
            color: #ffffff;
            font-size: 12px;
            font-weight: 800;
            cursor: pointer;
        }

        .command-btn:hover { color: #ffffff; filter: brightness(.9); }
        .command-btn--primary { background: #0d6efd; border-color: #0a58ca; }
        .command-btn--danger { background: #dc3545; border-color: #b02a37; }
        .command-btn--secondary { background: #495057; border-color: #343a40; }

        .command-history {
            border-top: 4px solid #198754;
        }

        .command-history table thead th {
            background: #1f4e78;
            color: #ffffff;
            border-color: #406b91;
        }

        .command-history table tbody tr:nth-child(even) td { background: #f1f5f9; }
        .command-history table tbody tr:hover td { background: #dbeafe; }
        .command-history table th,
        .command-history table td { padding: 7px 8px; }

        .command-history .status {
            border: 1px solid currentColor;
            font-weight: 800;
        }

        .command-history .command-result--success {
            background: #198754;
            color: #ffffff;
            border-color: #146c43;
        }

        .command-history .command-result--pending {
            background: #ffc107;
            color: #332701;
            border-color: #d39e00;
        }

        .command-history .command-result--error {
            background: #dc3545;
            color: #ffffff;
            border-color: #b02a37;
        }

        @media (max-width: 1250px) {
            .command-operations,
            .command-form {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 760px) {
            .command-summary {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }
    </style>

    <div class="command-summary">
        <div class="command-summary-item">
            <span>Total Command</span>
            <strong>{{ number_format($summary['total']) }}</strong>
        </div>
        <div class="command-summary-item command-summary-item--pending">
            <span>Pending</span>
            <strong>{{ number_format($summary['pending']) }}</strong>
        </div>
        <div class="command-summary-item command-summary-item--success">
            <span>Success</span>
            <strong>{{ number_format($summary['success']) }}</strong>
        </div>
        <div class="command-summary-item command-summary-item--error">
            <span>Error</span>
            <strong>{{ number_format($summary['error']) }}</strong>
        </div>
    </div>

    <section class="table-card command-filter-card">
        <form method="GET" action="{{ route('commands.index') }}" class="filters">
            <input type="text" name="q" value="{{ $filters['q'] }}" placeholder="Cari command, SN, alias...">
            <label style="display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted);">
                <input type="checkbox" name="exact_match" value="1" @checked($filters['exact_match'] ?? false)>
                Exact Match
            </label>
            <select name="terminal_filter">
                <option value="">- Semua Terminal -</option>
                @foreach ($terminals as $terminal)
                    <option value="{{ $terminal->id }}" @selected((string) ($filters['terminal_filter'] ?? '') === (string) $terminal->id)>
                        {{ match ($terminal->presence_status ?? 'offline') {
                            'online' => '🟢',
                            'stale' => '🟡',
                            default => '⚪',
                        } }} {{ strtoupper((string) ($terminal->presence_label ?? 'Offline')) }} - {{ $terminal->alias ?: $terminal->sn }} ({{ $terminal->sn }})
                    </option>
                @endforeach
            </select>
            <select name="status_filter">
                <option value="">- Semua Result -</option>
                <option value="pending" @selected(($filters['status_filter'] ?? '') === 'pending')>Pending</option>
                <option value="success" @selected(($filters['status_filter'] ?? '') === 'success')>Success</option>
                <option value="error" @selected(($filters['status_filter'] ?? '') === 'error')>Error</option>
            </select>
            <select name="per_page">
                @foreach ([10,25,50,100,250] as $size)
                    <option value="{{ $size }}" @selected((int) ($filters['per_page'] ?? 50) === $size)>{{ $size }} rows</option>
                @endforeach
            </select>
            <button type="submit" class="command-btn command-btn--primary">Filter</button>
            <a href="{{ route('commands.index') }}" class="command-btn command-btn--secondary">Reset</a>
        </form>
    </section>

    <div class="command-operations">
    <section class="table-card command-panel command-panel--manual">
        <div class="command-panel-head">
            <div>
                <h3>Manual Command</h3>
                <p>Kirim command mentah untuk testing atau recovery mesin.</p>
            </div>
        </div>
        <form method="POST" action="{{ route('commands.manual') }}">
            @csrf
            <div class="command-form">
            <div class="command-field">
                <label>Pilih Mesin Target</label>
                <select name="terminal_ids[]" multiple size="5">
                    @foreach ($terminals as $terminal)
                        <option value="{{ $terminal->id }}">
                            {{ match ($terminal->presence_status ?? 'offline') {
                                'online' => '🟢',
                                'stale' => '🟡',
                                default => '⚪',
                            } }} {{ strtoupper((string) ($terminal->presence_label ?? 'Offline')) }} - {{ $terminal->alias ?: $terminal->sn }} @if($terminal->alias && $terminal->sn) ({{ $terminal->sn }}) @endif
                        </option>
                    @endforeach
                </select>
                <div class="command-help">Bisa pilih satu atau banyak mesin sekaligus.</div>
            </div>
            <div class="command-field">
                <label for="raw_command">Raw Command</label>
                <textarea id="raw_command" name="raw_command" rows="5" placeholder="Contoh: REBOOT&#10;QUERY ATTLOG&#10;DATA DEL_USER PIN=10022">{{ old('raw_command') }}</textarea>
                <div class="command-note">
                    <strong>Re-pull transaksi:</strong> gunakan menu <strong>Devices</strong> melalui Soft re-sync, Hard re-log, atau Re-log by date. Beberapa mesin menolak <code>QUERY ATTLOG</code> manual dengan hasil <code>-1002</code>.
                </div>
            </div>
            </div>
            <div class="command-actions">
                <button type="submit" class="command-btn command-btn--primary" onclick="return confirm('Queue manual command ke mesin yang dipilih?')">Queue Manual Command</button>
            </div>
        </form>
    </section>

    <section class="table-card command-panel command-panel--delete">
        <div class="command-panel-head">
            <div>
                <h3>Bulk Hapus User dari Mesin</h3>
                <p>Paste ID user dari Excel. Sistem membaca kolom pertama setiap baris.</p>
            </div>
        </div>
        <form method="POST" action="{{ route('commands.bulk-delete-users') }}">
            @csrf
            <div class="command-form">
            <div class="command-field">
                <label>Pilih Mesin Target</label>
                <select name="terminal_ids[]" multiple size="5">
                    @foreach ($terminals as $terminal)
                        <option value="{{ $terminal->id }}">
                            {{ match ($terminal->presence_status ?? 'offline') {
                                'online' => '🟢',
                                'stale' => '🟡',
                                default => '⚪',
                            } }} {{ strtoupper((string) ($terminal->presence_label ?? 'Offline')) }} - {{ $terminal->alias ?: $terminal->sn }} @if($terminal->alias && $terminal->sn) ({{ $terminal->sn }}) @endif
                        </option>
                    @endforeach
                </select>
                <div class="command-help">Bisa pilih satu atau banyak mesin sekaligus.</div>
            </div>
            <div class="command-field">
                <label for="bulk_delete_emp_code_rows">Paste List ID User dari Excel</label>
                <textarea id="bulk_delete_emp_code_rows" name="emp_code_rows" rows="5" placeholder="Contoh:&#10;10022&#10;10024&#10;30167">{{ old('emp_code_rows') }}</textarea>
                <div class="command-help">
                    Format yang didukung: satu kolom Excel, hasil copy multi kolom, atau daftar yang dipisahkan enter/tab/koma.
                </div>
            </div>
            </div>
            <div class="command-actions">
                <button type="submit" class="command-btn command-btn--danger" onclick="return confirm('Queue hapus user ke mesin yang dipilih?')">Queue Bulk DEL_USER</button>
            </div>
        </form>
    </section>
    </div>

    <section class="table-card command-history">
        <div class="command-panel-head">
            <div>
                <h3>All Device Commands</h3>
                <p>History command mesin. Gunakan tombol Lihat untuk membuka isi command lengkap.</p>
            </div>
            <strong>{{ number_format($commands->total()) }} record</strong>
        </div>
        <div data-datatable data-datatable-server="1">
            <div class="table-scroll">
                <table style="table-layout: fixed; width: 100%;">
                    <colgroup>
                        <col style="width: 70px;">
                        <col style="width: 170px;">
                        <col style="width: 420px;">
                        <col style="width: 120px;">
                        <col style="width: 150px;">
                        <col style="width: 150px;">
                        <col style="width: 150px;">
                        <col style="width: 130px;">
                    </colgroup>
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Terminal</th>
                            <th>Command</th>
                            <th>Context</th>
                            <th>Queued</th>
                            <th>Sent</th>
                            <th>Returned</th>
                            <th>Result</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($commands as $command)
                            <tr>
                                <td>{{ $command->id }}</td>
                                <td>
                                    <div style="font-weight: 700;">{{ $command->terminal_alias ?: ($command->terminal_sn ?: ('Terminal #' . ($command->terminal_id ?? '-'))) }}</div>
                                    @if (($command->terminal_alias ?: null) && ($command->terminal_sn ?: null))
                                        <div class="muted" style="font-size: 12px;">{{ $command->terminal_sn }}</div>
                                    @endif
                                    @if (!$command->terminal_alias && !$command->terminal_sn && !empty($command->terminal_id))
                                        <div class="muted" style="font-size: 12px;">terminal_id: {{ $command->terminal_id }}</div>
                                    @endif
                                </td>
                                <td>
                                    <div style="display: grid; gap: 8px;">
                                        <code style="display:block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" title="{{ $command->content }}">
                                            {{ \Illuminate\Support\Str::limit($command->content, 90) }}
                                        </code>
                                        <button
                                            type="button"
                                            class="command-btn command-btn--secondary"
                                            style="min-height: 27px; padding: 4px 9px; justify-self: start;"
                                            data-command-preview-trigger
                                            data-command-id="{{ $command->id }}"
                                            data-command-terminal="{{ $command->terminal_alias ?: ($command->terminal_sn ?: ('Terminal #' . ($command->terminal_id ?? '-'))) }}"
                                            data-command-content="{{ e($command->content) }}"
                                        >
                                            Lihat
                                        </button>
                                    </div>
                                </td>
                                <td>
                                    @if ($command->context_label)
                                        <span class="status" style="background: #dbeafe; color: #084298;">{{ $command->context_label }}</span>
                                    @else
                                        <span class="muted">-</span>
                                    @endif
                                </td>
                                <td><span style="font-size: 13px;">{{ $command->commit_time }}</span></td>
                                <td><span style="font-size: 13px;">{{ $command->transfer_time ?: '-' }}</span></td>
                                <td><span style="font-size: 13px;">{{ $command->return_time ?: '-' }}</span></td>
                                <td>
                                    <span
                                        class="status {{ $command->result_class }} command-result--{{ $command->return_time === null ? 'pending' : (\Illuminate\Support\Str::startsWith($command->result_label, 'Success') ? 'success' : 'error') }}"
                                        @if(!empty($command->result_detail))
                                            title="{{ $command->result_detail }}"
                                        @endif
                                    >
                                        {{ $command->result_label }}
                                    </span>
                                    @if (($command->result_class ?? '') === 'success-operlog')
                                        <div class="muted" style="margin-top: 6px; font-size: 12px;">ACK: OPERLOG</div>
                                    @endif
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="8" class="muted">Belum ada history command.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
        <div style="margin-top: 16px; display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;">
            <div class="muted" style="font-size:13px;">
                Menampilkan {{ $commands->firstItem() ?? 0 }}-{{ $commands->lastItem() ?? 0 }} dari {{ $commands->total() }} command
            </div>
            {{ $commands->onEachSide(1)->links() }}
        </div>
    </section>

    <div id="command-preview-modal" class="modal-backdrop" onclick="if (event.target === this) toggleCommandPreviewModal(false)">
        <div class="modal-card" style="max-width: 880px;">
            <div class="modal-head">
                <div>
                    <h3 style="margin-bottom: 4px;">Detail Command</h3>
                    <div id="command-preview-subtitle" class="muted" style="font-size: 13px;"></div>
                </div>
                <button type="button" class="modal-close" onclick="toggleCommandPreviewModal(false)">&times;</button>
            </div>
            <div class="modal-body">
                <pre id="command-preview-body" style="margin: 0; white-space: pre-wrap; word-break: break-word; padding: 16px; border-radius: 16px; background: #111827; color: #eef2ff; overflow: auto;"></pre>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
    function toggleCommandPreviewModal(force) {
        const panel = document.getElementById('command-preview-modal');
        if (!panel) return;
        const shouldShow = typeof force === 'boolean' ? force : !panel.classList.contains('open');
        panel.classList.toggle('open', shouldShow);
    }

    document.querySelectorAll('[data-command-preview-trigger]').forEach(function (button) {
        button.addEventListener('click', function () {
            const id = button.getAttribute('data-command-id') || '-';
            const terminal = button.getAttribute('data-command-terminal') || '-';
            const content = button.getAttribute('data-command-content') || '-';
            const subtitle = document.getElementById('command-preview-subtitle');
            const body = document.getElementById('command-preview-body');

            if (subtitle) {
                subtitle.textContent = 'Command #' + id + ' · ' + terminal;
            }

            if (body) {
                body.textContent = content;
            }

            toggleCommandPreviewModal(true);
        });
    });
</script>
@endpush