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

{% block title %}{% trans "Sentiment Dashboard" %}{% 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 Analytics Dashboard" %}</h1>
            <p class="text-muted">{% trans "AI-powered sentiment analysis insights" %}</p>
        </div>
        <div>
            <a href="{% url 'ai_engine:sentiment_list' %}" class="btn btn-outline-secondary">
                <i class="bi bi-list"></i> {% trans "View All Results" %}
            </a>
            <a href="{% url 'ai_engine:analyze_text' %}" class="btn btn-primary">
                <i class="bi bi-plus-circle"></i> {% trans "Analyze Text" %}
            </a>
        </div>
    </div>

    <!-- Overall Statistics -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card">
                <div class="card-body">
                    <h6 class="text-muted mb-2">{% trans "Total Analyzed" %}</h6>
                    <h2 class="mb-0">{{ overall_stats.total }}</h2>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-success">
                <div class="card-body">
                    <h6 class="text-muted mb-2">😊 {% trans "Positive" %}</h6>
                    <h2 class="mb-0 text-success">
                        {{ overall_stats.positive }}
                    </h2>
                    <small class="text-muted">{{ overall_stats.positive_pct }}%</small>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-secondary">
                <div class="card-body">
                    <h6 class="text-muted mb-2">😐 {% trans "Neutral" %}</h6>
                    <h2 class="mb-0 text-secondary">
                        {{ overall_stats.neutral }}
                    </h2>
                    <small class="text-muted">{{ overall_stats.neutral_pct }}%</small>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-danger">
                <div class="card-body">
                    <h6 class="text-muted mb-2">😞 {% trans "Negative" %}</h6>
                    <h2 class="mb-0 text-danger">
                        {{ overall_stats.negative }}
                    </h2>
                    <small class="text-muted">{{ overall_stats.negative_pct }}%</small>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- Sentiment Distribution -->
        <div class="col-lg-6 mb-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">{% trans "Sentiment Distribution" %}</h5>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <div class="d-flex justify-content-between mb-1">
                            <span>😊 {% trans "Positive" %}</span>
                            <span>{{ overall_stats.positive }} ({{ overall_stats.positive_pct }}%)</span>
                        </div>
                        <div class="progress" style="height: 30px;">
                            <div class="progress-bar bg-success" role="progressbar" 
                                 style="width: {{ overall_stats.positive_pct }}%">
                            </div>
                        </div>
                    </div>
                    <div class="mb-3">
                        <div class="d-flex justify-content-between mb-1">
                            <span>😐 {% trans "Neutral" %}</span>
                            <span>{{ overall_stats.neutral }} ({{ overall_stats.neutral_pct }}%)</span>
                        </div>
                        <div class="progress" style="height: 30px;">
                            <div class="progress-bar bg-secondary" role="progressbar" 
                                 style="width: {{ overall_stats.neutral_pct }}%">
                            </div>
                        </div>
                    </div>
                    <div class="mb-3">
                        <div class="d-flex justify-content-between mb-1">
                            <span>😞 {% trans "Negative" %}</span>
                            <span>{{ overall_stats.negative }} ({{ overall_stats.negative_pct }}%)</span>
                        </div>
                        <div class="progress" style="height: 30px;">
                            <div class="progress-bar bg-danger" role="progressbar" 
                                 style="width: {{ overall_stats.negative_pct }}%">
                            </div>
                        </div>
                    </div>
                    <hr>
                    <div class="row text-center">
                        <div class="col-6">
                            <h6 class="text-muted">{% trans "Avg Score" %}</h6>
                            <h4>{{ overall_stats.avg_score|floatformat:2 }}</h4>
                        </div>
                        <div class="col-6">
                            <h6 class="text-muted">{% trans "Avg Confidence" %}</h6>
                            <h4>{{ overall_stats.avg_confidence|floatformat:2 }}</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Language Distribution -->
        <div class="col-lg-6 mb-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">{% trans "Language Distribution" %}</h5>
                </div>
                <div class="card-body">
                    {% for lang_stat in language_stats %}
                    <div class="mb-3">
                        <div class="d-flex justify-content-between mb-1">
                            <span>
                                {% if lang_stat.language == 'ar' %}
                                    العربية (Arabic)
                                {% else %}
                                    English
                                {% endif %}
                            </span>
                            <span>{{ lang_stat.count }}</span>
                        </div>
                        <div class="progress">
                            <div class="progress-bar bg-info" role="progressbar" 
                                 style="width: {% widthratio lang_stat.count overall_stats.total 100 %}%">
                            </div>
                        </div>
                    </div>
                    {% endfor %}

                    <hr>
                    <h6 class="mb-3">{% trans "Sentiment by Language" %}</h6>
                    {% for lang, stats in sentiment_by_language.items %}
                    <div class="mb-3">
                        <strong>
                            {% if lang == 'ar' %}العربية{% else %}English{% endif %}:
                        </strong>
                        <div class="d-flex gap-2 mt-1">
                            <span class="badge bg-success">
                                😊 {{ stats.positive }} ({{ stats.positive_pct }}%)
                            </span>
                            <span class="badge bg-secondary">
                                😐 {{ stats.neutral }} ({{ stats.neutral_pct }}%)
                            </span>
                            <span class="badge bg-danger">
                                😞 {{ stats.negative }} ({{ stats.negative_pct }}%)
                            </span>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- Top Keywords -->
        <div class="col-lg-6 mb-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">{% trans "Top Keywords" %}</h5>
                </div>
                <div class="card-body">
                    {% if top_keywords %}
                        {% for keyword, count in top_keywords %}
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <span class="badge bg-primary">{{ keyword }}</span>
                            <span class="badge bg-light text-dark">{{ count }}</span>
                        </div>
                        {% endfor %}
                    {% else %}
                        <p class="text-muted text-center">{% trans "No keywords found" %}</p>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- AI Service Stats -->
        <div class="col-lg-6 mb-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">{% trans "AI Service Usage" %}</h5>
                </div>
                <div class="card-body">
                    {% for service_stat in service_stats %}
                    <div class="mb-3">
                        <div class="d-flex justify-content-between mb-1">
                            <span class="text-capitalize">{{ service_stat.ai_service }}</span>
                            <span>{{ service_stat.count }}</span>
                        </div>
                        <div class="progress">
                            <div class="progress-bar" role="progressbar" 
                                 style="width: {% widthratio service_stat.count overall_stats.total 100 %}%">
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>

    <!-- Recent Results -->
    <div class="card mb-4">
        <div class="card-header">
            <h5 class="mb-0">{% trans "Recent Analysis Results" %}</h5>
        </div>
        <div class="table-responsive">
            <table class="table table-hover mb-0">
                <thead>
                    <tr>
                        <th>{% trans "Text" %}</th>
                        <th>{% trans "Sentiment" %}</th>
                        <th>{% trans "Score" %}</th>
                        <th>{% trans "Language" %}</th>
                        <th>{% trans "Date" %}</th>
                        <th>{% trans "Actions" %}</th>
                    </tr>
                </thead>
                <tbody>
                    {% for result in recent_results %}
                    <tr>
                        <td>
                            <div class="text-truncate" style="max-width: 400px;">
                                {{ result.text }}
                            </div>
                        </td>
                        <td>
                            {% if result.sentiment == 'positive' %}
                                <span class="badge bg-success">😊 {% trans "Positive" %}</span>
                            {% elif result.sentiment == 'negative' %}
                                <span class="badge bg-danger">😞 {% trans "Negative" %}</span>
                            {% else %}
                                <span class="badge bg-secondary">😐 {% trans "Neutral" %}</span>
                            {% endif %}
                        </td>
                        <td>{{ result.sentiment_score|floatformat:2 }}</td>
                        <td>
                            {% if result.language == 'ar' %}
                                <span class="badge bg-info">AR</span>
                            {% else %}
                                <span class="badge bg-info">EN</span>
                            {% endif %}
                        </td>
                        <td><small>{{ result.created_at|date:"Y-m-d H:i" }}</small></td>
                        <td>
                            <a href="{% url 'ai_engine:sentiment_detail' result.id %}" 
                               class="btn btn-sm btn-outline-primary">
                                <i class="bi bi-eye"></i>
                            </a>
                        </td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="6" class="text-center text-muted py-4">
                            {% trans "No recent results" %}
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}