@extends('parts.container')

@section('styles')
<link rel="stylesheet" type="text/css" href="{{ asset('vendor/src/plugins/src/table/datatable/datatables.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('vendor/src/plugins/css/light/table/datatable/dt-global_style.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('vendor/src/plugins/css/dark/table/datatable/dt-global_style.css') }}">
<style>
    .msg-preview { max-width: 420px; white-space: normal; word-break: break-word; }
</style>
@endsection

@section('content')
<div class="row layout-spacing">
    <div class="col-lg-12">
        <div class="statbox widget box box-shadow">
            <div class="widget-header d-flex justify-content-between align-items-center px-3 pt-3">
                <h4 class="mb-0">Automation Messages</h4>
                <div class="d-flex gap-2">
                    <input id="filterDeviceId" type="text" class="form-control form-control-sm" style="width:200px" placeholder="Filter by device ID">
                    <input id="filterSearch" type="text" class="form-control form-control-sm" style="width:200px" placeholder="Search sender / message">
                </div>
            </div>
            <div class="widget-content widget-content-area">
                <div class="table-responsive">
                    <table class="table style-3 dt-table-hover" id="messagesTable">
                        <thead>
                            <tr>
                                <th>Device</th>
                                <th>Sender</th>
                                <th>Message</th>
                                <th>Received At</th>
                                <th>Uploaded At</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="{{ asset('vendor/src/plugins/src/table/datatable/datatables.js') }}"></script>
<script>
let messagesTable = null;

function fmtDate(d) {
    if (!d) return '—';
    const dt = new Date(d);
    return dt.toLocaleDateString() + ' ' + dt.toLocaleTimeString([], {hour:'2-digit',minute:'2-digit'});
}

function loadMessages() {
    const deviceId = document.getElementById('filterDeviceId').value.trim();
    const search = document.getElementById('filterSearch').value.trim();
    const params = new URLSearchParams();
    if (deviceId) params.set('device_id', deviceId);
    if (search) params.set('q', search);

    let url = '/admin/automation-messages/list';
    if ([...params].length) url += '?' + params.toString();

    fetch(url)
        .then(r => r.json())
        .then(resp => {
            if (!resp.success) throw new Error('Failed to load messages');
            const data = resp.data || [];

            if (!messagesTable) {
                messagesTable = $('#messagesTable').DataTable({
                    data,
                    columns: [
                        { data: null, render: r => r.device
                            ? `<div><strong>${r.device.device_id}</strong><br><small class="text-muted">#${r.device.id} ${(r.device.manufacturer || '')} ${(r.device.model || '')}</small></div>`
                            : `<span class="text-muted">#${r.automation_device_id}</span>` },
                        { data: 'sender', render: v => v || '—' },
                        { data: 'message', className: 'msg-preview' },
                        { data: 'message_received_at', render: fmtDate },
                        { data: 'created_at', render: fmtDate },
                    ],
                    dom: "<'dt--top-section'<'row'<'col-12 col-sm-6 d-flex justify-content-sm-start justify-content-center'l><'col-12 col-sm-6 d-flex justify-content-sm-end justify-content-center mt-sm-0 mt-3'f>>>" +
                         "<'table-responsive'tr>" +
                         "<'dt--bottom-section d-sm-flex justify-content-sm-between text-center'<'dt--pages-count  mb-sm-0 mb-3'i><'dt--pagination'p>>",
                    stripeClasses: [],
                    lengthMenu: [10, 25, 50],
                    pageLength: 25,
                    order: [[3, 'desc']],
                });
            } else {
                messagesTable.clear();
                messagesTable.rows.add(data);
                messagesTable.draw();
            }
        })
        .catch(err => alert(err.message));
}

let searchTimer = null;
function debouncedReload() {
    clearTimeout(searchTimer);
    searchTimer = setTimeout(loadMessages, 300);
}

document.getElementById('filterDeviceId').addEventListener('input', debouncedReload);
document.getElementById('filterSearch').addEventListener('input', debouncedReload);

loadMessages();
</script>
@endsection