@extends('layouts.horizontal', ['title' => 'DEMO Interpretaciones'])

@section('content')
<div class="container-fluid">

@include('layouts.partials.page-title', [
    'subtitle' => 'Interpretaciones',
    'title' => 'Asignadas'
])
<div class="card">
    <div class="card-header">
        <h5>Demo Interpretación con IA</h5>
    </div>

    <div class="card-body">

        {{-- SUBIR ARCHIVO --}}
        <div class="mb-3">
            <label class="form-label">Subir estudio</label>
            <input type="file" name="archivo" class="form-control" id="archivo">
        </div>

        {{-- BOTON --}}
        <button class="btn btn-primary" onclick="analizarIA()">
            <i class="ti ti-brain"></i> Analizar con IA
        </button>

        {{-- RESULTADO --}}
        <div class="mt-4">
            <label class="form-label">Interpretación IA</label>
            <textarea id="resultadoIA" class="form-control" rows="8"></textarea>
        </div>

    </div>
</div>
</div>
@endsection
@push('scripts')
<script>
function analizarIA() {

    let file = document.getElementById('archivo').files[0];

    if (!file) {
        alert('Selecciona un archivo primero');
        return;
    }

    let btn = document.querySelector('button');
    btn.disabled = true;

    let formData = new FormData();
    formData.append('archivo', file);

    document.getElementById('resultadoIA').value = "Analizando con IA...";

    fetch('/demo-ia-interpretacion', {
        method: 'POST',
        body: formData,
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        }
    })
    .then(res => res.json())
    .then(data => {

        if (!data.ok) {
            document.getElementById('resultadoIA').value = data.message || 'Error al procesar';
            btn.disabled = false;
            return;
        }

        escribirTexto(data.interpretacion, 'resultadoIA', 10);
        btn.disabled = false;
    })
    .catch(err => {
        document.getElementById('resultadoIA').value = 'Error de conexión con el servidor';
        btn.disabled = false;
    });
}
</script>
<script>
function escribirTexto(texto, elementoId, velocidad = 20) {
    let i = 0;
    let elemento = document.getElementById(elementoId);
    elemento.value = '';

    function escribir() {
        if (i < texto.length) {
            elemento.value += texto.charAt(i);
            i++;
            setTimeout(escribir, velocidad);
        }
    }

    escribir();
}
</script>
@endpush