{% extends "base.html" %}

{% block title %}{{ article.title }} - 20min.ch Comment Analysis{% endblock %}

{% block last_updated %}{{ now }}{% endblock %}

{% block content %}
<div class="row mb-4">
    <div class="col-md-12">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ url_for('index') }}">Dashboard</a></li>
                <li class="breadcrumb-item"><a href="{{ url_for('articles') }}">Articles</a></li>
                <li class="breadcrumb-item active" aria-current="page">Article Detail</li>
            </ol>
        </nav>
    </div>
</div>

<!-- Article Details -->
<div class="row mb-4">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <div class="d-flex justify-content-between align-items-center">
                    <h2>{{ article.title }}</h2>
                    <a href="https://www.20min.ch/story/{{ article.id }}" target="_blank" class="btn btn-outline-primary">
                        <i class="fas fa-external-link-alt"></i> View Original
                    </a>
                </div>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <p class="text-muted">
                            <strong>Article ID:</strong> {{ article.id }}
                        </p>
                        <p class="text-muted">
                            <strong>Published:</strong> 
                            <script>document.write(formatDate("{{ article.date }}"))</script>
                        </p>
                        <p class="text-muted">
                            <strong>Author:</strong> {{ article.author if article.author else 'Unknown' }}
                        </p>
                        <p class="text-muted">
                            <strong>Category:</strong> {{ article.category if article.category else 'Uncategorized' }}
                        </p>
                    </div>
                    <div class="col-md-6">
                        <div class="row">
                            <div class="col-4">
                                <div class="text-center mb-3">
                                    <div class="display-5">{{ article.comments_count }}</div>
                                    <div class="text-muted">Comments</div>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="text-center mb-3">
                                    <div class="display-5">{{ article.replies_count }}</div>
                                    <div class="text-muted">Replies</div>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="text-center mb-3">
                                    <div class="display-5">{{ article.reactions_count }}</div>
                                    <div class="text-muted">Reactions</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Analysis Tabs -->
