@extends('adminlte::page')

@section('title', 'Test Gemini API')

@section('content_header')
    <h1>Test Gemini API con gemini-api-php/client</h1>
@stop

@section('content')
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Test della libreria gemini-api-php/client</h3>
                </div>
                <div class="card-body">
                    <p class="mb-3">Questo test verifica l'integrazione della nuova libreria Gemini API PHP Client con l'applicazione.</p>
                    
                    <div class="d-flex mb-4">
                        <button id="test-button" class="btn btn-primary mr-3">
                            <i class="fas fa-robot mr-2"></i> Testa Gemini API
                        </button>
                        
                        <button id="models-button" class="btn btn-info">
                            <i class="fas fa-list mr-2"></i> Visualizza Modelli Disponibili
                        </button>
                    </div>
                    
                    <div id="loading" class="d-none">
                        <div class="d-flex align-items-center">
                            <div class="spinner-border text-primary mr-3" role="status">
                                <span class="sr-only">Caricamento...</span>
                            </div>
                            <span>Comunicazione con Gemini API in corso...</span>
                        </div>
                    </div>
                    
                    <div id="result-container" class="d-none">
                        <div class="card bg-light">
                            <div class="card-header">
                                <h4 class="card-title">Prompt inviato</h4>
                            </div>
                            <div class="card-body">
                                <pre id="prompt-text" class="mb-0"></pre>
                            </div>
                        </div>
                        
                        <div class="card bg-light mt-3">
                            <div class="card-header">
                                <h4 class="card-title">Risposta ricevuta</h4>
                            </div>
                            <div class="card-body">
                                <div id="response-text"></div>
                            </div>
                        </div>
                    </div>
                    
                    <div id="models-container" class="d-none mt-3">
                        <div class="card bg-light">
                            <div class="card-header">
                                <h4 class="card-title">Modelli Gemini Disponibili</h4>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table table-bordered table-striped">
                                        <thead>
                                            <tr>
                                                <th>Nome</th>
                                                <th>Nome Visualizzato</th>
                                                <th>Descrizione</th>
                                                <th>Limite Token Input</th>
                                                <th>Limite Token Output</th>
                                                <th>Metodi Supportati</th>
                                            </tr>
                                        </thead>
                                        <tbody id="models-table-body">
                                            <!-- I dati dei modelli saranno inseriti qui tramite JavaScript -->
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div id="error-container" class="d-none mt-3">
                        <div class="alert alert-danger">
                            <h5><i class="icon fas fa-ban"></i> Errore!</h5>
                            <p id="error-text"></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@stop

@section('js')
<script>
    $(document).ready(function() {
        $('#test-button').on('click', function() {
            // Mostra il loader e nascondi i container
            $('#loading').removeClass('d-none');
            $('#result-container').addClass('d-none');
            $('#models-container').addClass('d-none');
            $('#error-container').addClass('d-none');
            
            // Disabilita il pulsante durante il caricamento
            $(this).prop('disabled', true);
            
            // Esegui la richiesta AJAX
            $.ajax({
                url: '{{ route("gemini.test") }}',
                method: 'GET',
                dataType: 'json',
                success: function(response) {
                    // Nascondi il loader
                    $('#loading').addClass('d-none');
                    
                    if (response.success) {
                        // Mostra il container dei risultati
                        $('#result-container').removeClass('d-none');
                        
                        // Popola i dati
                        $('#prompt-text').text(response.prompt);
                        $('#response-text').html(response.response.replace(/\n/g, '<br>'));
                    } else {
                        // Mostra l'errore
                        $('#error-container').removeClass('d-none');
                        $('#error-text').text(response.error || 'Si è verificato un errore sconosciuto.');
                    }
                },
                error: function(xhr) {
                    // Nascondi il loader
                    $('#loading').addClass('d-none');
                    
                    // Mostra l'errore
                    $('#error-container').removeClass('d-none');
                    
                    let errorMessage = 'Si è verificato un errore nella comunicazione con il server.';
                    
                    if (xhr.responseJSON && xhr.responseJSON.error) {
                        errorMessage = xhr.responseJSON.error;
                    }
                    
                    $('#error-text').text(errorMessage);
                },
                complete: function() {
                    // Riabilita il pulsante
                    $('#test-button').prop('disabled', false);
                }
            });
        });
        
        $('#models-button').on('click', function() {
            // Mostra il loader e nascondi i container
            $('#loading').removeClass('d-none');
            $('#result-container').addClass('d-none');
            $('#models-container').addClass('d-none');
            $('#error-container').addClass('d-none');
            
            // Disabilita il pulsante durante il caricamento
            $(this).prop('disabled', true);
            
            // Esegui la richiesta AJAX per ottenere i modelli
            $.ajax({
                url: '{{ route("gemini.models") }}',
                method: 'GET',
                dataType: 'json',
                success: function(response) {
                    // Nascondi il loader
                    $('#loading').addClass('d-none');
                    
                    if (response.success && response.models) {
                        // Svuota la tabella
                        $('#models-table-body').empty();
                        
                        // Popola la tabella con i dati dei modelli
                        $.each(response.models, function(index, model) {
                            let methods = Array.isArray(model.supportedGenerationMethods) 
                                ? model.supportedGenerationMethods.join(', ') 
                                : 'N/A';
                                
                            let row = `
                                <tr>
                                    <td>${model.name || 'N/A'}</td>
                                    <td>${model.displayName || 'N/A'}</td>
                                    <td>${model.description || 'N/A'}</td>
                                    <td>${model.inputTokenLimit || 'N/A'}</td>
                                    <td>${model.outputTokenLimit || 'N/A'}</td>
                                    <td>${methods}</td>
                                </tr>
                            `;
                            
                            $('#models-table-body').append(row);
                        });
                        
                        // Mostra il container dei modelli
                        $('#models-container').removeClass('d-none');
                    } else {
                        // Mostra l'errore
                        $('#error-container').removeClass('d-none');
                        $('#error-text').text(response.error || 'Nessun modello trovato.');
                    }
                },
                error: function(xhr) {
                    // Nascondi il loader
                    $('#loading').addClass('d-none');
                    
                    // Mostra l'errore
                    $('#error-container').removeClass('d-none');
                    
                    let errorMessage = 'Si è verificato un errore nel recupero dei modelli disponibili.';
                    
                    if (xhr.responseJSON && xhr.responseJSON.error) {
                        errorMessage = xhr.responseJSON.error;
                    }
                    
                    $('#error-text').text(errorMessage);
                },
                complete: function() {
                    // Riabilita il pulsante
                    $('#models-button').prop('disabled', false);
                }
            });
        });
    });
</script>
@stop

@section('css')
<style>
    pre {
        background-color: #f8f9fa;
        padding: 1rem;
        border-radius: 0.25rem;
        white-space: pre-wrap;
    }
    
    #response-text {
        background-color: #f8f9fa;
        padding: 1rem;
        border-radius: 0.25rem;
        line-height: 1.6;
    }
</style>
@stop