{% extends "layouts/base.html" %}
{% load i18n %}

{% block title %}{% trans "Analyze Text" %}{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Page Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0">{% trans "Analyze Text" %}</h1>
            <p class="text-muted">{% trans "Perform sentiment analysis on any text" %}</p>
        </div>
        <div>
            <a href="{% url 'ai_engine:sentiment_list' %}" class="btn btn-outline-secondary">
                <i class="bi bi-arrow-left"></i> {% trans "Back to List" %}
            </a>
        </div>
    </div>

    <div class="row">
        <!-- Form -->
        <div class="col-lg-6">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">{% trans "Text Input" %}</h5>
                </div>
                <div class="card-body">
                    <form method="post">
                        {% csrf_token %}
                        
                        <div class="mb-3">
                            <label for="{{ form.text.id_for_label }}" class="form-label">
                                {{ form.text.label }}
                            </label>
                            {{ form.text }}
                            {% if form.text.help_text %}
                                <div class="form-text">{{ form.text.help_text }}</div>
                            {% endif %}
                            {% if form.text.errors %}
                                <div class="invalid-feedback d-block">
                                    {{ form.text.errors }}
                                </div>
                            {% endif %}
                        </div>

                        <div class="mb-3">
                            <label for="{{ form.language.id_for_label }}" class="form-label">
                                {{ form.language.label }}
                            </label>
                            {{ form.language }}
                            {% if form.language.help_text %}
                                <div class="form-text">{{ form.language.help_text }}</div>
                            {% endif %}
                        </div>

                        <div class="mb-3">
                            <label class="form-label">{% trans "Analysis Options" %}</label>
                            <div class="form-check">
                                {{ form.extract_keywords }}
                                <label class="form-check-label" for="{{ form.extract_keywords.id_for_label }}">
                                    {{ form.extract_keywords.label }}
                                </label>
                            </div>
                            <div class="form-check">
                                {{ form.extract_entities }}
                                <label class="form-check-label" for="{{ form.extract_entities.id_for_label }}">
                                    {{ form.extract_entities.label }}
                                </label>
                            </div>
                            <div class="form-check">
                                {{ form.detect_emotions }}
                                <label class="form-check-label" for="{{ form.detect_emotions.id_for_label }}">
                                    {{ form.detect_emotions.label }}
                                </label>
                            </div>
                        </div>

                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-cpu"></i> {% trans "Analyze" %}
                        </button>
                    </form>
                </div>
            </div>
        </div>

        <!-- Results -->
        <div class="col-lg-6">
            {% if result %}
            <div class="card">
                <div class="card-header bg-success text-white">
                    <h5 class="mb-0">{% trans "Analysis Results" %}</h5>
                </div>
                <div class="card-body">
                    <!-- Sentiment -->
                    <div class="text-center mb-4">
                        {% if result.sentiment == 'positive' %}
                            <h1 class="display-1">😊</h1>
                            <h3 class="text-success">{% trans "Positive" %}</h3>
                        {% elif result.sentiment == 'negative' %}
                            <h1 class="display-1">😞</h1>
                            <h3 class="text-danger">{% trans "Negative" %}</h3>
                        {% else %}
                            <h1 class="display-1">😐</h1>
                            <h3 class="text-secondary">{% trans "Neutral" %}</h3>
                        {% endif %}
                    </div>

                    <!-- Metrics -->
                    <div class="row mb-4">
                        <div class="col-6">
                            <div class="text-center">
                                <h6 class="text-muted">{% trans "Score" %}</h6>
                                <h4>{{ result.sentiment_score|floatformat:4 }}</h4>
                                <small class="text-muted">(-1 to +1)</small>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="text-center">
                                <h6 class="text-muted">{% trans "Confidence" %}</h6>
                                <h4>{{ result.confidence|floatformat:2 }}</h4>
                                <div class="progress mt-2">
                                    <div class="progress-bar bg-success" role="progressbar" 
                                         style="width: {{ result.confidence|floatformat:0 }}%">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Language -->
                    <div class="mb-3">
                        <strong>{% trans "Language" %}:</strong>
                        {% if result.language == 'ar' %}
                            <span class="badge bg-info">العربية</span>
                        {% else %}
                            <span class="badge bg-info">English</span>
                        {% endif %}
                    </div>

                    <!-- Keywords -->
                    {% if result.keywords %}
                    <div class="mb-3">
                        <strong>{% trans "Keywords" %}:</strong><br>
                        {% for keyword in result.keywords %}
                            <span class="badge bg-primary me-1 mb-1">{{ keyword }}</span>
                        {% endfor %}
                    </div>
                    {% endif %}

                    <!-- Entities -->
                    {% if result.entities %}
                    <div class="mb-3">
                        <strong>{% trans "Entities" %}:</strong>
                        <ul class="list-unstyled mt-2">
                            {% for entity in result.entities %}
                                <li>
                                    <span class="badge bg-secondary">{{ entity.type }}</span>
                                    {{ entity.text }}
                                </li>
                            {% endfor %}
                        </ul>
                    </div>
                    {% endif %}

                    <!-- Emotions -->
                    {% if result.emotions %}
                    <div class="mb-3">
                        <strong>{% trans "Emotions" %}:</strong>
                        {% for emotion, score in result.emotions.items %}
                            {% if score > 0 %}
                            <div class="mt-2">
                                <div class="d-flex justify-content-between mb-1">
                                    <span class="text-capitalize">{{ emotion }}</span>
                                    <span>{{ score|floatformat:2 }}</span>
                                </div>
                                <div class="progress" style="height: 10px;">
                                    <div class="progress-bar" role="progressbar" 
                                         style="width: {{ score|floatformat:0 }}%">
                                    </div>
                                </div>
                            </div>
                            {% endif %}
                        {% endfor %}
                    </div>
                    {% endif %}

                    <!-- Metadata -->
                    <hr>
                    <div class="small text-muted">
                        <div><strong>{% trans "AI Service" %}:</strong> {{ result.ai_service }}</div>
                        <div><strong>{% trans "Model" %}:</strong> {{ result.ai_model }}</div>
                        <div><strong>{% trans "Processing Time" %}:</strong> {{ result.processing_time_ms }} ms</div>
                    </div>
                </div>
            </div>
            {% else %}
            <div class="card">
                <div class="card-body text-center text-muted py-5">
                    <i class="bi bi-cpu display-1"></i>
                    <p class="mt-3">{% trans "Enter text and click Analyze to see results" %}</p>
                </div>
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}