{% extends 'base_materio.html.twig' %}

{% block title %}Análisis de Correos con IA Local - Ollama{% endblock %}

{% block header_title %}Asistente de IA Local (Ollama & Symfony AI){% endblock %}

{% block body %}
<div class="container-fluid px-0">
    <!-- Header Card -->
    <div class="card card-materio mb-4">
        <div class="card-body">
            <div class="d-flex align-items-center gap-3">
                <div class="avatar bg-light-primary p-3 rounded">
                    <i class="bx bx-bot text-primary fs-1"></i>
                </div>
                <div>
                    <h3 class="mb-1 text-dark fw-bold">Clasificación & Extracción de Emails con IA Local</h3>
                    <p class="text-muted mb-0">
                        Procesa correos electrónicos o mensajes entrantes sin enviar datos a servidores externos (100% Privado con Ollama).
                    </p>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-4">
        <!-- Formulario de Entrada -->
        <div class="col-12 col-lg-6">
            <div class="card card-materio h-100">
                <div class="card-header bg-white border-bottom py-3">
                    <h5 class="mb-0 fw-semibold text-dark"><i class="bx bx-envelope me-2 text-primary"></i> Copia o pega el texto del correo</h5>
                </div>
                <div class="card-body mt-3">
                    <form method="post" action="{{ path('comunicacion_ia_analizar') }}">
                        <div class="mb-3">
                            <label class="form-label fw-semibold">Contenido del Correo / Mensaje</label>
                            <textarea name="contenidoEmail" rows="10" class="form-control" placeholder="Ej: Estimado estudio, les escribo en relación al Caso Souilhé c/ Aseguradora por el cheque de liquidación..." required>{{ textoInput }}</textarea>
                        </div>
                        <button type="submit" class="btn btn-primary rounded-pill px-4">
                            <i class="bx bx-cog me-1"></i> Analizar con IA Local
                        </button>
                    </form>
                </div>
            </div>
        </div>

        <!-- Resultado del Análisis de IA -->
        <div class="col-12 col-lg-6">
            <div class="card card-materio h-100">
                <div class="card-header bg-white border-bottom py-3 d-flex justify-content-between align-items-center">
                    <h5 class="mb-0 fw-semibold text-dark"><i class="bx bx-chip me-2 text-primary"></i> Resultado de Análisis</h5>
                    {% if resultado %}
                        <span class="badge badge-soft-success rounded-pill px-3 py-2"><i class="bx bx-check-circle me-1"></i> Procesado</span>
                    {% endif %}
                </div>
                <div class="card-body mt-3">
                    {% if resultado %}
                        <div class="mb-4">
                            <label class="text-muted small fw-semibold d-block mb-1">RESUMEN EJECUTIVO DE IA</label>
                            <div class="p-3 bg-light rounded border text-dark fw-medium fs-6">
                                {{ resultado.resumen }}
                            </div>
                        </div>

                        <div class="row g-3 mb-4">
                            <div class="col-6">
                                <label class="text-muted small fw-semibold d-block mb-1">NÚMERO DE EXPEDIENTE / CASO</label>
                                {% if resultado.nroCaso %}
                                    <span class="badge badge-soft-primary fs-6 px-3 py-2 rounded-pill"><i class="bx bx-folder me-1"></i> {{ resultado.nroCaso }}</span>
                                {% else %}
                                    <span class="badge badge-soft-secondary fs-6 px-3 py-2 rounded-pill">No detectado</span>
                                {% endif %}
                            </div>

                            <div class="col-6">
                                <label class="text-muted small fw-semibold d-block mb-1">NIVEL DE URGENCIA</label>
                                {% if resultado.urgencia == 'alta' %}
                                    <span class="badge badge-soft-danger fs-6 px-3 py-2 rounded-pill"><i class="bx bx-error me-1"></i> ALTA</span>
                                {% elseif resultado.urgencia == 'media' %}
                                    <span class="badge badge-soft-warning fs-6 px-3 py-2 rounded-pill"><i class="bx bx-time me-1"></i> MEDIA</span>
                                {% else %}
                                    <span class="badge badge-soft-info fs-6 px-3 py-2 rounded-pill"><i class="bx bx-check me-1"></i> BAJA</span>
                                {% endif %}
                            </div>
                        </div>

                        <div class="alert {{ resultado.requiereAccion ? 'alert-warning' : 'alert-success' }} d-flex align-items-center mb-0">
                            <i class="bx {{ resultado.requiereAccion ? 'bx-error-circle' : 'bx-check-circle' }} fs-3 me-2"></i>
                            <div>
                                <strong>{{ resultado.requiereAccion ? 'Requiere Acción por el Abogado' : 'Informativo (Sin acción requerida)' }}</strong>
                            </div>
                        </div>
                    {% else %}
                        <div class="text-center py-5 text-muted">
                            <i class="bx bx-bot fs-1 text-secondary d-block mb-2"></i>
                            El resultado del análisis estructurado por Ollama se mostrará aquí.
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}