@extends('layouts.app')

@section('title', __('vetAI::lang.ai_history'))

@section('content')
<section class="content-header">
    <h1><i class="fas fa-history"></i> @lang('vetAI::lang.ai_history')
        <small>Audit log of AI clinical-assistant queries</small>
    </h1>
</section>

<section class="content">
    @component('components.widget', ['class' => 'box-primary'])
        <div class="row" style="margin-bottom:10px;">
            <div class="col-md-3">
                <label style="font-size:11px;">Type</label>
                <select id="f_type" class="form-control input-sm">
                    <option value="">All</option>
                    @foreach(['differential','dosage','interaction','education','general'] as $t)
                        <option value="{{ $t }}">{{ ucfirst($t) }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3">
                <label style="font-size:11px;">Status</label>
                <select id="f_status" class="form-control input-sm">
                    <option value="">All</option>
                    <option value="success">OK</option>
                    <option value="error">Error</option>
                </select>
            </div>
        </div>

        <table class="table table-bordered table-striped" id="queries_table" style="width:100%;">
            <thead>
                <tr>
                    <th>When</th>
                    <th>User</th>
                    <th>Pet</th>
                    <th>Type</th>
                    <th>Status</th>
                    <th>Tokens</th>
                    <th>View</th>
                </tr>
            </thead>
        </table>
    @endcomponent
</section>

<div class="modal fade" id="queryModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" style="font-size:15px;">&times;</button>
                <h4 class="modal-title">AI Query <span id="qm_id"></span></h4>
            </div>
            <div class="modal-body">
                <p style="font-size:12px;color:#64748b;" id="qm_meta"></p>
                <h5><strong>Prompt</strong></h5>
                <pre id="qm_prompt" style="white-space:pre-wrap;font-size:12px;max-height:200px;overflow:auto;"></pre>
                <h5><strong>Response</strong></h5>
                <div id="qm_response" style="font-size:12.5px;line-height:1.6;max-height:360px;overflow:auto;background:#f8fafc;border:1px solid #e8ecf0;border-radius:6px;padding:12px;"></div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('javascript')
<script>
var queriesTable = $('#queries_table').DataTable({
    processing: true, serverSide: true, order: [],
    ajax: {
        url: '{{ route('vai.queries.list') }}',
        data: function (d) { d.query_type = $('#f_type').val(); d.status = $('#f_status').val(); }
    },
    columns: [
        { data: 'when',         name: 'created_at' },
        { data: 'user_name',    name: 'user_name', orderable: false },
        { data: 'pet_name',     name: 'pet_name', orderable: false },
        { data: 'type_badge',   name: 'query_type', orderable: false },
        { data: 'status_badge', name: 'status', orderable: false },
        { data: 'tokens',       name: 'tokens', orderable: false, searchable: false },
        { data: 'action',       name: 'action', orderable: false, searchable: false }
    ]
});

$('#f_type, #f_status').on('change', function () { queriesTable.ajax.reload(); });

$(document).on('click', '.btn-view-query', function () {
    var id = $(this).data('id');
    $.getJSON('{{ url('vet-ai/history') }}/' + id, function (q) {
        $('#qm_id').text('#' + q.id);
        $('#qm_meta').text(q.when + ' · ' + q.type + ' · by ' + q.user + ' · pet: ' + q.pet
            + ' · model: ' + (q.model || '—') + ' · tokens: ' + q.tokens);
        $('#qm_prompt').text(q.prompt || '');
        if (q.status === 'success') {
            $('#qm_response').html(q.response_html || $('<div>').text(q.response || '').html());
        } else {
            $('#qm_response').text('ERROR: ' + (q.error || 'unknown'));
        }
        $('#queryModal').modal('show');
    });
});
</script>
@endsection
