@extends('layouts.adminlte')

@section('title', 'MOBILE CLIENT LOGS')
@section('page_title', 'MOBILE CLIENT LOGS')

@push('styles')
    <link rel="stylesheet" href="{{ asset('vendor/datatables/css/dataTables.bootstrap5.min.css') }}" />
    <style>
        .log-badge {
            display: inline-block;
            padding: 2px 10px;
            border-radius: 999px;
            font-size: 12px;
            font-weight: 700;
        }
        .log-badge-error { background: #fee2e2; color: #b91c1c; }
        .log-badge-warning { background: #fef3c7; color: #92400e; }
        .log-badge-info { background: #dbeafe; color: #1d4ed8; }
        .stack-box, .context-box {
            white-space: pre-wrap;
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
            font-size: 12px;
            background: #0f172a;
            color: #e2e8f0;
            border-radius: 10px;
            padding: 12px;
            max-height: 320px;
            overflow: auto;
        }
        .message-cell {
            max-width: 460px;
            white-space: normal;
        }
        .toolbar-card {
            border: 1px solid #e5e7eb;
            border-radius: 16px;
            background: #fff;
            box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
        }
        #tblLogs_wrapper .dataTables_paginate .paginate_button {
            padding: 0 !important;
            margin: 0 .12rem !important;
            border: 0 !important;
            background: transparent !important;
        }
        #tblLogs_wrapper .dataTables_paginate .paginate_button .page-link {
            border-radius: .55rem;
        }
    </style>
@endpush

@section('content')
    <div class="d-flex flex-wrap gap-2 mb-3">
        <a href="{{ route('attendance_mobile_notification_settings.index') }}" class="btn btn-outline-primary btn-sm">
            <i class="fas fa-sliders-h me-1"></i>Setting Mobile
        </a>
        <a href="{{ route('public.attendance_2fa', ['label' => 'PUBLIC-2FA']) }}" target="_blank" class="btn btn-outline-success btn-sm">
            <i class="fas fa-qrcode me-1"></i>Buka Layar QR 2FA
        </a>
    </div>

    <div class="toolbar-card mb-3">
        <div class="card-body">
            <div class="d-flex flex-wrap justify-content-between align-items-start gap-3 mb-3">
                <div>
                    <h5 class="mb-1">Log Mobile Client</h5>
                    <div class="text-muted small">Data dibaca server-side agar tetap ringan walau log sudah banyak.</div>
                </div>
                <div class="d-flex gap-2">
                    <button class="btn btn-primary btn-sm" id="btnFilter">
                        <i class="fas fa-filter me-1"></i>Tampilkan
                    </button>
                    <button class="btn btn-outline-success btn-sm" id="btnExportExcel">
                        <i class="fas fa-file-excel me-1"></i>Export Excel
                    </button>
                    <button class="btn btn-outline-danger btn-sm" id="btnTruncate">
                        <i class="fas fa-trash-alt me-1"></i>Truncate Table
                    </button>
                </div>
            </div>

            <div class="row g-2 align-items-end">
                <div class="col-md-2">
                    <label class="form-label">Dari</label>
                    <input type="date" id="dateFrom" class="form-control" value="{{ now()->subDays(7)->format('Y-m-d') }}">
                </div>
                <div class="col-md-2">
                    <label class="form-label">Sampai</label>
                    <input type="date" id="dateTo" class="form-control" value="{{ now()->format('Y-m-d') }}">
                </div>
                <div class="col-md-2">
                    <label class="form-label">Level</label>
                    <select id="level" class="form-select">
                        <option value="">Semua</option>
                        <option value="error">Error</option>
                        <option value="warning">Warning</option>
                        <option value="info">Info</option>
                    </select>
                </div>
                <div class="col-md-6">
                    <label class="form-label">Cari</label>
                    <input type="text" id="q" class="form-control" placeholder="message / employee_code / finger_id / route / device">
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered table-striped align-middle" id="tblLogs" width="100%">
                    <thead>
                        <tr>
                            <th style="width: 70px;">ID</th>
                            <th style="width: 160px;">Waktu</th>
                            <th style="width: 90px;">Level</th>
                            <th style="width: 140px;">Type</th>
                            <th style="width: 120px;">User</th>
                            <th style="width: 120px;">Device</th>
                            <th style="width: 120px;">Route</th>
                            <th>Message</th>
                            <th style="width: 120px;">Aksi</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>

    <div class="modal fade" id="logModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Detail Log Mobile</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">Message</label>
                            <div class="border rounded p-3 bg-light" id="detailMessage">-</div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Meta</label>
                            <div class="border rounded p-3 bg-light" id="detailMeta">-</div>
                        </div>
                        <div class="col-12">
                            <label class="form-label">Stack Trace</label>
                            <div class="stack-box" id="detailStack">-</div>
                        </div>
                        <div class="col-12">
                            <label class="form-label">Context JSON</label>
                            <div class="context-box" id="detailContext">-</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="{{ asset('vendor/datatables/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('vendor/datatables/js/dataTables.bootstrap5.min.js') }}"></script>
    <script>
        const modal = new bootstrap.Modal(document.getElementById('logModal'));
        const rowState = new Map();

        if (!window.jQuery || !$.fn || !$.fn.DataTable) {
            console.error('DataTables not loaded');
        }

        function esc(value) {
            return (value ?? '').toString()
                .replaceAll('&', '&amp;')
                .replaceAll('<', '&lt;')
                .replaceAll('>', '&gt;')
                .replaceAll('"', '&quot;')
                .replaceAll("'", '&#039;');
        }

        function badge(level) {
            const v = (level || '').toLowerCase();
            const klass = v === 'warning' ? 'log-badge-warning' : (v === 'info' ? 'log-badge-info' : 'log-badge-error');
            return `<span class="log-badge ${klass}">${esc(v || '-')}</span>`;
        }

        function formatMeta(row) {
            return [
                `Platform: ${row.platform || '-'}`,
                `App Version: ${row.app_version || '-'}`,
                `Employee: ${row.employee_code || '-'} / ${row.finger_id || '-'}`,
                `Device: ${row.device_id || '-'}`,
                `Route: ${row.route_name || '-'}`,
                `Occurred At: ${row.occurred_at || '-'}`,
            ].join('<br>');
        }

        const table = $('#tblLogs').DataTable({
            processing: true,
            serverSide: true,
            searching: false,
            ordering: true,
            pageLength: 25,
            lengthMenu: [[10, 25, 50, 100], [10, 25, 50, 100]],
            autoWidth: false,
            responsive: false,
            dom: "<'row g-2 align-items-center mb-2'<'col-12 col-md-6'l><'col-12 col-md-6'f>>t<'row g-2 align-items-center mt-2'<'col-12 col-md-6'i><'col-12 col-md-6'p>>",
            ajax: {
                url: @json(route('attendance_mobile_client_logs.data')),
                data: function (d) {
                    d.date_from = $('#dateFrom').val();
                    d.date_to = $('#dateTo').val();
                    d.level = $('#level').val();
                    d.q = $('#q').val().trim();
                },
                dataSrc: function (json) {
                    rowState.clear();
                    const rows = Array.isArray(json.data) ? json.data : [];
                    rows.forEach((row) => rowState.set(Number(row.id), row));
                    return rows;
                }
            },
            order: [[1, 'desc'], [0, 'desc']],
            columns: [
                { data: 'id' },
                { data: 'occurred_at', defaultContent: '-' },
                { data: 'level', render: (data) => badge(data) },
                { data: 'error_type', defaultContent: '-' },
                {
                    data: null,
                    render: function (data, type, row) {
                        return esc(row.employee_code || row.finger_id || '-');
                    }
                },
                { data: 'device_id', defaultContent: '-' },
                { data: 'route_name', defaultContent: '-' },
                {
                    data: 'message',
                    className: 'message-cell',
                    render: function (data) {
                        return esc(data || '-');
                    }
                },
                {
                    data: null,
                    orderable: false,
                    searchable: false,
                    render: function (data, type, row) {
                        return `<button class="btn btn-sm btn-outline-primary btn-detail" data-id="${row.id}">Detail</button>`;
                    }
                }
            ],
            language: {
                processing: 'Memuat log mobile...',
                zeroRecords: 'Belum ada log.',
                emptyTable: 'Belum ada log.',
                search: 'Cari:',
                lengthMenu: 'Tampilkan _MENU_',
                info: 'Menampilkan _START_ s/d _END_ dari _TOTAL_',
                infoEmpty: 'Tidak ada data',
                paginate: { previous: 'Prev', next: 'Next' },
            }
        });

        function reloadTable() {
            table.ajax.reload(null, true);
        }

        function buildQuery() {
            const params = new URLSearchParams();
            const dateFrom = $('#dateFrom').val();
            const dateTo = $('#dateTo').val();
            const level = $('#level').val();
            const q = $('#q').val().trim();
            if (dateFrom) params.set('date_from', dateFrom);
            if (dateTo) params.set('date_to', dateTo);
            if (level) params.set('level', level);
            if (q) params.set('q', q);
            return params.toString();
        }

        $('#btnFilter').on('click', reloadTable);
        $('#q').on('keydown', function (e) {
            if (e.key === 'Enter') {
                reloadTable();
            }
        });
        $('#btnExportExcel').on('click', function () {
            const qs = buildQuery();
            const url = @json(route('attendance_mobile_client_logs.export_excel')) + (qs ? `?${qs}` : '');
            window.location.href = url;
        });

        $('#tblLogs').on('click', '.btn-detail', function () {
            const id = Number($(this).data('id'));
            const row = rowState.get(id);
            if (!row) return;
            document.getElementById('detailMessage').innerHTML = esc(row.message || '-');
            document.getElementById('detailMeta').innerHTML = formatMeta(row);
            document.getElementById('detailStack').textContent = row.stack_trace || '-';
            document.getElementById('detailContext').textContent = row.context_json ? JSON.stringify(row.context_json, null, 2) : '-';
            modal.show();
        });

        $('#btnTruncate').on('click', async function () {
            const ok = window.confirm('Semua log mobile client akan dihapus permanen. Lanjutkan?');
            if (!ok) return;

            const btn = this;
            btn.disabled = true;
            try {
                const resp = await fetch(@json(route('attendance_mobile_client_logs.truncate')), {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': @json(csrf_token()),
                        'Accept': 'application/json',
                    },
                    body: JSON.stringify({}),
                });
                const json = await resp.json();
                if (!resp.ok) {
                    throw new Error(json.message || 'Gagal truncate table.');
                }
                if (window.Swal) {
                    Swal.fire('Sukses', json.message || 'Table berhasil dikosongkan.', 'success');
                } else {
                    alert(json.message || 'Table berhasil dikosongkan.');
                }
                reloadTable();
            } catch (error) {
                if (window.Swal) {
                    Swal.fire('Error', (error && error.message) ? error.message : 'Gagal truncate table.', 'error');
                } else {
                    alert((error && error.message) ? error.message : 'Gagal truncate table.');
                }
            } finally {
                btn.disabled = false;
            }
        });
    </script>
@endpush