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

{% block title %}{% trans "Sentiment Result" %} - {{ result.id }}{% 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 "Sentiment Analysis Result" %}</h1>
            <p class="text-muted">{{ result.created_at|date:"Y-m-d H:i:s" }}</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>
            <form method="post" action="{% url 'ai_engine:reanalyze_sentiment' result.id %}" style="display: inline;">
                {% csrf_token %}
                <button type="submit" class="btn btn-primary">
                    <i class="bi bi-arrow-repeat"></i> {% trans "Re-analyze" %}
                </button>
            </form>
        </div>
    </div>

    <div class="row">
        <!-- Main Content -->
        <div class="col-lg-8">
            <!-- Text Content -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">{% trans "Analyzed Text" %}</h5>
                </div>
                <div class="card-body">
                    <p class="lead">{{ result.text }}</p>
                    <div class="mt-3">
                        <span class="badge bg-info">
                            {% if result.language == 'ar' %}العربية{% else %}English{% endif %}
                        </span>
                    </div>
                </div>
            </div>

            <!-- Sentiment Analysis -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">{% trans "Sentiment Analysis" %}</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-4 text-center mb-3">
                            <h6 class="text-muted">{% trans "Sentiment" %}</h6>
                            {% if result.sentiment == 'positive' %}
                                <h2 class="text-success">😊 {% trans "Positive" %}</h2>
                            {% elif result.sentiment == 'negative' %}
                                <h2 class="text-danger">😞 {% trans "Negative" %}</h2>
                            {% else %}
                                <h2 class="text-secondary">😐 {% trans "Neutral" %}</h2>
                            {% endif %}
                        </div>
                        <div class="col-md-4 text-center mb-3">
                            <h6 class="text-muted">{% trans "Score" %}</h6>
                            <h2>{{ result.sentiment_score|floatformat:4 }}</h2>
                            <small class="text-muted">(-1 to +1)</small>
                        </div>
                        <div class="col-md-4 text-center mb-3">
                            <h6 class="text-muted">{% trans "Confidence" %}</h6>
                            <h2>{{ result.confidence|floatformat:2 }}</h2>
                            <div class="progress mt-2">
                                <div class="progress-bar bg-success" role="progressbar" 
                                     style="width: {{ result.confidence|floatformat:0 }}%">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Keywords -->
            {% if result.keywords %}
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">{% trans "Keywords" %}</h5>
                </div>
                <div class="card-body">
                    {% for keyword in result.keywords %}
                        <span class="badge bg-primary me-2 mb-2">{{ keyword }}</span>
                    {% endfor %}
                </div>
            </div>
            {% endif %}

            <!-- Entities -->
            {% if result.entities %}
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">{% trans "Entities" %}</h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-sm">
                            <thead>
                                <tr>
                                    <th>{% trans "Text" %}</th>
                                    <th>{% trans "Type" %}</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for entity in result.entities %}
                                <tr>
                                    <td>{{ entity.text }}</td>
                                    <td><span class="badge bg-secondary">{{ entity.type }}</span></td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            {% endif %}

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

        <!-- Sidebar -->
        <div class="col-lg-4">
            <!-- Metadata -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">{% trans "Metadata" %}</h5>
                </div>
                <div class="card-body">
                    <dl class="row mb-0">
                        <dt class="col-sm-5">{% trans "ID" %}</dt>
                        <dd class="col-sm-7"><small class="font-monospace">{{ result.id }}</small></dd>
                        
                        <dt class="col-sm-5">{% trans "AI Service" %}</dt>
                        <dd class="col-sm-7">{{ result.ai_service }}</dd>
                        
                        <dt class="col-sm-5">{% trans "AI Model" %}</dt>
                        <dd class="col-sm-7">{{ result.ai_model|default:"-" }}</dd>
                        
                        <dt class="col-sm-5">{% trans "Processing Time" %}</dt>
                        <dd class="col-sm-7">{{ result.processing_time_ms }} ms</dd>
                        
                        <dt class="col-sm-5">{% trans "Created" %}</dt>
                        <dd class="col-sm-7">{{ result.created_at|date:"Y-m-d H:i:s" }}</dd>
                        
                        <dt class="col-sm-5">{% trans "Updated" %}</dt>
                        <dd class="col-sm-7">{{ result.updated_at|date:"Y-m-d H:i:s" }}</dd>
                    </dl>
                </div>
            </div>

            <!-- Related Object -->
            {% if related_object %}
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">{% trans "Related Object" %}</h5>
                </div>
                <div class="card-body">
                    <p><strong>{% trans "Type" %}:</strong> {{ result.content_type.model }}</p>
                    <p><strong>{% trans "Object" %}:</strong> {{ related_object }}</p>
                </div>
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}