<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <ul class="nav nav-tabs card-header-tabs" id="articleTabs" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="overview-tab" data-bs-toggle="tab" 
                                data-bs-target="#overview" type="button" role="tab" 
                                aria-controls="overview" aria-selected="true">
                            Overview
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="comments-tab" data-bs-toggle="tab" 
                                data-bs-target="#comments" type="button" role="tab" 
                                aria-controls="comments" aria-selected="false">
                            Comments
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="users-tab" data-bs-toggle="tab" 
                                data-bs-target="#users" type="button" role="tab" 
                                aria-controls="users" aria-selected="false">
                            Users
                        </button>
                    </li>
                </ul>
            </div>
            <div class="card-body">
                <div class="tab-content" id="articleTabContent">
                    <!-- Overview Tab -->
                    <div class="tab-pane fade show active" id="overview" role="tabpanel" aria-labelledby="overview-tab">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="card mb-4">
                                    <div class="card-header">
                                        <i class="fas fa-chart-pie"></i> Reaction Distribution
                                    </div>
                                    <div class="card-body">
                                        <canvas id="reactionChart" width="400" height="300"></canvas>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="card mb-4">
                                    <div class="card-header">
                                        <i class="fas fa-clock"></i> Commenting Timeline
                                    </div>
                                    <div class="card-body">
                                        <canvas id="timelineChart" width="400" height="300"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="card mb-4">
                                    <div class="card-header">
                                        <i class="fas fa-user-friends"></i> Top Commenters
                                    </div>
                                    <div class="card-body">
                                        <div class="table-responsive">
                                            <table class="table table-striped">
                                                <thead>
                                                    <tr>
                                                        <th>Username</th>
                                                        <th>Comments</th>
                                                        <th>Replies</th>
                                                        <th>Total Reactions</th>
                                                        <th>Bot Score</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    {% for user in top_users %}
                                                    <tr>
                                                        <td>
                                                            <a href="{{ url_for('user_detail', username=user.username) }}">
                                                                {{ user.username }}
                                                            </a>
                                                        </td>
                                                        <td>{{ user.comments_count }}</td>
                                                        <td>{{ user.replies_count }}</td>
                                                        <td>{{ user.reactions_received }}</td>
                                                        <td>
                                                            <span class="badge {{ getBotScoreClass(user.bot_score) }}">
                                                                {{ user.bot_score }}
                                                            </span>
                                                        </td>
                                                    </tr>
                                                    {% endfor %}
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Comments Tab -->
                    <div class="tab-pane fade" id="comments" role="tabpanel" aria-labelledby="comments-tab">
                        <div class="mb-3">
                            <div class="input-group">
                                <input type="text" class="form-control" id="commentSearch" 
                                       placeholder="Search comments...">
                                <button class="btn btn-outline-secondary" type="button" id="searchButton">
                                    <i class="fas fa-search"></i>
                                </button>
                            </div>
                        </div>
                        
                        <div class="comment-list">
                            {% for comment in comments %}
                            <div class="card mb-3 comment-card {% if comment.is_reply %}comment-reply{% endif %}"
                                 data-comment-id="{{ comment.id }}">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between align-items-center mb-2">
                                        <div>
                                            <a href="{{ url_for('user_detail', username=comment.author) }}" class="fw-bold">
                                                {{ comment.author }}
                                            </a>
                                            {% if comment.is_reply %}
                                            <small class="text-muted ms-2">
                                                replying to 
                                                <a href="{{ url_for('user_detail', username=comment.parent_author) }}">
                                                    {{ comment.parent_author }}
                                                </a>
                                            </small>
                                            {% endif %}
                                        </div>
                                        <small class="text-muted">
                                            <script>document.write(formatDate("{{ comment.timestamp }}"))</script>
                                        </small>
                                    </div>
                                    <p class="card-text">{{ comment.text }}</p>
                                    <div class="d-flex justify-content-between align-items-center mt-3">
                                        <div>
                                            {% for reaction_type, count in comment.reactions.items() %}
                                            {% if count > 0 %}
                                            <span class="badge bg-secondary me-1">
                                                {{ reaction_type }}: {{ count }}
                                            </span>
                                            {% endif %}
                                            {% endfor %}
                                        </div>
                                        <button class="btn btn-sm btn-outline-primary" 
                                                onclick="toggleReplies('{{ comment.id }}')">
                                            {{ comment.replies|length }} Replies
                                        </button>
                                    </div>
                                </div>
                                
                                <!-- Replies -->
                                {% if comment.replies|length > 0 %}
                                <div class="replies-container" id="replies-{{ comment.id }}" style="display: none;">
                                    {% for reply in comment.replies %}
                                    <div class="card-body border-top pt-3 reply">
                                        <div class="d-flex justify-content-between align-items-center mb-2">
                                            <div>
                                                <a href="{{ url_for('user_detail', username=reply.author) }}" class="fw-bold">
                                                    {{ reply.author }}
                                                </a>
                                            </div>
                                            <small class="text-muted">
                                                <script>document.write(formatDate("{{ reply.timestamp }}"))</script>
                                            </small>
                                        </div>
                                        <p class="card-text">{{ reply.text }}</p>
                                        <div>
                                            {% for reaction_type, count in reply.reactions.items() %}
                                            {% if count > 0 %}
                                            <span class="badge bg-secondary me-1">
                                                {{ reaction_type }}: {{ count }}
                                            </span>
                                            {% endif %}
                                            {% endfor %}
                                        </div>
                                    </div>
                                    {% endfor %}
                                </div>
                                {% endif %}
                            </div>
                            {% endfor %}
                        </div>
                    </div>
                    
                    <!-- Users Tab -->
                    <div class="tab-pane fade" id="users" role="tabpanel" aria-labelledby="users-tab">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="card mb-4">
                                    <div class="card-header">
                                        <i class="fas fa-users"></i> User Engagement
                                    </div>
                                    <div class="card-body">
                                        <canvas id="userEngagementChart" width="400" height="300"></canvas>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="card mb-4">
                                    <div class="card-header">
                                        <i class="fas fa-robot"></i> Bot Score Distribution
                                    </div>
                                    <div class="card-body">
                                        <canvas id="botScoreChart" width="400" height="300"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Reaction Chart
    const reactionCtx = document.getElementById('reactionChart').getContext('2d');
    const reactionData = {
        labels: Object.keys({{ article_reactions|tojson }}),
        datasets: [{
            label: 'Reaction Count',
            data: Object.values({{ article_reactions|tojson }}),
            backgroundColor: [
                'rgba(40, 167, 69, 0.7)',    // awesome
                'rgba(220, 53, 69, 0.7)',    // bad
                'rgba(255, 193, 7, 0.7)',    // nonsense
                'rgba(108, 117, 125, 0.7)',  // unnecessary
                'rgba(23, 162, 184, 0.7)',   // smart
                'rgba(13, 110, 253, 0.7)'    // exact
            ],
            borderColor: [
                'rgba(40, 167, 69, 1)',
                'rgba(220, 53, 69, 1)',
                'rgba(255, 193, 7, 1)',
                'rgba(108, 117, 125, 1)',
                'rgba(23, 162, 184, 1)',
                'rgba(13, 110, 253, 1)'
            ],
            borderWidth: 1
        }]
    };
    
    const reactionChart = new Chart(reactionCtx, {
        type: 'pie',
        data: reactionData,
        options: {
            responsive: true,
            plugins: {
                legend: {
                    position: 'top',
                },
                title: {
                    display: true,
                    text: 'Reaction Distribution'
                }
            }
        }
    });
    
    // Timeline Chart
    const timelineCtx = document.getElementById('timelineChart').getContext('2d');
    const timelineChart = new Chart(timelineCtx, {
        type: 'line',
        data: {
            labels: {{ timeline.labels|tojson }},
            datasets: [{
                label: 'Comments',
                data: {{ timeline.comments|tojson }},
                borderColor: 'rgba(13, 110, 253, 1)',
                backgroundColor: 'rgba(13, 110, 253, 0.1)',
                fill: true,
                tension: 0.1
            }]
        },
        options: {
            responsive: true,
            scales: {
                y: {
                    beginAtZero: true,
                    title: {
                        display: true,
                        text: 'Number of Comments'
                    }
                },
                x: {
                    title: {
                        display: true,
                        text: 'Time'
                    }
                }
            },
            plugins: {
                title: {
                    display: true,
                    text: 'Comment Activity Over Time'
                }
            }
        }
    });
    
    // User Engagement Chart
    const engagementCtx = document.getElementById('userEngagementChart').getContext('2d');
    const engagementChart = new Chart(engagementCtx, {
        type: 'bar',
        data: {
            labels: {{ user_engagement.labels|tojson }},
            datasets: [{
                label: 'Comments',
                data: {{ user_engagement.comments|tojson }},
                backgroundColor: 'rgba(13, 110, 253, 0.7)',
                borderColor: 'rgba(13, 110, 253, 1)',
                borderWidth: 1
            }, {
                label: 'Reactions Received',
                data: {{ user_engagement.reactions|tojson }},
                backgroundColor: 'rgba(23, 162, 184, 0.7)',
                borderColor: 'rgba(23, 162, 184, 1)',
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            scales: {
                x: {
                    stacked: false
                },
                y: {
                    beginAtZero: true
                }
            },
            plugins: {
                title: {
                    display: true,
                    text: 'User Engagement'
                }
            }
        }
    });
    
    // Bot Score Chart
    const botScoreCtx = document.getElementById('botScoreChart').getContext('2d');
    const botScoreChart = new Chart(botScoreCtx, {
        type: 'bar',
        data: {
            labels: ['0-20', '21-40', '41-60', '61-80', '81-100'],
            datasets: [{
                label: 'Number of Users',
                data: {{ bot_score_distribution|tojson }},
                backgroundColor: [
                    'rgba(40, 167, 69, 0.7)',
                    'rgba(23, 162, 184, 0.7)',
                    'rgba(255, 193, 7, 0.7)',
                    'rgba(255, 126, 0, 0.7)',
                    'rgba(220, 53, 69, 0.7)'
                ],
                borderColor: [
                    'rgba(40, 167, 69, 1)',
                    'rgba(23, 162, 184, 1)',
                    'rgba(255, 193, 7, 1)',
                    'rgba(255, 126, 0, 1)',
                    'rgba(220, 53, 69, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            scales: {
                y: {
                    beginAtZero: true,
                    title: {
                        display: true,
                        text: 'Number of Users'
                    }
                },
                x: {
                    title: {
                        display: true,
                        text: 'Bot Score Range'
                    }
                }
            },
            plugins: {
                title: {
                    display: true,
                    text: 'Bot Score Distribution'
                }
            }
        }
    });
    
    // Comment search functionality
    document.getElementById('searchButton').addEventListener('click', function() {
        const searchTerm = document.getElementById('commentSearch').value.toLowerCase();
        const comments = document.querySelectorAll('.comment-card');
        
        comments.forEach(comment => {
            const commentText = comment.querySelector('.card-text').textContent.toLowerCase();
            const authorText = comment.querySelector('.fw-bold').textContent.toLowerCase();
            
            if (commentText.includes(searchTerm) || authorText.includes(searchTerm)) {
                comment.style.display = 'block';
            } else {
                comment.style.display = 'none';
            }
        });
    });
    
    // Reset search when clearing the input
    document.getElementById('commentSearch').addEventListener('input', function() {
        if (this.value === '') {
            const comments = document.querySelectorAll('.comment-card');
            comments.forEach(comment => {
                comment.style.display = 'block';
            });
        }
    });
    
    // Enter key triggers search
    document.getElementById('commentSearch').addEventListener('keyup', function(event) {
        if (event.key === 'Enter') {
            document.getElementById('searchButton').click();
        }
    });
});

// Function to toggle replies visibility
function toggleReplies(commentId) {
    const repliesContainer = document.getElementById(`replies-${commentId}`);
    if (repliesContainer) {
        if (repliesContainer.style.display === 'none') {
            repliesContainer.style.display = 'block';
        } else {
            repliesContainer.style.display = 'none';
        }
    }
}
</script>
{% endblock %}