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

{% block title %}Comment #{{ comment.id }} - {% trans "Social Media Monitoring" %} - PX360{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Breadcrumb -->
    <nav aria-label="breadcrumb" class="mb-3">
        <ol class="breadcrumb">
            <li class="breadcrumb-item">
                <a href="{% url 'social:social_comment_list' %}">{% trans "Social Media" %}</a>
            </li>
            <li class="breadcrumb-item">
                <a href="{% url 'social:social_platform' comment.platform %}">{{ comment.get_platform_display }}</a>
            </li>
            <li class="breadcrumb-item active" aria-current="page">Comment #{{ comment.id }}</li>
        </ol>
    </nav>

    <!-- Page Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div class="d-flex align-items-center">
            <div class="me-3">
                {% social_icon comment.platform %}
            </div>
            <div>
                <h2 class="mb-1">{% trans "Comment Details" %}</h2>
                <p class="text-muted mb-0">{{ comment.get_platform_display }}</p>
            </div>
        </div>
        <div>
            <a href="{% url 'social:social_comment_list' %}" class="btn btn-outline-secondary me-2">
                <i class="bi bi-arrow-left me-1"></i> {% trans "View Similar" %}
            </a>
            <a href="{% url 'social:social_platform' comment.platform %}" class="btn btn-outline-primary">
                <i class="bi bi-grid me-1"></i> {% trans "Back to Platform" %}
            </a>
        </div>
    </div>

    <div class="row">
        <!-- Comment Card -->
        <div class="col-lg-8">
            <div class="card mb-4">
                <div class="card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <span class="badge bg-primary me-2">{{ comment.get_platform_display }}</span>
                            {% if comment.rating %}
                            <span class="badge bg-warning text-dark me-2">
                                {{ comment.rating|star_rating }} {{ comment.rating }}/5
                            </span>
                            {% endif %}
                            {% if comment.ai_analysis %}
                                {% with sentiment=comment.ai_analysis.sentiment.classification.en %}
                                    {% if sentiment == 'positive' %}
                                    <span class="badge bg-success">Positive</span>
                                    {% elif sentiment == 'negative' %}
                                    <span class="badge bg-danger">Negative</span>
                                    {% else %}
                                    <span class="badge bg-secondary">Neutral</span>
                                    {% endif %}
                                {% endwith %}
                            {% else %}
                            <span class="badge bg-light text-dark">Not Analyzed</span>
                            {% endif %}
                        </div>
                        <small class="text-muted">
                            {% if comment.published_at %}
                                {{ comment.published_at|date:"M d, Y H:i" }}
                            {% else %}
                                {{ comment.scraped_at|date:"M d, Y H:i" }}
                            {% endif %}
                        </small>
                    </div>
                </div>
                <div class="card-body">
                    {% if comment.author %}
                    <h5 class="mb-3">@{{ comment.author }}</h5>
                    {% endif %}
                    
                    <p class="fs-5 mb-4">{{ comment.comments }}</p>
                    
                    <div class="row mb-3">
                        <div class="col-md-4">
                            <div class="text-center">
                                <i class="bi bi-heart text-danger fs-4"></i>
                                <h5 class="mb-0 mt-2">{{ comment.like_count }}</h5>
                                <small class="text-muted">{% trans "Likes" %}</small>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="text-center">
                                <i class="bi bi-chat text-primary fs-4"></i>
                                <h5 class="mb-0 mt-2">{{ comment.reply_count }}</h5>
                                <small class="text-muted">{% trans "Replies" %}</small>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="text-center">
                                <i class="bi bi-clock text-secondary fs-4"></i>
                                <h5 class="mb-0 mt-2">{{ comment.scraped_at|timesince }}</h5>
                                <small class="text-muted">{% trans "Scraped" %}</small>
                            </div>
                        </div>
                    </div>
                    
                    {% if comment.post_url %}
                    <div class="mt-3">
                        <a href="{{ comment.post_url }}" target="_blank" class="btn btn-outline-primary btn-sm">
                            <i class="bi bi-box-arrow-up-right me-1"></i> {% trans "View Original Post" %}
                        </a>
                    </div>
                    {% endif %}
                </div>
            </div>

            <!-- AI Analysis -->
            {% if comment.ai_analysis %}
            <div class="card mb-4">
                <div class="card-header">
                    <h6 class="mb-0"><i class="bi bi-robot me-2"></i>{% trans "AI Analysis" %}</h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <h6>{% trans "Sentiment" %}</h6>
                            <h2 class="{% if comment.ai_analysis.sentiment.classification.en == 'positive' %}text-success{% elif comment.ai_analysis.sentiment.classification.en == 'negative' %}text-danger{% else %}text-secondary{% endif %}">
                                {{ comment.ai_analysis.sentiment.classification.en|title }}
                            </h2>
                            <p class="text-muted">{{ comment.ai_analysis.sentiment.classification.ar }}</p>
                        </div>
                        <div class="col-md-6">
                            <h6>{% trans "Sentiment Score" %}</h6>
                            <h2>{{ comment.ai_analysis.sentiment.score|floatformat:2 }}</h2>
                            <p class="text-muted">{% trans "Analysis confidence" %}: {{ comment.ai_analysis.sentiment.confidence|floatformat:2 }}</p>
                        </div>
                    </div>
                    
                    {% if comment.ai_analysis.summaries.en %}
                    <div class="mt-3">
                        <h6>{% trans "Summary (English)" %}</h6>
                        <p>{{ comment.ai_analysis.summaries.en }}</p>
                    </div>
                    {% endif %}
                    
                    {% if comment.ai_analysis.summaries.ar %}
                    <div class="mt-3">
                        <h6>{% trans "الملخص (Arabic)" %}</h6>
                        <p dir="rtl">{{ comment.ai_analysis.summaries.ar }}</p>
                    </div>
                    {% endif %}
                    
                    {% if comment.ai_analysis.keywords.en %}
                    <div class="mt-3">
                        <h6>{% trans "Keywords" %}</h6>
                        <div>
                            {% for keyword in comment.ai_analysis.keywords.en %}
                            <span class="badge bg-light text-dark me-1 mb-1">{{ keyword }}</span>
                            {% endfor %}
                        </div>
                    </div>
                    {% endif %}
                    
                    {% if comment.ai_analysis.topics.en %}
                    <div class="mt-3">
                        <h6>{% trans "Topics" %}</h6>
                        <div>
                            {% for topic in comment.ai_analysis.topics.en %}
                            <span class="badge bg-info text-dark me-1 mb-1">{{ topic }}</span>
                            {% endfor %}
                        </div>
                    </div>
                    {% endif %}
                </div>
            </div>
            {% endif %}

            <!-- Raw Data -->
            <div class="card">
                <div class="card-header">
                    <button class="btn btn-link text-decoration-none p-0 w-100 text-start" type="button" data-bs-toggle="collapse" data-bs-target="#rawDataCollapse">
                        <i class="bi bi-code-square me-2"></i>{% trans "Raw Data" %}
                    </button>
                </div>
                <div class="collapse" id="rawDataCollapse">
                    <div class="card-body">
                        <pre class="bg-light p-3 rounded">{{ comment.raw_data }}</pre>
                    </div>
                </div>
            </div>
        </div>

        <!-- Sidebar -->
        <div class="col-lg-4">
            <!-- Comment Info -->
            <div class="card mb-3">
                <div class="card-header">
                    <h6 class="mb-0"><i class="bi bi-info-circle me-2"></i>{% trans "Comment Info" %}</h6>
                </div>
                <div class="card-body">
                    <dl class="row mb-0">
                        <dt class="col-sm-5">Comment ID:</dt>
                        <dd class="col-sm-7">{{ comment.comment_id }}</dd>
                        
                        <dt class="col-sm-5">Post ID:</dt>
                        <dd class="col-sm-7">{{ comment.post_id }}</dd>
                        
                        <dt class="col-sm-5">Platform:</dt>
                        <dd class="col-sm-7">{{ comment.get_platform_display }}</dd>
                        
                        <dt class="col-sm-5">Published:</dt>
                        <dd class="col-sm-7">
                            {% if comment.published_at %}
                                {{ comment.published_at|date:"M d, Y H:i" }}
                            {% else %}
                                <span class="text-muted">-</span>
                            {% endif %}
                        </dd>
                        
                        <dt class="col-sm-5">Scraped:</dt>
                        <dd class="col-sm-7">{{ comment.scraped_at|date:"M d, Y H:i" }}</dd>
                    </dl>
                </div>
            </div>

            <!-- Entities -->
            {% if comment.ai_analysis.entities %}
            <div class="card mb-3">
                <div class="card-header">
                    <h6 class="mb-0"><i class="bi bi-tags me-2"></i>{% trans "Entities" %}</h6>
                </div>
                <div class="card-body">
                    <ul class="list-group list-group-flush">
                        {% for entity in comment.ai_analysis.entities|slice:":10" %}
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            {% if entity.text %}{{ entity.text }}{% else %}{{ entity }}{% endif %}
                            {% if entity.type %}
                            <span class="badge bg-secondary rounded-pill">{{ entity.type }}</span>
                            {% endif %}
                        </li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
            {% endif %}

            <!-- Actions -->
            <div class="card">
                <div class="card-header">
                    <h6 class="mb-0"><i class="bi bi-lightning me-2"></i>{% trans "Actions" %}</h6>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <button class="btn btn-primary">
                            <i class="bi bi-plus-circle me-2"></i>{% trans "Create PX Action" %}
                        </button>
                        <button class="btn btn-success">
                            <i class="bi bi-check-circle me-2"></i>{% trans "Mark as Reviewed" %}
                        </button>
                        <button class="btn btn-warning">
                            <i class="bi bi-flag me-2"></i>{% trans "Flag for Follow-up" %}
                        </button>
                        <button class="btn btn-outline-danger">
                            <i class="bi bi-trash me-2"></i>{% trans "Delete Comment" %}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}